background images on rollover.

Forum Moderators: not2easy

Message Too Old, No Replies

background images on rollover.

top and bottom of image gets cut-off

bb_paul

2:45 pm on Jun 7, 2006 (gmt 0)

Hi,

I'm having a problem with displaying a rollover background image on a link.

The background image is aligned to top and center, however bottom of the image get cut-off all the time, and sides too if the link is a short word.

I'm presuming this is because the background image will only display on the size of the text-block that the a link is in.

I've tried altering line-height, normal height etc, but nothing will allow the full background-image to be displayed.

Help!

birdbrain

3:38 pm on Jun 7, 2006 (gmt 0)

Hi there bb_paul,

inline elements, of which 'a' is one, need to be set to display:block and given specific dimensions
to display a defined background-image. ;)

Here is a simple example to illustrate...


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><style type="text/css">
<!--
#link {
display:block;
width:109px;
height:56px;
background-image:url(http://showcase.netins.net/web/phdss/WebmasterWorldgfx/dlogo.png);
}
-->
</style>
</head>
<body>
<div>
<a id="link" href="http://www.webmasterworld.com"></a>
</div>
</body>
</html>

birdbrain

bb_paul

1:18 pm on Jun 8, 2006 (gmt 0)

hi, thanks for that - explained it a bit better.

however, display:block seems to make ie6 render every menu item (there's 5 of them on a horizontal menu) on it's own new line below the other. any ideas?

Don_Hoagie

1:46 pm on Jun 8, 2006 (gmt 0)

That is the nature of display: block. It carves out the entire width of the page for the height of the given element. An example of a natural display:block element is a heading (<h1>, <h2>, etc.)

You can combat this by using the float property for positioning. If you have a sequence of 5 links meant to be positioned next to eachother on a line, give them all the following attributes:

display: block;
float: left; (or right)
width: something;
height: something;

And of course, after that you will need to clear them... you might want to check out a tutorial on the display property and float property instead of asking specific questions... you might find it easier to get a grasp of the entire concept than to hear about it piecemeal.

bb_paul

3:12 pm on Jun 8, 2006 (gmt 0)

Many thanks.

I am already pretty well established with the float attribute as i use css-d to build all my sites.

I'll give this a try later or tomorrow. Cheers.

birdbrain

3:56 pm on Jun 8, 2006 (gmt 0)

Hi there bb_paul,

if you use the float:left rule you will not need the display:block rule...


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><style type="text/css">
<!--
.link {
float:left;
width:109px;
height:56px;
background-image:url(http://showcase.netins.net/web/phdss/WebmasterWorldgfx/dlogo.png);
}
-->
</style>
</head>
<body>
<div>
<a class="link" href="http://www.webmasterworld.com"></a>
<a class="link" href="http://www.webmasterworld.com"></a>
<a class="link" href="http://www.webmasterworld.com"></a>
<a class="link" href="http://www.webmasterworld.com"></a>
</div>
</body>
</html>

birdbrain