|
|||
Text in einem Div Container ausrichten
Hallo Zusammen,
wie kann ich einen Text in einem Container / Box ganz unten ausrichten? Ich bekomms konform nicht hin. Hat wer ein Tipp für mich? CSS: Code:
#box { float:left; width:218px; height:370px; border:1px solid red; margin:0 10px 10px 0; text-align:bottom; } Code:
<div id="box"> <p>Dieser Text soll ganz unten ausgerichtet sein</p> </div> ich danke euch. Stefano Geändert von Stefano (15.01.2007 um 16:25 Uhr) |
Sponsored Links |
|
|||
Soll ausser dem Text noch was rein in die Box?
Ein Bild vielleicht? Andere Texte? Sind besondere Anforderungen an Umfließen usw. gestellt?
__________________
Grüsse Andreas- auch mal wieder da... Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams) Wiedergelesen: > hier und hier [Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte |
Sponsored Links |
|
||||
__________________
Ohne Quelltext gibts selten Hilfe. Also: Onlinebeispiel hochladen und Link bereitstellen! Foren-FAQ |
|
||||
Zitat:
Hast du dir den Link von BlackHawk genau angesehen? Insbesondere: Zitat:
Code:
CSS: .bottom {vertical-align: bottom;} HTML: <span class="bottom">bottom</span>
__________________
Gruss Dieter Vegetarier essen meinem Essen das Essen weg. Und unsere Norweger sind reine Karnivoren. selfhtml | css4you | jendryschik | styleworks | Webdesign mit XHTML und CSS |
|
|||
es klappt nicht, es ist zum kinder kriegen :-=
Code:
<div class="zelle"> <span style="vertical-align: bottom; border:1px solid red;">Der Text </span> </div> Code:
.zelle { float:left; width:200px; height:200px; } |
|
|||
Du missverstehst vertical-align. Unglücklicherweise hat vertical-align zwei vollkommen getrennte Funktionen.
a) Die Ausrichtung von Inline-Elementen in einer Zeile wie kadees es zeigt. Dies hat überhaupt aber nichts mit deinem Problem zu tun. b) Die Ausrichtung des Inhaltes in einer Tabellen-Zelle. Diese zweite Funktion könnte verwendet werden, in dem du mit display: table-cell deinem DIV "sagst", es soll sich wie eine Tabellen-Zelle verhalten. Nur wird dies vom Internet Explorer nicht unterstützt: Code:
.zelle { float:left; width:200px; height:200px; display: table-cell; vertical-align: bottom; } <div class="zelle"> <span style="border:1px solid red;">Der Text</span> </div> Code:
.zelle { float:left; width:200px; height:200px; position: relative; } .zelle span { position: absolute; left: 0; bottom: 0; } <div class="zelle"> <span style="border:1px solid red;">Der Text</span> </div> |
|
|||
soweit ich weiß, funktionieren vertical-align und text-align in gefloateten divs leider nicht so, wie sie sollten. was mir spontan als lösung einfällt, wäre, aus dem <span> ein zweites <div> zu machen, das dann mit margin-top: auto; an den unteren rand des äußerden divs gebracht wird. das display: table-cell kannst du im falle dass das funktioniert entfernen.
__________________
Rcrave.com - Hosting von den Profis. Geändert von Stalker (17.01.2007 um 17:48 Uhr) |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Brauche Hilfe: Schwarzes Nichts | Zwox | CSS | 10 | 19.11.2010 17:53 |
Float und Clear | Earl of Green | CSS | 3 | 22.02.2009 19:48 |
Floats verschwinden im nichts, Fließer überdecken Floats. | nick | CSS | 5 | 09.02.2008 15:34 |
Helft mir. Ich habe voll die Leseschwäche | nick | CSS | 12 | 15.01.2008 21:52 |
Problem: Überschrift <hx> innerhalb von Abschnitt <p> | Ares | CSS | 7 | 24.10.2006 14:30 |