Die einfachste Lösung ein Layout für die Website zu erstellen ist mit festen Größenangaben zu arbeiten. Sie ist aber auch am Unflexibelsten, denn das Layout kann sich dann nicht den Bedürfnissen des Betrachters anpassen. Viele heutige Design haben als Maßeinheit für ihr Layout Pixel. Der große Vorteil liegt in der genauen Platzierung von Elementen, wie z.B. Spalten oder aber auch Designelemente wie Hintergrundbilder. Der große Nachteil liegt aber auch gerade in diesen festen Größenangaben. Und hier setzen die flexiblen Design an.

Probleme mit Pixeln und Prozenten

Eine gute Möglichkeit ein flexibles Layout zu entwerfen und trotzdem gewisse Gestaltungsproportionen einhalten zu können besteht darin, die Maßeinheiten EM zu nutzen. Ein EM ist die einfache Größe eine Großbuchstabens. Die Maßeinheit Pixel hat den klaren Nachteil, des eine Spalte die mit 200 Pixel definiert ist immer 200 Pixel breit ist, egal ob der Betrachter seine Schrift vergrößert, weil er einen großen Monitor benutzt oder verkleinert. Nun könnte man aber die Spaltenbreite in Prozent angeben. Auch hier entsteht das gleiche Problem wie bei den Pixeln. Die Spalte bleibt immer z.B. 20% von der gesamten Browserbreite breit, auch wenn man die Schrift vergrößert oder verkleinert. Der Vorteil gegenüber dem Pixel-Layout liegt in der flexiblen Anpassung an die verschiedenen Monitorgrößen. 20% bei einer Auflösung von 1024 * 768 ist deutlich breiter als bei einer Auflösung von 800 * 600.

Layout mit EM

Mein Ansatz ist es nun zwar eine feste Breite wie bei der Pixelangabe zu benutzen, aber diese Breite richtet sich immer nach der Schriftgröße. Wenn also ein Betrachter bei seiner Monitorauflösung von 1280*800 die Darstellung einer Website als zu klein empfindet, dann kann es durch eine schnelle Anpassung der Schriftgröße dieses wunderbar korrigieren. Umgekehrt geht dieses natürlich auch. Ist die Website für 1024*768 optimiert und ein Betrachter besitzt nur 800*600. Dann kann er schnell und meist auch sehr einfach die Schriftgröße seines Browsers ändern und alles ist wieder bestens. In den meisten Browser kann man durch betätigen der Plus- bzw. Minustaste mit gleichzeitigen drücken der STRG-Taste die Schrift des Browsers anpassen.

Wie könnte nun z.B. ein solches 3-spaltiges Layout aussehen?

Als erstes möchte ich die Grundstruktur der HTML-Seite erklären. Dazu erstmal das DOM der Seite

body
 +div#page
   +div#header
   | +div#head
   | +div#bar
   +div#body
   | +div#main
   | | +div#content
   | | +div#left
   | +div#right
   +div#footer

Bei der Identifizierung der einzelnen Container habe ich auf Eindeutigkeit geachtet. Es sollte hoffentlich klar werden was wofür ist. Um eine schnell umsetzbare 3-Spaltigkeit zu bekommen, habe ich die linke Spalte und den eigentlichen Inhalts-Container zusammengefasst. Somit habe ich auch erreicht, dass der Inhalt noch vor den restlichen Spalten im Quelltext steht, was wiederum Suchmaschinen als angenehm empfinden, da das wichtige am Anfang steht.

Das CSS-Grundgerüst

1. * {margin:0;padding:0;}
2. body {
3. font:14px/130% "Lucida Grande", "Lucida Sans Unicode", Sans-Serif;
4. background-color:#666;
5. color:#fff;
6. text-align:center;
7. }

Hier ist nichts weiter überraschendes dabei. Erwähnen möchte ich nur, dass die gesamte Seite in der horizontalen Mitte ausgerichtet ist. Weswegen ich die Eigenschaft text-align auf center gesetzt habe.

1. #page {
2. width:68em;
3. margin:0 auto;
4. text-align:left;
5. background-color:#fff;
6. color:#000;
7. }

Die Gesamtbreite der Seite entspricht hier also 68 Großbuchstaben. Das entspricht ungefähr 120 Zeichen. Um die Seite auch mittig zu platzieren wurde der linke und rechte Außenabstand der Wert auto zugewiesen. Zusätzlich wurde der Text wieder linksbündig ausgerichtet.

1. #header {
2. background:#333;
3. color:#fff;
4. height:8em;
5. }
6. #body {
7. clear:both;
8. }
9. #footer {
10. clear:both;
11. background:#333;
12. color:#fff;
13. height:3em;
14. }

Auch die Container head, body und footer enthalten nichts überraschendes. Nur das der body- und der footer-Container mit der Eigenschaft clear und den Wert both für das Aufheben der float-Eigenschaft der vorhergehenden Container zuständig sind.

1. #main {
2. float:left;
3. width:52em;
4. }
5. #left {
6. float:left;
7. width:15em;
8. }
9. #content {
10. float:right;
11. width:45em;
12. }
13. #right {
14. float:right;
15. width:15em;
16. }

Nun formatiert man den mittleren Teil. Als erstes wird dieser in 2 Teile getrennt. Der Main-Container wird nach links gelegt und der Right-Container dementsprechend nach rechts. Zusammen ergibt sich eine Breite die gleich ist mit der Gesamtbreite des Page-Containers. Innerhalb des Main-Containers wird wiederum der Platz in 2 Spalten aufgeteilt, so dass diese Gesamtbreite der Breite des Main-Containers entspricht.

Zum Schluss die komplette CSS-Formatierung:

1. * {margin:0;padding:0;}
2. body {
3. font:14px/130% "Lucida Grande", "Lucida Sans Unicode", Sans-Serif;
4. background-color:#666;
5. color:#fff;
6. text-align:center;
7. }
8. #page {
9. width:68em;
10. margin:0 auto;
11. text-align:left;
12. background-color:#fff;
13. color:#000;
14. }
15. #header {
16. background:#333;
17. color:#fff;
18. height:8em;
19. }
20. #body {
21. clear:both;
22. }
23. #footer {
24. clear:both;
25. background:#333;
26. color:#fff;
27. height:3em;
28. }
29. #main {
30. float:left;
31. width:52em;
32. }
33. #left {
34. float:left;
35. width:15em;
36. }
37. #content {
38. float:right;
39. width:45em;
40. }
41. #right {
42. float:right;
43. width:15em;
44. }

und die Downloads der Dateien:

• HTML-Datei
• CSS-Datei
• komplettes Set

Ähnliche Beiträge

• flexibles CSS Layout
• CSS 3-Unterstützung der Browser
• CSS Layouts am Fließband
• Beschriftung von Containern
• Dreamweaver-Schulung für den Solar Verlag

Nach ein paar Überlegungen kamen wir dann auf die Teilung des CSS-Designs in 4 Dateien:

• basic.css
• 2column.css
• 3column.css
• content.css

In der Basisdatei werden alle grundlegenden Formatierungen für das Layout, wie z.B. Kopf- und Fußbereich bzw. Navigationsspalte festgelegt. Zusätzlich wird das gesamte Design zentriert und auf eine festen Breite eingestellt. Wobei die feste Breite nicht zwingend mit Pixeln zu lösen sein muss, denn in CSS können z.B. Breitenangaben auch in Em angegeben werden.

In der Inhaltsdatei werden dann alle restlichen für die Darstellung wichtigen Formatierungen, wie z.B. Absätze Listen und Tabellen, definiert. Zusätzlich können dort auch Ausrichtungen von Bilden angegeben werden.

Falls man nun aber einige Unterseiten brauchen sollte, die ein 2 spaltigen Layout benötigen, dann bindet man einfach, zusätzlich zu den beiden Grunddateinen, die 2-Spaltige mit ein. In der HTML-Datei gruppiert man nun noch über 2 DIV-Container die Inhalte in die jeweiligen Spalten.

Gleiches gilt auch für ein 3 spaltiges Layout. Hier gibt es auch eine zusätzliche CSS-Datei und auch hier muss man den jeweiligen Inhalt in die 3 Spalten aufteilen.

Ähnliche Beiträge

• Dreamweaver-Schulung für den Solar Verlag
• flexible Layouts mit CSS
• CSS">Dreamweaver und CSS
• CSS-Seminar bei VVA
• CSS 3-Unterstützung der Browser