homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

A Tags and CSS Background images

5+ Year Member

Msg#: 3914614 posted 6:14 pm on May 15, 2009 (gmt 0)
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>

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?



5+ Year Member

Msg#: 3914614 posted 4:13 am on May 20, 2009 (gmt 0)

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



WebmasterWorld Senior Member rocknbil us a WebmasterWorld Top Contributor of All Time 10+ Year Member

Msg#: 3914614 posted 2:33 pm on May 20, 2009 (gmt 0)

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 {
#ultmenu li a {
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>


WebmasterWorld Senior Member swa66 us a WebmasterWorld Top Contributor of All Time 10+ Year Member

Msg#: 3914614 posted 10:54 pm on May 20, 2009 (gmt 0)

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.


5+ Year Member

Msg#: 3914614 posted 1:50 am on May 23, 2009 (gmt 0)

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



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

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved