Forum Moderators: not2easy
I have a header at the top, a nav bar on the left in 2 sections, and the content is positioned 30px to the right of the nav bar. The h1 tag is in the content div, but I have two h2's in the nav div which is before the content div in my markup.
So, what I need to do is have the content markup then the nav markup, but still have it display as nav, then content. It seems like this would probably be possible using absolute positioning, but I've steered away from that because I'm worried about not always knowing the size of elements (although could I be missing something here that I should know about?). Is there anyway to do this without absolute positioning or is that really the best thing to do?
As an added bonus, it would be nice to have the header as the last piece of markup, too.... :)
Jennifer
Using absolute positioning you can certainly list your header last in the html. Your main divs can be in any order you want.
If you haven't considered it you might want your nav first for graceful degradation in older non-csss browsers and add a "skip nav" option for screen readers.
Try using percentages i.e.:
CSS:
html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}#content {
position: absolute;
top: 20%;
left: 20%;
width: 80%;
height: 100%;
margin: 0;
padding: 0;
background-color: cyan;
}#nav {
position: absolute;
left: 0;
top: 20%;
width: 20%;
height: 100%;
margin: 0;
padding: 0;
background-color: yellow;
}
#header {
position: absolute;
top: 0;
left: 0;
height: 20%;
width: 100%;
margin: 0;
padding: 0;
background-color: pink;
}
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head>
<title>Test Bed</title>
<link href="J.css" rel="stylesheet" type="text/css" />
</head><body>
<div id="content">
<h1>Lorem Ipsum</h1>
<h2>Cicero</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque adipiscing erat a lectus. Nunc tincidunt metus sit amet purus. Proin eget massa. Phasellus vel dui a tellus convallis bibendum. <a href="x"><span>Vivamus hendrerit</span></a>. Proin iaculis odio vitae massa. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque consectetuer varius urna. Sed a velit. Aliquam diam. Phasellus vel pede. Praesent pharetra urna rhoncus massa. Integer leo diam, semper sed, sagittis et, suscipit id, erat. Curabitur varius vehicula felis. Sed sit amet lorem id ligula porta luctus. Quisque vulputate lobortis massa. Maecenas nibh mi, vestibulum vel, aliquet id, varius vel, nulla. Phasellus nonummy, nulla id ullamcorper congue, urna sapien viverra massa, quis molestie justo sem at erat.</p>
</div><!-- content --><div id="nav">
<h1>Navigation</h1>
<h2>Nav One</h2>
<pre>
Button
Button
</pre>
<h2>Nav Two</h2>
<pre>
Button
Button
</pre>
</div><!-- nav --><div id="header">
<h1>This is the header</h1>
</div><!-- header --></body>
</html>
Hope this is of some help.
The <pre> is just there for spacing. The background-color is "bright" for testing! :)
Jennifer
