Vertical-align funkt nicht!

Flow09 · 11.07.2003, 11:26

Grüße!

Ich hab ein Problem mit vertical-align ! Irgendwie wird mir der Text einfach nicht mittig angezeigt (werder IE6 noch NN7 und Opera7)! Was mach ich hier falsch??
Erstmal der Code:
CSS:

Code:

#plakatContainerUnten {
	background-color: #D3EAF7;
	padding: 0px;
	margin: 0px;
	height: 75px;
	vertical-align: middle;
	}
	
#plakatUntenText {
	font-family: arial, helvetica, sans-serif;
	font-size: 20px;
	font-weight: bold;
	color: #3366CC;
	vertical-align:middle;
	}

XHTML

Code:

<div id="plakatContainerUnten">
<div id="plakatUntenText">				
Ihr VorsorgeExperte
</div>
</div>

Der Text wird mir am oberen Rand angezigt obwohl ich ich jetz schon in beiden id's vertical-align: middle; angegeben habe! Er sollte doch eigentlich vertikal mittig angezigt werden, oder??

lg
Flow

prefix · 11.07.2003, 11:38

schon mal den entsprechenden part in der spezifikation durchgearbeitet?

LANtastic · 11.07.2003, 11:43

@Prefix : Zu welchem Ergebnis kommst du denn, wenn du das durchliest ?

prefix · 11.07.2003, 11:45

noch zu keinem, weil ich zzt. grad an einem anderen problem arbeite

Flow09 · 11.07.2003, 11:48

Ich komm auch auf kein wirklich brauchbares Ergebnis!
Sprich ich werd' da nicht wirklich schlau draus!
Hilfeeeeeeeeeee!!

lg
Flow

prefix · 11.07.2003, 12:16

so, jetzt hab ich mich mal damit beschäftigt: hier die lösung

gem. der css2-spezifikation bin ich wie folgt vorgegangen:

1. ich hab folgendes mal aufmerksam gelesen:

Zitat:

Beachten Sie, dass ersetzte Elemente eine 'font-size'- und eine 'line-height'-Eigenschaft haben, selbst wenn sie nicht direkt verwendet werden, um die Höhe der Box zu ermitteln. Die 'font-size' wird jedoch verwendet, um die Einheiten 'em' und 'ex' zu definieren, und die 'line-height'-Eigenschaft spielt eine Rolle in der 'vertical-align'-Eigenschaft.

2. ich hab folgenden code erstellt (zur visualisierung mit zusätzlichen farben):

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Unbenanntes Dokument</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#plakatContainerUnten {
	background-color: #D3EAF7;
	padding: 0px;
	margin: 0px;
	height: 75px;
	/*vertical-align: middle;*/
	}
	
#plakatUntenText {
	font-family: arial, helvetica, sans-serif;
	font-size: 20px;
	font-weight: bold;
	color: #3366CC;
	background-color: yellow;
	height: 75px;
	vertical-align:middle;
	line-height: 75px;
	/*text-align: center;*/
	}
</style>
</head>

<body>
<div id="plakatContainerUnten">
	<div id="plakatUntenText">				
		Ihr VorsorgeExperte
	</div>
</div>

</body>
</html>

3. hab es in ie6 und moz/fb 0.6 getestet - funktioniert

ausschlaggebend war also, dass man dem mit "vertical-align: middle" zu positionierendem element eine line-heigt in höhe der box (hier 75px) gibt!

Flow09 · 11.07.2003, 12:19

Du bist der Meister!

Danke Dir!

lg
Flow

prefix · 11.07.2003, 12:21

nein, der meister ist LANtastic *lol* - der wird schon noch seinen "senf" (= nähere erklärungen) dazugeben - wart nur ab *hehe*

deswegen ist es auch wichtig, dass LANtastic in kassel dabei ist -hörst du, lc??!!

LANtastic · 11.07.2003, 13:26

Warum soltle ich meinen Senf dazu abgeben ?
Haste fein gemacht

Kassel, ja ja, ich weiß,
muß mich nur endlich mal entscheiden und zusehen, daß ich in die Pötte komme.

prefix · 11.07.2003, 13:28

ui, dieses lob von dir beschwingt mich wieder das wochenende lang *lol* :-)

so, jetzt ab in den garten und lesen...

LANtastic · 11.07.2003, 13:35

Ja, ich bitte drum

Den Artikel bitte !

Muß den endlich mal fertig kriegen.

Bin am Wochenende wieder in Düsseldorf. Also entweder per email an die gmx.de Adresse, oder die gmx.net