Otiom: Höhe meines Anchor Element mit Background Img

Beitrag lesen

SELF-Forum

Höhe meines Anchor Element mit Background Img

Otiom
– Informationen zu den Bewertungsregeln

Hallo,

ich möchte eine 2zeilige Navigation bauen. jeder Navigationspunkt besteht aus einem linken Bild, dem Link mit einem Background Bild und einem rechtem Bild.

Ich habe nun das Problem, das die Bilder links und rechts des Links 24px gross sind. Das Bild für den Link Background wird aber nur mit einer Höhe von ca 20px dargestellt. Das Ergebnis sieht wie ein "Griff" aus.

Wer kann mich für dieses Problem erleuchten ?

Danke,
Kai

  
  
body  
{  
margin: 0;  
padding: 0;  
font-size: 100%;  
color: #000;  
background-color: #FFFFFF;  
display: block;  
}  
  
a:link  
{  
color: #036;  
}  
  
a:visited  
{  
color: #066;  
}  
  
a:hover ,a:active  
{  
color: #fff;  
background-color: #036;  
}  
  
img {  
  margin: 0px;  
  border: 0px;  
  height: auto;  
  width: auto;  
}  
  
#navigation2 a  
{  
background-image: url(SLN_center.gif);  
background-repeat: repeat-x;  
vertical-align: top;  
height: 24px;  
}  
  
.chosenTDLevel1 {  
background-image: url(FLN_active_center.gif) ;  
background-position:center center;  
background-repeat:repeat-x;  
vertical-align: top;  
}  
  
.unChosenOnLevel1 {  
background-image: url(FLN_inactive_center.gif);  
background-position:center center;  
background-repeat:repeat-x;  
vertical-align: top;  
height: 24px;  
}  
  
.chosenTDLevel2 {  
background-image: url(SLN_center.gif);  
background-repeat: repeat-x;  
vertical-align: top;  
height: 24px;  
}  
.unChosenTDLevel2 {  
background-image: url(SLN_center.gif);  
background-repeat: repeat-x;  
vertical-align: top;  
height: 24px;  
}  


  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html><head><title>NavTest</title>  
</head>  
  
<body>  
<div id="navigation1">  
<img src="FLN_active_left.gif"><a class="chosenTDLevel1" style="" href="#">Nav item 1</a><img src="FLN_active_right.gif">  
<img src="FLN_inactive_left.gif"><span class="text" ><a class="unChosenOnLevel1" href="#">Nav item 2</a></span ><img src="FLN_inactive_right.gif">  
<img src="FLN_inactive_left.gif"><a class="unChosenOnLevel1" href="#">Nav item 3</a><img src="FLN_inactive_right.gif">  
</div>  
<div id="navigation2">  
<img src="SLN_leftCorner.gif"><a href="#">Nav item 1</a><img src="SLN_Divider.gif"><a href="#">Nav item 2</a><img src="SLN_rightCorner.gif">  
  
</div>  
</body></html>
Beitrag melden
–
Informationen zu den Bewertungsregeln