Welcome to WebmasterWorld Guest from 54.198.87.238

Forum Moderators: not2easy

Message Too Old, No Replies

A Tags and CSS Background images

     
6:14 pm on May 15, 2009 (gmt 0)

5+ Year Member


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?

4:13 am on May 20, 2009 (gmt 0)

5+ Year Member



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

.topLink{
display:block;
}

2:33 pm on May 20, 2009 (gmt 0)

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



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>
10:54 pm on May 20, 2009 (gmt 0)

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



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.
1:50 am on May 23, 2009 (gmt 0)

5+ Year Member



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]

 

Featured Threads

Hot Threads This Week

Hot Threads This Month