trying to have fixed nav in a position:relative container

**lizzmo** · 06-29-2009, 04:49 PM

alright so i want my whole layout to center itself relative to the size of the page. and i want the content to scroll. but i want the nav and background to be fixed instead of absolute. but when i swapped fixed for absolute they weren't within the container anymore and just went to the left side of the page. right now i'm at a loss for how to fix it.

heres a link to my site:
http://lizbmorrison.net/V7test4.php?page=garden

and heres my css:

A:link { text-decoration: none; color:#f0a618; }
A:visited { text-decoration: none; color:#f0a618; }
A:active { text-decoration: none; color:#f0a618; }
A:hover { text-decoration: none; color:#d3d3d3; }

body {
font-family: helvetica, sans-serif;
color: #d3d3d3;
font-size: 8pt;
text-align: left;
letter-spacing: 1pt;
}

h1 {
font-family: helvetica, sans-seif;
color:#f0a618;
font-size: 7pt;
font-weight: lighter;
text-align: right;
letter-spacing: 1pt;
}

#background {
position: fixed;
top: 10px;
left: 0px;
width: 750px;
z-index: 1;
}

#container {
position: relative;
top: 0px;
width: 750px;
margin: 0 auto;
text-align: left;
}

#nav {
position: fixed;
text-align: right;
top: 100px;
left: 0px;
width: 155px;
z-index: 3;
}

#content {
position: absolute;
text-align: left;
top: 105px;
left: 200px;
width: 525px;
z-index: 2;
}

any help would be appreciated, thanks

**WebWarrior** · 06-29-2009, 05:17 PM

Your Website has a lot of issues. You have 2 <html>, <head>, and <body> tags, when you should only have one. Your are missing DTD at the top of your document (definitely not recommended). Your CSS uses UTF-8 encoding, but the Website itself is ISO-8859-1 (bad idea). Yo will need to escape special characters like V&A should be V&A. Also, I wouldn't use <h1> for nav menu links. In fact it is semantically correct to have only one <h1> tag and although this rule is not "carved in stone," it would help SEO (Search Engine Optimization) considerably if you used it as your for main header. Your container div is closed after 1st <body> tag.

**WebWarrior** · 06-29-2009, 06:07 PM

Here, try this fix in the attached file. This should help. If you have any questions, don't hesitate to post.
Note: You will need to remove the .txt extension from this HTML file for it to be usable. I inserted CSS directly into the HTML file, but you can/should remove and place in the external file. One more thing, always provide width and height attributes for your <img> tags.