homepage Welcome to WebmasterWorld Guest from 54.211.230.186
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
background images on rollover.
top and bottom of image gets cut-off
bb_paul

5+ Year Member



 
Msg#: 9219 posted 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

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 9219 posted 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

5+ Year Member



 
Msg#: 9219 posted 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

5+ Year Member



 
Msg#: 9219 posted 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

5+ Year Member



 
Msg#: 9219 posted 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

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 9219 posted 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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved