Problemlösung

von

Hallo

Kaloeffel möchte gern, dass ich für ihn ein Problem löse und das mach ich auch..

Neue Herausforderung:

Ich möchte dass die Sidebar oben anfängt, also nicht nur neben dem Content sondern auch neben dem Header.
Die Seite soll die ganze breite einnehmen und der Header und Content sollen eine flexible breite haben.
Problem: Wenn z.B. der Header die Eigenschaft “float:left;” bekommt, ist die Größe nicht mehr flexibel sondern nur noch das Minimum.

Ausgehend vom Beispiel aus dem dritten Teil des CSS Einsteiger Tutorials kommt nun die Lösung.

Zuerst müssen wir natürlich das Markup, also den XHTML Code ändern. Die Sidebar muss für sich sein, und der Header muss in den Content geschoben werden oder man erstellt ein neues div, in das man Header und Content schiebt. Der Einfachheit halber verzichte ich aber jetzt darauf. Ein Footer wurde nicht gewünscht, deshalb lasse ich den jetzt auch mal weg. Zum Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<html>
	<head>
	<!-- meta Elemente, Verlinkung auf CSS Datei -->
	</head>
	<body>
		<div id="page">
			<div id="sidebar">
				Sidebar
			</div>
			<div id="content">
				<div id="header">
					Header
				</div>
				Content
			</div>
		</div>
	</body>
</html>

Soweit sogut. Jetzt müssen wir natürlich auch das CSS ändern. Wir haben 2 Hürden zu bewältigen: 1. die Variable Breite und 2. eine Sidebar mit fester Breite, die neben Header und Content platziert sein soll.

Die Änderungen, die dafür notwendig sind, sind ziemlich simpel. Das Page-Div verliert seine feste Breite und bekommt width:100% statt 800px. Die Sidebar behält float:left, der Content (der den Header jetzt enthält) verliert aber jegliches float sowie seine feste Breite und bekommt stattdessen ein margin-left mit dem Breitenwert der Sidebar.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

#page {
	width:100%; /* Seite hat variable Breite  */
}
 
#header {
	background-color:#0ff;
	height:50px;
}
 
#sidebar {
	clear:left;
	float:left;
	background-color:#f80;
	width:200px;
	height:100px;
}
 
#content {
	background-color:#f0f;
	height:400px;
	margin-left:200px;
}

Ergebnis:

So soll es sein

So soll es sein

Das war es auch schon ;)

Die hier könnten dich auch interessieren…

nach oben