CSS layout help needed

Hey all, i'm doing a website for a client, and having issues
aligning things up properly. I'm still learning CSS, so bear with
me!
Firstly, check this site out
http://www.creativityawaits.com/HowToMakeWelshQuilts/
1) I'm using 1024x768 and the flash bit at the top goes over
the shadow too much to the right. I basically want this to line up
with the rest of the site. How do I do this?
2) When using higher resolution, the top blocks stay there,
but the others expand. Whats best to do here....
CSS file at
CSS
Index file at
HTML
Thanks!

Similar Messages

Newbie Layout Help Needed

I am normally an After Effects and Premiere Pro user but have been forced to volunteer for help on a Dreamweaver project.
The site is built on the template: HTML, 1 column fixed, centered, header and footer. I want to be able to insert a photo the width of the main column, 960 px I think. Then, under that photo, I want to insert 4 photos with different widths, between 150 and 200 pixels wide. I will need to update this from time to time and the quantity and sizes of the photos will be different each time. If "Draw AP Div" worked like I expected it to, it would be simple: draw boxes and insert images. However, as you know, it's not going to be that easy. I have read the formatting101 page and searched the forum but I guess I don't know enough to know what to search for.
Is there a way to place images in the way I want to? Do I need a plug-in? I need to where to start.

You don't need APDivs for this. If you want the secondary images to be evenly spaced on the page, use CSS floats & margins.
http://alt-web.com/DEMOS/3-CSS-boxes.shtml
If you don't need them evenly spaced, simply insert optimized images into your layout. Be sure to resize images beforehand in your graphics editor so that their combined widths will fit inside the layout.
<p style="text-align"center">
<img src="top-image.jpg" width="xx" height="xx" alt="description">
</p>
<p style="text-align:center">
<img src="image1.jpg" width="xx" height="xx" alt="description">
<img src="image2.jpg" width="xx" height="xx" alt="description">
<img src="image3.jpg" width="xx" height="xx" alt="description">
<img src="image4.jpg" width="xx" height="xx" alt="description">
</p>
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/

Simple css layout help

Hey I know this is a piece of cake for you guys so help me
out. I've got a simple layout going and set up at
http://www.clark-imaging.com/ciiicomp/index.html
and need your help. What is causing the weird white bands behind
header and maincontent and footer and maincontent? There are no
margin values assigned to the top and bottom of the header and
footer, and a value of 0 won't make them go away. Also, how can I
fix the footer div to the bottom of the window, so the main content
area stretches with the window?
Here's an
image of the look I'm going for.
Your responses are greatly appreciated.

This will do what you want. View source code to see how it's
built.
http://alt-web.com/CSS2-1-column-fixed-width-centered.html
Nancy O.
Alt-Web Design & Publishing
www.alt-web.com

Scaling and Text formatting / Layout - Help needed

I am having some trouble with the way text is scaled up in
flash. When I output and have scaling mode enabled. Objects scale
nicely when the user resizes the window. However, text does not. If
there is a text box with multiline enabled and text inside. The
text will constantly readjust its formatting and layout as you
scale the window.
This is a huge problem for an ebook I am developing. It seems
if I add line breaks manually at the end of each line, it fixes the
problem, however that is an unrealistic solution as the text will
all be dynamic.
Has anyone experience what I am talking about, and knows of a
solution.

thnks for the reply ... did something like this
<af:panelFormLayout binding="#{opportunityManagement.pfl3}"
                                                id="pfl3" maxColumns="2"
                                                rows="1">
                              <af:inputText label="Lead"
                                            binding="#{opportunityManagement.it1}"
                                            id="it1" columns="5"/>
                              <af:commandButton text="..."
                                                binding="#{opportunityManagement.cb3}"
                                                id="cb3"/>
                              <af:inputText label="Opportunity"
                                            binding="#{opportunityManagement.it2}"
                                            id="it2" columns="5"/>
                              <af:commandButton text="..."
                                                binding="#{opportunityManagement.cb4}"
                                                id="cb4"/>
                            </af:panelFormLayout>but all are on different lines

Layout help needed

I'm trying to create a simple JPanel that has a 'retreat' button on the left and a 'proceed' button on the right.
Sometimes the 'retreat' button will not be present, in which case only the 'proceed' button will be shown. The problem is that in these cases where the 'retreat' button is not visible, the 'proceed' button shows up in the centre of the panel, rather than on the right hand side.
I have tried a gridbaglayout (also with glue) but the 'proceed' button keeps showing in the middle when it's unaccompanied.
The only solution I can think of is an untidy one, and involves changing the alignment of the JPanel (or adding glue) or adding invisible buttons depending on which of the two buttons is being displayed. But what I'm trying to do is quite simple, so surely there's an easier way - possibly using a different layout manager??
Thanks in advance,
James

sounds like the buttons are currently in their own panel(FlowLayout),
and this panel is at BorderLayout.SOUTH of the container (or similar)
if so,change the panel from FlowLayout to GridLayout(1,2),
but the buttons will now occupy all of the space, which you probably don't want,
so create another panel, add leftButton to it, then add leftPanel to gridlayoutPanel
repeat for rightPanel
if you want the buttons on the extreme left and right, when creating leftPanel
JPanel leftPanel = new JPanel(newFlowLayout(FlowLayout.LEFT));
same for rightPanel, but FlowLayout.RIGHT

CSS Layout issue!! Help Urgent!!

I am having a problem with creating a css layout, in the past i used tables and am trying to convert my sites for my customers. I have layed out the website using divs and css and it looks great until i put in the cosing of the menu bar. when i put in the coding for the menu bar suddenly the bar has a padding around it but i cannot find a padding that would change this in the css coding. I need this done asap! so please help. ill show my coding below:
this is the div coding:
<div id=Nav>
   <ul class="dropdown" id="Bar"; width: 879px" name="Bar">
         <li class="style16" style="width: 161px; height: 22px">
   <a href="default.html" style="width: 146px">Home</a></li>
         <li class="style10" style="width: 169px; height: 23px">
   <a href="about.html" style="width: 153px">About</a></li>
     <li class="" style="height: 31px; width: 175px; left: 0px; top: 0px">
   <a href="Equipment.html" class="style18">
   <div class="style10" style="width: 156px; height: 20px;">
    Equipment</div>
   </a> <ul class="sub_menu">
            <li><a href="compressor.html">Air Compressors</a></li>
            <li><a href="compactions.html">Compaction</a></li>
            <li><a href="concrete.html">Concrete Equipment</a></li>
            <li><a href="forklifts.html">Fork Lifts</a></li>
            <li><a href="generators.html">Generators</a></li>
            <li><a href="groundthawing.html">Ground Thawing</a></li>
            <li><a href="heaters.html">Heaters</a></li>
            <li><a href="scissorlifts.html">Scissor Lifts</a></li>
            <li><a href="boomlifts.html">Boom Lifts</a></li>
            <li><a href="lighttowes.html">Light Towers</a></li>
            <li><a href="misc.html">Misc.</a></li>
            <li><a href="dirtequipment.html">Dirt Equipment</a></li>
            <li><a href="powertools.html">Power Tools</a></li>
            <li><a href="pumps.html">Pumps | Saws | Welders</a></li>
                 </ul>
         </li>
         <li style="width: 165px"><a href="locations.html">
   <div class="style10" style="width: 154px">
    Locations</div>
   </a>
           </li>
             <li style="width: 180px"><a href="contact.html">
   <div class="style16" style="height: 24px">
    Contact Us</div>
   </a>         </li>
        </ul>
</div>
This is the css coding:
#wrapper {
width: 880px;
margin-right: auto;
margin-left: auto;
background-color: #f4f4f4;
#Navigation {
background-image: url(Images/NAvigation%20BAr.jpg);
background-repeat: no-repeat;
width: 880px;
visibility: visible;
height: 3-px;
vertical-align: top;
Nav {
vertical-align: top;
margin: 0px;
padding: 0px;
clear: both;
height: 20px !important;
#wrapper1 {
width: 876px;
margin-right: auto;
margin-left: auto;
color: #F4F4F4;
/* IE10 Consumer Preview */
background-image: -ms-linear-gradient(left, #716375 0%, #E8E8E8 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(left, #716375 0%, #E8E8E8 100%);
/* Opera */
background-image: -o-linear-gradient(left, #716375 0%, #E8E8E8 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #716375), color-stop(1, #E8E8E8));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(left, #716375 0%, #E8E8E8 100%);
/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to right, #716375 0%, #E8E8E8 100%);
margin-bottom: auto;
#Bar {
background-repeat: no-repeat;
width: 880px;
height: 28pt;
overflow: visible;
background-image: url(Images/NAvigation%20BAr.jpg);
position: relative;
vertical-align: top;
#container {
width: 880px;
color: #000;
background-color: #EDEDED;
dominant-baseline: 578px;
/* IE10 Consumer Preview */
background-image: -ms-linear-gradient(left, #716375 0%, #E8E8E8 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(left, #716375 0%, #E8E8E8 100%);
/* Opera */
background-image: -o-linear-gradient(left, #716375 0%, #E8E8E8 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #716375), color-stop(1, #E8E8E8));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(left, #716375 0%, #E8E8E8 100%);
/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to right, #716375 0%, #E8E8E8 100%);
margin-bottom: auto;
#content {
float: left;
color: #090;
width: 580px;
padding-right: 6px;
background-color: #033;
margin-top: 20px;
.container {
color: #000;
background-color: #ff6;
width: 876px;
#expect {
height: 164px;
width: 294px;
float: right;
position: relative;
background-color: #C90;
margin-left: 582px;
padding-top: 10px;
#hours {
float: left;
height: 55px;
width: 294px;
line-height: 4px;
word-spacing: normal;
white-space: normal;
display: inline;
letter-spacing: normal;
padding-top: 10px;
font-size: 13pt;
color: #000;
margin-left: 586px;
background-color: #F99;
#footer {
height: 76px;
width: 880px;
background-color: #CC0;
clear: both;
#cards {
float: right;
height: 31px;
width: 294px;
margin-left: 582px;
padding-top: 10px;
background-color: #F36;
#contact {
float: left;
height: 328px;
width: 293px;
word-spacing: normal;
white-space: normal;
line-height: 1px;
color: #000;
display: inline;
font-size: 14pt;
background-color: #FFF;
padding-top: 10px;
margin-top: 20px;
#header {
background-image: url(Images/Proquip%20Logo/Proquip%20logo2.jpg);
background-repeat: no-repeat;
background-position: center center;
width: 885px;
height: 126px;
background-color: #000;
margin-right: 2.5px;
margin-left: 0px;
#wrapper #container #contact p strong {
color: #800000;
font-size: 14pt;
#wrapper #container #contact blockquote p a {
color: #000;
#wrapper #container #expect div {
color: #900;
font-size: 14pt;
font-weight: bold;
#wrapper #container #hours div {
color: #900;
font-size: 14pt;
font-weight: bold;
#box2 {
background-image: url(Images/Option%201/Services/whitebox2.jpg);
#box3 {
background-image:url(Images/Option%201/Services/redbox2.jpg);
background-repeat:no-repeat;
background-position: center center;
#gold {
background-image:url(Images/Option%201/Logos/gold.gif);
background-repeat:no-repeat;
#white {
background-image:url(Images/Option%201/ProQuip-Pics/box1.gif);
background-repeat:no repeat;
#forklift {
background-image:url(Images/Option%201/ProQuip-Pics/34-01-4380.jpg);
background-repeat:no-repeat;
#scissorlift {
background-image:url(Images/Option%201/ProQuip-Pics/jlg-scissor-lifts-21.jpg);
background-repeat:no-repeat;
/* Navigation Menu- Level one */
ul {
list-style: none
ul.dropdown {
font-size: 13pt;
color: #000000;
height: 25px;
text-decoration: none !important;
width: 860px;
position: relative;
vertical-align: top;
ul#Bar.dropdown {
width: 878px;
position: relative;
vertical-align: top;
ul.dropdown li {
font-weight: 600;
float: left;
zoom: 1;
font-family: Arial, Helvetica, sans-serif;
font-size: 13pt;
display: block;
width: 175px;
color: #000000;
top: 25px;
text-decoration: none !important;
text-align: center;
ul.dropdown a:hover {
color:#cc0000;
ul.dropdown a:active {
color: #000000;
ul.dropdown li a {
display: block;
border-right: 1px solid#333;
color: #000000;
border-right-width: 1px;
text-decoration: none !important;
text-align: center;
ul.dropdown li:last-child a {
border-right:none; /* does not wotk in IE */
text-decoration:none !important; }
ul.dropdown li.hover,
ul.dropdown li.hover {
color: #000000;
position: relative;
height: 28px;
top: 0px;
ul.dropdown li.hover a {
color:#800000;
/* Level Two Navigation */
ul.dropdown ul {
width: 180px;
visibility: hidden;
position: absolute;
top: 100%;
left: 36%;
display: block;
float: left;
color: #000000;
text-decoration: none !important;
height: 25px;
ul.dropdown ul li {
font-weight: normal;
color: #000000;
border-bottom: 1px solid #ccc;
float: left;
border-bottom-color: #c0c0c0;
border-bottom-style: groove;
display: block;
background-color: #dbdbdb;
text-decoration:none !important;
/* IE 6&7 needs inline block */
ul.dropdown ul li a {
border-right: none;
display: inline-block;
height: 18px;
line-height: 16px;
color: #000000;
width: 100%;
text-decoration: none !important;
/* Level Three Navigation */
ul.dropdown ul ul {
top: 100%;
color: #000000;
text-decoration: none !important;
ul.dropdown li:hover>ul {
visibility: visible;
color: #000000;
top: 30px;
text-decoration: none !important;

I have the site using tables up and running, this is a website for a client so I cant make a test site using that domain would it be ok if I screen shot'ed the problem?
Date: Thu, 24 Apr 2014 12:19:44 -0700
From: [email protected]
To: [email protected]
Subject: CSS Layout issue!! Help Urgent!!
    Re: CSS Layout issue!! Help Urgent!!
    created by Jon Fritz II in Dreamweaver support forum - View the full discussion
Well, you're not using position:absolute, so you've got a big thumbs up from a bunch of us for that.
Is there any chance you could post a link to this page on your server? It's much easier to troubleshoot from a browser than it is to rebuild the page from code fragments.
If you haven't gone live with the page yet, create a folder called TEST in your site and save copies of the page and css there. Upload TEST and post a link to it here. Once the problem is found/fixed, delete TEST from the server.
You can also attempt to use Firefox or Chrome to find your issue by right clicking > Inspect Element. All CSS that affects a given element will be displayed with file name and line numbers there.
     Please note that the Adobe Forums do not accept email attachments. If you want to embed a screen image in your message please visit the thread in the forum to embed the image at http://forums.adobe.com/message/6327947#6327947
     Replies to this message go to everyone subscribed to this thread, not directly to the person who posted the message. To post a reply, either reply to this email or visit the message page: http://forums.adobe.com/message/6327947#6327947
     To unsubscribe from this thread, please visit the message page at http://forums.adobe.com/message/6327947#6327947. In the Actions box on the right, click the Stop Email Notifications link.
           Start a new discussion in Dreamweaver support forum at Adobe Community
For more information about maintaining your forum email notifications please go to http://forums.adobe.com/thread/416458?tstart=0.

2 Layout's for 2 screens different F4 Help needed for same program

Hi Friends,
I have 2 layouts in the selection screen the first layout is for screen 1 and the second layout is for screen 2.
I save the layouts when I run the report.
Now when I do F4 Help for the first layout it shows me all the layouts available for the program and the same thing
for Second layout too.
Is there a way for the first layout I need to get only the layouts for the first screen when I hit the F4 button
and for the second layout I need to get only the layouts for the second screen when I hit the F4 button. in order to choose
I am using REUSE_ALV_VARIANT_F4 and passing report name to is_variant and i_save = 'X'.
Thanks,
chaithanya.

I think this is not possible.
Variant names get stored on Report Name as key.
a®

Help needed using CSS positioning for movie/text

I have been deconstructing a few sites to get a better
understanding of CSS for a simple portfolio.
Anyway, I have a simple navigation set up in place which I
want to place my movie next to. The problem is that I can't work
out how to place it next to the buttons...
The url to the site is:
http://www.notjustthenews.co.uk/page8.html
Once I've done that I want to place a paragraph of text to
the right of the movie so that if you resize the browser window the
text wraps around the movie.
Any help would be most appreciated.
The CSS is question is:
#wrapper{
float:right;
width: 75%;
margin: 0;
padding: 0 3% 0 0;
#widescreen {
float: left;
padding: 0px 10px 0px 0px;
margin: 0 5px 5px 0;

Not sure what the web forum and the news forum does with code
these days
but here is the complete coding/css that you need. (That's if
it
transfer ok)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html
xmlns="
http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1"><title>notjustthenews.co.uk</title>
<style type="text/css">
body{
font-family: Arial,sans-serif;
color: #000000;
line-height: 1.166;
margin: 0px;
padding: 0px;
h1 {
font-family: Verdana, Arial, sans-serif;
font-size: 120%;
color: #000000;
h3{
font-size: 100%;
color: #334d55;
p {
font-family: Arial, sans-serif;
font-size: 14px;
color: #000000;
label{
font: bold 100% Arial,sans-serif;
color: #334d55;
ul{
list-style-type: square;
#top{
border-bottom: 1px solid #cccccc;
width: 100%;
padding-top: 10px;
padding-right: 0px;
padding-bottom: 10px;
padding-left: 0px;
#topmenu{
color: #cccccc;
padding: 0px 0px 0px 10px;
white-space: nowrap;
#topmenu a {
font-size: 90%;
padding: 0px 4px 0px 0px;
#title{
padding: 0px 0px 10px 10px;
#topmenu ul {
font-family: Arial, sans-serif;
font-size: 14px;
#topmenu li {
margin-bottom: 5px;
#topmenu a:link, #topmenu a:visited {
text-decoration: none;
color: #000000;
#topmenu a:hover {
color: #990000;
text-decoration: none;
#seltopmenu a:link, #seltopmenu a:visited, #seltopmenu
a:hover {
color: #990000;
text-decoration: none;
#navBar ul a:link, #navBar ul a:visited {display:
block;<br />
#navBar ul {list-style: none; margin: 0; padding: 0;
#navBar li {border-bottom: 1px solid #EEE;
html>body #navBar li {border-bottom: none;
#navBar{
float: left;
width: 200px;
background-color: #eeeeee;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
#search{
padding: 5px 0px 5px 10px;
border-bottom: 1px solid #cccccc;
font-size: 90%;
#search form{
margin: 0px;
padding: 0px;
#search label{
display: block;
margin: 0px;
padding: 0px;
#projectLinks{
border-bottom: 1px solid #cccccc;
font-size: 90%;
#projectLinks h3{
padding: 10px 0px 2px 10px;
#projectLinks a:link{
text-decoration: none;
color: #000000;
padding: 2px 0px 2px 10px;
border-top: 1px solid #cccccc;
width: 100%;
voice-family: "\"}\"";
voice-family:inherit;
width: auto;
#projectLinks a:visited{
text-decoration: none;
color: #000000;
border-top: 1px solid #cccccc;
padding: 2px 0px 2px 10px;
#projectLinks a:hover{
color: #990000;
text-decoration: none;
border-top: 1px solid #cccccc;
background-color: #dddddd;
padding: 2px 0px 2px 10px;
#selprojectLinks a:link, #selprojectLinks a:visited,
#selprojectLinks
a:hover {
color: #990000;
text-decoration: none;
#widescreen {
padding: 0px 10px 0px 0px;
margin: 0 5px 5px 210px;
#widescreen object {
float: left;
margin-right: 10px;
#widescreen p {
margin-top: 0;
</style></head>
<body>
<div id="top">
<h1 id="title">notjustthenews.co.uk</h1>
<div id="topmenu"> <a href="#">home</a> |
<a href="#">movies</a> | <a
href="#">audio</a> | <a
href="#">websites</a> | <a
href="#">reviews</a>
| <a href="#">other stuff</a> | <a
href="#">contact</a>
</div>
</div>
<div id="navBar">
<div id="search">
<form action="#">
<label>search</label>
<input name="searchFor" type="text" size="10">
<input name="goButton" type="submit" value="go">
</form>
</div>
<div id="projectLinks">
<ul>
<li><a href="#">project1</a></li>
<li><a href="#">project2</a></li>
<li><a href="#">project3</a></li>
<li><a href="#">project4</a></li>
<li><a href="#">project5</a></li>
<li><a href="#">project6</a></li>
</ul>
</div>
</div>
<div id="widescreen">
<object
classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase="
http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0"
name="defences" width="402" height="240" align="middle"
id="full screen">
<param name="allowScriptAccess" value="sameDomain">
<param name="movie" value="movieplayer.swf">
<param name="quality" value="high">
<param name="salign" value="tl">
<param name="bgcolor" value="#000000">
<param name="FlashVars" value="vidpath=defences.flv">
<embed src="page8_files/movieplayer.swf"
flashvars="vidpath=defences.flv" quality="high" salign="tl"
bgcolor="#000000" width="402" height="240" name="defences"
align="center" allowscriptaccess="sameDomain"
type="application/x-shockwave-flash"
pluginspage="
http://www.macromedia.com/go/getflashplayer">
</object>
<p>This is some filler text. This is some filler text.
This is some
filler text.</p>
<p>This is some filler text. This is some filler text.
This is some
filler text.</p>
<p>This is some filler text. This is some filler text.
This is some
filler text.</p>
<p>This is some filler text. This is some filler text.
This is some
filler text. This is some filler text. This is some filler
text. This is
some filler text.</p>
<p>This is some filler text. This is some filler text.
This is some
filler text. This is some filler text. This is some filler
text. This is
some filler text.</p>
<p>This is some filler text. This is some filler text.
This is some
filler text. This is some filler text. This is some filler
text. This is
some filler text.</p>
<p>This is some filler text. This is some filler text.
This is some
filler text. This is some filler text. This is some filler
text. This is
some filler text.</p>
</div>
</body>
</html>

Design view of CSS layout is innacurate

Hello all -
I'm beginning to redraft my company's hompage using a full
CSS layout instead of our current nested table layout. Since I need
to ensure that other staff members can edit pages freely - and I'm
the only person comfortable doing straight code - it's important
that the design view is as accurate as possible.
When editing in Dreamweaver 8, my three column layout (a left
table of contents, a center content column, and an additional
content right column) breaks so that the table of contents
dissapears. Some people have spoken with have suggested that my
problem might be the negative margins I'm using to position the
floated columns that form the meat of the page.
You can view the page here:
http://www.southernenvironment.org/test/home_redraft.html
The CSS is here:
http://www.southernenvironment.org/test/style_redraft.css
In addition, the header navbar also appears strangely. In
Design View, two word titles (ie. "Our Programs") break on to two
separate lines, instead of staying in one line as they do in
browsers I've tested.
The frustrating thing about this is that my design seems to
work in most browsers - but without a somewhat accurate
representation in Dreamweaver, I won't be able to sell the idea of
a standards-based revamp to other staff here.
Any ideas?
Matt

Your CSS is not tight enough to get accurate columns. You
shouldn't try to
define the columns with the body tag. For a purely CSS site,
you really find
out why the code is called 'cascading' styles. They cascade
all right. We've
just finished wrestling with a similar re-design with CSS and
the order of
how tags and files come into play is very important.
We have defined the body tag with background color, 0 margins
and font
family, color and size only. Header/footer and columns are
defined by ID.
The three "content" columns are within a page container,
header and footer
outside the page container. How these elements are placed is
important, as
they cascade.
We use 3 linked main css files, 1) Page Layout (3 or 4
different options) 2)
Page presentation (all text styles) 3) Page menu styles (only
menu styles).
They are in that order, as the only body tag is in Page
Layout.
If a page has a watermarked background we import the code
just for the
watermark.
This is not true for the home page, but all other pages in
the site.
http://www.nic.bc.ca/index.asp
I hope this helps.
Marianne
"homestar79" <[email protected]> wrote in
message
news:[email protected]...
> Hello all -
>
> I'm beginning to redraft my company's hompage using a
full CSS layout
> instead
> of our current nested table layout. Since I need to
ensure that other
> staff
> members can edit pages freely - and I'm the only person
comfortable doing
> straight code - it's important that the design view is
as accurate as
> possible.
>
> When editing in Dreamweaver 8, my three column layout (a
left table of
> contents, a center content column, and an additional
content right column)
> breaks so that the table of contents dissapears. Some
people have spoken
> with
> have suggested that my problem might be the negative
margins I'm using to
> position the floated columns that form the meat of the
page.
>
> You can view the page here:
>
>
http://www.southernenvironment.org/test/home_redraft.html
>
> The CSS is here:
>
>
http://www.southernenvironment.org/test/style_redraft.css
>
> In addition, the header navbar also appears strangely.
In Design View,
> two
> word titles (ie. "Our Programs") break on to two
separate lines, instead
> of
> staying in one line as they do in browsers I've tested.
>
> The frustrating thing about this is that my design seems
to work in most
> browsers - but without a somewhat accurate
representation in Dreamweaver,
> I
> won't be able to sell the idea of a standards-based
revamp to other staff
> here.
>
> Any ideas?
>
> Matt
>

CSS Layout problems

I should start this by saying I am very new to CSS layouts,
and am self taught, so I'm probably doing something very wrong. So
far I've stuck to really simple layouts and had no problems...but
they were very simple layouts.
With the site I'm doing at the moment I have placed other
div's inside a content div, so that I can have left and right hand
content within the content div. But the left and right div's are
not pushing the content div down with their content, and I'm not
sure what else to try to get it to work.
I've tried setting the height of the content div to auto or
inherit but that doesn't work.
As you can see on the main page of the site I'm using a
background image in the content cell.
http://members.westnet.com.au/zelky/surfschoolnew/index.html
And if you look at the details page you can see what I am
trying to describe. The content div not pushing down with the left
and right content div’s contents means the background image
is just a few pixels deep under the nav div.
http://members.westnet.com.au/zelky/surfschoolnew/details.html
And my pathetic CSS/stylesheet is here:
http://members.westnet.com.au/zelky/surfschoolnew/mainstyle.css
Thanks in advance and hopefully my mess isn’t’ to
hard to look at. As I said I'm a bit lost so hopefully I'm not
going to confuse anyone with my "home made" skills.

When you 'float' elements on your page you effectively remove
them from
the normal flow of the document, therfore the 'content'
<div> thinks
nothing is inside it. You need to help it by 'clearing' the
floats.
There are various methods for clearing floats.
Insert a 'clearing' <br> (shown below) into your pages
code directly
AFTER the closing 'right' container tag and BEFORE the
closing 'content'
container tag.
</div>
<br style="clear: both;" />
</div>
zelky wrote:
> I should start this by saying I am very new to CSS
layouts, and am self taught,
> so I'm probably doing something very wrong. So far I've
stuck to really simple
> layouts and had no problems...but they were very simple
layouts.
>
> With the site I'm doing at the moment I have placed
other div's inside a
> content div, so that I can have left and right hand
content within the content
> div. But the left and right div's are not pushing the
content div down with
> their content, and I'm not sure what else to try to get
it to work.
>
> I've tried setting the height of the content div to auto
or inherit but that
> doesn't work.
>
> As you can see on the main page of the site I'm using a
background image in
> the content cell.
>
>
http://members.westnet.com.au/zelky/surfschoolnew/index.html
>
> And if you look at the details page you can see what I
am trying to describe.
> The content div not pushing down with the left and right
content div?s contents
> means the background image is just a few pixels deep
under the nav div.
>
>
http://members.westnet.com.au/zelky/surfschoolnew/details.html
>
> And my pathetic CSS/stylesheet is here:
>
>
http://members.westnet.com.au/zelky/surfschoolnew/mainstyle.css
>
> Thanks in advance and hopefully my mess isn?t? to hard
to look at. As I said
> I'm a bit lost so hopefully I'm not going to confuse
anyone with my "home made"
> skills.
>
>

CSS Layout Nightmare!

OK, I've recently decided to convert from table based layout to div layouts using CSS. I'm pretty proud of the outcome and found it a nice approach to designing. HOWEVER, when i click to edit pages in contribute, it strips out all of the css outline visual aids (like you see in wysiwig editors like Dreamweaver). This is going to be a major problem for my client and wysiwig style editing. Does anybody know how i can get contribute to display this in edit mode and also the best option for my client to select divs in order to copy and paste content. This would be pretty easy in table based layout as contribute lets you select a table and copy and paste it. Ideal way for my client to copy and paste additional news items same format. Any help would be gratefully appreciated. Thanks in advance.

Not.
Walt
"SamDesign.be" <[email protected]> wrote in
message
news:ets71o$ark$[email protected]..
> Hallo Brandon,
> Make de "<div id="divContent">" smaller
> Sheers
> www.SamDesign.be
>
>
> "Brandon" <[email protected]>
a écrit dans le message
> de news: ets5tg$9fo$[email protected]..
>> Working on CSS Layout for the first time (always
have used Tables) . . .
>> can you look at the page below (in initial stages)
and tell me how I can
>> move everything UP? It's driving me crazy. The
picture in the center
>> needs to come up, the main nav buttons need to move
up, and the "boxes"
>> in the left column all need to move up under each
other.
>>
>>
http://www.presentationsdirect.com/2007/
>>
>> --
>> Brandon
>>
>>
>
>

Css layout problems - css and tables

Hi guys,
Well as some of you suggested months ago, I've been trying to
learn to layout with CSS... It's actually getting a bit rewarding
now as I start to figure a few things out but there's still plenty
of questions!!!
If anyone can take a look at what I'm working on at the
moment and give me some help I'd REALLY REALLY appreciate it!!
My main trouble (I think) is working with a drop-down menu
system that I found on the web and I'm dying to use it because it's
perfect for this design. It's layed out using a table so I'm trying
to incorporate that...
Click
[url=http://home.iprimus.com.au/jediwdog/ltc/mockup2.jpg]here[/url]
for a picture of what i'm trying to get this page to look like and
[url=http://home.iprimus.com.au/jediwdog/ltc/example1.html]here[/url]
to see how far I've got. You can download the stylesheet from
[url=http://home.iprimus.com.au/jediwdog/ltc/example1.css]here[/url].
Here's what I need to know:
1. I'm trying to push the table down so it looks better lined
up with the logo but when I tell it to be further from the top, it
doesn't seem to move. Any ideas on why?
2. As you can see, I've inserted some blank space into the
middle of the menu so that the logo doesn't cover any of the menu
items. I can't seem to get the same 1px black border on this
section.
I assume this is because the border on the other parts is a
layer/div border? Will I have to somehow put a div in there so as
to create the same border effect?
3. I'd really like to keep the header and footer visible at
all times, even if there's lots of content to scroll through. I
found this:
http://www.cssplay.co.uk/layouts/basics2.html#Top
but when I tried to implement this on my page, it all went haywire!
Is this going to be a possibility?
4. I guess other than that, have I completely stuffed this
up!? I don't think I have but it's worth asking I guess!
THANKS IN ADVANCE! I'm really loving using css layout rather
than tables - it's soooo much more versatile. I just need to get
past some obstacles I think!
Cheers
Neil

On Wed, 24 Jan 2007 22:17:20 +0000 (UTC), "Barb S."
<[email protected]> wrote:
>Ok, I made your suggested changes and have this:
>
> body {
> font-family: Georgia, "Times New Roman", Times, serif;
> text-align: center;
> font-size: 1em;
> font-style: normal;
> text-decoration: none;
> top: 15px;
> background-image:
url(/images/backgrounds/background1.gif);
> padding-top: 15px;
>>>> width: 70%;
<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
> }
>
> #body {
> margin: 0 auto;
> text-align:left;
> width: 760px;
> padding-right: 20px;
> padding-bottom: 20px;
> padding-left: 20px;
> background-color: #FFFFCC;
> padding-top: 20px;
> font-family: Georgia, "Times New Roman", Times, serif;
> font-size: 1em;
> color: #003366;
>
> }
>
>
http://www.japanesetemari.com
>
> The page is on the left size of the screen and the
yellow box does not expand
>out. Not exactly what I'd wanted. I like to take
advantage of larger screens
>and have the page expand out but not so far out so the
lines of text are real
>long.
> Barb
It's this in the body style that is limiting the width -
change that
to 100%
>>>> width: 70%;
<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
> }
~Malcolm N....
~

CSS layout

Hi
A couple of embarrassingly basic questions but would
appreciate help:
1. I'm using a CSS layout template and need to alter the
position of a div border (to coincide with another border). How do
you physically do this? Can't seem to "drag and drop" the border
2. I've aligned a Heading to the "left" but when I display it
on the browser it either stays to the left or moves to the center
of the div. depending on the size of my window. How do you prevent
this?
3. Currently my html and css codes are in 2 different
(linked) documents. When I publish to the web do I simply load both
files or do I need to copy and paste the css coding into my html
document?
Thanks once again

Posting our code would be helpful
> 1. I'm using a CSS layout template and need to alter the
position of a div
> border (to coincide with another border). How do you
physically do this?
> Can't
> seem to "drag and drop" the border
I'm not sure what you're asking here ... positioning a
border? the div
border is always, well, on the perimeter of the div. Do you
want to move one
edge of the div over 10 px? If so (and assuming its the left
border...) ,
try subtracting 10 px from the div width and giving the div a
margin-left of
10px. As for "drag and drop," what are we dragging? What are
we dropping?
> 2. I've aligned a Heading to the "left" but when I
display it on the
> browser
> it either stays to the left or moves to the center of
the div. depending
> on the
> size of my window. How do you prevent this?
can we see the code here? It sounds to me like you're running
into problems
with an element being set to 500px wide and then a browser
window that is
400px wide. A wide img maybe? I'm only guessing at things
without seeing th
ecode though
> 3. Currently my html and css codes are in 2 different
(linked) documents.
> When
> I publish to the web do I simply load both files or do I
need to copy and
> paste
> the css coding into my html document?
Yep. Just make sure they stay relative to each other in the
same way. In
other words, if both your htm file and css file are in the
same folder on
your local machinge then they must remain in the same folder
on your server.
If your css is in a subfolder called "css" then you need to
make sure your
css file is in a similar subfolder on the server
Alex

Css layout or style sheet not showing table layout

When I was working on my website I noticed that my tables don't show up in the browser of my site, they do however, show up in the dreamweaver design so I am wondering if when I was making changes somehow to the site if something in the css layout or style sheet got deleted. Could someone please take a look at it and please tell me what needs to be fixed, I am not at all familiar with css so I need all the help I can get on this here is the link. Thank you! http://angelcoilbartlett.com/index.html

In your HTML document in Code View, remove the following embedded CSS code. This is competing with external style sheet code and causing your site havoc. In the future, don't create any more new styles. You don't need them. Stick with the established styles set up by the original designer and you will have way fewer problems.
DELETE ALL OF THIS NONSENSE:
<style type="text/CSS>

</style>
If you want to continue working with web pages, you owe it to yourself and your employer to learn basic HTML and CSS so you can get yourself out of jam when things go wrong.
Start learning here: HTML & CSS Tutorials - http://w3schools.com/
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb
www.alt-web.blogspot.com

Add AP Div to CSS Layout...

Hey,
I really need to add an AP Div to my CSS- Layout (3 column
absolutely positioned) ! No problem BUT i need it to shrink and
grow with the other parts of the page (sidebar1/2, main content,
header, footer etc..) In other words, I need a third sidebar in
this "CSS-Set"... How can I "attach" the apDiv's to the other Divs
such as main content, header... ?!
Thx for help !

On Mon, 12 Jan 2009 15:47:54 +0000 (UTC), "hendrik.r."
<[email protected]> wrote:
> I really need to add an AP Div to my CSS- Layout (3
column absolutely
>positioned) ! No problem BUT i need it to shrink and grow
with the other parts
>of the page (sidebar1/2, main content, header, footer
etc..) In other words, I
>need a third sidebar in this "CSS-Set"... How can I
"attach" the apDiv's to the
>other Divs such as main content, header... ?!
The short answer is, you cannot. Absolutely positioned page
elements
cannot interact with other page elements because they are
removed from the
normal flow of the document. That's what makes absolute
positioning a bad
way to do most things.
Gary

CSS layout help needed

Similar Messages

Maybe you are looking for