zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > (X)HTML
Seite neu laden Text in einem Div Container ausrichten

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 15.01.2007, 14:18
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.12.2006
Beiträge: 14
Stefano befindet sich auf einem aufstrebenden Ast
Daumen hoch 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;
}
XHTML
Code:
<div id="box">
    <p>Dieser Text soll ganz unten ausgerichtet sein</p>
</div>
das es text-align:bottom; nicht gibt weiss ich, man versucht aber alles wenn man nicht weiter weiss


ich danke euch.

Stefano

Geändert von Stefano (15.01.2007 um 16:25 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 15.01.2007, 14:26
{ display: random;}
XHTMLforum-Kenner
 
Registriert seit: 08.09.2004
Ort: Stuttgart
Beiträge: 5.034
andir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblick
Standard

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
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 15.01.2007, 14:31
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.12.2006
Beiträge: 14
Stefano befindet sich auf einem aufstrebenden Ast
Standard

nein, nur in den hintergrund kommt ein bild, ansonsten stehen 3 von diesen boxen nebeneinander, deswegen auch float:left;.
Mit Zitat antworten
  #4 (permalink)  
Alt 15.01.2007, 18:06
Benutzerbild von Crizzo
der mit dem Editor kämpft
XHTMLforum-Kenner
 
Registriert seit: 17.10.2006
Ort: Ost-Hessen
Beiträge: 4.828
Crizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer Mensch
Standard

vertical-align: Vertikale Ausrichtung: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets
__________________
Ohne Quelltext gibts selten Hilfe. Also: Onlinebeispiel hochladen und Link bereitstellen!
Foren-FAQ
Mit Zitat antworten
  #5 (permalink)  
Alt 15.01.2007, 18:51
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.12.2006
Beiträge: 14
Stefano befindet sich auf einem aufstrebenden Ast
Standard

funktioniert leider nicht, ist auch nicht xhtml strict 1.0 konform oder? gibt es denn keine möglichkeit einen text in einer box nach unten auzurichten?

ich verzweifel noch
Mit Zitat antworten
  #6 (permalink)  
Alt 15.01.2007, 22:03
Benutzerbild von kadees
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 22.06.2004
Ort: in Baden (nicht Schwaben)
Beiträge: 792
kadees wird schon bald berühmt werden
Standard

Zitat:
ist auch nicht xhtml strict 1.0 konform oder?
*vertical-align* ist CSS, kein HTML.

Hast du dir den Link von BlackHawk genau angesehen? Insbesondere:
Zitat:
Die Eigenschaft vertical-align beeinflusst die vertikale Ausrichtung von Text in einer Zeile, bezogen auf das Elternelement, das ein Inline-Element sein muß.
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
Mit Zitat antworten
  #7 (permalink)  
Alt 16.01.2007, 12:45
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.12.2006
Beiträge: 14
Stefano befindet sich auf einem aufstrebenden Ast
Standard

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>
Die Klasse zelle hat folgendes CSS:
Code:
.zelle
{
	float:left;
	width:200px;
	height:200px;
}
Was mach ich denn falsch?
Mit Zitat antworten
  #8 (permalink)  
Alt 16.01.2007, 13:14
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 25.03.2004
Beiträge: 1.838
RoToRa wird schon bald berühmt werden
Standard

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>
Alternativ kann du mit absoluter Positionierung arbeiten, dies ist aber "fragiler", istbesondere wenn der Benutzer die Schriftgröße so ändert, so das der Text nicht mehr in deine 200x200 Pixel große Box passt (unabhängig von der absoluten Positionierung dies ist übrigens einer der Gründe warum feste Pixelgrößen keine gute Idee beim Webdesign ist, aber das ist hier jetzt Nebensache):

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>
Robin
Mit Zitat antworten
  #9 (permalink)  
Alt 17.01.2007, 17:36
Neuer Benutzer
neuer user
 
Registriert seit: 09.10.2006
Beiträge: 20
Stalker befindet sich auf einem aufstrebenden Ast
Standard

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.

Geändert von Stalker (17.01.2007 um 17:48 Uhr)
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 12:51 Uhr.