sinan92 Posted June 10, 2011 Share Posted June 10, 2011 I dont understand how this happenedI made websites earlier but this never happendThe nav is somehow inside of the wrapper while I put them apart from each other <html><header><link rel="stylesheet" type="text/css" href="style.css" /><title>Neurotic FlyFF 3</title></header><body><div id="nav"><ul><li id="forums"><a href="#Forums"></a></li><li id="register"><a href="#Register"></a></li><li id="download"><a href="#Download"></a></li><li id="donation"><a href="#Donation"></a></li></ul></div><div id="wrapper"><div id="staff_box"></div></div><div id="footer"></div></body></html> body { z-index: 0; background: #000000 url(img/background.jpg) no-repeat center top; padding:0; margin-top:-12px; margin-left:auto; margin-right:auto; font:80%/180% Verdana, Geneva, sans-serif; width:1000px; height:1000px; } /*Navigation*/ #nav { margin-bottom:100px; } #nav ul { list-style-type:none; } #nav ul li#forums { background:url(img/nav_forums.jpg) no-repeat center top; padding:1px; float:left; margin-left:130px; width:153px; height:55px; } #nav ul li#forums a { display:block; width:153px; height:55px; } #nav ul li#register { background:url(img/nav_register.jpg) no-repeat center top; padding:1px; float:left; width:153px; height:55px; } #nav ul li#register a { display:block; width:153px; height:55px; } #nav ul li#download { background:url(img/nav_download.jpg) no-repeat center top; padding:1px; float:left; width:153px; height:55px; } #nav ul li#download a { display:block; width:153px; height:55px; } #nav ul li#donation { background:url(img/nav_donation.jpg) no-repeat center top; padding:1px; float:left; width:153px; height:55px; } #nav ul li#donation a { display:block; width:153px; height:55px; } /*Wrapper*/#wrapper { padding:1px; width:1000px; height:500px; background-color:red; } Link to comment Share on other sites More sharing options...
thescientist Posted June 11, 2011 Share Posted June 11, 2011 it's because your nav items are being floated, so they are being taken out of the flow. you could either give the nav a height, or add overflow:auto to it. Also, you have a lot of duplicating in your style definitions, might be a bit more convenient to just create one style for all your <a>'s and <li>'s in the #nav container, and then just make a specific class/id to apply the backgrounds. just a thought. Link to comment Share on other sites More sharing options...
sinan92 Posted June 11, 2011 Author Share Posted June 11, 2011 it's because your nav items are being floated, so they are being taken out of the flow. you could either give the nav a height, or add overflow:auto to it. Also, you have a lot of duplicating in your style definitions, might be a bit more convenient to just create one style for all your <a>'s and <li>'s in the #nav container, and then just make a specific class/id to apply the backgrounds. just a thought.Oh thanks a lot I will try it! Usually I use inline-block because its one nav but this time it is made of several buttons so didn't really know how I should do itAnd yea thought so too about the last thing Link to comment Share on other sites More sharing options...
thescientist Posted June 11, 2011 Share Posted June 11, 2011 right, well the point to be taken from this is the float property being used, not the display property. Link to comment Share on other sites More sharing options...
Ingolme Posted June 11, 2011 Share Posted June 11, 2011 You can also use "clear:both" on that red box to get it to go below the list items. Link to comment Share on other sites More sharing options...
sinan92 Posted June 11, 2011 Author Share Posted June 11, 2011 You can also use "clear:both" on that red box to get it to go below the list items.Thanks guys its working Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.