Link Hover with Image

teammatt3 posted this at 00:09 — 1st June 2006.

Joined: Sep 2003

I am having a little trouble working this out. When someone hovers over a link, I want a little red arrow to point at it. I want the little red arrow to be aligned with the red top border. I can't get the arrow to be at the top. It just goes where the link is. I tried using all types of margins and paddings but I can't get it. Come see what I mean http://tidget.com/farmers/header.php

The css looks like

#navigation {
height:29px;
width:536px;
background-color:#134C6F;
float:right;
border-top:1px solid #D9012B;
}

#navigation ul {
margin-top:0px;
padding-top:0px;
}

#navigation li {
float:left;
list-style-type:none;
margin-right:10px;
padding-top:5px;


}


#navigation a:link {
font-size:14px;
font-weight:bold;
color:#ffffff;
text-decoration:none;

}

#navigation a:visited {
font-size:14px;
font-weight:bold;
color:#ffffff;
text-decoration:none;

}

#navigation a:hover {
font-size:14px;
font-weight:bold;
color:#ffffff;
background: url( 'hover.gif' );
background-repeat:no-repeat;
background-position:top;
text-decoration:none;

}

teammatt3 posted this at 00:18 — 1st June 2006.

He has: 2,102 posts

Joined: Sep 2003

I swear I spend 30 minutes trying to figure it out and then I post, after I post, I figure it out. Go figure.

What I did was change the hover image to make it 29px tall, then I changed the css to look like

#navigation {
height:29px;
width:536px;
background-color:#134C6F;
float:right;
border-top:1px solid #D9012B;

}

#navigation ul {
margin:0px;
padding:0px;
}

#navigation li {
float:left;
list-style-type:none;
margin:0px;
padding:0px;


}


#navigation a:link {
display:block;
height:29px;
font-size:14px;
font-weight:bold;
color:#ffffff;
text-decoration:none;
padding-top:5px;
float:left;
margin-bottom:-10px;
}

#navigation a:visited {
display:block;
height:29px;
font-size:14px;
font-weight:bold;
color:#ffffff;
text-decoration:none;
padding-top:5px;
float:left;
margin-bottom:-10px;

}

#navigation a:hover {
display:block;
height:29px;
font-size:14px;
font-weight:bold;
color:#ffffff;
background: url( 'hover.gif' );
background-repeat:no-repeat;
background-position:top;
text-decoration:none;
padding-top:5px;
float:left;
margin-bottom:-10px;
}