✔ Background-Pfeil wandert aus dem Sichtbereich

[Cyberanton]

Hallo Forum,

mit diesem Problem schlage ich mich schon viele Stunden herum, und finde einfach keine Lösung. Über Hilfe würde ich mich wirklich sehr freuen.

Folgendes:
Ich möchte ein simples horizontales Menü machen. Damit der User sieht, wo er sich gerade befindet, soll auf dem aktiven Menülink von oben ein Pfeil zeigen.

Ich mache also folgendes:

HTML:
<div class="navi">
<ul>
<li><span><a href="#">Punkt1</span></a>
<li><a href="#">Punkt2</a>
</ul>
</div>

CSS:
.navi li {display:inline}
.navi a {font-family: arial; text-decoration:none;font-size:11px}
.navi span {background: url(pfeil.gif) top center no-repeat;}

Dies funktioniert prima, nur gibt es einen Schönheitsfehler: der Pfeil hat keinen Abstand zur Schrift und klebt förmlich auf dieser. Er müsste um 4 oder 5 Pixel nach oben wandern, damit es vernünftig aussieht.
Eigentlich kein grosses Ding, die Position des Pfeiles kann man schliesslich per CSS festlegen und z.B. prozentual nach oben verschieben. Und genau da liegt mein Problem:
verschiebe ich den Pfeil um 40% nach oben:

.navi2 span {background: url(pfeil.gif) 50% -40% no-repeat;}

wandert er aus dem Sichtbereich. Ab -50% ist er dann gar nicht mehr zu sehen.
Sämtliche Versuche, wie z.B. line-height Angaben im a, LI oder UL-Element bringen keinen Erfolg...

Anbei auch mal ein Screenshot, der dieses Problem verdeutlicht.
Danke schonmal im voraus für jede Hilfe!
Cyberanton

 

[Maik]

Hi und herzlich Willkommen im Forum

Zeichne mal die Links mit der float:left-Eigenschaft aus, dann nehmen sie auch eine line-height- oder height-Deklaration an, da sie somit als Inline-Element "Block-Level-Charakteristika" besitzen. Bei vertikal ausgerichteten Links wäre dies dann die display:block-Eigenschaft.

Dem aktiven Link übergibst du dann eine ID, um ihm das Hintergrundbild direkt zuzuordnen, also ohne das span-Element.

 

[Cyberanton]

Genial, es funktioniert! Vielen Dank!
Eine Frage noch, hat das floaten der Links einen Einfluss auf die weitere Seitenstruktur, sprich, muss ich das floaten wieder per clear löschen oder ist dies nicht notwendig?

Danke nochmal!!
Cyberanton

 

[Maik]

Freut mich, dass es auf Anhieb geklappt hat

Das kommt darauf an, ob das DIV .navi eine Höhenangabe besitzt, oder nicht.

Bei keiner festgelegten Höhe muss die Floatumgebung wieder aufgehoben werden.

Die in dem Artikel How To Clear Floats Without Structural Markup genannte Klasse .clearfix würde dann im ul-Listenelement aufgerufen werden.

 

[Cyberanton]

Bei keiner festgelegten Höhe muss die Floatumgebung wieder aufgehoben werden.

Hmm, also die Höhe von div.navi hat keine richtige height-Angabe, stattdessen 15px padding oben und unten, was ja im Endeffekt auch eine Höhe erzeugt. Meinst Du, ich müsste das clearen? Dieses floaten und clearen ist wirklich 'ne arg komplizierte (und oft auch unlogische) Sache, wie ich schon mehrfach feststellen musste. Da sehnt man sich wirklich nach dem unkomlizierten Tabellendesign der alten Tage zurück...

 

[Maik]

Mit der vertikalen padding-Deklaration wird zwar das dem DIV .navi nachfolgende Element darunter angeordnet, jedoch sein Inhalt rechts vom Menüpunkt Nr.2 ausgerichtet.

Entweder zeichnest du dieses Element mit clear:left aus, oder du wendest die empfohlene Technik auf das ul-Listenelement an.

 

[Cyberanton]

Du antwortest ja schneller als ich die Seite aktualisieren kann!
Vielen Dank für die schnelle Hilfe, Du hast mir wirklich geholfen!

 

[Maik]

Ja, das ist eben meine Art.

Und zum Glück sind hier im Forum keine Radarfallen aufgestellt, denn ansonsten wäre ich das eine oder andere Mal schon wegen Geschwindigkeitsüberschreitung geblitzt worden.