Text tiefer stellen

[thorge]

Halli Hallo,

bastel immer noch an meinem ersten kompletten div Template. Funktion inzwischen auch alles denke ich, außer das hier.

Man sieht dort folgenden Code:

<div id="containerNavi" style="width:181px; margin-left:29px;">
    <div id="naviEintrag" style="background-image:url(Bilder/gesliced4_21.png); background-position:top; background-repeat:no-repeat; width:181px; min-height:26px;"><a style="margin-left:50px;">pass noch nicht</a></div>
    <div id="naviEintrag" style="background-image:url(Bilder/gesliced4_21.png); width:181px; height:26px; "><a style="margin-left:50px; ">pass noch nicht</a></div>
    <div id="naviEnde" style="background-image:url(Bilder/gesliced4_22.png); width:181px; height:34px; "> </div>
</div>

Aber der Text steh ja leider viel zu hoch. Beim Suchen und auch bei sämtlichen Versuchen selber eine Lösung zu finden kam nicht das gewünschte ergebnis bei.

<div id="containerNavi" style="width:181px; margin-left:29px;">
    <div id="naviEintrag" style="background-image:url(Bilder/gesliced4_21.png); background-position:top; background-repeat:no-repeat; width:181px; min-height:26px; padding-top:5px;"><a style="margin-left:50px;">passt fast</a></div>
    <div id="naviEintrag" style="background-image:url(Bilder/gesliced4_21.png); width:181px; height:26px; "><a style="margin-left:50px; ">pass noch nicht</a></div>
    <div id="naviEnde" style="background-image:url(Bilder/gesliced4_22.png); width:181px; height:34px; "> </div>
</div>

Kann mir einer weiterhelfen? Wäre sehr nett.


Gruß Thorge

 

[anna55]

Wie soll's denn werden?

 <div id="naviEintrag" 
style="background-image:url(Bilder/gesliced4_21.png); no-repeat 100%; 
width:181px; height:23px; padding-top:5px;">
<a style="margin-left:50px;">passt vielleicht</a></div>

So vielleicht?

Gruß Anna

 

[planet4]

Hallo thorge,

das a-tag ist ein inline-Element, gib ihm jeweils ein "display: block" und den navi-divs ein "overflow: hidden", damit sie die a-tags auch wirklich einschließen, dann die a-tags mit ungefähr margin-top: 4px oder so verschieben

planet4.

 

[thorge]

Hallo ihr ZWO.

Danke für die Antworten.
Also Anna's Vorschlag funktioniert bestens.
Was bedeuten denn die 100% in dem Zusammenhang?

Welcher Ansatz ist nun sauberer wenn man möchte das es bei allen Browsern ohne Probs funktioniert.

 

[anna55]

Was bedeuten denn die 100% in dem Zusammenhang?

SELFHTML: Stylesheets / CSS-Eigenschaften / Hintergrundfarben und -bilder Siehe Punkt: Beachten Sie.

Welcher Ansatz ist nun sauberer wenn man möchte das es bei allen Browsern ohne Probs funktioniert.

Ich gehe davon aus, dass beides crossbrowserfähig ist. Deutlich mehr Ahnung von der Materie hat planet4.

Gruß Anna

 

[planet4]

Deutlich mehr Ahnung von der Materie hat planet4.

...ach, sag sowas nicht ...
ich weiß nicht, warum der Link an der richtigen Stelle sitzt, wenn du den Hintergrund anders positionierst...
wenn's klappt, mach's einfach so
du müsstest aber das hier
background-image:url(Bilder/gesliced4_21.png); no-repeat 100%;
so schreiben:
background: url(Bilder/gesliced4_21.png) no-repeat 100%;

[und eine id sollte eigentlich immer nur 1x vergeben werden]

schöne Grüße
planet4.

 

[thorge]

Danke für die Infos,

abe es aber mit nun mit dem Hidden gelöst, ist sauberer finde ich. Bzw. ich verstehe ohne Probleme wie es funktioniert.

Auf die richtige Benutzung von ids und classes habe ich nicht geachtet, weil es nur ein Test war. In einer Richtigen Seite würde ich ids natürlich immer nur einmal verwenden.

nochmals Danke

Gruß Thorge