vertical-align in <div>

[Gina]

Hallo zusammen,

habe grad ein ähnliches Problem, wie Wolfgang. In einem Fenster ist links ein div-Container: 15% Breite, 580px Höhe, da die Angabe height:100% mir nicht das gewünschte Ergebnis bringt: der div-Container ist nicht annähernd 100% des Fensters hoch.

div.menu {  
	float:left;  
	width:15%;  
	min-height:580%;  
	background-color:#3F3F3F;  
	color:#FFFFFF;  
}  

In diesem Container möchte ich eine Aufzählliste(ein Menü) vertikal mittig ausgerichtet haben, etwa so:

<div class="menu">  
<ul class="mainmenu">  
		<li><h3><img class="icon" src="/icons/HomeFolderIcon.gif" alt="Homefolder">  
			<a href="../home.html" id="home">Home</a></h3><ul>  
  
			<li><a href="../aboutMe">  
				<img class="icon" src="/icons/GenericFolderIcon.gif" alt="&uuml;ber mich">&Uuml;ber mich</a></li>  
  
			<li>	<img class="icon" src="/icons/GenericFolderIcon.gif" alt="News"><em>News</em></li>  
			<li><a href="../gallery">  
				<img class="icon" src="/icons/GenericFolderIcon.gif" alt="Galerie">Galerie</a></li>  
			<li><a href="../links">  
				<img class="icon" src="/icons/GenericFolderIcon.gif" alt="Links">Links</a></li>  
			<li><a href="../thanks">  
				<img class="icon" src="/icons/GenericFolderIcon.gif" alt="Thanks">Danke</a></li>  
  
		</ul></li>  
</ul>  
</div>

Der zugehörige CSS-Schnipsel sähe dann folgendermassen aus:

ul.mainmenu {  
	position:fixed;  
	vertical-align:middle;  
}

Genau das vertical-align funktoniert so aber nicht. Warum?

Danke Euch Nachtschwärmern (so wie ich :-) ) schon mal im Vorraus

Gina

[Gina]

Hab den Titel des Thread geändert. Weil es genau die gleiche Fragestellung ist, wie die von Wolfgang, hab ich ihn ursprünglich gleich benannt. War wohl ein Fehler, weil keine reagiert hat.

Gruss
Gina

[Længlich]

Ola!

Zu Deinem Verständnisproblem: vertical-align funktioniert grundsätzlich nur innerhalb von Tabellenzellen, und um Inline-Elemente* relativ zueinander auszurichten. Für einzelne Elemente in Containern mit display:block ist es per definitionem wirkungslos.

Hab den Titel des Thread geändert. Weil es genau die gleiche Fragestellung ist, wie die von Wolfgang, hab ich ihn ursprünglich gleich benannt. War wohl ein Fehler, weil keine reagiert hat.

Wenn es exakt die gleiche Fragestellung ist, ist es fraglich, ob dazu überhaupt ein neuer Thread gebraucht wird. ;-)

Viele Grüße vom Længlich

* auch replaced inline, inline-block usw.

[Gina]

Hallo,

Zu Deinem Verständnisproblem: vertical-align funktioniert grundsätzlich nur innerhalb von Tabellenzellen, und um Inline-Elemente* relativ zueinander auszurichten. Für einzelne Elemente in Containern mit display:block ist es per definitionem wirkungslos.

danke Dir für die Antwort. hilft mir bei der Lösung direkt nicht, aber jetzt bin ich etwas schlauer und kann das Verhalten des vertical-align wenigstens verstehen.

Liebe Grüsse
Gina

[Længlich]

Szervusz!

danke Dir für die Antwort. hilft mir bei der Lösung direkt nicht, aber jetzt bin ich etwas schlauer und kann das Verhalten des vertical-align wenigstens verstehen.

Hey, nach langer Zeit habe ich doch noch eine Idee: Für die meisten Browser sollte es funktionieren, wenn Du dem umliegenden div display:table-cell gibst (dann wirkt vertical-align ja per definitionem). Übrig bleiben IE6 und 7. Für die bleibt wohl nur der altbewährte Trick mit top:50% und einer negativen margin. Da die Höhe des inneren Elements nicht bekannt ist, muß sie wohl als Expression angegeben werden.

Nicht getestet; ich hoffe, es bringt Dich trotzdem weiter.

Viele Grüße vom Længlich