Welcome to WebmasterWorld Guest from 54.161.175.236

Forum Moderators: not2easy

Message Too Old, No Replies

A Tags and CSS Background images

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

New User

5+ Year Member

joined:Apr 18, 2009
posts: 12
votes: 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>
</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)

New User

10+ Year Member

joined:Sept 5, 2006
posts:36
votes: 0


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)

Senior Member

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

joined:Nov 28, 2004
posts:7999
votes: 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 {
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)

Senior Member

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

joined:Aug 7, 2003
posts:4783
votes: 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.
1:50 am on May 23, 2009 (gmt 0)

New User

5+ Year Member

joined:Apr 18, 2009
posts: 12
votes: 0


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]