Forum Moderators: not2easy
I'm attemting to create an effect using CSS for a couple of hour now without success. I searched google and found some parts of the solution, but i'm still not able to get it to work fine.
I have a couple of links in an unordered list like this :
Text before the ul.
<ul>
<li><a href="/">Link 1</a></li>
<li><a href="/">Link 2</a></li>
</ul>
What I want to do is :
1 - Have the link side by side (display: inline;)
2 - Have a background image when the <a> is hovered by the mouse.
For item 2, I need to add "display: block; width: 71px, height: 39px" on the <a> so the background image is completely displayed. However, I can't have them side by side, because display:inline and display:block can't be used together.
I have tried "display: inline-block", but it doesn't work, the width and height are ignored in this display mode.
Can someone help me with this or give me an hint?
Thanks in advance.
Mathieu Pagé
li.classname:hover {background-image: url ("yourimage.jpg");}
then you wouldn't have to worry about th display: block; attribute.
However, the hover on a li element is not supported by IE. There is easily accessible script floating around out there to force IE to support this that you can find by googling "csshover."
Hope that helps.
Working sample below that used plain text for the actual link (= good) and images ONLY for the backgrounds. Note this only requires two tiny images, tiled - not one for each nav. Important to note: remove ALL white space between <li></li>, added returns here only for formatting on this board.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<!-- doctype all on one line -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>inline LI navigation</title>
<style type="text/css">
#top_nav * { margin: 0; padding:0; }
#top_nav {
margin: 1px auto;
font-family:Verdana, sans-serif;
font-size: 11px;
font-weight: 900;
text-align: center;
white-space: nowrap;
min-width: 820px;
}
#top_nav ul {
overflow:hidden;
width: 45em;
padding-left: 4em;
margin:auto; text-align:center;
}
#top_nav li {
float:left;
text-align: center;
list-style: none;
}
#top_nav a {
background:url(images/nav-bg.gif) bottom repeat-x;
padding: 0 4px 0 4px;
display: block;
line-height:1.6em;
height:1.6em;
font-weight:700;
text-decoration: none;
}
#top_nav a:link { color: #204C47; }
#top_nav a:visited { color: #204C47; }
#top_nav a:active { color: #FF0000; }
#top_nav a:hover { color: #132882; background:url(images/nav-over.gif) bottom repeat-x; }
</style>
</head>
<body>
<div id="top_nav">
<!-- NO WHITE SPACE BETWEEN LI'S! -->
<ul><li><a id="about_link" href="/about.shtml">About</a></li>
<li><a id="join_link" href="join.shtml">Join</a></li>
<li><a id="contact_link" href="contact.shtml">Contact Us</a></li></ul>
</div>
</body>
</html>
See here: [webmasterworld.com...]
But you can also float a block to get them on one line.
Hovering: select it as
a:hover{background-image:url("example.gif")}
I'm a bit late, but i'd like to thanks all three of you for your answers. Handlebar's answer while not exactly what I needed, putted me on the right track and I managed to get the effect I was looking for.
Thanks again.
