Einzelnen Beitrag anzeigen
  #1 (permalink)  
Alt 12.08.2009, 12:34
Zeussi Zeussi ist offline
bananaking ftw!
neuer user
Thread-Ersteller
 
Registriert seit: 06.02.2009
Beiträge: 14
Zeussi befindet sich auf einem aufstrebenden Ast
Rotes Gesicht 2 Spalten - dynamische Breite

Hallo Leute,

derzeit versuche ich mich an einem dynamischen Layout. Es besitzt zwei Spalten, links für das Menü, rechts für den Content. Das Menü hat eine fixe breite. Der Content soll dynamisch an die Breite des Browserfensters angepasst werden. Das funktioniert soweit gut.

Das Problem:
In dem dynamischen Contentbereich befinden sich Boxen, die ebenfalls von der Breite des Browserfensters abhängig sein sollen. Irgendwie komm ich einfach auf keine brauchbare Lösung...

HTML-Code:
#container1 {
	clear:left;
	float:left;
	width:100%;
	overflow:hidden;
	background:#ffa7a7;
}
#container2 {
	float:left;
	width:100%;
	position:relative;
	left:200px;
	background:#fff689;
}
#menu {
	float:left;
	width:200px;
	position:relative;
	right: 200px;
}
#content {
	float:left;
	position:relative;
	background: green;
	right: 170px;
}
HTML-Code:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Hilfe</title>
<meta http-equiv="Content-Type" content="text/plain; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="css/standard2.css" />
</head>
<body>

<div id="container1">
 <div id="container2">
  <div id="menu">menu start<br /><br /><br />menu end</div>
  <div id="content">content</div>
 </div>
</div>
<div style="clear: both; background-color: blue; width: 100%;">footer</div>

</body>
</html>
so sieht das ganze dann aus


Die grüne Content Box soll auch dynamisch an die Breite angepasst werden...

Danke für's Durchlesen,

Zeussi


//edit:

Ach ja, falls jemand ein Template oder sonst was weiß, wo dieses Problem schon gelöst wurde - sprich, ein schon vorhandener Lösungsvorcshlag bekannt ist, dann würde ich mich auch über einen Link dazu freuen.

Hier nochmal eine kleine Grafik, wie das Grundlayout aussehen soll, dass man sich es besser vorstellen kann:



Dabei ist nav fix - der Rest soll dynamisch an die Breite angepasst sein, also cont, box, head, footer,....

//edit 2:

hier nochmal ein Link, so dass man es sich besser vorstellen kann - Beispiel 1 ist mit Tabelle, Beispiel 2 ohne - Beide Fenster gehen automatisch mit nach unten, nur der Unterschied: die orange Box passt sich nicht dynamisch an die Browserfensterbreite an:

http://zeussi.bplaced.net/test-css.htm

Geändert von Zeussi (13.08.2009 um 15:56 Uhr)
Mit Zitat antworten
Sponsored Links