• Locked
3 replies [Last post]
Sat, 2008-09-06 14:07
smeghead
Offline
newbie
Last seen: 14 years 22 weeks ago
Joined: 2008-09-06
Posts: 2
Points: 0

Hi, I'm having a bit of a problem with my navigation menu. I'm using one tiled background image for the

    and I would like to use another image for an
  • being hovered. However, the background image on the
  • only covers the text and not the entire height of the
      .

Can anyone suggest anything?
Thanks

#navigation ul {
        height: 36px;
        background-image: 
        url('images/menubg2.gif');
        background-repeat: repeat;
	color: #ffffff;
	font-size: small;
	font-family: verdana, arial, helvetica;
	margin-left: 20px;
	position: relative;
}
 
#navigation ul li:hover {
	background-image: 
        url('images/menubg.gif');
        background-repeat: repeat;
}

Top
Tags:
Sat, 2008-09-06 14:30
#1
wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 8 years 49 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

we generally ask for all

we generally ask for all your code...

you set the height of the ul but not the li?

Top
Sat, 2008-09-06 14:54
#2
smeghead
Offline
newbie
Last seen: 14 years 22 weeks ago
Joined: 2008-09-06
Posts: 2
Points: 0

Ok, sorry #navigation

Ok, sorry

#navigation {
	height: 36px;
	line-height: 36px;
}
 
#navigation a {
	text-decoration: none;
	color: #ffffff;
	font-weight: bold;
}
 
#navigation ul {
	background-image: 
	url('images/menubg2.gif');
	background-repeat: repeat
	height: 36px;
	color: #ffffff;
	font-size: small;
	font-family: verdana, arial, helvetica;
	margin-left: 20px;
	position: relative;
}
 
 
#navigation ul li {
	height: 36px;
	display: inline;
	list-style-type: none;
}
 
#navigation ul li:hover {
	background-image: 
	url('images/menubg.gif');
	background-repeat: repeat;
}
 
<div id="navigation">
   			<ul>
   				<li><a href="#">Home</a></li> |
   				<li><a href="#">News</a></li> |
   				<li><a href="#">Portfolio</a></li> |
   				<li><a href="#">About Us</a></li> |
   				<li><a href="#">Services</a></li> |
   				<li><a href="#">Contact Us</a></li>
   				</ul>
   			</div>

Top
Sat, 2008-09-06 17:03
#3
wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 8 years 49 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

ALL your code, but I can

ALL your code, but I can tell you that inline elements don't take a height - try line-height instead. Or, float the list items instead.

Top
  • Locked