PDA

View Full Version : Laying out a 5-div webpage by drawing layers, editing .css


sbell22
07-10-2006, 12:46 AM
I'm trying to understand how to code my pages with CSS instead of tables.
But haven't learned enough yet to do any "production" work this way yet.
Part of the problem is I don't understand how to design a fixed-width (e.g. 780pix wide) page with 5 div areas, and control the positioning so they'll show up ok in most browsers - e.g. header, left col, body, right col, and footer.
Because i don't know how to write the CSS code to specify the positioning
of those layers.

It occured to me that to get started, I might be able to "draw" the layers
in DW, specifying their relative positioning in there, and let DW generate
the code. Is this a valid approach?

I went ahead and drew the layers; here is the code that was generated:

<body>
<div id="header" style="position:absolute; left:0px; top:0px; width:800px; height:100px; z-index:1"></div>
<div id="leftcol" style="position:absolute; left:0px; top:100px; width:150px; height:500px; z-index:2"></div>
<div id="body" style="position:absolute; left:152px; top:100px; width:500px; height:500px; z-index:3"></div>
<div id="rightcol" style="position:absolute; left:653px; top:100px; width:147px; height:500px; z-index:4"></div>
<div id="footer" style="position:absolute; left:0px; top:600px; width:800px; height:30px; z-index:5"></div>
</body>

Do some of these layers need to be floated relative to the others, to display ok in different browsers? And is there a way to allow the left/body/right layers to expand VERTICALLY if the content expands, like a table would?

I would be content with fixed-width designs for now; I can get into "fluid" designs that expand horizontally for large monitors later, once my CSS skills are firmly in place.

Please let me know if I'm on the right track... trying to get off the tables
and onto CSS layout control ASAP. I've built a few sites but don't want to
get stuck in tables:) I have no problem with controlling text format/color/size with an external style sheet... it's this layout control issue
I need to figure out.

Thanks in advance,

-steve

gmcrone
07-10-2006, 08:38 AM
The easiest way is to use wrapper divs.

<body>
<div id="header" style="position:absolute; left:0px; top:0px; width:800px; height:100px; z-index:1"></div>
<div id="leftcol" style="position:absolute; left:0px; top:100px; width:150px; height:500px; z-index:2"></div>
<div id="body" style="position:absolute; left:152px; top:100px; width:500px; height:500px; z-index:3"></div>
<div id="rightcol" style="position:absolute; left:653px; top:100px; width:147px; height:500px; z-index:4"></div>
<div id="footer" style="position:absolute; left:0px; top:600px; width:800px; height:30px; z-index:5"></div>
</body>

Change the above to something similar to this:

<div id="pagewrap">use this to set page width
<div id="header"></div>set to 100% width
<div id="mainwrapper>set to 100% width
<div id="leftcol"></div>set width needed and float left
<div id="maincontent"></div>
<div id="rightcol"></div>set width needed and float right
</div> (closes mainwrapper)
<div id="footer"></div>
</div> (closes pagewrap)

Mike...