Element im div als vertical-alignd:bottom

Computer: Software & Programmierung HTML & CSS
#1

Hallo,

wie ich immer betone: ich hab keine Ahnung von HTML/CSS und spiele erst seit ~einer Woche damit rum (lehne Tabellen aber jetzt schon ab).

Ich wuerde gern folgendes setzen: eine Ueberschrift im div soll mit seinem unteren Rand buendig am unteren Rand des divs sein; der rechte Rand eines background-image soll 100px vom rechten Rand des divs entfernt sein.

,--- -------------------------------.
||
| 80px| | logo | |
| heading V |||
`-----------------'------------'---------'

Okay, nix leichter als das: nach [1] wird ein Element relativ zum Elternelement durch die Angabe von „position:absolute;“ positioniert. Also:

 heading

Soweit meine theoretischen Ueberlegungen. In der Praxis posititioniert mozilla die h1 relativ zum body (dem Elternelement des divs). Das gewuenschte Ziel erreiche ich nur, wenn ich auch im div „position:absolute;“ setze. Verstehe ich nicht. Wer kann mich erleuchten?

Fuer die Positionierung des Hintergrunds habe ich ueberhaupt keine Ideen. Ich kann zwar right angeben, was so aehnlich wie ein „right:0px“ ist, aber ein Aquivalent zu „right:100px“ hab ich nicht gefunden. Irgendwelche Ideen?

Vielen Dank im Voraus,
Gruss vom Frank.
===footnotes===
[1] http://de.selfhtml.org/css/eigenschaften/positionier…

#2

Hi,

wie ich immer betone: ich hab keine Ahnung von HTML/CSS und
spiele erst seit ~einer Woche damit rum (lehne Tabellen aber
jetzt schon ab).

nicht übel.

In der Praxis posititioniert mozilla die h1 relativ zum body
(dem Elternelement des divs). Das gewuenschte Ziel erreiche
ich nur, wenn ich auch im div „position:absolute;“ setze.
Verstehe ich nicht. Wer kann mich erleuchten?

Ich würde Dich jetzt gerne zum W3C verlinken. Dummerweise muss man ganze Kapitel verstehen, um die Ursache des Effekts zu kapieren. Drum nenne ich lieber einen Merksatz:

Die absolute Positionierung richtet sich nach dem innersten Vorfahrenelement, dessen position-Eigenschaft sich von static unterscheidet.

Es würde also auch ein position:relative reichen. Und: Jeder Browser, der das Element auch ohne dies am ausrichtet, verhält sich falsch.

Fuer die Positionierung des Hintergrunds habe ich ueberhaupt
keine Ideen.

http://www.w3.org/TR/CSS21/colors.html#propdef-backg…

Cheatah

#3

Hallo,

> ,--- -------------------------------.  
> ||  
> | 80px| | logo | |  
> | heading V |||  
> `-----------------'------------'---------'

Das Hintergrund-Positions-Problem kenne ich. Wenn ich deine Skizze richtig verstehe, soll das Logo nicht den ganzen div ausfüllen, sondern nur den mit „logo“ bezeichneten Bereich. Ich würd’s einfach in einen zweiten div schachteln, der dann „rechtsausgerichtet“ positioniert werden kann. Etwas unelegant, aber sollte klappen.

Alternativ dazu kannst du das logo mit

background-position:left[800 - 100 - logobreite]px

links positionieren. Sollte auch klappen.

Gruss
Sam

#4

Hi,

Hallo,

Ich würde Dich jetzt gerne zum W3C verlinken.

Nur keine Scheu.

Dummerweise muss man ganze Kapitel verstehen, um die Ursache
des Effekts zu kapieren.

Ich nehme an, es geht um http://www.w3.org/TR/CSS21/visuren.html und folgende.

Fuer die Positionierung des Hintergrunds habe ich ueberhaupt
keine Ideen.

http://www.w3.org/TR/CSS21/colors.html#propdef-backg…

Dem entnehme ich, dasz mein Ansinnen mit dem Positionieren des backgrounds nicht moeglich ist. Bleibt die Alternative, aus der anderen Antwort.

Danke an beide,
Gruss vom Frank.