nicht angemeldet
vertical-align in <div>
Hallo alle zusammen,
zu allererst entschuldigt bitte, wenn das Thema total ausgelutscht ist. Mich bringt es aber zum Wahnsinn.
Folgendes Problem habe ich, bzw. so soll es aussehen:
|-------------------------------------------------|
| -------------- |
| Über- | | |
| schrift | | |
| | | |
| | [Bild] | |
| | | |
| | | |
| | | |
| weiterer Text | | |
| aber unten |------------| |
--------------------------------------------------|
In HTML so
<div class="problem-box">
<img bekannteGroesseUndHoehe />
<h1>Überschrift, die unterschiedlich viele Zeilen haben kann</h1>
<p>Fließtext, der unterschiedlich viele Zeilen haben kann</p>
</div>
In der div-Box ist eine Überschrift, die oben links sein soll (kein Problem). Rechts soll ein Bild mit bekannter Größe sein (kann man ja einfach nach rechts floaten). Der div-Container ist so hoch wie das Bild.
Zwisen der Überschrift und dem Fließtext ist ein dynamischer Abstand. Der Fließtext soll nämlich immer unten mit dem Bild abschließen. Dies habe ich mit vertical-align probiert.
Dies hat allerdings nicht funktioniert. Auch der Webhack http://www.jakpsatweb.cz/css/css-vertical-center-solution.html hat mir nicht wirklich geholfen (bei meinem Problem).
Kann mir da jemand eine elegante Lösung nennen, die am besten auch noch weitmöglichst für die meisten Browser funktioniert? :-)
Vielen Dank schon mal
und die besten Grüße,
Wolfgang
-
Hi,
ich kanns dir nicht zu 100% sagen aber versuch es mal mit "clear"http://de.selfhtml.org/css/eigenschaften/positionierung.htm#clear
-
Hi,
ich kanns dir nicht zu 100% sagen aber versuch es mal mit "clear"http://de.selfhtml.org/css/eigenschaften/positionierung.htm#clear
Hi Karsten,
bei welchem Element meinst du, sollte ich clear einsetzen?
Also vielleicht habe ich mich unklar ausgedrückt, aber ich will, dass der untere Rand vom Fließtext mit dem unteren Rand vom Bild auf gleicher Höhe sind. Ich habe schnell noch ein Bild zum besseren Verständnis hochgeladen:http://img5.abload.de/img/vertical-align3kvi.png (3.47 KB)
-
Poste mal bitte deinen gesamten Quelltext sowie CSS
-
»»Poste mal bitte deinen gesamten Quelltext sowie CSSOkay, ist aber eher langweilig ;)
HTML
<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>verti</title> <link rel="stylesheet" type="text/css" media="screen" href="css.css" /> </head> <body> <div class="pikto"> <img height="180" width="220" alt="[Piktogramm]" src="pikto.png" /> <h2>Zeug<br /> und so</h2> <p>zur Herstellung von<br /> Zeug<br /> und so</p> </div> </body> </html>CSS
.pikto img { float:right; } .pikto p { vertical-align: bottom }Das wäre die Lösung, wie ich sie mir wünschen würde ;-)
-
Ich mampf ertmal zu Ende dann werd ich mir das anschauen und ggf. etwas einfallen lassen :)
Kann dir gleich sagen das du mit "deinen Wünschen nicht allzuweit" kommen wirst. Brauchst mehr HTML und CSS um das darzustellen.
-
Ich mampf ertmal zu Ende dann werd ich mir das anschauen und ggf. etwas einfallen lassen :)
jo, guten Hunger ;)
Kann dir gleich sagen das du mit "deinen Wünschen nicht allzuweit" kommen wirst. Brauchst mehr HTML und CSS um das darzustellen.
Das habe ich befürchtet, hehe. Aber damit kann ich leben, Hauptsache es funktioniert
-
So , brauchst doch nicht allzu viel wenn es bei diesem "Mini-Layout"
bleiben soll. Schreib bitte ob du zufrieden bist oder nicht..pikto img { float:right; } .pikto p { position:absolute; bottom:0; left:10px; }-
So , brauchst doch nicht allzu viel wenn es bei diesem "Mini-Layout"
bleiben soll. Schreib bitte ob du zufrieden bist oder nicht..pikto img {
float:right;
}
.pikto p {
position:absolute;
bottom:0;
left:10px;
}Hey, danke für deine Lösung. Leider wird das nicht reichen. Der Div-Container .pikto wird leider immer wo anders auf dem Bildschirm sein. Also wird eine absolute Positionierung nicht funktionieren :-( Es müsste sich am unteren Rand der Div-Box .pikto ausrichten können. Das ganze arbeitet nämlich mit dynamischen Inhalten-
Und so - mann müsste vielleicht wissen wie deine Inhalte aussehen.
.pikto img { float:right; } .pikto p { position:relative; bottom:0; left:10px; }-
Und so - mann müsste vielleicht wissen wie deine Inhalte aussehen.
.pikto img {
float:right;
}
.pikto p {
position:relative;
bottom:0;
left:10px;
}Oh, sorry, ich glaube, wir haben uns missverstanden. Ich habe hier nochmal eine ganz kleine Seite erstellt. Du musst dir nur darüber jede Menge Inhalt vorstellen ;-) ~~~html <!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>verti</title> <style type="text/css" media="screen"> .pikto {height: 400px } .pikto img { float:right; } .pikto p { //** Unten abschließend des übergeordneten Elements div.pikto **// } </style> </head> <body> <div class="pikto" style="background-color:#009900"> <img height="180" width="220" alt="[Piktogramm]" src="pikto.png" /> <h2>Zeug<br /> und so</h2> <p>zur Herstellung von<br /> Zeug<br /> und so</p> </div> </body> </html>-
Sorry - k.a. - vielleicht mal über eine Tabelle nachgedacht? Oder den Absatz in einen eigenen div-container zu packen?
-
-
-
-
-
-
-
-
-
-
Hi,
Der Fließtext soll nämlich immer unten mit dem Bild abschließen. Dies habe ich mit vertical-align probiert.
Vertical-align bezieht sich auf die Positionierung innerhalb _einer_ Zeile, hilft Dir hier also nicht, vor allem weil das Bild aus dem "Fluss" herausgefloatet wird.
Du könntest das äussere Div relativ, und den Textabsatz absolut positionieren (bottom:0). ist natürlich nicht sehr flexibel...Gruesse, Joachim
--
Am Ende wird alles gut.
