Why span element does not work with this piece of code

Question

I have a navigation menu that looks like this:

I need to break it into three parts (left, center, right).

I wrote the html and css code as follows:

<span id="nav-left-img"></span> <ul id="navigation"> <li>Home</li> <li>About Us</li> <li>Products</li> <li>Contact Us</li> </ul> <span id="nav-right-img"></span> 

and here is the css:

 ul#navigation { background: url('../img/menu-c.png') repeat-x; height: 45px; clear: both; width: 420px; } ul#navigation li { float: left; text-align: center; width: 100px; padding-top: 10px; } #nav-left-img { background: url('../img/menu-l.png') no-repeat; height: 45px; width: 10px; } 

span doesn't seem to do the trick; if i use div it works. What is possibly wrong with the code? Is it ok if I use a div instead of a span or should I stick with a div to connect this left and right images? How to do it with span ?

Answer 1

The default div is display:block ; the default is display:inline . Width and height cannot be set for display:inline elements.

I would recommend using a div .

Answer 2

Maybe try setting a range to display a block?

Answer 3

An even simpler solution is to use :after and :before to completely avoid the "useless" HTML:

 #navigation:before { content: url('../img/menu-1.png'); } #navigation:after { content: url('../img/menu-2.png'); } 

Not compatible with IE6, though ...

Answer 4

div and span are essentially identical, except for the fact that div by default refers to a block level element and span does not. To make it work with a range, just add display: 'block'; in CSS.

Answer 5

I suggest replacing span with img as follows:
<img src="img/menu-1.png" alt="" class="nav" /> and in css
img.nav{float:left;display:block}