Aktives Mitglied
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:
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
Bin im Moment echt ratlos, woran das liegt. Ich hoffe, ihr könnt mir da weiter helfen.
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:
Code:
<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
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.