Resolved Menu problems [Archive]

...

View Full Version : Resolved Menu problems

Pirate Mike

10-31-2008, 03:33 PM

hi all,

I have made this menu using css code, but only one of the images that is meant to be displayed is showing. Anyone got any idea's what up with it??

css:
.menu{margin:0; padding:0; width:200px; list-style:none;background:rgb(255,255,255);}
.menu li{padding:0; margin:0 0 1px 0; height:40px; display:block; }
.menu li a{text-align:left;height:40px; padding:0px 25px; font:16px Verdana, Arial, Helvetica, sans-serif; color:rgb(255,255,255); display:block; background:url('menu1.png') 0px 0px no-repeat; text-decoration:none;}
.menu li a:hover{background:url('menu2.png') 0px -40px no-repeat; color:rgb(0,0,0);}
.menu li a.active, .menu li a.active:hover{background:url('menu3.png') 0px -80px no-repeat; color:rgb(255,255,255);}
.menu li a span{line-height:40px;}

html:

<!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" />
<title>Untitled Document</title>
<link href="menu.css" rel="stylesheet" type="text/css" />
</head>

<body>
<ul class="menu">
<li><a href="#" class="active">link1</a></li>
<li><a href="#">link2</a></li>
<li><a href="#">link3</a></li>
<li><a href="#">link4</a></li>
</ul>
</body>
</html>

thanks,
Mike

effpeetee

10-31-2008, 03:35 PM

We really need ALL the code including the Doctype to help you properly.

Frank

Pirate Mike

10-31-2008, 03:37 PM

Sorry, thought i had copied it all..

Updated the original post...
Thanks,
Mike

effpeetee

10-31-2008, 04:03 PM

Have a look at this. (http://exitfegs.co.uk/Fritest.html) I have assembled it and provided the pngs, and it appears to work

Frank

abduraooft

10-31-2008, 04:09 PM

Not sure, but have a look at http://www.w3schools.com/CSS/css_pseudo_classes.asp

There is an order to apply the pseudo elements, Link, Visited, Hover, Active. You may combine them like
a:link,a:visited{
}

a:hover,a.active{
}
Can we have a link to your page(as we don't have the exact images at your end)?

_Aerospace_Eng_

10-31-2008, 04:12 PM

Or to remember the order easier

LoVe HAte

Pirate Mike

10-31-2008, 04:13 PM

Its missing the top image.

This is the result i get when i try...

Site (http://www.phoenixarcheresu.co.uk/new/index.asp)

Thanks,
Mike

abduraooft

10-31-2008, 04:22 PM

background:url('menu2.png') 0px -40px no-repeat; Remove that -40px part.

PS: I think you'd need to combine your menu1.png and menu2.png vertically and then apply the same image on both cases, but a different y-position for one of them. This will solve the flickering issue in some browsers.

Pirate Mike

10-31-2008, 04:35 PM

Thanks!
I saw what i did now, they all needed to be one image not separate.

Thanks everyone for your help!

Mike

effpeetee

10-31-2008, 05:26 PM

Page now brought up to date.

Here. (http://exitfegs.co.uk/Fritest.html)

Frank