Forum Moderators: not2easy
I'm trying to create a menu and I have the following html tags for it:
<img src="menu_background.png" class="menu1" border=0 alt=""> //an image for the menu links to sit on
<a href="home.html" class="menu">HOME</a></div> //first menu item
... //and so on with menu items
The problem that I have is while using the "menu" class in href tag.
I use the following css styles for the menu items:
a.menu {
position:fixed;
right:30%;
top:4%;
color:white;
text-decoration:none;
font-family:arial, helvetica;
font-weight:bold;
font-size:12px;
z-index:2;
}
a.menu:hover{
background-image:url('highlight.png');
opacity:0.9;filter:alpha(opacity=20);
background-repeat:no-repeat;
height: 4%;
z-index:1;
}
The problem that I face is in "a.menu:hover". The image that loads upon the "HOME" text does not position in the center no matter what I tried to do (I played a lot hover background with positioning). When I position the light-effect image upper, the "HOME" text goes up too. I want the "HOME" text to be in the center of the highligthing image that is displayed on mouseover.
Can anyone help?
Thanks,
Alex
Are you sure about that ?
it will not scroll with your page anymore ...
The easiest to do a menu is to start from
following html:
<ul class="menu">
<li><a href="#">item</a></li>
...
</ul>
The background image can be applied to the <ul>
and then you need to style the <li> and <a> to make your menu work, but ther's not enough info on how you want it to look ...
Here is the full code that works. Notice the list-style-type: none; on the menu class and different images bgd-off & bgd-on.gif for the mouse over effects.
<!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>Example/title>
<style type="text/css">
<!--
.menu
{
list-style-type: none;
}
.menu a{
background-attachment: fixed;
background-image: url(bgd-off.gif);
background-repeat: no-repeat;
background-position: left top;
}
.menu a:hover{
background-attachment: fixed;
background-image: url(bgd-on.gif);
background-repeat: no-repeat;
background-position: left top;
}
-->
</style>
</head>
<body>
<ul class="menu">
<li><a href="#">item</a></li>
<li><a href="#">item2</a></li>
</ul>
</body>
</html>
[w3.org...]
