nicht angemeldet
vertical-align und float
Hallo!
Dieses Problem kommt mir immer wieder unter, aber ich kriege es bislang (ohne Tabellen - nur mit CSS) einfach nicht hin: Ich habe links eine Grafik, die rechts von Fließtext umflossen, welcher wiederum vertikal zentriert dargestellet werden soll. Also so soll es am Ende aussehen:
--------
|******|
|******|
|******| text text text text text
|******| text text text
|******|
|******|
--------
Der pure HTML-Code sieht bislang in etwa so aus:
<div>
<img id="bild" src="quelle.jpg">
<span id="text"> text text text text text text text text text text text text text text text text text text text text text text text text text text
</span>
</div>
Nur wie formatiere ich die Elemente? Intutiv würde ich sagen so:
#bild {
float:left;
vertical-align:bottom;
}
#text {
vertical-align:middle;
}
Aber das funzt nicht. Die Angabe vertical-align scheint vollständig ignoriert zu werden. Das Beispiel aus SelfHTML bezieht sich auf eine Tabellenzeile. Wahrscheinlich mache ich im Umgang mit vertical-align etwas völlig falsch. Nur was?
Schöne Grüße,
apstrakt
-
Hi apstrakt,
das vertical align braucht einen Bezugspunkt, z.B. eine Tabellenzelle. Ich habe mal ein Workaround gefunden, ich meine, indem ich per span vor den Text ein Leerzeichen gesetzt habe, das dann als Bezugspunkt funktionierte. Muss irgendwo im Archiv sein....
Viele Grüße
Mathias Bigge -
Hallo!
Dieses Problem kommt mir immer wieder unter, aber ich kriege es bislang (ohne Tabellen - nur mit CSS) einfach nicht hin: Ich habe links eine Grafik, die rechts von Fließtext umflossen, welcher wiederum vertikal zentriert dargestellet werden soll. Also so soll es am Ende aussehen:
|******|
|******|
|******| text text text text text
|******| text text text
|******|****** Kein Problem (solange es sich nicht um NN4 handelt):
(NN4 hat teilweise mit nebeneinander positionierten elementen Probleme)
test.html:
<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css" media="screen">
</head>
<body><div>
<img id="bild" src="quelle.jpg">
</div><div class="rightsection">
<span id="text"> text text text text text text text text text text text text text text text text text text text text text text text text text text
</span>
</div></body>
</html>test.css:
.rightsection
{
position:absolute; top: 30px; left:150px; right:5px; z-index:4;
padding:8px;
border: thin solid #999;
background:yellow;
text-align:center;
}
#bild { width:140px; height:100px; border:2px;}auch Schöne Grüße,
a.goewe