Hallo,
i checked already this forum for a smilar problem but it looks to be very rare one(cannot understand)
I want to have a simple background image change with the hover attr. on my textlink. The point is that the image is a kind of button and will only showed in the behind the text.
My style sheet:
#menu {
list-style-type: none;
margin:0;
padding:0;
height:32px;
}
#menu li {
display:inline;
font:bold 12px/22px Arial, Helvetica, sans-serif;
margin:0;
}
#menu li a {
color: #CCCCCC;
text-decoration: none;
background-image: url(Images/menu/button.gif);
}
#menu li a:hover {
color: #FFFFFF;
text-decoration: none;
background-image: url(Images/menu/over.gif);
and my menu:
<ul id="menu">
<?php do {
$linkvar = "/".$row_buttons['link']; ?>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"<?php echo $linkvar; ?>"><?php echo $row_buttons['label']; ?></a></li>
<?php } while ($row_buttons = mysql_fetch_assoc($buttons)); ?>
</ul>that should work... perhaps you should hold the mouse for a few seconds to make sure its not a issue of it still being Download ed?Hallo Sam,
the images are visible and they also change while the mouseOver, but only behind the text and not arround (only a part).Not quite sure what you mean, but is this what you're after?Guess what I forgot?
This is a nice trick (the double image)...
but i need to use "display:inline" because it is a horizontal navi-bar.
Is there a way ?
I think i have to use the javascript way...You can just set the links to float:left. That way they will all stack up next to each other. Remember to use clear:both; on the element that come's next in the sourse though.
JavaScript has no use where layout is concerned.My biggest mistake was that placed the dimensions in list tag and ont the link tag. Now it works perfect thanks!Happy to help.
i checked already this forum for a smilar problem but it looks to be very rare one(cannot understand)
I want to have a simple background image change with the hover attr. on my textlink. The point is that the image is a kind of button and will only showed in the behind the text.
My style sheet:
#menu {
list-style-type: none;
margin:0;
padding:0;
height:32px;
}
#menu li {
display:inline;
font:bold 12px/22px Arial, Helvetica, sans-serif;
margin:0;
}
#menu li a {
color: #CCCCCC;
text-decoration: none;
background-image: url(Images/menu/button.gif);
}
#menu li a:hover {
color: #FFFFFF;
text-decoration: none;
background-image: url(Images/menu/over.gif);
and my menu:
<ul id="menu">
<?php do {
$linkvar = "/".$row_buttons['link']; ?>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"<?php echo $linkvar; ?>"><?php echo $row_buttons['label']; ?></a></li>
<?php } while ($row_buttons = mysql_fetch_assoc($buttons)); ?>
</ul>that should work... perhaps you should hold the mouse for a few seconds to make sure its not a issue of it still being Download ed?Hallo Sam,
the images are visible and they also change while the mouseOver, but only behind the text and not arround (only a part).Not quite sure what you mean, but is this what you're after?Guess what I forgot?
This is a nice trick (the double image)...but i need to use "display:inline" because it is a horizontal navi-bar.
Is there a way ?
I think i have to use the javascript way...You can just set the links to float:left. That way they will all stack up next to each other. Remember to use clear:both; on the element that come's next in the sourse though.
JavaScript has no use where layout is concerned.My biggest mistake was that placed the dimensions in list tag and ont the link tag. Now it works perfect thanks!Happy to help.