Nav menu problems

[caser85]

I'm trying to create a navigation menu that horizontal and has an image spacer in between each link. The problem I'm having is that the second div I create pushes down the next text item and creates a new line. Here is my CSS:

 
<!--
.nav {
 font-family: Trebuchet MS, Verdana, Arial;
 font-size: 14px;
 font-weight: bold;
 background-color: #CCC;
 text-align: left;
 height: 22px;
 width: 725px;
 border: 1px solid #6699CC;
}

.navlinks {
 padding-right: 7px;
 padding-left: 7px;
}
-->
</style>

Here is my HTML:

<div class="nav"><div class="navlinks"></div><div class="navlinks">Photos</div><img src="images/divider.gif" alt=""></div>

Can anyone see what I'm doing wrong? Is there anyway to improve this? I'm kind of new at CSS .

[blakems]

What you need to do is give the div a style of "display: inline;" or you can try "float: left;" on each div. Also there is no need to use spacer gif. Use margin-left and margin-right on the divs for your spacing you need, much better code.

[Paul O'B]

Hi,

A div is a block level element and will always start on a new line (unless you change it with display:inline).

Use the span tag for inline content.

e.g.

<div class="nav"><span class="navlinks">Link 1</span><span class="navlinks">Link 2</span><span class="navlinks">Link 3</span><span class="navlinks">Link 4</span><span class="navlinks">Link 5</span></div>

To space your links use margin-left: 10% in your navlinks class (or some other specific measurement).

Paul

[Zopester]

Or for a semantically meaningful menu (that has the benefit of displaying as an unordered list for those browsers that don't support CSS properly) use this:

HTML:

<div class="nav">
<ul>
<li><a href="whatever">Whatever</a></li>
<li><a href="whatever">Whatever</a></li>
<li><a href="whatever">Whatever</a></li>
</ul>
</div>

CSS:

.nav ul {
margin:0;
padding:0;
}

.nav ul li {
display:inline;
margin-left:5px;
margin-right:5px;
}