A Tags and CSS Background images

[mafaz]

I'm trying to develop a small site with a very basic navigation. This navigation I've been trying to develop using ul and li tags with a tags between the li's

such as:
<ul class="hmenu" id="ultmenu">
<li class="hmenu_left"><a href="#home" class="topLink">1</a></li>
<li class="hmenu_mid"><a href="#about" class="topLink">Who is</a></li>
<li class="hmenu_mid"><a href="#offers" class="topLink">Our Offerings</a></li>
<li class="hmenu_right"><a href="#contactus" class="topLink">Hello</a></li>
</ul>

the problem is the background is on the li tag, and when there is no link involved, it displays perfectly with paddings and margins. however when i use the link it shrinks to only the links space and paddings totally mess everything up.

can some1 please help?

[holyhttp]

You can try changing the display property of the anchor (a) to block:

.topLink{
display:block;
}

[rocknbil]

Yes I'd use the anchor itself to style the size and padding of the navigation, not the LI.

Before you get too deep into this, you also might change your approach: you use class for elements that may be used in many places on the page, and id for unique elements. Most of your classes should be ID's, and you can also reference many of them with fewer selectors. Like so:

#ultmenu { padding:0; margin:0; } 
/* note that display inline on the li would make it a horizontal nav */ 
#ultmenu li {  
 padding:0; 
 margin:0; 
 list-style:none; 
 display:inline;  
} 
#ultmenu li a {  
 display:block; 
 padding:9px; 
 background:url(/images/nav-bg.gif) top left repeat-x; 
} 
#ultmenu #hmenu_left a { } 
#ultmenu .hmenu_mid a { } 
#ultmenu #hmenu_right a { } 

Note that because hmenu_mid is used twice, a class is appropriate.

<ul id="ultmenu"> 
 <li id="hmenu_left"><a href="#home">1</a></li> 
 <li class="hmenu_mid"><a href="#about">Who is</a></li> 
 <li class="hmenu_mid"><a href="#offers">Our Offerings</a></li> 
 <li id="hmenu_right"><a href="#contactus">Hello</a></li> 
</ul> 

[swa66]

I'd actually try to move to not having classes or ids on every list item.

• - just style them all with what the middle ones need
  - override it with what the first and last need

• use the :fist-child (CSS2.1) and :last-child (CSS3) selectors if possible IE6 will be uncooperative as usual. (IE7.js fixes that), but even IE8 still doesn't do the :last-child pseudo class, crippling this approach significantly.

[mafaz]

Thanks everyone for all your responses. I figured it our using a cool tutorial which i'll link below.

<snip>

Thanks

[edited by: swa66 at 4:32 pm (utc) on May 23, 2009]
[edit reason] Only authoritative URLs please see ToS and forum charter [/edit]