[CSS] 2 spaltiges Layout mit 100% Höhe

T.dot · 06.01.2005, 13:55

Ahoi!

Einfaches Layout: 2 Spalten nebeneinander, links Menü, rechts Haupt"Frame". Das linke Menü soll einen durchgehenden Hintegrund haben, egal wieviel im Hauptteil drinnsteht.

Mit Tables funktionierts ja ganz gut

PHP-Code:


			
...

<body style="padding:0px">

<table style="height:100%;width:100%;padding:0px" cellpadding="0" cellspacing="0">

<tr>

    <td style="width:200px;background-color:#CCCCFF;vertical-align:top;padding:10px">

Menu....

    </td>

    <td style="padding-left:10px">

viel Text, der mehr als 100 Prozent hoch ist...

</td></tr>

</table>

</body>

...

ganzer code sieher hier:
http://members.aon.at/stemmer/2column100percent.html

soweit so gut - nur wie mache ich das mit DIVs?

2 DIVs nebeneinander sind ja kein Problem, nur selbst wenn ich dem linken DIV (und dem Body) Height 100% gebe nützt mir das nichts, wenn der eigentliche Content mehr als 100% braucht (dh. ich scrolle runter und links ist erst wieder normale Hintergrundfarbe)

Gibts dafür ne Lösung?

herzlichen Dank, mfg Thomas

catch17 · 06.01.2005, 13:58

würde auf layout mit tabellen überhaupt verzichten und das mit css-elementen (containerboxen) lösen - einfacher, sicherer, schneller, eleganter...

lg,

nachtrag: schau mal hier: http://www.drweb.de/csstechnik/layer_1.shtml

lg,

T.dot · 06.01.2005, 14:19

hm, hab mich wohl nicht klar ausgedrückt!

Ich wills ja mit CSS machen, nur hab ich bis jetz keine brauchbare Lösung gefunden, wie ich die linke Seite zu immer den gleichen Hintergrund zwinge.

Auf positioneverything hab ich zwar diese:
http://www.positioniseverything.net/...l.stretch.html
Lösung gefunden, die einfach mit einem Hintergrundbild arbeitet, das der Breite der linken Spalte entspricht - aber das halte ich für keine optimale Lösung.

mfg Thomas

catch17 · 06.01.2005, 14:46

schau dir link mal genau an - da findest eigentlich alles was du brauchst - weiters bemüh auch mal die w3c-seite - da gibts gesammte syntax und tutorials

lg,

T.dot · 06.01.2005, 18:10

Ich hab jetz ca. 50 Tutorials zum Thema 2/3 Column Layout gelesen, bei allen geht das von mir gesucht entweder nicht oder nur durch den Trick ein sich wiederholendes Hintergrundbild zu verwenden, dass der Breite des Menüs entspricht.

Vielleicht könntest du mir sagen wo auf der w3c page ich die Tutorials find?

Danke, mfg Thomas

catch17 · 06.01.2005, 18:48

vieleicht hilft des :http://www.drweb.de/csstechnik/css_float.shtml

- oder missversteh ich dich völlig ??

auf "dr.web" findest noch mehr

ebenfalls hier mal vorbeischaun:
http://www.css-technik.de/rubrik/9/CSS-Snippets.htm

lg,

T.dot · 06.01.2005, 19:19

hm, entweder ich dich nicht oder du mich nicht

Ich arbeite scho länger mit CSS, weiß auch wie man Boxen nebeneinander schachtel, kenne Float, etc. - das ist auch gar nicht das Problem.

Ich habe jetz folgenden Source (mit divs)

Code:

<body style="background: #FFFFFF">
<div class="leftcontent">
	<h1>Menu</h1>...
		
</div>		
<div class="centercontent">
mal mehr, mal weniger Text
</div>
</body>

CSS schaut so aus:

Code:

.leftcontent {
	position:absolute;
	left:0px;
	width:180px;
	height:100%;
	background-color:#CCCCFF;
}

.centercontent {
	margin-left: 200px; 
	margin-right:20px;
}

Soweit so gut. Das ganze schaut auch noch brauchbar aus, wenn im Center nicht zuviel Text steht. Sobald dort gescrollt werden muss, scrollt das Menü links mit (is ja klar), aber auch der Hintergrund - d.h. ich habe dann links vom Content einen weißen Rand.

zur Verdeutlichung:
http://members.aon.at/stemmer/2columnCSS.html

ich glaube somit sind alle Klarheiten beseitig

mfg Thomas

catch17 · 06.01.2005, 20:10

also du mußt die 2 container in einen dritten einbetten dann funkts prima

- hab hier deine seite modifiziert - schaus dir an und probiers in deinem browser...

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="keywords" content="T. Fotos">
<title>T. Fotos</title>
</head>
<body style="background: #FFFFFF">
<form method="post" id="post" name="post" action="" enctype="multipart/form-data">


<div style="background-color:green;color:black;
            font-size:80%;
            text-align: left:">



<div style="background-color: green; color:black;
            width: 200px; float:left;">

	<h1>Adminkram</h1>
		


			Kategorien bearbeiten

			Ereignisse bearbeiten

			Alben bearbeiten

			Fotos bearbeiten

			Bewertungen bearbeiten

			Gruppen bearbeiten

			Mitglieder bearbeiten

			Rechte bearbeiten

			Rechte zuordnen

		</p>
		
		<h1>Userkram</h1>
		


			Kategorien anzeigen

			Ereignisse anzeigen

			Alben anzeigen

			Fotos anzeigen

			Gruppen anzeigen

			Mitglieder anzeigen

		</p>
</div>	


	
<div style="background-color: white; color:black;
            margin:0 0 0 200px; ">



Nothing is over until the last drop falls.</p>


Nothing is over until the last drop falls.</p>


Nothing is over until the last drop falls.</p>


Nothing is over until the last drop falls.</p>


Nothing is over until the last drop falls.</p>


Nothing is over until the last drop falls.</p>


Nothing is over until the last drop falls.</p>


Nothing is over until the last drop falls.</p>


Nothing is over until the last drop falls.</p>


Nothing is over until the last drop falls.</p>


Nothing is over until the last drop falls.</p>


Nothing is over until the last drop falls.</p>


Nothing is over until the last drop falls.</p>


Nothing is over until the last drop falls.</p>


Nothing is over until the last drop falls.</p>


Nothing is over until the last drop falls.</p>


Nothing is over until the last drop falls.</p>


Nothing is over until the last drop falls.</p>


Nothing is over until the last drop falls.</p>


Nothing is over until the last drop falls.</p>


Nothing is over until the last drop falls.</p>


Nothing is over until the last drop falls.</p>


Nothing is over until the last drop falls.</p>


Nothing is over until the last drop falls.</p>


Nothing is over until the last drop falls.</p>


Nothing is over until the last drop falls.</p>


Nothing is over until the last drop falls.</p>


Nothing is over until the last drop falls.</p>


Nothing is over until the last drop falls.</p>


Nothing is over until the last drop falls.</p>


Nothing is over until the last drop falls.</p>


Nothing is over until the last drop falls.</p>


Nothing is over until the last drop falls.</p>


Nothing is over until the last drop falls.</p>


Nothing is over until the last drop falls.</p>


Nothing is over until the last drop falls.</p>


Nothing is over until the last drop falls.</p>


Nothing is over until the last drop falls.</p>


Nothing is over until the last drop falls.</p>


Nothing is over until the last drop falls.</p>


Nothing is over until the last drop falls.</p>


Nothing is over until the last drop falls.</p>


Nothing is over until the last drop falls.</p>


Nothing is over until the last drop falls.</p>


Nothing is over until the last drop falls.</p>


Nothing is over until the last drop falls.</p>


Nothing is over until the last drop falls.</p>


Nothing is over until the last drop falls.</p>


Nothing is over until the last drop falls.</p>


Nothing is over until the last drop falls.</p>


Nothing is over until the last drop falls.</p>


Nothing is over until the last drop falls.</p>


Nothing is over until the last drop falls.</p>


Nothing is over until the last drop falls.</p>

</div>
</form>
</div>
</body>
</html>

bitte entschuldige die farbengebung

lg,

T.dot · 06.01.2005, 21:46

Farbgebung ist voll ok

Herzlichen Dank, daran hätte ich nicht gedacht - muss ich mir merken

mfg Thomas

06.01.2005, 13:55	#1
T.dot Master Registriert seit: 13.08.2003 Beiträge: 624	[CSS] 2 spaltiges Layout mit 100% Höhe Ahoi! Einfaches Layout: 2 Spalten nebeneinander, links Menü, rechts Haupt"Frame". Das linke Menü soll einen durchgehenden Hintegrund haben, egal wieviel im Hauptteil drinnsteht. Mit Tables funktionierts ja ganz gut PHP-Code: `... <body style="padding:0px"> <table style="height:100%;width:100%;padding:0px" cellpadding="0" cellspacing="0"> <tr> <td style="width:200px;background-color:#CCCCFF;vertical-align:top;padding:10px"> Menu.... </td> <td style="padding-left:10px"> viel Text, der mehr als 100 Prozent hoch ist... </td></tr> </table> </body> ...` ganzer code sieher hier: http://members.aon.at/stemmer/2column100percent.html soweit so gut - nur wie mache ich das mit DIVs? 2 DIVs nebeneinander sind ja kein Problem, nur selbst wenn ich dem linken DIV (und dem Body) Height 100% gebe nützt mir das nichts, wenn der eigentliche Content mehr als 100% braucht (dh. ich scrolle runter und links ist erst wieder normale Hintergrundfarbe) Gibts dafür ne Lösung? herzlichen Dank, mfg Thomas

06.01.2005, 13:58	#2
catch17 Elite Registriert seit: 27.04.2002 Beiträge: 1.307	würde auf layout mit tabellen überhaupt verzichten und das mit css-elementen (containerboxen) lösen - einfacher, sicherer, schneller, eleganter... lg, nachtrag: schau mal hier: http://www.drweb.de/csstechnik/layer_1.shtml lg, ____________________________________ ...wenn Ihr hungert, wenn Ihr dürstet - ihr seit nicht allein, wenn Ihr krank seit wenn Ihr leidet - Ihr seit nicht allein -- ER kümmert sich auch um andere NICHT

06.01.2005, 14:46	#4
catch17 Elite Registriert seit: 27.04.2002 Beiträge: 1.307	schau dir link mal genau an - da findest eigentlich alles was du brauchst - weiters bemüh auch mal die w3c-seite - da gibts gesammte syntax und tutorials lg, ____________________________________ ...wenn Ihr hungert, wenn Ihr dürstet - ihr seit nicht allein, wenn Ihr krank seit wenn Ihr leidet - Ihr seit nicht allein -- ER kümmert sich auch um andere NICHT

06.01.2005, 18:48	#6
catch17 Elite Registriert seit: 27.04.2002 Beiträge: 1.307	vieleicht hilft des :http://www.drweb.de/csstechnik/css_float.shtml - oder missversteh ich dich völlig ?? auf "dr.web" findest noch mehr ebenfalls hier mal vorbeischaun: http://www.css-technik.de/rubrik/9/CSS-Snippets.htm lg, ____________________________________ ...wenn Ihr hungert, wenn Ihr dürstet - ihr seit nicht allein, wenn Ihr krank seit wenn Ihr leidet - Ihr seit nicht allein -- ER kümmert sich auch um andere NICHT

06.01.2005, 19:19	#7
T.dot Master Registriert seit: 13.08.2003 Beiträge: 624	hm, entweder ich dich nicht oder du mich nicht Ich arbeite scho länger mit CSS, weiß auch wie man Boxen nebeneinander schachtel, kenne Float, etc. - das ist auch gar nicht das Problem. Ich habe jetz folgenden Source (mit divs) Code: <body style="background: #FFFFFF"> <div class="leftcontent"> <h1>Menu</h1>... </div> <div class="centercontent"> mal mehr, mal weniger Text </div> </body> CSS schaut so aus: Code: .leftcontent { position:absolute; left:0px; width:180px; height:100%; background-color:#CCCCFF; } .centercontent { margin-left: 200px; margin-right:20px; } Soweit so gut. Das ganze schaut auch noch brauchbar aus, wenn im Center nicht zuviel Text steht. Sobald dort gescrollt werden muss, scrollt das Menü links mit (is ja klar), aber auch der Hintergrund - d.h. ich habe dann links vom Content einen weißen Rand. zur Verdeutlichung: http://members.aon.at/stemmer/2columnCSS.html ich glaube somit sind alle Klarheiten beseitig mfg Thomas

06.01.2005, 14:19	#3
T.dot Master Registriert seit: 13.08.2003 Beiträge: 624	hm, hab mich wohl nicht klar ausgedrückt! Ich wills ja mit CSS machen, nur hab ich bis jetz keine brauchbare Lösung gefunden, wie ich die linke Seite zu immer den gleichen Hintergrund zwinge. Auf positioneverything hab ich zwar diese: http://www.positioniseverything.net/...l.stretch.html Lösung gefunden, die einfach mit einem Hintergrundbild arbeitet, das der Breite der linken Spalte entspricht - aber das halte ich für keine optimale Lösung. mfg Thomas

06.01.2005, 18:10	#5
T.dot Master Registriert seit: 13.08.2003 Beiträge: 624	Ich hab jetz ca. 50 Tutorials zum Thema 2/3 Column Layout gelesen, bei allen geht das von mir gesucht entweder nicht oder nur durch den Trick ein sich wiederholendes Hintergrundbild zu verwenden, dass der Breite des Menüs entspricht. Vielleicht könntest du mir sagen wo auf der w3c page ich die Tutorials find? Danke, mfg Thomas

06.01.2005, 21:46	#9
T.dot Master Registriert seit: 13.08.2003 Beiträge: 624	Farbgebung ist voll ok Herzlichen Dank, daran hätte ich nicht gedacht - muss ich mir merken mfg Thomas

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)