Mehrfach verschachteltes Layout

Ueberflasher · #1 (**permalink**) 19.03.2004, 20:54

Hallo,

sorry bin ganz neu in diesem Thema und weiss nicht mal genau nach was ich suchen müsste, bzw. was ich als Thema schreiben soll.

Das Problem sieht so aus:

Der rote Balken soll genau 100px hoch sein.
Der grüne Balken soll genu 10px hoch sein.
Der blaue genau 250 breit.
Der weisse soll die restliche Breite ausfüllen.
Der blaue und weisse soll die Höhe so ausfüllen, das wenn im weissen wenig Text ist, das Layout so aussieht wie auf dem Bild.
Bei viel Text im weissen soll die Höhe vom blauen und weissen ansteigen.

Ich hoffe das ist soweit klar. Ich bekomm das nicht hin.

Danke für die Hilfe!

P.S.
Die HTML-Datei soll im Body nur <div> und <span> enthalten, also Layoutfrei sein.

cu...

lycka · #2 (**permalink**) 20.03.2004, 14:09

Zuerst mal das HTML Gerüst:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Conforming XHTML 1.0 Transitional Template</title>
</head>
<body>
<div id="bodyblock">
    <div id="rot"></div>
    <div id="blau"></div>
    <div id="weis"></div>
    <div id="gruen"></div>
</div>
</body>
</html>

Der Bodyblock ist falls du das ganze centriert haben möchtest, jedoch ist dieser nicht unbeding notwendig.

Mit diesem Grundgerüst kannst du nun das layouten beginnen

Code:

#rot{ height: 100px; margin:0; padding: 0; }
#blau{ float: left; width: 250px;}
#weis{ margin-left: 250px}
#gruen{ clear: both; height: 10px;}

So das wars.
Jetzt kommt es zu Problemen, wenn im Content zu wenig steht, da dann der weisse block nicht bis ganz nach unten durchgeht. Eine wirklich einfache Browserübergreifende Lösung gibt es dafür nicht. Jedoch sollte man sich hierbei durch die Einbindung eines Hintergrundbildes behelfen. Ausfürlich beschrieben ist das unter: http://www.alistapart.com/articles/fauxcolumns/

Hier würde dann das wie folgt aussehen:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Conforming XHTML 1.0 Transitional Template</title>
</head>
<body>
<div id="bodyblock">
    <div id="rot"></div>
  <div id="contentblock">
    <div id="blau"></div>
    <div id="weis"></div>
  </div>
    <div id="gruen"></div>
</div>
</body>
</html>

Code:

#rot{ height: 100px; margin:0; padding: 0; }
#blau{ float: left; width: 250px;}
#weis{ margin-left: 250px}
#gruen{ clear: both; height: 10px;}
#contentblock{ background: url("hg-grafik.gif") repeat-y}

Die hg-grafik.gif beschreibt den Hintergrund praktisch links blau und rechts weis. bzw. es lässt sich sogar noch ein cooler Rand einbauen...

Ueberflasher · #3 (**permalink**) 20.03.2004, 20:35

hi,

soweit war ich auch schon. Das ganze funktioniert so leider überhaupt nicht.

Wenn Du mal backgroundcolors vergibst und nur in den div mit weis ein paar zeilen eingibst, wirst Du folgendes sehen:

1. der blaue div ist nur ein paar pixel hoch und nicht so hoch wie der weis.
2. auch mit einem background bild das 2000px hoch ist, wird nicht aufgestrecht, also die Höhe von blau und weis beeinflusst.

Immer noch das gleiche Problem

lycka · #4 (**permalink**) 21.03.2004, 21:48

Hi,

also ich hatte ein paar ; am Ende vergessen, aber das ganze hat bei mir schon ganz gut funktioniert.

DAs mit dem Bild ist ein kleiner Trick. Da ich vorher im code versehentlich den Namen der ID falsch betitelt habe, hat es nicht funktioniert.

Zu dem Bild:
Es soll nicht 2000px hoch sein. Es muss nur breit sein. Sagen wir mal 1300 pixel. Für unseren Fall muss es nur 1px hoch sein und wie folgt aussehen:
Die ersten 250px sind blau und der Rest weis. Damit wird als Hintegrund der linke Part blau und der Rest weis, egal wie hoch die einzelnen Blöcke sind. Lies dir am besten noch einmal den Artikel durch
http://www.alistapart.com/articles/fauxcolumns/
Zum Schluss nochmal den verbesserten Code:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Conforming XHTML 1.0 Transitional Template</title>
<style type="text/css">
<!--
#rot{ height: 100px; margin:0; padding: 0; background-color: red;}
#blau{ float: left; width: 250px; background-color: blue;}
#weis{ margin-left: 250px; background-color: gray;}
#gruen{ clear: both; height: 10px; background-color: green;}
#bodyblock{ background: url("hg-grafik.gif") repeat-y;}
-->
</style>
</head>
<body>
<div id="bodyblock">
    <div id="rot">roter balken</div>
    <div id="blau">blau</div>
    <div id="weis">hallo inhalt</div>
    <div id="gruen">footer</div>
</div>
</body>
</html>

lycka · #5 (**permalink**) 22.03.2004, 07:54

Hier ist das Bild aus dem Artikel:

Also das Hintergrund bild sollte so aufgebaut sein. Da wir das Bild nicht auf den gesammten Body anwenden benötigen wir nicht die grauen Ränder: Dort wo jetzt content area steht, machst du alles blau und die Breite eben 250px dort wo jetzt right column steht, da machst du alles weis. In dem Fall mit blau links und weis rechts würde eine nur blaue Grafik auch reichen. Man müsste dann nur noch left zur Positionierung hinzu fügen:
#bodyblock{ background: url("hg-grafik.gif") repeat-y left;}

Aber für andere Fälle würde ich raten, die Grafik breit genug zu machen. Da ja die Farbe konstant ist und das ganze 1-3px hoch ist benötigt diese nicht unbeding viel Speicher als gif.

Pro2k · #6 (**permalink**) 24.03.2004, 15:56

Also ich hab sowas änliches gemacht bei mir sieht das folgendermaßen aus:

Code:

<body>
<div id="rot">blabla</a></div>
<div id="blau-weis">
	<div id="blau">blabla</div>
         <div id="weiß">blabla</div>
</div>
<div id="grün">blabla</div>
</body>

Und im CSS steht ungefähr folgendes:

Code:

#rot {
	height: 100px;
	width: 100%;
}

#blau-weiß {
	margin-top: 10px;
	width: 100%;
	padding: 3px;
	text-align: left;
	left: 0px;
}

#blau {
	text-align: left;
	border-left-color: #752131;
	border-left-style: solid;
	border-left-width: 10px;
	width: 165px;
	border-bottom-color: #B92845;
	border-bottom-style: solid;
	border-bottom-width: 18px;
	float: left;
}

#weiß {
	text-align: center;
	border-left-color: #752131;
	border-left-style: solid;
	border-left-width: 10px;
	border-right-color: #752131;
	border-right-style: solid;
	border-right-width: 10px;
	margin-left: 170px;
}

#grün {
	background-image: url(gif/balken.gif);
	text-align: right;
	color: white;
	padding: 2px;
	margin-top: 10px;
	height: 18px;
	width: 100%;
}

Hoffe, das hilft weiter. Ich habe meinen Quelltext auf das wesentliche Problem gekürzt. Denk so sollte es funktioniern. Zumindest bei mir dominiert immer die Länge, vom längeren *g*

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Was bevorzugt ihr - fixes, fluides oder elastisches Layout	mimii	CSS	0	19.12.2011 20:12
Bitte um Hilfe - CSS und Prozentangaben	sprefer	CSS	3	01.03.2011 04:11
Untermenü im IE	nici	CSS	10	22.06.2009 21:19
Probleme mit Layout	kruemelchen26	CSS	0	15.05.2007 22:40
Verschachteltes Layout mit CSS - aber wie?	marches	CSS	3	04.02.2006 09:49