Tue, 2010-08-17 08:46
Hey guys, I only started using css today. I'm re-coding my html website into css.
So far so good, but i've ran into a problem.
I found a guide how to create a mouseover navigational menu. I've got it working but it uses "span" as a clickable link. However i can't format each span seperately so when hovering over the image the background image isn't inline for each thing...
It's hard to explain so i'll just show you
If you navigate to the page below and hover over the nav buttons, you can see that they're not inline. I know why - because there is only one defining property for all of them, but theyre different lengths. But i don't know how to fix it.
And here is the html and css.
.cssnav {
position:relative;
font-family: "arial",sans-serif;
background-image: url(images/navover.png);
background-repeat: no-repeat;
display: block;
left: 224px;
float: left;
width: 70px;
height: 55px;
margin: 0;
margin-bottom:0px;
padding: 0;
}
.cssnav a {
display:block;
font-size: 0.85em;
width: 70px;
height: 55px;
float: left;
margin: 0;
padding: 0;
color: #c9c9c9; text-decoration: none;
}
.cssnav img {width: 100%; height: 100%; border: 0; }
* html a:hover {visibility:visible}
.cssnav a:hover img{visibility:hidden}
.cssnav span {
position:absolute;
left:12px;
top:24px;
margin:0;
cursor: pointer;
}
HomeHope you can help.
Regards
