Positionierung als div

cybertrek · 26.07.2010, 20:49

Hallo,

Aufgrund einer grundsätzlichen Überarbeitung meiner Seiten möchte ich das bisherige Tabellenlayout durch den Einsatz von <div> Elementen ablösen. Das Design der Artikel-Seiten soll wie folgt aussehen:

Links oben ein Bereich für die Überschrift
Rechts ein individuell hoher Bereich für den Text
Links unten ein Footer

Dieser Footer soll in einer Linie mit der letzten Zeile des Artikelbereichs abschließen.

Bei meinen Versuchen ist bisher folgender Code entstanden:

CSS:

Code:

#top	        { float:left; width:190px; }
#articlearea	{ border-left:1px solid #8898bf; margin-left:200px; }
#bottom	        { float:left; width:190px; }

HTML:

Code:

<div id="top">
</div>

<div id="articlearea">
</div>

<div id="bottom">
</div>

Für #bottom fehlt mir hier noch das entsprechende Attribut für die gewünschte Positionierung. Ich habe es mit bottom und vertical-align getestet, es wird jedoch stets unterhalb der articlearea angezeigt. In der CSS Kurzreferenz von selfHTML habe ich bereits nachgeschlagen, jedoch ist mir abgesehen von den genannten Eigenschaften ist mir kein passendes in die Augen gesprungen. Habe ich etwas übersehen bzw. einen Denkfehler in meinem Ansatz? Bitte um Hilfe bzw. Denkanstoß wo ich ansetzen muss.

Destruction · 26.07.2010, 21:07

Mach doch einfach einen Div Container um alles herum und dann setzt du den Footer relativ zur bottom Position

cybertrek · 27.07.2010, 21:36

Danke für den Tipp. Habe jetzt damit im Hinterkopf folgendes CSS gebastelt:

Code:

#container	{ }
#header		{ float:left; width:190px; position:fixed; margin-left:0px; }
#articlearea	{ border-left:1px solid #8898bf; margin-left:200px; }
#footer	        { position:fixed; bottom:0px; }

Damit wird jetzt sowohl der Titel-Bereich (header) als auch der Footer jeweils oben bzw. unten im Fenster fixiert und scrollt beim Scrollen mit. Zwar nicht das was ich ursprünglich im Sinn hatte (und du wohl gemeint hast) aber wirkt auf den ersten Blick recht gut. Was ich aber bisher mit den unterschiedlichen position Werten nicht geschafft habe ist, dass der Footer in der letzten Zeile statisch positioniert wird. Er ist stets entweder zu weit oben bzw. zu weit unten. Am interessantesten fand ich hier position:absolute, wodurch der Footer im linken Bereich zentriert zur articlearea angezeigt wird. Mit position:relative; bottom:0px wird es unterhalb der textarea angezeigt.

Code:

<div id="container">

<div id="header">
</div>

<div id="articlearea">
</div>

<div id="footer">
</div>

</div>

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
Frage zur Positionierung	luks2com	HTML, Usability und Barrierefreiheit	1	09.02.2010 16:03
Kalender Positionierung klappt nicht...	xhellsingx	HTML, Usability und Barrierefreiheit	6	08.09.2009 16:05
php.image frage. positionierung eines bildes + link	heller	HTML, Usability und Barrierefreiheit	3	23.06.2009 13:35
Probleme bei Positionierung eine Images mittels print()-Funktion	SimStar001	PHP Tipps 2009	9	21.03.2009 17:12
DIV positionierung HILFE	FreAkaZoiD	HTML, Usability und Barrierefreiheit	3	19.04.2008 15:58
ie css problem mit absoluter positionierung	obi	HTML, Usability und Barrierefreiheit	6	10.05.2007 17:30
automatische mauszeiger positionierung	snatch-ic	HTML, Usability und Barrierefreiheit	2	08.05.2006 16:57
CSS Positionierung, die in jedem browser funzt		HTML, Usability und Barrierefreiheit	2	20.12.2005 17:57
Positionierung im Listenfeld festlegen		HTML, Usability und Barrierefreiheit	1	23.11.2005 19:44
zentrierte Positionierung einer Seite bei höherer Auflösung		HTML, Usability und Barrierefreiheit	8	04.10.2005 12:35
iframe Positionierung		HTML, Usability und Barrierefreiheit	1	13.07.2005 16:44
CSS positionierung im DIV	JEGO	HTML, Usability und Barrierefreiheit	21	29.06.2005 14:25
Probleme bei Positionierung mittels CSS		HTML, Usability und Barrierefreiheit	3	25.04.2005 04:38
Wasserzeichen positionierung	kain	PHP Tipps 2005	4	19.04.2005 15:16

26.07.2010, 20:49
cybertrek Benutzer Registriert seit: 08.12.2003 Beiträge: 87	Positionierung als div Hallo, Aufgrund einer grundsätzlichen Überarbeitung meiner Seiten möchte ich das bisherige Tabellenlayout durch den Einsatz von <div> Elementen ablösen. Das Design der Artikel-Seiten soll wie folgt aussehen: Links oben ein Bereich für die Überschrift Rechts ein individuell hoher Bereich für den Text Links unten ein Footer Dieser Footer soll in einer Linie mit der letzten Zeile des Artikelbereichs abschließen. Bei meinen Versuchen ist bisher folgender Code entstanden: CSS: Code: #top { float:left; width:190px; } #articlearea { border-left:1px solid #8898bf; margin-left:200px; } #bottom { float:left; width:190px; } HTML: Code: <div id="top"> </div> <div id="articlearea"> </div> <div id="bottom"> </div> Für #bottom fehlt mir hier noch das entsprechende Attribut für die gewünschte Positionierung. Ich habe es mit bottom und vertical-align getestet, es wird jedoch stets unterhalb der articlearea angezeigt. In der CSS Kurzreferenz von selfHTML habe ich bereits nachgeschlagen, jedoch ist mir abgesehen von den genannten Eigenschaften ist mir kein passendes in die Augen gesprungen. Habe ich etwas übersehen bzw. einen Denkfehler in meinem Ansatz? Bitte um Hilfe bzw. Denkanstoß wo ich ansetzen muss.


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

26.07.2010, 21:07
Destruction Erfahrener Benutzer Registriert seit: 05.02.2009 Beiträge: 1.356 PHP-Kenntnisse: Fortgeschritten	Mach doch einfach einen Div Container um alles herum und dann setzt du den Footer relativ zur bottom Position __________________ "Dummheit redet viel..Klugheit denkt und schweigt.." [Amgervinus]

27.07.2010, 21:36
cybertrek Benutzer Registriert seit: 08.12.2003 Beiträge: 87	Danke für den Tipp. Habe jetzt damit im Hinterkopf folgendes CSS gebastelt: Code: #container { } #header { float:left; width:190px; position:fixed; margin-left:0px; } #articlearea { border-left:1px solid #8898bf; margin-left:200px; } #footer { position:fixed; bottom:0px; } Damit wird jetzt sowohl der Titel-Bereich (header) als auch der Footer jeweils oben bzw. unten im Fenster fixiert und scrollt beim Scrollen mit. Zwar nicht das was ich ursprünglich im Sinn hatte (und du wohl gemeint hast) aber wirkt auf den ersten Blick recht gut. Was ich aber bisher mit den unterschiedlichen position Werten nicht geschafft habe ist, dass der Footer in der letzten Zeile statisch positioniert wird. Er ist stets entweder zu weit oben bzw. zu weit unten. Am interessantesten fand ich hier position:absolute, wodurch der Footer im linken Bereich zentriert zur articlearea angezeigt wird. Mit position:relative; bottom:0px wird es unterhalb der textarea angezeigt. Code: <div id="container"> <div id="header"> </div> <div id="articlearea"> </div> <div id="footer"> </div> </div>