CSS - Frage zu vertical-align

Schraubendreher · 15.06.2011, 14:41

Werte CSS Gemeinde,

kann mir jemand kurz sagen, was ich an folgendem Code ändern muss, damit der Text am unteren Rand der Box ausgerichtet wird? Leider stehe wohl ich gerade auf der Leitung

Code:

<html>

<head>
	<style type="text/css">
		.kaestchen {height:200px; width:200px; text-align:bottom; background-color:#ddf}
	</style>
</head>

<body>
	<div class="kaestchen">Am unteren Rand!</div>
</body>

</html>

Schöne Grüße!

Schraubendreher · 15.06.2011, 14:42

*Auf "Zitieren" statt "'Ändern" geklickt*

ChrisB · 15.06.2011, 14:50

Entweder Höhe des Containers nicht über height, sondern ein pading-top erzeugen;
oder über display das Element als Tabellenzelle darstellen lassen, damit vertical-align für seinen Inhalt überhaupt eine Wirkung zeigen darf.

fab · 15.06.2011, 14:55

Außerdem "vertical-align" nicht "text-align" nennen

Schraubendreher · 15.06.2011, 15:06

Danke für die schnelle Hilfe. Hier die neue Version:

Code:

<html>

<head>
	<style type="text/css">
		.kaestchen {height:200px; width:200px; display:table-cell; vertical-align:bottom; background-color:#ddf}
	</style>
</head>

<body>
	<div class="kaestchen">Am unteren Rand!</div>
</body>

</html>

Edit: Leider funktioniert diese Lösung nicht in Zusammenhang mit "float". Liegt wohl daran, dass aus "table-cell" ein "block" Element wird.

Zitat:

Zitat von ChrisB

Entweder Höhe des Containers nicht über height, sondern ein pading-top erzeugen;

In diesem Fall ist der Container etwas größer als 200px (200px Abstand + Schriftgröße), da hilft wohl nur der Griff zum Rechenschieber.

tr0y · 15.06.2011, 16:15

block element einbetten, dein jetziges div auf position relative, das innere element auf position: absolute, bottom: 0; und schon klebt dein "text" am boden des divs, auch wenn du es durch halb htmlania floatest.

Schraubendreher · 15.06.2011, 16:30

Ich hoffe, ich habe alles richtig verstanden. Es funktioniert jedenfalls, danke!

Code:

<html>

<head>
	<style type="text/css">
		.kaestchen {position:relative; height:200px; width:200px; float:right; background-color:#ddf}
		.unten {position:absolute; bottom:0}
	</style>
</head>

<body>
	<div class="kaestchen">
		<div class="unten">Am unteren Rand!</div>
	</div>
</body>

</html>

tr0y · 15.06.2011, 16:32

Jop, haste.

"Das da" funktioniert natürlich nur solange du auch dein html-dokument auf irgendwas validiert hast und der browser auch weiß nach welchen Standard er das ding behandeln soll ( der entgegengesetzte Fall ist dann der Quirks-Mode, da siehst dann anders aus mit dem "funktionieren" ).

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Eine Frage zum guten Code-Layout	SilentSight	JavaScript, Ajax und mehr	3	14.07.2010 09:18
[Erledigt] Frage zu JOIN Befehl und dem Auslesen desselben	apo	PHP Tipps 2010	11	13.06.2010 19:32
vertical align?		HTML, Usability und Barrierefreiheit	13	25.09.2006 17:09
[PDO] Frage zur Portabilität	freq.9	PHP-Fortgeschrittene	2	29.07.2005 13:28
[Erledigt] frage		PHP Tipps 2005-2	9	15.06.2005 13:22
.htaccess - Frage	Stümper	PHP Tipps 2005	11	30.05.2005 11:56
Performence Frage		PHP-Fortgeschrittene	10	06.05.2005 19:00
Frage zu einem Editformular		PHP Tipps 2005	3	25.04.2005 14:58
Frage: gibt es bei PHP sowas wie target="_blank"		PHP Tipps 2005	6	20.04.2005 06:27
mal ne Frage		PHP Tipps 2005	7	14.04.2005 09:46
Technische Frage zur Realisation einer Online-Umfrage	Stefano	PHP Tipps 2005	5	16.03.2005 17:39
Frage zu einer Liste?		HTML, Usability und Barrierefreiheit	2	15.02.2005 16:56
Hallo und Frage zu dynamischer Veränderung in Textfeldern.		PHP Tipps 2004-2	2	27.12.2004 22:29
[Erledigt] Frage zur Funkrionen?		PHP Tipps 2004-2	10	01.12.2004 09:42
Kurze Frage an die Php Profis		PHP Tipps 2004-2	11	24.11.2004 17:38

15.06.2011, 14:41
Schraubendreher Neuer Benutzer Registriert seit: 11.02.2011 Beiträge: 18 PHP-Kenntnisse: Anfänger	CSS - Frage zu vertical-align Werte CSS Gemeinde, kann mir jemand kurz sagen, was ich an folgendem Code ändern muss, damit der Text am unteren Rand der Box ausgerichtet wird? Leider stehe wohl ich gerade auf der Leitung Code: <html> <head> <style type="text/css"> .kaestchen {height:200px; width:200px; text-align:bottom; background-color:#ddf} </style> </head> <body> <div class="kaestchen">Am unteren Rand!</div> </body> </html> Schöne Grüße! Geändert von Schraubendreher (15.06.2011 um 15:24 Uhr).


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

15.06.2011, 14:42
Schraubendreher Neuer Benutzer Registriert seit: 11.02.2011 Beiträge: 18 PHP-Kenntnisse: Anfänger	Auf "Zitieren" statt "'Ändern" geklickt

15.06.2011, 14:50
ChrisB Moderator¹ Registriert seit: 28.03.2010 Beiträge: 7.470 PHP-Kenntnisse: Fortgeschritten	Entweder Höhe des Containers nicht über height, sondern ein pading-top erzeugen; oder über display das Element als Tabellenzelle darstellen lassen, damit vertical-align für seinen Inhalt überhaupt eine Wirkung zeigen darf. __________________ RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?

15.06.2011, 14:55
fab Erfahrener Benutzer Registriert seit: 28.07.2010 Beiträge: 2.308 PHP-Kenntnisse: Fortgeschritten	Außerdem "vertical-align" nicht "text-align" nennen __________________ PHP Blog + Library CSS Effects + Tools

15.06.2011, 16:15
tr0y Erfahrener Benutzer Registriert seit: 26.07.2010 Beiträge: 4.865 PHP-Kenntnisse: Fortgeschritten	block element einbetten, dein jetziges div auf position relative, das innere element auf position: absolute, bottom: 0; und schon klebt dein "text" am boden des divs, auch wenn du es durch halb htmlania floatest. __________________ Lasse mir ohne Anwendung von Gewalt Dinge schenken, Amazon weiß darüber bald mehr.

15.06.2011, 16:32
tr0y Erfahrener Benutzer Registriert seit: 26.07.2010 Beiträge: 4.865 PHP-Kenntnisse: Fortgeschritten	Jop, haste. "Das da" funktioniert natürlich nur solange du auch dein html-dokument auf irgendwas validiert hast und der browser auch weiß nach welchen Standard er das ding behandeln soll ( der entgegengesetzte Fall ist dann der Quirks-Mode, da siehst dann anders aus mit dem "funktionieren" ). __________________ Lasse mir ohne Anwendung von Gewalt Dinge schenken, Amazon weiß darüber bald mehr.