nicht angemeldet
DIV-Layer der Text am unteren Ende ausrichtet
Hoi Gemeinde!
Ich bastele gerade wieder ein einer HP herum und steht vor folgendem Problem:
Da ich auf Tabellen weitestgehend verzichten möchte (was das Layout der Seite angeht) werkele ich nur mit hübschen DIVs herum (auch verschachtelt) .. bisher sieht alles auch ok und vor allem fast einheitlich auf den aktuellen Browsern aus (andere interessieren mich nicht mehr und irgendwann muß man halt den Bruch machen). Ein Thema welches mich aber quält ist die Textausrichtung innerhalb eines DIVs.
Ich habe also z.B. ein DIV welches 20px hoch ist. Der Text darin soll am unteren Ende ausgegeben werden. Leider bekomme ich das überhaupt nicht hin. Wie macht ihr das?
Über Tipps würde ich mich freuen. Merci und (in Gedanken sonnige) Grüße vom Bodensee
Jörg
-
Hi Jörg,
Ich habe also z.B. ein DIV welches 20px hoch ist. Der Text darin soll am unteren Ende ausgegeben werden. Leider bekomme ich das überhaupt nicht hin. Wie macht ihr das?
zB so:
<div>
<p style="margin-top:10px;">bla</p>
</div>Pixel-Angaben sind diesbezüglich aber gefährlich, da du die Schriftgröße beim Besucher nicht kennst. Mit position:relative kannst du ebenfalls Elemente verschieben. Auch padding-top im DIV ist möglich. Du hast, wie bei CSS üblich, die Wahl :)
LG Orlando
-
Hoi Orlando!
zB so:
<div>
<p style="margin-top:10px;">bla</p>
</div>Pixel-Angaben sind diesbezüglich aber gefährlich, da du die Schriftgröße beim Besucher nicht kennst. Mit position:relative kannst du ebenfalls Elemente verschieben. Auch padding-top im DIV ist möglich. Du hast, wie bei CSS üblich, die Wahl :)
Merci ... *vordieStirnschlag* ... :-)
Ciao
Jörg
-
-
hi,
Ich habe also z.B. ein DIV welches 20px hoch ist. Der Text darin soll am unteren Ende ausgegeben werden. Leider bekomme ich das überhaupt nicht hin. Wie macht ihr das?
nachdem vertical-align unvollstaendig implementiert ist, bietet sich fuer moderne Browser sowas an:
<html><head><style type="text/css">
#ebene0 {
position: absolute;
top: 100px;
left: 100px;
width: 200px;
height: 200px;
visibility: visible;
background-color: red;
layer-background-color: red;
border: none;
}
#ebene1 {
position:absolute;
bottom: 0px;
left: 30px;
}
</style></head><body>
<div id="ebene0">
<div id="ebene1">
text
</div>
</div>
</body></html>Ansonsten wohl nur von oben "runterrechnen"...
Gruesse Joachim