...

View Full Version : Resolved Menu problems



Pirate Mike
10-31-2008, 04: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"><span>link1</span></a></li>
<li><a href="#"><span>link2</span></a></li>
<li><a href="#"><span>link3</span></a></li>
<li><a href="#"><span>link4</span></a></li>
</ul>
</body>
</html>

thanks,
Mike

effpeetee
10-31-2008, 04:35 PM
We really need ALL the code including the Doctype to help you properly.

Frank

Pirate Mike
10-31-2008, 04:37 PM
Sorry, thought i had copied it all..

Updated the original post...
Thanks,
Mike

effpeetee
10-31-2008, 05: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, 05: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, 05:12 PM
Or to remember the order easier

LoVe HAte

Pirate Mike
10-31-2008, 05: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, 05: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, 05: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, 06:26 PM
Page now brought up to date.

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

Frank



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum