mwbarry Posted July 4, 2011 Share Posted July 4, 2011 I am working on learning how to create a fully functional and stylized nav bar, but I am having trouble on a couple things. I cannot figure out how to get the list items to be displayed in a row rather than a column and I also cannot figure out how to center the nav bar as a whole. I am testing by reloading the file after I make a change to the CSS. The nav bar is centered with just the .nav class added in the CSS, but once I add 'a' to the CSS it is no longer centered and is not longer in a horizontal list. The nav bar is made horizontal again when I add the 'li' to the CSS but is still not centered.Here is the HTML/CSS<html><head><title>test</title><style type="text/css">.nav { text-align:center;}a { display:block; width:120px; background-color:#98bf21;}li { display:inline; float:left;}</style></head><body><ul class="nav"> <li><a href="#home">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#contact">Contact</a></li> <li><a href="#more">More</a></li></ul></body></html> Link to comment Share on other sites More sharing options...
MrFish Posted July 5, 2011 Share Posted July 5, 2011 test-align: center; is for everything inside that element. You can use margin: 0px auto; to center the ul element. Link to comment Share on other sites More sharing options...
mwbarry Posted July 5, 2011 Author Share Posted July 5, 2011 test-align: center; is for everything inside that element. You can use margin: 0px auto; to center the ul element.I put margin:0px auto; in under .nav and it only shifted the item slightly to the left, maybe by 15-20px. I also tried margin-left:0px auto; margin-right:0px auto; and it didn't change anything. Link to comment Share on other sites More sharing options...
MrFish Posted July 5, 2011 Share Posted July 5, 2011 Are you using internet explorer?body{ text-align: center;} Link to comment Share on other sites More sharing options...
dsonesuk Posted July 5, 2011 Share Posted July 5, 2011 margin:0 auto; won't work with a block element whose width is not set. text-align: won't work on block elements UL, LI unless you convert all to display: inline, and use a outer block element container such as a div which uses text-align: center; but in changing to inline elements you won't be able to set height or width of these element, as there height and with is determined by the text within them.Best option is to use outer container div for menu, and use a combination of text-align: center; float: left; position:relative; left:50%;right:50%; and most important of all to fix crap IE a !Doctype declaration. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><style type="text/css">#nav_container {text-align:center;}#nav_container ul, #nav_container li {text-indent: 0; padding:0; margin:0; list-style-type:none;}.nav {position:relative;float:left;margin: 0 auto;left:50%;}a {display:block;width:120px;background-color:#98bf21;}li {display:inline;position:relative;right:50%;float:left;}</style></head><body><div id="nav_container"><ul class="nav"><li><a href="#home">Home</a></li><li><a href="#about">About</a></li><li><a href="#contact">Contact</a></li><li><a href="#more">More</a></li></ul></div></body></html> Link to comment Share on other sites More sharing options...
mwbarry Posted August 9, 2011 Author Share Posted August 9, 2011 to revive a dead topic that is still puzzling me....I feel like there is a more straightforward way to center the nav bar than above. Any thoughts?In making a nav bar and cannot get it centered without using the overly complicated method above. #navcontainer { margin:0px auto; } #nav { text-align: center; } #nav span { display: block; width:200px; background-color: #AAAAAA; float: left; } #nav span a { text-decoration: none; color: #000000; } <div id="navcontainer"> <div id="nav"> <span id="hello world"> <a href="java script:helloworld()">Greet World</a> </span> <span id="about"> <a href="java script:about()">About</a> </span> <span id="name"> <a href="java script:name()">Name</a> </span> <span id="add"> <a href="java script:addition()">Add</a> </span> </div> </div> If the span items are floated left in order to get them horizonally aligned, why doesn't setting the navcontainer as margin:0px auto; put the whole thing centered? Link to comment Share on other sites More sharing options...
dsonesuk Posted August 9, 2011 Share Posted August 9, 2011 Because #navcontainer is a block element it will expand to the total width of its parent element, so the margin:0 auto; although is working, it will appear as it is not doing anything as the margin will end up as though you are using margin: 0 0;.The float; left span elements will ignore, the text-align: center; set by #nav.The quick solution, but will mean you will have to adjust every time you remove or add a menu item, is to work out the total width of all span elements 800px (may have to increase to allow for borders and margins if used), and assign this width to #nav.#nav {width:800px; margin:0 auto;}if the parent container #navcontainer width is 960px, setting the width of #nav to 800px and using margin: 0 auto; will give a 80px margin on both sides of #nav causing itself and its tightly enclosed span elements to centre. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.