Otiom: Höhe meines Anchor Element mit Background Img

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

  1. Höhe meines Anchor Element mit Background Img

    suit Homepage des Autors
    – Informationen zu den Bewertungsregeln

    ehrlichgesagt möchte ich mir deine code garnicht ansehen, aber ggf hilft dir das hier als anreiz weiter
    sliding doors

    dein aktueller code ist eher weniger optimal - wenn du etwas testen willst, ist ordentlicher code sicher besser geeignet

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

  2. Höhe meines Anchor Element mit Background Img

    Auge
    – Informationen zu den Bewertungsregeln

    Hallo

    body

    {
    ...
    display: block;
    }

    [code lang=html]<body>

      

> #navigation2 a  
> {  
> background-image: url(SLN\_center.gif);  
> background-repeat: repeat-x;  
> vertical-align: top;  
> height: 24px;  
> }[/code]  
  
Darum geht's? `<a>`{:.language-html} ist ein Inlineelement und Inlineelementen kann keine Höhe zugewiesen werden. Du kannst die Links per `display:block;`{:.language-css} als Blockelemente deklarieren, hast dann aber in deiner HTML-Struktur Probleme mit den Bildern (die müsste also überarbeitet werden) oder du probierst mit der `line-height`{:.language-css} für den Inhalt der Links herum, um über den Inhalt eine Höhe für die Links zu erzwingen.  
  
Tschö, Auge  

-- 
Die deutschen Interessen werden am Liechtenstein verteidigt.  
  
[Veranstaltungsdatenbank Vdb 0.2](http://termindbase.auge8472.de/)
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

  3. Höhe meines Anchor Element mit Background Img

    Boomer
    – Informationen zu den Bewertungsregeln

    Hallo,

    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.

    Hintergrundbilder füllen nur den Bereich aus, der zur Verfügung gestellt wird. Mit anderen Worten: Ein Hintergrundbild dehnt den Vordergrund nicht aus.

    Wenn du 24 px darstellen willst, sorge dafür, dass das Element 24 px hoch ist.

    Boomer

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln