PDA

Click to See Complete Forum and Search --> : Horizontal Css Menu question

MrMJS
08-14-2008, 08:48 AM
I am using background image on my rollovers, but I am unsure how to control different widths for each link on rollover. as you can see from test page the hover backgrounds not looking right.

here is test link --> http://mrmjs.com/help/index.html

here is test code...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="verify-v1" content="gwnPOyDAuHXQBI6dQ6Jy7ijsYXkfbzPBcXs3wOkxIU8=" />
<title>test</title>

<style type="text/css">
<!--
body {
background-color: #333333;
}
#wrapper {
width: 780px;
margin-right: auto;
margin-left: auto;
}


#header {
height: 300px;
background-color: #FFFFFF;
background-image: url(menu-bg.jpg);
background-repeat: no-repeat;
}

#menu {
height: 44px;
width: 315px;
margin-left: 468px;
padding: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}

#menu ul {
list-style-type: none;
padding: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
#menu li {
display: inline;
padding: 0px;
margin-top: 0px;
margin-bottom: 0px;
}
#menu a:link, a:visited {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFFFFF;
text-decoration: none;
font-weight: bold;
line-height: 44px;
padding-top: 15px;
padding-right: 8px;
padding-bottom: 15px;
padding-left: 8px;
margin: 0px;
}
#menu a:hover {
color: #FFFFFF;
font-weight: bold;
line-height: 44px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
background-image: url(menu-rollover.jpg);
background-repeat: repeat-x;
}


.breadcrumb {
font-weight: bold;
color: #F8EB3A;
margin-left: 8px;
margin-right: 8px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 44px;
margin-top: 15px;
margin-bottom: 15px;
}
-->
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="menu">
<ul>
<li class="breadcrumb">Home</li>
<li><a href="#">Other--Link</a></li>
<li><a href="#">Link #3</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
dtm32236
08-14-2008, 10:59 AM
put the files in a zip and attach them - i'll play around with this for you.

for now, let me suggest adding display:block to #menu a:link, a:visited
or removing the background-image: url(menu-rollover.jpg); from your a:hover class, creating a #menu li:hover and putting it in there...

I don't know if any of those suggestions will work - but it's worth a try
MrMJS
08-14-2008, 11:52 AM
Here is the background for menu --> http://mrmjs.com/help/menu-bg.jpg

and here is the rollover image --> http://mrmjs.com/help/menu-rollover.jpg

I tried as you said and it didnt seem to do the trick
Coyotelab
08-15-2008, 05:03 AM
You are using fixed size Background for liquid menu...
make your Background liquid or create separate id for each menu.
Centauri
08-15-2008, 11:22 AM
You would be better off here using a repeated background image (like your rollover) as the background of your #menu div, and making the vertical lines with a left border on the <li>s - then you don't have to worry about exact widths, and it will scale with text size and content.