struggling with div position

[oneill2004uk]

Really struggling with this its probably really simple but i still cant get it rightthis is my website or atleast its the start of it!can't get the nav div to fit in its place when it should fit perfectly!its not even the right height i've specified 30px and its miles bigger! :)This is my front page so far :-My Websiteand this is the css for the navigation:-

.content_box { height:600px; width:667px; background-image:url(/images/2010-website-layout_02.png); position:absolute; float:right; margin-left:333px; }ul#list-nav {	list-style:none;	width:667px;	position: relative;	float: right;	height: 30px;}ul#list-nav li {	display:inline;	border-style: none;}ul#list-nav li a {	text-decoration:none;	background: #FFFFFF;	color: #660066;	float:left;	text-align:center;	font-size:medium;	padding-top: 5px;	padding-bottom: 5px;	border-top: 1px solid #660066;	border-right: 1px solid #660066;	border-bottom: 1px solid #660066;	border-left: 1px solid #660066;	font-family: Arial;	width: 133px;	height: 30]#;	height: 30px;}ul#list-nav li a:hover {background: #660066;color:#FFFFFF}

total width for the outside container is 1000px and the box on left is 333px so my nav should be 667px right?would appreicate the help!also i can't find information on values for z-index, is 1 being on top or bottom? :S

[justinbriggs1]

Your assumptions are correct, but remember that unordered lists come with a default margin and/or padding. Set them to 0:ul#list-nav {float:right;height:30px;list-style:none outside none;margin:0;padding:0;position:relative;width:667px;}z-index:1 is on the bottom

[ShadowMage]

Your assumptions are correct, but remember that unordered lists come with a default margin and/or padding.

As do many other elements. And the default values for these elements can vary between different browsers. That's why it's a good idea to use a reset declaration at the top of your CSS: * {margin: 0px;padding: 0px;}That way all elements are reset to zero unless explicitly defined elsewhere.Also remember that margins, padding, and borders are included in an element's width. So if you specify width of 150px and have 2px left/right padding with a 1px border, the actual width of the element will be (150+2+2+1+1) 156px.

z-index:1 is on the bottom

Unless there's an element set at 0. :)But yeah, higher numbers appear on top of the lower ones. Also, z-index won't work unless the element is also positioned (using position: relative|absolute|fixed)

[thescientist]

i wouldn't even bother with positioning in this case (for any div). just float it or use the box model to position your elements.

[oneill2004uk]

Thanks alot! thats really helped! :)think i've about done it! :)or shall i say "W3"ve done it lol

[oneill2004uk]

i forgot to mention. dreamweaver ie/firefox preview was working fine originally but now i can't seem to view anything when i preview it in either browser ,although when i upload it to my website its fine.in ie preview in dreamweaver i just get my navbar displayed but the image of my logo and all the background images are not there plus the picture has a red x on it!i can't seem to figure out how to fix it, i thought it was file cloaking but i turned that off so its not that.is there anything else it could be?

[thescientist]

you should just view it through the browser natively (locally), as opposed to dreamweaver preview.

[oneill2004uk]

just tryed opening the html without dreamweaver and i still get the same results :S dont understand it

[thescientist]

can you show us the code? do you get any validation errors? Are you sure the directory structure on your webserver exactly matches that of your local machine?

[oneill2004uk]

think i've fixed something, what ive done is instead of leaving the testing set to nothing (local) i've set up server testing with my server and its all working :)thanks alot Thescientist