Best Practice for Horiztonal Nav

HTML & CSS
1

I’ve always had trouble in creating a basic horizontal navigation.

I know some people put the navigation in a div but I heard that’s not the best way to do it.

Can anyone link me to a good tutorial or give some insight? Thanks!

-Chris

2

One of the best sites I’ve found for simple vertical and horizontal navigation menus is Listamatic.

You rarely need to use a <div> to create a menu, although sometimes with more elaborate styling you need that extra hook to hang some CSS on. Usually, you just need a list, ie <ul id=“menu”>, and fill it with <li>…</li>s.

3

Thanks Stevie_D, will tinker with the code from the site (I see the put the navs in div’s)

-Chris

4

As for more information you can click here. Although my cargps navigation are not the same with you but maybe the same in details

5

C,
simplified: the DIV is redundant because the navigation should be an UL , which is already a block. So unless you need extra bg images, for some odd reason, the div is not necessary.

So, for the most basic navigation your mark up should be simply:


<ul class="hNav">
	<li><a href="#">item</a></li>
	<li><a href="#">item</a></li>
	<li><a href="#">item</a></li>
	<li><a href="#">item longer sample item</a></li>
	<li><a href="#">item</a></li>
</ul>

AND the CSS


.hNav { overflow:hidden; padding:0; margin:0;}/* overflow auto clears the floated LIs, ; if you reset all your padding/margins else where you don't need to do so again here */
.hNav li { float:left;  list-style:none;}/* FLOAT:LEFT is what does the magic*/
.hNav a {display:block; text-decoration:none;}

if you wanted to CENTER the nav bav… then you would do this:


.hNav { overflow:hidden; padding:0; margin:0 auto; width:900px;}/* note the explicit width and the 0 auto margin*/

hope that helps