nicht angemeldet
Positionieren
Hallo liebe Forumsteilnehmer!
Ich habe diesen Bildschirmaufbau:
Links Menüstreifen, rechts Inhaltsbereich.
Der Menüstreifen ist eine Liste (ul), sie befindet sich in einem absolut positionierten Navigationscontainer, der Inhaltsbereich rechts vom Menüstreifen ist ebenfalls in einem absolut positionierten Container-div.
Der erste li-item des Menustreifen ist ein Bild (Home-Button).
Problem:
Die Überschriften des Inhaltsbereiches sollen "untenbündig" mit einer bestimmten vertikalen Position innerhalb des Bildes sein.
Praktischer formuliert:
Das Bild - es ist im Menüstreifen zuoberst - ist 150px hoch, die Überschriften (ich verwende h2) des Inhaltsbereiches sollen mit dem siebzigsten Pixel des Bildes "untenbündig" sein.
Wie gehe ich das an?
Danke
Viennamade
-
hi,
Der Menüstreifen ist eine Liste (ul), sie befindet sich in einem absolut positionierten Navigationscontainer, der Inhaltsbereich rechts vom Menüstreifen ist ebenfalls in einem absolut positionierten Container-div.
warum absolute positionierung, anstatt simplen floats?
Die Überschriften des Inhaltsbereiches sollen "untenbündig" mit einer bestimmten vertikalen Position innerhalb des Bildes sein.
Praktischer formuliert:
Das Bild - es ist im Menüstreifen zuoberst - ist 150px hoch, die Überschriften (ich verwende h2) des Inhaltsbereiches sollen mit dem siebzigsten Pixel des Bildes "untenbündig" sein.hm, schwierig - "untenbündig" ist immer leicht problematisch.
noch mehr absolute positionierung, diesmal mit bottom:150px, für die überschrift, restlichen inhalt des containers über padding-top auf abstand von oben halten? wäre denkbar, finde ich aber extrem unschön ...eventuell liesse sich auch was über margin-top und feste line-height für die überschrift machen.
gruss,
wahsaga-
Hallo Wahsaga!
Das Bild - es ist im Menüstreifen zuoberst - ist 150px hoch, die Überschriften (ich verwende h2) des Inhaltsbereiches sollen mit dem siebzigsten Pixel des Bildes "untenbündig" sein.
hm, schwierig - "untenbündig" ist immer leicht problematisch.
noch mehr absolute positionierung, diesmal mit bottom:150px, für die überschrift, restlichen inhalt des containers über padding-top auf abstand von oben halten? wäre denkbar, finde ich aber extrem unschön ...eventuell liesse sich auch was über margin-top und feste line-height für die überschrift machen.
Jo! Kombination margin-top & fixes line-height & fixe font-size bringen das erwünschte Ergebnis (aufgrund alternativer Style-Sheets bleiben die font-sizes quasi variabel).
Danke & Beste Grüße
Viennamade
-