27.08.2008 - geschrieben von mrvn in Tutorials
5 Einfaches CSS Layout erstellen
Da es nun die Tutorialsektion gibt ist es der beste Zeitpunkt das CSS Layout Tutorial aus dem Downloadbereich (nun ja nicht mehr) nun hier auch noch einmal aufzugreifen. Ich werde auch noch zusätzliche Erläuterungen miteinbringen. Ziel: Grundaufbau zeigen und so das Verständnis für CSS ein wenig weiter entwickeln.
Merkmale: feste Breite, 2 Spalten
Das HTML Gerüst
<div id="gesamt"> <div id="header">Inhalt</div> <div id="inhalt">Inhalt</div> <div id="sidebar">Inhalt</div> <div id="footer">Inhalt</div> </div>
Wie ihr seht besteht das Layout aus insgesamt 5 div-Containern. Der Container #gesamt umschliesst die anderen 4 div‘s und ist für das Zentrieren der Seite im Browserfenster (CSS: margin: 0px auto;) und die Gesamtbreite (CSS: width: 800px;) zuständig.
Die anderen 4 Bereiche (#header, #inhalt, #sidebar, #footer) sind die eigentlichen Inhaltsbereiche und sind eigentlich schon nach der entsprechenden Funktion mit einer id benannt. Das wichtigste hierbei ist das #header und #footer 100% Breite des Layouts nutzen, #inhalt und #sidebar sich jedoch die Breite “teilen” und somit 2 Spalten erzeugen.
Der CSS Teil
#gesamt {
margin:0px auto;
width:800px;
padding:5px;
border:1px solid #ddd;}
#header {
padding:10px 5px;
margin-bottom:5px;
background:#f5f5f5;}
#inhalt {
width:550px;
padding:5px;
float:left;
margin-bottom:5px;
background:#f5f5f5;}
#sidebar {
width:220px;
float:right;
padding:5px;
margin-bottom:5px;
background:#f5f5f5;}
#footer {
clear:both;
padding:5px;
background:#f5f5f5;}
Um die Spalten zu erzeugen, habe ich die CSS-Eigenschaft float:left; beim Inhaltscontainer bzw. float:right; für die Sidebar benutzt. Damit das reibungslos funktioniert habe ich im Footer die Eigenschaft clear:both; benutzt, was sozuagen das “Umfließen” auf beiden Seiten wieder beendet.
Ich habe die Bereich schon mit ein bisschen Hellgrau voneinander abgegrenzt, damit man besser versteht, wie der vorrangestellte Quelltext im Browser erscheint.
Das Resultat
Wer sich das ganze dennoch genauer anschauen will, hier noch mal der Downloadlink:
CSS Layout Tutorial (130.3 KiB, 861 Downloads)
Hoffe ich konnte dem ein oder anderen noch was zeigen. Fragen, Anregungen & Diskussion könnt ihr direkt in die Kommentare schreiben. Vielen Dank für das Interesse.
Tags: css
5 Kommentare
Trackback - RSS Kommentare zu "Einfaches CSS Layout erstellen"
1 flek
schrieb am 27. August 2008 um 13:16
Ich persönlich bevorzuge die Variante mit zwei “float:left”, muss aber jeder selber wissen.
Trotzdem hilfreich, speziell für diejenigen die zwar den XHTML/CSS Syntax kennen aber (noch) nichts anfangen können.
Ich werde in den nächsten Tagen ein ähnliches Tutorial veröffentlichen :-)
2 Marvin
schrieb am 27. August 2008 um 13:23
Danke für den Kommentar. Die Variante alle nach links “fließen” zu lassen, benutze ich erst ab 3 Spalten. Aber gerade für Einsteiger, dachte ich, ist es so vielleicht noch ein wenig logischer ;)
3 SILAV Kurdistan
schrieb am 28. August 2008 um 19:26
sehr gut.. danke..
4 Stephan Glas
schrieb am 31. August 2008 um 19:40
Sehr gut besonders die Grafik sollte einigen die Augen öffnen (zb. mir) =)
Dankeschön
5 zauberer berlin
schrieb am 29. Dezember 2008 um 22:53
bin ich doch gerade über diesen netten Artikel gestolpert, habt dank dafür, finde ich sehr gut und würde mir mehr von dieser sorte wünschen …
und nun stöber ich noch ein bisschen bei euch und dann schau ich bei flek vorbei was er so geschrieben hat …
Grüße