Okay, so i'm trying to create a horizontal navigation bar centered. I'm just learning so im practicing, but i can't figure this out so i thought i'd ask. I used the display:block property to set the links and have the hover effect, but since block elements all have a line break in them, the bar is vertical, i can center it by making the left and right margins auto for the links, but i can't figure out how to make the links horizontal. If i float all of the links to the left, can i center them as a group, or could i nest them inside of a paragraph and align them that way? Also, i've been creating buttons and they won't show up unless i set each link with the display:block property... why is this? Thanks
Use style sheet below. float: left; display: block; paddin: px px px px; Code (markup): Note: Add value for padding. Best Regards, Mohammad www.ehome-jo.com
Aah, div centering. I've written up some code and commented out information for you. <style type="text/css"> /** * This is the outside contents that I'll be * using as an example. */ #website-container { width:800px; /* Defined width */ height:900px; /* Defined height */ } /** * This is the navigation. It has a defined * width and will have be centered within * the #website-container with spacing on * each side of it. */ #nav { width:500px; margin:0px auto; /* This is the magic.. Margin auto is for left/right, margin 0px is for top/bottom. } #nav li { width:100px; height:20px; display:block; /* Give the element spacing above and below the element */ float:left; /* Float each list element to display on the left */ } #nav li a { font-size:bold; display:block; /* Give the element spacing above and below the element */ margin: 0px auto; /* Center align the text in the box, using the same idea */ } /** * This is for clearing the menu */ .clear { height:1px; display:block; visibility:hidden; clear:both; } </style> <body> <div id="website-container"> <ul id="nav"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Services</a></li> </ul> <div class="clear"></div> </div> </body> HTML: Also, the buttons will only display with block because it allows the element to have a defined width/height. When you apply anything else, it looses that ability and will only use what it generates for spacing. To overcome this, you can use the float tags, or the position tags. Floating is better for dynamically generated content, though.
The works of margin:0 auto; this centers most divs if you want all divs centered then i advise you to put it in the body { class.