Page 1 of 1
display:block + vertical-align:middle = geht nicht :(
Posted: Sun 1. Oct 2006, 20:43
by Kaja
Hallo Leute,
ich hab als Navi {NAV_LIST_UL} gewählt und bin sehr zufrieden damit. Mein einziges Problem ist noch, dass ich die Menüpunkte nicht vertikal ausrichten kann. Das liegt daran, dass ich display:block verwende. Das brauch ich aber, weil sonst der a:hover nicht über das ganze Feld funzt.
Hier mein html Quellcode:
Code: Select all
<div>
<ul>
<li><a href="index.php?id=1,0,0,1,0,0">punkt1</a></li>
<li><a href="index.php?id=2,0,0,1,0,0">punkt2</a></li>
<li><a href="index.php?id=3,0,0,1,0,0">punkt3</a></li>
<li><a href="index.php?id=4,0,0,1,0,0">punkt4</a></li>
</ul>
</div>
und das dazugehörige CSS:
Code: Select all
body, div ul {
margin: 0;
padding: 0;
}
div ul{
background-color: #cccccc;
}
a:hover{
background-color: #aaa;
}
div {
width: 120px;
}
div ul li a,
div ul li a{
display: block;
margin: 0;
padding: 0 30px 0 0;
text-decoration: none;
text-align:right;
height: 31px;
vertical-align: top;
}
Kennt jemand einen Trick, wie ich das ganze ausrichten könnte?
Danke!
schöne Grüße Kaja
Posted: Mon 2. Oct 2006, 07:28
by Oliver Georgi
Naja, das liegt nicht daran. Das mit dem Middle ist so ein Problem. Habe selber auch keine Lösung dafür. Das ist leider eine große Schwäche von CSS. Da hilft nur Trial and Error. Du musst mit entsprechenden Paddings für das "a" arbeiten. Also z.B. "padding-top: 3px;"
Es gibt sicher noch Möglichkeiten mit realtiven Positionierungen - aber....
Oliver
Danke
Posted: Mon 2. Oct 2006, 10:15
by Kaja
Ok, an das hab ich auch gedacht, allerdings wollt ich eine nettere Lösung finden, aber wenns nichts anders gibt, dann muss ich es so machen! Danke!
Posted: Mon 2. Oct 2006, 15:15
by Klappstuhl28
Vielleicht kannst du ja mit "line-height" etwas ausrichten.
Das funktioniert bei allen Elementen.
Posted: Mon 2. Oct 2006, 16:42
by pico
... und ob das so gewollt ist ? 2 mal die selbe Klasse - schadet zwar nix - nützt aber auch nix
div ul li a,
div ul li a{
display: block;
....
hast Du mal versucht das vertical-align in die 'div ul li {...' einzubauen?
hmm
Posted: Tue 3. Oct 2006, 10:12
by Kaja
danke für eure Tipps, padding-top und line heigth wären schon gute Lösungen, allerdings hab ich ein paar Menüpunkte, die 2 Zeilen beanspruchen und da wäre natürlich v-align toll. Aber da muss ich mir irgendwas einfallen lassen.
Das doppelte "div ul li a" war natürlich nicht Absicht und das "vertical-align: top" auch nicht - hab da rumprobiert, ob es mit bottom und so auch funzt....ihr kennt das ja.
schöne Grüße Kaja
Posted: Tue 3. Oct 2006, 10:24
by Oliver Georgi
Hat mir keine Ruhe gelassen - leider scheint folgende Lösung ausschließlich für einzeilige Texte zu funktionieren:
Code: Select all
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<style type="text/css">
a {
width: 200px;
border: 0;
margin: 0;
padding: 0;
background-color: Gray;
color: #FFFFFF;
display: block;
height: 50px;
line-height: 50px;
vertical-align: middle;
text-align: center;
}
</style>
</head>
<body>
<a href="#">Das ist mein Text</a>
<br />
<a href="#">Das ist mein Text, der umbrechen sollte</a>
</body>
</html>
Oliver
Vorläufige Lösung
Posted: Thu 5. Oct 2006, 20:43
by Kaja
Für alle die in Zukunft das gleiche Problem haben:
Ich hab das ganze nun mit Line-height gelöst. Die zweizeiligen Menüpunkte habe ich dann individuell angepasst, da durch {NAV_LIST_UL} ja auch die einzelnen Punkte mit IDs ausgestattet werden. Ist vielleicht blöd, wenn ein "Unwissender" einen 2-zeiligen Menüpunkt hinzufügt, aber momentan gehts nicht anders...Aber es geht schon mal. Vielleicht funzt vertical-align:middle; irgendwann mal
bye
ich ducke mich schon mal
Posted: Thu 19. Apr 2007, 13:11
by Vuk
Eine nicht unbedingt schöne, aber eine Möglichkeit die funktioniert, wäre natürlich das zu vertical-alignende ein eine Tabelle zu packen. Auf die(se eine) Zelle dieser Tabelle kann man dann nämlich vertical-align anwenden.
Da werden jetzt einige böse werden, bei solch widerwärtigem Vertabellieren der schönen CSS, aber ich hab es mal ausprobiert um eine mal einzeilige, mal zweizeilige NAV_ROW auf den Boden ihrer Box zu zwingen und es funktioniert in Firefox (Mac/PC), IE (6/7) und Safari, ohne dass der Browser explodiert.
-- Nachtrag:
Hm bin ja RTmässig im ganz falschen Film... hier geht's ja um NAV_LIST_UL. Man sehe das obige nicht im Zusammenhang mit NAV_LIST_UL sondern allgemein als "in einem Block geht vertical-align nicht".
Posted: Thu 19. Apr 2007, 13:20
by Jensensen
div ul li {
float: left;
....
}
div ul li a {
display: block;
....
}