display:block + vertical-align:middle = geht nicht :(

Kaja · Post by **Kaja** » Sun 1. Oct 2006, 20:43

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

Post by **Oliver Georgi** » Mon 2. Oct 2006, 07:28

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

Kaja · Post by **Kaja** » Mon 2. Oct 2006, 10:15

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!

Klappstuhl28 · Post by **Klappstuhl28** » Mon 2. Oct 2006, 15:15

Vielleicht kannst du ja mit "line-height" etwas ausrichten.
Das funktioniert bei allen Elementen.

pico · Post by **pico** » Mon 2. Oct 2006, 16:42

... 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?

Kaja · Post by **Kaja** » Tue 3. Oct 2006, 10:12

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

Post by **Oliver Georgi** » Tue 3. Oct 2006, 10:24

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

Kaja · Post by **Kaja** » Thu 5. Oct 2006, 20:43

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

Vuk · Post by **Vuk** » Thu 19. Apr 2007, 13:11

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".

Jensensen · Post by **Jensensen** » Thu 19. Apr 2007, 13:20

div ul li {
float: left;
....
}
div ul li a {
display: block;
....
}

display:block + vertical-align:middle = geht nicht :(

display:block + vertical-align:middle = geht nicht :(

Danke

hmm

Vorläufige Lösung

ich ducke mich schon mal