link-Element in Div ausrichten

[the_real_didi]

Ahoi zusammen,

ich habe ein Problem beim Ausrichten von Link-Elementen in einem Div.

von Typo3 wird für jeden Menüpunkt ein Div mit dem Link als Inhalt erstellt.
Hier ein Beispiel:

<div class="menu1-level1-no"><a href="index.php?id=2" onfocus="blurLink(this);">get it ...</a></div>

Ich zeige euch mal das Ergebnis und sage dann etwas dazu.


die rot umrahmten Elemente sind die Divs, die den link enthalten. das schwarz umrahmte ist der entsprechende link.

mein ziel ist nun den Linktext im Div vertikal zentriert anzuzeigen. Da vertical-align: middle; kein Ergebnis geliefert hat, wollte ich die Positionierung per padding und margin vornehmen. Padding-left für die links hat auch funktioniert aber bei padding-top wird zwar der link nach oben hin erweitert, allerdings nicht innerhalb des divs nach unten verschoben. (siehe schwarze Rahmen)

hier der CSS-Code

.menu1-level2-no {
    background-image: url(../Bilder/Template_Getaf_prod_28.jpg);
    background-repeat: no-repeat;
    height: 27px;
    width: 296px;
    border: 1px solid #ff0000;

}

.menu1-level2-act {
    background-image: url(../Bilder/Template_Getaf_prod_32.jpg);
    background-repeat: no-repeat;
    height: 27px;
    width: 296px;
}

.menu1-level2-no a {
    padding-left: 40px;
    padding-top: 10px;
    font-weight: bold;
    text-decoration: none;
    border: 1px solid #000000;
}

.menu1-level2-act a {
    padding-left: 40px;
    padding-top: 10px;
    font-weight: bold;
    text-decoration: none;
}

Bin im Moment echt ratlos, woran das liegt. Ich hoffe, ihr könnt mir da weiter helfen.

 

[Gackoo_duz]

AW: link-Element in Div ausrichten

Im Code steht
<div class="menu1-level1-no

in der CSS Sehe ich keinen Eintrag davon, ausser dem <a> Tag.

 

[the_real_didi]

AW: link-Element in Div ausrichten

ah, sorry, habe aus dem Seiten-Quelltext das falsche Element heraus gepickt.

<div class="menu1-level2-no"><a href="index.php?id=10" onfocus="blurLink(this);">Kontakt</a></div>

 

[Herr_D]

AW: link-Element in Div ausrichten

Das funzt nicht mit padding.. schon gar nicht im a-Tag, denn padding ist der Innenabstand... im Link ist nix mehr


dazu nimmst du besser line-height für den a (zur Not auch margin-top)

line-height: Zeilenhöhe: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets


und horizontale Zentrierung siehe meine Signatur...

 

[the_real_didi]

AW: link-Element in Div ausrichten

vielen Dank, line-height hat funktioniert.

gibt es eine möglichkeit den Bereich für den Link auf die Größe des Divs zu bringen, dass man auf den gesamten Bereich und nicht nur auf den Text klicken kann?

 

[leohh]

AW: link-Element in Div ausrichten

gibt es eine möglichkeit den Bereich für den Link auf die Größe des Divs zu bringen, dass man auf den gesamten Bereich und nicht nur auf den Text klicken kann?

display: block; fuer die Anker

 

[the_real_didi]

AW: link-Element in Div ausrichten

besten Dank. funktioniert.