CSS ul/li help needed

greg posted this at 07:14 — 20th September 2008.

Joined: Nov 2005

I have a nav menu, which for each link uses a different image of width 150px x 100px high.

The images change when the mouse is hovered over them. The CSS uses the top 50px of the image when not hovered, and bottom 50px when the image is hovered.
It works fine, but what I want is to make a class so I call the bottom part of the image.
This is so I can use the bottom part of the image on the nav link for the page the user is currently on.

So user is on "contact us" page, the contact us nav link will use the bottom part of the image, same as it is when hovered.

Here is the CSS

#main_nav {
padding:0; 
margin:0; 
list-style:none; 
height:50px; 
position:relative; 
z-index:200; 
}

#main_nav li {
display:block; 
float:left;
}

#main_nav li a {
display:block; 
float:left; 
height:50px; 
width:150px; 
text-decoration:none; 
padding:0; 
cursor:pointer;
}

#main_nav li a.home {
background:url(../images/nav_home.jpg);
}

#main_nav li a.contact {
background:url(../images/nav_contact.jpg);
}

#main_nav li:hover a, #main_nav a:hover{
background-position: 0 50px;
}

#main_nav .dropdown {
position:absolute; 
left:-9999px; 
top:-9999px; 
width:0; 
height:0; 
margin:0; 
padding:0; 
list-style:none;
}

#main_nav li:hover {
position:relative; 
z-index:200;
}
#main_nav a:hover {
position:relative; 
white-space:normal; 
z-index:200;
}

#main_nav :hover ul.dropdown{
left:0; 
top:50px; 
background: #000; 
width:152px; 
height:auto; 
z-index:300;
}

#main_nav :hover ul.dropdown li{
display:block; 
height:52px; 
position:relative; 
float:left; 
width:152px; 
font-weight:normal;
text-align: center;
}

#main_nav :hover ul.dropdown li a{
display:block; 
height:50px; 
width:150px; 
border:1px solid #888; 
border-color:#ddd #888 #000 #ccc; 
text-decoration:none; 
padding:0; 
cursor:pointer;
color: #b70f0e;
}

#main_nav :hover ul.dropdown li a:hover {
background-position: 0 50px; 
position:relative;
}

#main_nav :hover ul.dropdown li a:hover b {
left:100px; 
top:15px; 
background:#fff; 
color:#000; 
border:1px solid #888; 
display:block; 
width:100px; 
height:20px; 
text-align:center; 
font-size:12px; 
line-height:18px;
}

and the HTML for the two links as per the CSS

<ul id="main_nav">
  <li><a href="home.php" class="home"></a></li>
  <li><a href="contact.php" class="contact"></a></li>
</ul>

I do use the dropdowns in the HTML, but left them out here as they are not important.
I left them in the CSS incase they declare some things for the standard LI's as well.

Cheers

JeevesBond posted this at 08:50 — 20th September 2008.

He has: 3,956 posts

Joined: Jun 2002

Wouldn't you just change:

#main_nav li:hover a, #main_nav a:hover{
background-position: 0 50px;
}

#main_nav li:hover a, #main_nav a:hover, #main_nav li a.current {
background-position: 0 50px;
}

Then change the HTML to mark the current page using a class:

<ul id="main_nav">
  <li><a href="home.php" class="home current"></a></li>
  <li><a href="contact.php" class="contact"></a></li>
</ul>

Or am I missing something?

a Padded Cell our articles site!

greg posted this at 19:11 — 20th September 2008.

He has: 1,581 posts

Joined: Nov 2005

Ahh.
I tried everything, including specifically naming the UL and LI for current and also a complete separate class for LI not_current.

I'm sure I even tried that, but I can't have as it works like a charm now.

Cheers

webwiz posted this at 02:06 — 22nd September 2008.

He has: 629 posts

Joined: May 2007

You probably don't want to use a link at all -- a link to the same page you're already at is not very useful.

My suggestion would be to exchange the A element for STRONG, and apply the same CSS as for the link, viz:

#main_nav li a,
#main-nav li strong {
  display:block; 
  float:left; 
  height:50px; 
  width:150px; 
  text-decoration:none; 
  padding:0; 
  cursor:pointer;
}

Then add:

#main-nave li strong {
  cursor: default;
  background-position: 0 50px;
}

Advantages:
- no clickable link
- simpler CSS
- informs screen readers "you are here"
- works with text-only browsers

Cordially, David
--
delete from internet where user_agent="MSIE" and version < 8;