[CSS] Hilfe bei Layout mit CSS

**jahlives** · 06.03.2007, 10:00

Guckst du hier Ist ja nicht mehr als ein normales zweispaltiges Layout.
1 div im Textfluss für header
1 div float left für die beiden Container links
1 div für den content
1 div für den footer

Gruss

tobi

**st@tic** · 06.03.2007, 10:27

ich hab schon bisschen rumprobiert und die seite kenn ich und hab ich auch durchstöbert.

problem ist

beide div container mit float left funktioniert nicht richtig. diese werden im Firefox nebeneinander dargestellt. wenn ich diese beiden dinge dann nochmal extra in ne divbox reinstopfe, dann gehts aber die abstände klappen nicht ganz.

**Kropff** · 06.03.2007, 10:31

vielleicht helfen dir meine tutorials weiter

gruß
peter

**jahlives** · 06.03.2007, 10:41

beide div container mit float left funktioniert nicht richtig

Nur ein div mit float left und darin zwei normalo divs.

Gruss

tobi

**st@tic** · 06.03.2007, 11:13

Original geschrieben von jahlives
Nur ein div mit float left und darin zwei normalo divs.

Gruss

tobi

schön dann sind beide boxen untereinander und die content-liegt dann teilweise hinter den beiden, mit float: right is es garnet sichtbar und im ie hängt es unter den boxen.

für jemand, der sich bisschen mit css auskennt dürfte das doch keine schwierigkeit sein und eine beispiel html + stylesheet zu machen. solangsam hab ich nämlich alle erdenklichen kombinationen durchgeraten.

**jahlives** · 06.03.2007, 11:17

schön dann sind beide boxen untereinander und die content-liegt dann teilweise hinter den beiden,

Dann machst du was falsch !

Code:

<html>
<head>
<style type="text/css">
.header {
background-color:blue;
}
.link_cont {
float:left;
width:200px;
}
.content {
text-align:left;
}
</style>
</head>
<body>
<div class="header">
Und ich bin noch viel viel mehr Text im Header
</div>
<div class="link_cont">
<div style="background-color:red;">
Sämtliche Beispiele unterliegen dem Copyright. Sie dürfen aber zum Gestalten eigener Webseiten ohne

Quellnachweisangabe kopiert und weiterverwendet werden. Außerdem ist zu beachten, dass die

verschiedenen, horizontal angeordneten Container nicht gleich groß sind. Das sieht aufgrunde der

Hintergrundfarbe des Elements in dem die Elemente "gebettet" sind nur so aus.
</div>
<div style="background-color:green;">
Betrachtet man den Quellcode von Webseiten, die mit Tabellen erstellt wurden, so findet man häufig

komplexe Strukturen verschachtelter Tabellen. Das gleiche Layout, erzeugt mit CSS, kann durchaus

bis zu 40% weniger Quellcode bedeuten. Jeder Modembesitzer wird dankbar sein, da es spürbare

Geschwindigkeitsvorteile bringt. Auf Seite der Webseiten-Betreiber bedeuten kleinere Dateien

geringeres Transfervolumen. Reduziert man die Größe einer Datei von z.B. 5kB auf 3kB und geht man

von 100.000 Besucher pro Monat aus, ergibt sich ein verringertes Transfer-Volumen von 2,4 GB pro

Jahr für nur eine Datei. Hochgerechnet auf eine ganze Seite kann sich eine Umstellung durch diese

Kostenersparnis durchaus rechnen.
</div>
</div>
<div class="content">
Warum keine Tabelle?
Obwohl Tabellen nie zum Layouten von Seiten vorgesehen waren, wurden und werden sie meistens

verwendet. Die Gründe liegen auf der Hand: Unerfahrene Webdesigner können mit einem WYSIWYG-Editor

sehr schnell ein Design entwickeln. Mit CSS und div-Container ist das ohne Kenntnisse der Materie

etwas problematischer. Weiterhin unterstützen erst die modernen Browser der letzten 1-2 Jahre CSS

soweit, dass sich ein Umstieg lohnt. Da viele Seiten im Web noch nicht überarbeitet sind, finden

sich auch noch viele Seiten, die mit Tabellen layoutet wurden. Dabei ist ein Umstieg mittlerweile

durchaus lohnenswert.
Stichwort "Aufgeblähter Quellcode"
Betrachtet man den Quellcode von Webseiten, die mit Tabellen erstellt wurden, so findet man häufig

komplexe Strukturen verschachtelter Tabellen. Das gleiche Layout, erzeugt mit CSS, kann durchaus

bis zu 40% weniger Quellcode bedeuten. Jeder Modembesitzer wird dankbar sein, da es spürbare

Geschwindigkeitsvorteile bringt. Auf Seite der Webseiten-Betreiber bedeuten kleinere Dateien

geringeres Transfervolumen. Reduziert man die Größe einer Datei von z.B. 5kB auf 3kB und geht man

von 100.000 Besucher pro Monat aus, ergibt sich ein verringertes Transfer-Volumen von 2,4 GB pro

Jahr für nur eine Datei. Hochgerechnet auf eine ganze Seite kann sich eine Umstellung durch diese

Kostenersparnis durchaus rechnen.
Unterschiedliche Ausgabemedien
Die Zahl der unterschiedlichen Ausgabemedien steigt. Ob Bildschirm, Drucker, PDA, Handy, Beamer,

Textbrowser oder Sprachausgabe, eine Webseite kann von allen Medien angezeigt, bzw. ausgedruckt

werden. Und mit tabellenlosem Layout hast du die Möglichkeit, das Layout an die unterschiedlichen

Ausgabemedien optimal anzupassen.
Private Homepages
Die oben genannten Argumente treffen sicherlich nicht alle auf private Homepages zu. Auf der

anderen Seite steht hier der Spaß am Schreiben der Webseite im Vordergrund. Also solltest du doch

an diesem Thema interessiert sein und etwas tiefer einsteigen, oder?
Beispiele
Die folgenden Beispiele zeigen dir unterschiedliche Layouts mit den entsprechenden

Erläuterungen.Sie sind alle validiert nach XHTML 1.0 Strict und funktionieren mit den folgenden

Browsern:
Internet Explorer (Win/Mac) ab der Version 5
Netscape ab der Version 6
Opera ab der Version 5
Mozilla ab der Version 1
Firefox ab der Version 0.8
</div>
</body>
</html>

Gruss

tobi

**st@tic** · 06.03.2007, 11:39

danke bringt mich auf jeden fall mal ein ganzes stück weiter.
nur wie krieg ich zwischen den beiden boxen links und der contentbox nen abstand hin? hab bei content margin-left: 10px angegeben aber bewegt sich kein stück.

hab noch ne kleine frage

und zwar wäre es sinnvoll und sauber wenn ich das ganze layout quasi in drei "hauptboxen", welche untereinander sind, aufteile und in diesen boxen quasi erst die spalten für links mitte und ggf rechts mache?

**Kropff** · 06.03.2007, 11:58

margin-left: breite der linken boxen + 10px
verpaß deinen content mal ein background-color oder border, dann siehst du es

gruß
peter

**st@tic** · 06.03.2007, 12:29

Original geschrieben von Kropff
[B]margin-left: breite der linken boxen + 10px

das wars...
danke

als designer kann man mich wirklich in die tonne treten

[CSS] Hilfe bei Layout mit CSS