Webdesign

Ein CSS-Layout erstellen

Dieses Tutorial ist eine autorisierte Übersetzung des Maxdesign Tutorials Colored Boxes, das Russ Weakly am 13.01.2004 veröffentlicht hat. Es erklärt Schritt für Schritt die Erstellung eines komplett auf Cascading Stylesheets (CSS) basierenden Webseitenlayouts.
Im Klartext: eine so gestaltete Webseite verwendet keine Tabellen für Layoutzwecke und hat dadurch viele Vorteile. Näheres zu standards-basiertem Design kann man z.B. beim Webstandards-Adventskalender (2004) nachlesen oder auch in der ebenfalls von Maxdesign erstellten Übersicht, die es auch auf deutsch gibt.

Wie gestaltet man das Layout einer Website komplett mit CSS?

Gibt es eine Methode, mit der man jede Art von CSS-Layout realisieren kann?

Der folgende Artikel stellt eine Methode vor, wie man ein CSS-basiertes Layout von A bis Z erstellt. Dabei werden wir für die einzelnen Seitenbereiche farbige Kästen positionieren und das Layout in verschiedenen Browsern testen. Diese Vorgehensweise kann für eine breite Palette verschiedener CSS-basierter Layouts verwendet werden.

Farbige Kästen: Einführung

Unser Ausgangspunkt ist ein einfacher Websitenentwurf, den wir in einem Grafikprogramm erstellt haben. Auf dieser Grundlage werden wir eine funktionierende (X)HTML-Seite bauen. Wichtig dabei sind nicht die Details, sondern die generelle Vorgehensweise.

Grafikentwurf

Sämtliche Beispieldateien können gesammelt als zip-Archiv (193 KB) herunter geladen werden.

Während des gesamten Designprozesses sind einige Richtlinien wichtig:

Das Design in einzelnen Schritten entwickeln und jeden Schritt in einer Reihe verschiedener Browser testen

Es passiert leicht, dass man ein Layout entwirft und auf halbem Weg plötzlich auf ein Problem stößt. Um das zu vermeiden sollte man versuchen, das Layout in kleinen Schritten zu erstellen und nach jedem einzelnen Schritt in verschiedenen Browsern zu testen. So sieht man genau, wie sich das Layout entwickelt, und wenn Probleme auftauchen, lassen sie sich leicht nachvollziehen.

Für moderne Browser entwickeln und dann „rückwärts“ gehen

Es ist besser, zunächst für standards-konforme Browser der neuesten Generation zu entwickeln und erst nachträglich Lösungen für die älteren, weniger standards-kompatiblen Browser einzufügen oder aber Teile des Stylesheets vor diesen zu verbergen (mit @import).

Beim Entwickeln und Testen das CSS im Kopf (head) des Dokuments notieren

Es ist viel einfacher, die CSS-Regeln zunächst im head-Bereich des HTML-Dokuments zu notieren. Das geht schneller und vermeidet Probleme, die im Zusammenhang mit dem Browsercache auftreten können (indem die Testbrowser ein Stylesheet lokal speichern und möglicherweise Aktualisierungen nicht sofort anzeigen). Wenn das Layout dann fertig ist, kann man das CSS dann entfernen und in eine separate Datei auslagern.

(X)HTML-Markup und CSS-Regeln validieren

Man sollte sowohl das (X)HTML-Markup als auch die CSS-Regeln häufig validieren. Viele Probleme entstehen durch Fehler in der Notation und werden beim Validieren erkannt.

Entscheiden, welche Browser unterstützt werden sollen

Bevor man beginnt, ein CSS-basiertes Layout zu erstellen, sollte man festlegen, welche Browser man unterstützen will. Um diese Entscheidung zu treffen, kann man sich mit dem Kunden und mit Testusern absprechen, sowie die Logfiles analysieren, falls es sich um ein Redesign einer bereits bestehenden Site handelt.

Es gibt drei Hauptgruppen von Browsern, die CSS in unterschiedlichem Maß unterstützen. Momentan sind das folgende:

Ältere Browser

Neuere Browser

Moderne Browser

Verschiedene Grade der Browserunterstützung

Komplette CSS-Unterstützung

Der Browser erhält alle CSS-Regeln und sollte das Layout einigermaßen akkurat darstellen. Wenn man die komplette Unterstützung für ältere Browser erreichen möchte, muss man sich in der Regel auf sehr grundlegende CSS-Gestaltung beschränken und kann keine umfangreiche CSS-Positionierung einsetzen.

Teilweise CSS-Unterstützung

Bestimmte CSS-Regeln werden vor bestimmten Browsern versteckt. Das bedeutet, dass der Browser das Layout möglicherweise nicht vollständig korrekt anzeigt, dass aber die grundlegende Darstellung der Seite erhalten bleibt. Zum Beispiel würden Schriftarten und Farben korrekt dargestellt, es gäbe aber Abweichungen bei der Positionierung einzelner Elemente.

Ungestalteter Inhalt

Alle CSS-Regeln werden versteckt, der Browser zeigt nur den reinen (X)HTML-Inhalt an, diesen aber korrekt und vollständig lesbar.

Browser-Support-Optionen
  Moderne Browser Neuere Browser Ältere Browser
Option 1 Komplette
CSS-Unterstützung		 Komplette
CSS-Unterstützung		 Komplette
CSS-Unterstützung
Option 2 Komplette
CSS-Unterstützung		 Komplette
CSS-Unterstützung		 Teilweise
CSS-Unterstützung
Option 3 Komplette
CSS-Unterstützung		 Komplette
CSS-Unterstützung		 Ungestalteter
Inhalt
Option 4 Komplette
CSS-Unterstützung		 Teilweise
CSS-Unterstützung		 Ungestalteter
Inhalt

In unserem Beispiel werden wir die zweite Option benutzen.

Mögliche Container im Design erkennen

Um einzelne Elemente auf der Seite zu positionieren, müssen die grundlegenden Elemente festgelegt werden, die als „Container„ dienen sollen.

Sehen Sie sich ihr Design an (in Form eines Grafikentwurfs, einer Zeichnung oder einer bereits vorhandenen Website) und legen sie fest, welche Teilbereiche als Hauptelemente der Seite dienen.

Grafikbeispiel mit Containern

Die Container benennen

Diese Container werden zu den Haupt <div> Elementen, die den Inhalt ihrer Seite aufnehmen werden. Daher sollten sie ihnen Namen geben, die ihre Bedeutung widerspiegeln (sog. semantische Namen). Namen, die sich auf das Aussehen der Elemente beziehen, sollte man vermeiden, denn dieses könnte sich ja später einmal ändern.

In unserem Beispiel werden die Hauptelemente folgendermaßen benannt:

Falls die Container auf jeder Seite nur einmal vorhanden sind, sollten sie id-Attribute benutzen (z.B. <div id="container"></div>) und keine class-Attribute. Das könnte wichtig sein, wenn man später noch weitere Elemente der Seite gestaltet und möglicherweise Konflikte in den CSS-Regeln auftreten. id-Regeln werden gegenüber class-Regeln bevorzugt.

Grafikbeispiel mit benannten Containern

Das Markup für die Container erstellen

Erstellen sie leere <div>-Elemente, so dass sie den Containern entsprechen. Zum Beispiel:

  1. <div id="container">
  2. <div id="header"></div>
  3. <div id="mainnav"></div>
  4. <div id="menu"></div>
  5. <div id="contents"></div>
  6. <div id="footer"></div>
  7. </div> <!-- /container -->
  8. Code-Download: /code/tut-layout-01.txt

Noch eine Bemerkung zu DOCTYPEs

Entscheiden sie sich bewusst für einen DOCTYPE. Sie müssen nicht unbedingt die standards-konforme Darstellungsmethode wählen, aber sie sollten sich im Klaren darüber sein, welchen DOCTYPE sie verwenden und wie dieser sich auf das Layout auswirkt.

Anmerkung des Übersetzers

Falls dieser Hinweis bei ihnen nur hochgezogene Augenbrauern hervorruft, können sie sich über die Document Type Declaration und ihre Auswirkungen auf die Seitendarstellung (Stichworte standards mode und quirks mode) informieren bei:

Eine Positionierungsmethode für die Container auswählen

Betrachten sie ihr Design und legen sie fest, wie jeder der einzelnen Container positioniert werden soll.

Dieser Schritt ist wahrscheinlich der schwerste, weil man für die Festlegung dieser Eingeschaften Erfahrung braucht. In unserem Beispiel werden wir folgendermaßen vorgehen:

Farbige Kästen

Die Hauptcontainer unseres Layouts müssen nun mit CSS gestaltet werden. Damit man leichter sehen kann, wie sie im Layout zusammenspielen, bekommt jeder eine Höhe und eine Hintergrundfarbe zugewiesen—farbige Kästen eben.

Es ist wichtig — vor allem, wenn man ein neues Layout ausprobiert—nur jeweils einen Schritt zu machen und dann in verschiedenen Browsern zu testen. Das erspart später eine mühsame Fehlersuche über mehrere Teilschritte hinweg, falls Darstellungsprobleme auftauchen.

Wenn später richtige Inhalte (“Content”) hinzugefügt werden, kann sich das Verhalten der einzelnen Container möglicherweise etwas ändern. Die Methode der farbigen Kästen erlaubt es jedoch, die wichtigsten Layouteigenschaften in diesem frühen Entwicklungsstadium festzulegen und mögliche Probleme zu lösen. Um speziell mit dem Inhalt zusammenhängende Eigenschaften des Designs kann man sich dann später kümmern.

Falls Probleme auftreten, müssen einige der Positionierungsmethoden möglicherweise angepasst werden. Es ist aber nicht aufwändig, mit verschiedenen Methoden zu experimentieren, so lange noch keine Inhalte vorhanden sind. Die farbigen Kästen lassen sich leicht umorganisieren.

Diese Technik (farbig gestalten, positionieren, testen) kann während des ganzen Layoutprozesses angewandt werden, um Elemente auf der Seite zu platzieren.

Den Inhalt einfügen

Sobald die Container richtig angeordnet sind und die Darstellung in allen Zielbrowsern korrekt ist, kann die explizit festgelegte Höhe der Containerelemente entfernt und Platzhaltertext in jeden Container eingefügt werden.

Wie die Containernamen, sollte auch der Inhalt semantisch korrekt ausgezeichnet sein. Man sollte also z.B. h1, h2 etc. für Überschriften benutzen, p für Textabsätze etc. Nun sollte man das Ergebnis wieder in verschiedenen Browsern testen.

Eine Bemerkung zu Schriftgrößen

Schriftgrößen sind ein heikles Thema. Jeder hat eine andere Meinung dazu, wie man Schriftgrößen handhaben sollte. Es sind zwei generelle Tendenzen auszumachen.

  1. Überhaupt keine Schriftgrößen definieren, sondern das den Browser- bzw. Userstylesheets überlassen.
  2. Relative Schriftgrößen definieren: wenn man Schriftgrößen angeben möchte, ist dies die zu bevorzugende Methode. Dabei werden die Schriftgrößen in den Einheiten Prozent oder em angegeben. So können sie in praktisch allen Browsern vom Nutzer verändert werden. Relative Schriftgrößen können mit einer der folgenden drei Methoden (oder einer Kombination daraus) leicht umgesetzt werden.
Methode 1: Schriftgrößen für Container definieren

Wenn sie ihre Inhalte in Containern “ablegen”, können sie Schriftgrößen direkt für die Container und/oder die darin enthaltenen Elemente definieren. Dadurch haben sie alle Elemente des Layouts gut unter Kontrolle. Ein h1-Element kann z.B. unterschiedlich definiert werden, je nachdem, in welchem Container es sich befindet.

  1. #navigation h1 { font-size: 120%; }
  2.  
  3. #content h1 { font-size: 140%; }
  4. Code-Download: /code/tut-layout-02.txt

Methode 2: Relative Schriftgröße für das body-Element

Eine relative Schriftgröße für das body-Element dient als Grundlage der Schriftgrößen aller Kind-Elemente, d.h. aller Elemente des (X)HTML-Dokuments.

  1. body { font-size: 85%; }
  2. Code-Download: /code/tut-layout-03.txt

Einige Browser befolgen diese Regel nicht konsequent, vor allem nicht innerhalb von Tabellen und dann nicht, wenn sie im Quirks-Mode sind.

Methode 3: Typ-Selektoren

Relative Schriftgrößen können direkt für einzelne HTML-Elemente definiert werden. Zum Beispiel:

  1. p { font-size: 85%; } h1 { font-size: 150%; }
  2. Code-Download: /code/tut-layout-04.txt

Diese Methode kann allerdings problematisch sein. Zum Beispiel kann die Vererbung von CSS-Regeln unerwünschte Ergebnisse bringen:

  1. ul { font-size: 85%; }
  2. Code-Download: /code/tut-layout-05.txt

Alle Inhalte in dieser ungeordneten Liste werden 85% der Basisschriftgröße haben. Ein Problem gibt es dann, wenn eine verschachtelte ungeordnete Liste verwendet werden soll. Die verschachtelte Liste “erbt” die 85% Schriftgröße und verwendet sie erneut, so dass die Schriftgröße in der verschachtelten Liste nur noch 72,25% ist (85% von 85% = 72,25%). Man kann dieses Problem aber leicht beheben, indem man folgende Regel notiert:

  1. ul ul { font-size: 100%; }
  2. Code-Download: /code/tut-layout-06.txt

Diese bringt die Schriftgröße der verschachtelten Liste wieder auf die ursprünglichen 85% der Basisschriftgröße (die 100% der Schriftgröße des Elternelements entspricht).

Im Allgemeinen ist es am sichersten, eine Kombination der Methoden 1 und 2 anzuwenden. Man legt einen Prozentwert für das body-Element fest und weitere Prozent- oder em-basierte Werte für einzelne Elemente.

Gestaltung innerhalb der Container

Wenn die Container richtig positioniert sind und die Inhalte sich wie gewünscht verhalten, kann man die Inhalte innerhalb der Container gestalten.

class und id

Benutzen sie so wenig class- und id-Attribute wie möglich. Man kann beinahe jedes Element in einem Container mit sogenannten Kontext-Selektoren gestalten. Zum Beispiel:

  1. #header {} /* gestaltet den "header" container */
  2.  
  3. #header h1 {} /* gestaltet alle <h1> innerhalb von "header" */
  4.  
  5. #header p {} /* gestaltet alle <p> innerhalb von "header" */
  6.  
  7. #header ul {} /* gestaltet alle <ul> innerhalb von "header" */
  8.  
  9. #header ul li {} /* gestaltet alle <li> innerhalb von <ul> innerhalb von "header" */
  10.  
  11. #header a {} /* gestaltet alle <a> innerhalb von "header" */
  12.  
  13. #header li a {} /* gestaltet alle <a> innerhalb von <li> innerhalb von "header" */
  14. Code-Download: /code/tut-layout-07.txt

Umfeldgestaltung

Es macht Sinn, diese Regeln im Stylesheet zu gruppieren, da man so die Regeln für einen Container und alle darin enthaltenen Elemente zusammen bearbeiten kann, ohne nach jedem einzelnen suchen zu müssen. Mark Newhouse nennt das “*Umfeldgestaltung*” (environmental styling ; Anm. d. Übers.). Die gruppierten Regeln können außerdem noch kommentiert werden, um ein späteres Aufgreifen oder Bearbeiten zu erleichtern.

Jeder Bereich der Seite kann nun einzeln gestaltet werden und weil die groben Positionierungs- und Layoutfragen bereits geklärt sind, können sie sich nun den feineren Details zuwenden.

Die CSS-Regeln in eine separate Datei auslagern

Wenn sie mit dem Layout und seiner Darstellung in allen Zielbrowsern zufrieden sind, können sie die CSS-Regeln aus dem head-Bereich des Dokuments herausnehmen und sie in ein externes Stylesheet auslagern. Es gibt zwei Methoden, ein externes Stylesheet einzubinden:

Verlinktes Stylesheet

So binden wir das allgemeine Stylesheet ein, das alle Browser mit CSS-Unterstützung zu Gesicht bekommen. Fast alle CSS-Regeln werden in dieses Stylesheet notiert.

  1. <link rel="stylesheet" href="stylesheet1.css" media="screen">
  2. Code-Download: /code/tut-layout-08.txt

Mit @import eingebundenes Stylesheet

Dies ist das Stylesheet für die “fortgeschrittenen” CSS-Regeln. Ältere Browser kennen die @import-Einbindung nicht, so dass man mit dieser Methode bestimmte Regeln (oder ganze Stylesheets) leicht vor ihnen verstecken kann. Es gibt verschiedene Möglichkeiten, @import umzusetzen und damit ganz bestimmte Browser auszuschließen. Hier einige Beispiele:

  1. @import url("../stylesheet.css");
  2.  
  3. @import url(../stylesheet.css);
  4.  
  5. import url(../stylesheet.css) screen;
  6.  
  7. @import "../stylesheet.css";
  8. Code-Download: /code/tut-layout-09.txt

Wir werden folgende Version benutzen, da sie die CSS-Regeln vor einer Reihe älterer Browser versteckt, nämlich vor:

Hauptsächlich kommt es uns auf Netscape 4.x an.

  1. <style type="text/css" media="screen">
  2. @import url("stylesheet2.css");
  3. </style>
  4. Code-Download: /code/tut-layout-10.txt

Bestimmte Regeln vor älteren Browsern verstecken

Eine Methode auswählen

Die Auswahl der Methode wird davon abhängen, welches Maß an Browserunterstützung man erreichen will.

Wenn sie ältere Browser einfach ignorieren möchten, können sie das Stylesheet “normal” verlinken. Ältere Browser würden dann verschiedene CSS-Regeln nur unzureichend darstellen und es wäre schwierig für Nutzer mit diesen Browsern, den gesamten Inhalt fehlerfrei zu sehen.

Wenn sie älteren Browsern ungestalteten Inhalt präsentieren möchten, könnten sie zwei Stylesheets verwenden: das eine verlinkt, das andere mit @import eingebunden. Alle fortgeschrittenen CSS-Regeln (Positionierung, padding, Ränder etc.) würden im importierten Stylesheet notiert und wären den älteren Browsern (die damit nur schwer umgehen können) nicht zugänglich.

In unserem Beispiel werden wir ältere Browser teilweise unterstützen. Das heißt, dass wir nicht alle fortgeschrittenen CSS-Regeln in das importierte Stylesheet verschieben, sondern nur so wenige wie möglich. Damit versuchen wir, auch in älteren Browsern einen Teil unseres Layoutdesigns zu erhalten. Diese Aufgabe ist nicht leicht zu lösen, da jeder einzelne der älteren Browser unterschiedliche CSS-Regeln nicht korrekt interpretiert.

Wie verstecken?

Testen sie ihre Site in einer Reihe älterer Browser und suchen sie Seitenelemente, die nicht korrekt dargestellt werden. Experimentieren sie mit den CSS-Regeln, indem sie einzelne davon auskommentieren, bis sie herausgefunden haben, welche Regel das Problem verursacht. Dann entfernen sie diese Regel aus dem Grundstylesheet und bewegen sie in das fortgeschrittene Stylesheet, das wir mit @import einbinden.

Regeln, die in älteren Browsern generell schlecht dargestellt werden sind z.B. code>border, padding, margin, float. Nachdem sie eine Regel in das importierte Stylesheet bewegt haben, testen sie erneut das Layout in älteren und modernen Browsern.

Akzeptable Abweichungen

Im Vergleich zu modernen Browsern sieht das Layout in älteren Browsern wahrscheinlich radikal anders aus. Doch das macht nichts, so lange Nutzer alle Inhalte sehen und verwenden können.

In unserem Beispiel haben wir uns darauf konzentriert, CSS-Regeln vor Netscape 4.x zu verstecken, da dieser Browser von allen älteren noch am ehesten in Benutzung ist. Andere ältere Browser wie Internet Explorer 4.x stellen die Seite möglicherweise etwas anders dar als Netscape 4.x. Wenn sie jedoch auf alle älteren Browser Rücksicht nehmen möchten, werden sie am Ende nur noch CSS-Regeln für Schrift, Farbe und einfache Positionierung übrig haben.

Ein Stylesheet für Ausdrucke erstellen

Zum Schluss müssen wir das Layout noch für das Ausdrucken optimieren. Wenn sie beim Ausdrucken das exakt gleiche Layout reproduzieren möchten, können sie einfach den Link verändern, über den das Stylesheet eingebunden wird. Das könnte z.B. mit den Attributen media="all" oder media="screen,print" im link-Element geschehen.

Wenn sie allerdings ein druckerfreundliches Stylesheet anbieten möchten, können sie Folgendes tun:

  1. Kopieren sie ihr Hauptstylesheet (stylesheet1.css) und legen sie die Kopie beiseite. Wir werden nun an der Datei stylesheet1.css arbeiten und sie in ein Druckstylesheet umarbeiten. Für die Browser ist die Datei immer noch ein Stylesheet für den Bildschirm. Daher können wir die Änderungen an der Datei in einer Palette verschiedener Browser am Bildschirm testen ohne jedesmal in die Druckvorschau wechseln zu müssen.
    Wenn wir fertig sind, ändern wir lediglich den Dateinamen und fügen einen neuen Link in den head-Bereich des Dokuments, der nun auf das Druck-Stylesheet verweist.
  2. Legen sie fest, welche Teile des Layouts für den Ausdruck notwendig sind.
  3. In unserem Beispiel werden wir die header-Grafik, die Navigation, das rechte Menü sowie alle Farben und Linkunterstreichungen entfernen.
  4. Verstecken sie alle nicht benötigten Container mit display:none;
  5. Ändern sie alle Farben in schwarz oder Graufstufen
  6. Verwenden sie für Links die Regel text-decoration:none;
  7. Entfernen sie die Angaben für Schriftgröße, so dass die Browserstandardwerte angewandt werden können
  8. Legen sie einen Seitenrand fest, z.B. mit body {margin: 2em;}

Nun haben wir eine druckerfreundliche Version unseres Layouts.

Ändern sie nun noch den Dateinamen und holen sie die kopierte Version der Datei zurück. Fügen sie dann einen neuen Link in den head-Bereich des Dokuments ein.

  1. <link rel="stylesheet" href="print.css" media="print">
  2. Code-Download: /code/tut-layout-11.txt

Fertig.

Wir haben nun eine HTML-Datei, die

Hier die Ergebnisse

Zuletzt geändert am 16.03.2010

1flomax schrieb am 9. Mai 2005, 08:44 h    # 

danke für die tolle übersetzung, bin gerade dabei ein neues layout zu entwerfen und arbeite grad am style sheet, hatte ein paar probleme, aber ich glaub mittels dieses tut bekomme ich sie in den griff ! danke

2Uwe schrieb am 14. Mai 2005, 13:41 h    # 

Hallo Andreas,
die systematische und bestens strukturierte Beschreibung hat mir viel geholfen und ich habe das beschriebene Vorgehen 1:1 angewendet und viel dabei gelernt.
Sehr Hilfreich ist ein sogn. basis-style-sheet, welches alle Anfangswerte auf 0 setzt.
Zu finden ist es im CSS Adventskalender und dort unter Punkt 20.

Ich kann dir nur danken für deine Übersetzerarbeit.

tschüß Uwe

3Peter schrieb am 21. Juni 2005, 15:51 h    # 

Hallo! Ich beschäftige mich schon länger aber (leider) nur aus Hobby mit Internetseiten. Und so ist mir noch NIE die Einheit “em” untergekommen. Scheint mir ja eine Maßeinheit zu sein, aber woher kommt sie und was bringt sie?
Vielen Dank schonmal für eine Antwort!

Peter

4Robert schrieb am 20. Juli 2005, 12:25 h    # 

den Lobsagungen der Kommentatoren schliesse ich mich bedenkenlos an. Ich habe alles soweit nachvollziehen können, bis auf background-image: url(img_39.gif). Was wird damit bezweckt ?

beste Grüsse Robert

5ak schrieb am 20. Juli 2005, 14:51 h    # 

Robert, die Grafik, die mit

background-image: url(img_39.gif)

eingebunden wird, erzeugt das Muster im grauen Hintergrund der Beispielseite.

6robles-design schrieb am 22. August 2005, 16:31 h    # 

Hallo,

super Artikel ist das. Hoffentlich steigen dadurch mehr Webdesigner auf CSS-Layouts um.

Gruß aus Siegen
benutzerfreundliches Webdesign

7dr. S. schrieb am 28. August 2005, 10:19 h    # 

Hi Cool, der Abschied von den Tabellen-Layouts, mit denen ich groß geworden bin, gelingt mir jetzt nach ca. 10h rumprobieren erst durch Dein Tutorial. Ach ja, wenn deine Küchen-Einbauer-Qualitäten ähnlich hoch sind, wie Deine Webdesign-Künste, dann koch ich am Montag abend was leckeres für Dich!

Ganz liebe Grüße,

Dr. S.

8Benedikt Schmitz schrieb am 8. September 2005, 12:04 h    # 

Ich habe da mal ne frage zu den Klassen und IDs. Warum soll man so wenig wie möglich davon benutzen? Gibt es da irgendwelche Probleme mit anderen Browser oder so?

9ak schrieb am 8. September 2005, 16:38 h    # 

Benedikt, viele class und id Attribute machen keine Probleme. Der Grund für den Rat, sich möglichst sparsam einzusetzen, ist die Lesbarkeit des Codes sowie der Grundsatz, dass man nicht mehr Markup schreiben sollte als unbedingt notwendig.

Mit CSS sind viele Elemente auch ohne class oder id eindeutig anzusprechen, z.B. mit deszendierenden Selektoren (heißt das auf deutsch so?—auf englisch sind es descending selectors); z.B. kann ich ein anchor Element in einem Absatz innerhalb des Headers so ansprechen:

#header p a {
...
}

10wbc schrieb am 4. Oktober 2005, 21:07 h    # 

Hallo!
Gibt es die Beispieldateien auch als Archiv zum download? Das wäre garnicht so schlecht…
Gruß Wolfgang

11ak schrieb am 5. Oktober 2005, 06:03 h    # 

Wolfgang, ich habe Deine Idee aufgegriffen: die Beispieldateien können nun am Ende des Artikels als zip-Archiv herunter geladen werden.

12E. schrieb am 7. Oktober 2005, 22:18 h    # 

Hallo,

danke für diese hilfreiche Webseite. Mir haben die Tipps sehr geholfen CSS überhaupt zu verstehen und inzwischen auch selbst anzuwenden.

Nochmals vielen vielen Dank.

Gruß E.

13Alexander Josef Breinich schrieb am 7. November 2005, 13:10 h    # 

Hi,

sehr gutes Tut. Habe es etwas geändert und bin sehr zufrieden.

Aber ich habe noch eine Frage:

Wie kann ich das mainnav und menu auslagern, sodass, wenn ich eine neue Seite erstelle, nur an einer Stelle das mainnav und das menu ändern muss mit den Links und nicht auf theoretisch unendlichen Seiten?

Danke

PS: Website ist bald online

14ak schrieb am 7. November 2005, 14:03 h    # 

Wie kann ich das mainnav und menu auslagern, sodass, wenn ich eine neue Seite erstelle, nur an einer Stelle das mainnav und das menu ändern muss mit den Links und nicht auf theoretisch unendlichen Seiten?

Das geht entweder mit server-side includes (SSI) oder mit der PHP Anweisung include.

15Gregor Butz schrieb am 29. Januar 2006, 18:34 h    # 

Vielen Dank für dieses Tutorium! Sehr gut beschrieben und enorm hilfreich,

LG Gregor Butz

16dp schrieb am 13. Februar 2006, 18:56 h    # 

vielen danke für das Tutorial.

Ich hab alle Container ausgerichtet usw., Wie kann ich nun die links so formatieren, dass wenn ich auf einen Menupunkt klicke, nur der container verändert wird der sich auch wirklich ändert.
(So wie wenn man framesets verwendet)

dp

17ak schrieb am 13. Februar 2006, 19:01 h    # 

Wie kann ich nun die links so formatieren, dass wenn ich auf einen Menupunkt klicke, nur der container verändert wird der sich auch wirklich ändert.

Das geht nicht ohne Frames. Da das Markup einer standards-basierten Site aber in der Regel sehr viel schlanker ist als das einer nach der herkömmlichen Frames- oder Tabellenmethode gebauten Website, ist es kaum ein Problem, dass die ganze Seite neu geladen wird.

18ginyu schrieb am 19. Februar 2006, 08:34 h    # 

hallo kann mir jemand erklären wie man ein eigenes layout erstellt thx

19ak schrieb am 19. Februar 2006, 08:40 h    # 

kann mir jemand erklären wie man ein eigenes layout erstellt

Indem man das Tutorial durcharbeitet und sich dann an die Arbeit macht ;-)

Im Ernst: deine Frage ist im Tutorial beantwortet bzw. würde eine mehrseitige Antwort erfordern. Du musst schon erstmal Vorarbeit leisten. Wenn du dann konkrete Fragen hast, kannst du sie gerne hier stellen.

20nadine schrieb am 22. Februar 2006, 14:04 h    # 

was für eine formschöne Seite!!...so mag ich das auch haben. nu werde ich mich wohl mal mit dem css befassen.

21Sam schrieb am 27. Februar 2006, 14:54 h    # 

Nettes Tutorial. Gefällt mir gut. Deine Seite sieht auch sehr gut aus.

22Danny schrieb am 22. März 2006, 17:49 h    # 

good job !!!

23Jan schrieb am 9. April 2006, 14:04 h    # 

Hallo, bin in einem Forum auf den Tipp gestoßen, mit css layout zu arbeiten und nun heilfroh, ein gutes Tutorial gefunden zu haben. Bin gespannt auf die Möglichkeiten!

24Schosch schrieb am 13. April 2006, 06:51 h    # 

Hallo,

ich habe diese Seite als Vorschlag bekommen mein Webseitenlayout mittels CSS zu schreiben.

Nun muß ich leider sagen, dass meine Webseite wie herkömmlich aus blinden Tabellen besteht und einer extern referenzierten CSS Datei, um das Layout damit zentral ändern zu können.

Leider habe ich damit aber bisher nicht geschafft die Seite so zu modifizieren, dass die Ausgabe bei IE und FireFox gleich dargestellt werden.

Meine Frage daher ist: Ist CSS und die Darstellung mittels blinder Tabellen ein genereller Gegensatz und daher nicht möglich? Ich frage das weil es einen erheblichen Aufwand für mich bedeuten würde die die Seien wie hier gezeigtzu ändern.

Ansonsten finde ich diese Möglichkeit der Layoutbildung mittels CSS sehr interessant und werde mich wenn ich mehr Zeit habe mal damit beschäftigen.

Ich möchte mich meinen Vorrednern anschließen – vielen Dank für die Übersetzung das macht die Sache einfacher!

25andreas schrieb am 13. April 2006, 14:00 h    # 

Meine Frage daher ist: Ist CSS und die Darstellung mittels blinder Tabellen ein genereller Gegensatz und daher nicht möglich? Ich frage das weil es einen erheblichen Aufwand für mich bedeuten würde die die Seien wie hier gezeigtzu ändern.

Sie können problemlos Tabellen für das Layout und CSS für die übrige visuelle Gestaltung verwenden. Setzen sie so viel CSS ein, wie sie technisch und zeitlich “investieren” wollen.

Ansonsten finde ich diese Möglichkeit der Layoutbildung mittels CSS sehr interessant und werde mich wenn ich mehr Zeit habe mal damit beschäftigen.

Ein CSS Layout ist sicherlich am Anfang nicht ganz einfach umzusetzen, doch mit dem obigen (und anderen) Tutorials zu schaffen. Am besten sie probieren es mit etwas Zeit und Muße aus. Viel Spaß!

26Tarew schrieb am 5. Mai 2006, 16:41 h    # 

Ein etwas anderes Tutorial aber, wie ich finde ein sehr nützliches.
Habe auf SelfHTML die Css-Befehle mehr oder minder gelernt aber wusste jetzt nicht recht wo ich beginnen soll….jetzt schon :)

Dankeschön!

27snitch schrieb am 12. Mai 2006, 10:33 h    # 

Zunächst einmal ein dickes Lob an den Author btw. den übersetzer dieses Tutorials! Klasse Arbeit.

Dazu habe ich nun eine Frage.
Ich habe eine Seite erstellt, die Anfangs nur aus Div Design umgesetzt werden sollte.

Dazu habe ich alle Elemente mit Divs etc. positioniert. Dies ist auch alles prima umzusetzen gewesen. Ein Problem habe ich allerdings bei dieser Sache.

Wenn ich ein Layout habe, welches sich aus header content und footer zusammensetzt, und diese drei Elemente in einem Container liegen, welcher zentriert sein soll, dann kann ich nur Inhalte in den content legen, welche mit a, p, ul, etc. angegeben sind. Lege ich dort wiederum ein Div rein, dann streckt sich der content Div nicht mit nach unten und man muss mit festen Angaben in der Höhe arbeiten. Ich hätte aber gerne eine automatische Angabe der Höhe.

Meine Lösung war nun, die Inhalte wieder auf “alte” Art und weise in Tabellen in den content Div zu legen.

Gibs es dazu eine Lösung in pure CSS? Über tipps wäre ich dankbar.

Die genannte Seite findet Ihr hier: www.zahnaerzte-meiners.de

Gruß

Snitch

28Klaus Langner schrieb am 24. Mai 2006, 06:07 h    # 

Das hört sich ja super einfach an. Bei mir rutschen die DIV-Boxen immer ein wenig ineinander. Manchmal vertikal und manchmal springt so eine DIV-Box einfach nicht neben die andere und flutscht drunter. Woran kann das liegen ?

29ak schrieb am 24. Mai 2006, 06:20 h    # 

Auf die Schnelle vermutet: margin und/oder padding der Boxen oder des Inhalts.

30xollek schrieb am 25. Mai 2006, 09:27 h    # 

Springende divs können auch an einem float hängen. Da werden div-Boxen, die darunter liegen einfach darüber/darunter geschoben, wenn der Inhalt der Box neben dem float zu klein ist. Die div-Boxen, die darunter erscheinen sollen benötigen z.B. ein “clear: left;”, dann werden sie nicht mehr über den float geschoben.

DIE SEITE um alles zu HTML und CSS nachzuschauen: http://de.selfhtml.org/

gruss
alexander

31Michael W. schrieb am 25. Mai 2006, 11:18 h    # 

Vielen Dank, für diese tolle Übersetzung, eines tollen Tutorials!
Habe sehr viel gelernt! Es sind Leute wie du, die das Web bereichern!

mfg Michael!

32Markus Toni Vallen schrieb am 20. Juni 2006, 21:22 h    # 

css habe ich bisher nur benutzt, um meine Tabellen zu stylen. Und nun schicke ich die Tabellen in Rente! Das einzige, was mir an etlichen div-basierten Webseiten auffällt, ist deren Hang zum Rechteckigen: 1px-Border ringsumher und fertig ist der Kasten. Und leider komme ich da selber nicht richtig von weg…

33kenny schrieb am 2. August 2006, 09:54 h    # 

Super Beschreibung, richtig cool!

Was mir fehlt: Bei der “Container Positionierung” der Code und die Erläuterung dazu.

Den Code kann ich mir zwar über den Quelltext anzeigen lassen wenn ich auf den Link “Container Positionierung” klicke und dann auf Ansicht/Quelltext im Menü des IE, aber die Erläuterung habe ich dann immer noch nicht.
Verzeih den Kommentar wenn das gar nicht Dein Ziel war.

BESONDERS die Positionierungen der DIVs fällt mir sehr schwer! Auch wenn ich immer wieder lese ich soll die DIVs nicht für eine komplette Aufteilung der Seite verwenden. Um Templates für das CMS Joomla! zu gestalten kommt man aber gar nicht darum herum.

VLG

Kenny

34matziberlin schrieb am 7. Januar 2007, 21:48 h    # 

Eine etwas andere Anleitung aber, wie ich finde ein sehr gut gemacht. Danke

35robert schrieb am 24. Januar 2007, 19:40 h    # 

Danke für die nette Übersetzung!

36Manfred schrieb am 28. Januar 2007, 23:20 h    # 

Danke für dieses sehr verständlich gemachtes Turtorial!

Ich habe jedoch ein Problem: Wenn ich im Bereich “contens” einen sehr langen Text eingebe, wird dieser ab einem Moment, den ich noch nicht eruieren konnte, über die Content Box hinausgeschrieben.

Was ist daran Schuld, ist das bekannt? Und
wie kann man das verhindern?

MfG
Manfred

37Dietmar schrieb am 28. Januar 2007, 23:52 h    # 

immer wieder leicht und verständlich geschrieben
so das auch hobby webdesigner damit was anfangen können ;)

Webdesign Berlin

38BuDa schrieb am 10. Februar 2007, 01:40 h    # 

sehr angenehm, diese Seite!!!
Sie blendet nicht. Es ist alles sehr gut zu lesen. Das Wichtige fällt ins Auge! Einfach nur schön.
Und man findet verständliche Beschreibungen!

So macht lernen Spaß.

39Pix-Planet Webdesign Berlin schrieb am 5. März 2007, 10:04 h    # 

Vielen Dank für den Artikel! Das kann wohl jedem Webdesigner in der ein oder anderen Minute mal weiterhelfen.

40Steve schrieb am 5. März 2007, 20:29 h    # 

ich bin blutiger anfänger und weiß nach dem schritt 6 u. 7 nicht weiter. Da wird nicht erklärt wie man die container oder inhalte positioniert und farblich kennzeichnet, nur das man das beim ersten entwurf machen soll. Ich danke für baldige Hilfe.

41ak schrieb am 5. März 2007, 20:33 h    # 

Hallo Steve,

auf Seite 8 sind eine Reihe von Links zu Beispieldateien. Wenn Du Dir den Quelltext dieser Dateien anschaust, siehst Du jeweils das CSS, mit dem der jeweilige Effekt erzielt wurde.

42Webdesign Siegen schrieb am 21. März 2007, 23:40 h    # 

Noch ein Linktipp zu CSS:
http://www.pixelgraphix.de

43Moni schrieb am 22. März 2007, 17:07 h    # 

Vielen Dank ak für die gute Zusammenstellung!!!

Moni

44Michael schrieb am 23. März 2007, 10:18 h    # 

Herzlichen Dank für diese verständlichen Erklärungen und natürlich die Übersetzung die so manches vereinfacht. Ein faszinierendes Thema, so macht es auch dem Hobby-Webdesigner Spaß.

45Angelika schrieb am 27. März 2007, 13:00 h    # 

Genau sowas hab ich gesucht. mit dieser step by step – Anleitung wird aus den vielen Wissensschnipseln endlich ein Ganzes.

Vielen Dank!

46Webdesign schrieb am 27. März 2007, 20:43 h    # 

Hallo

Versuche mir auch grad eine Seite mit CSS zu erstellen ist aber nicht so einfach aber
hiermit ist echt eine menge zu realiesiren, genau das habe ich gesucht…

Mit freundlichen Grüßen und besten Dank
Andre P.

47Berlin Alexanderplatz schrieb am 27. März 2007, 20:48 h    # 

Guten Abend

Vielen Dank, für diese gute Übersetzung, eines tollen Tutorials!

mfg. Alex

48sam schrieb am 30. März 2007, 08:46 h    # 

Hallo,

ich habe es schon dieses Tutorial schon mehrfach weiterempfohlen.

Vielen Dank

49Jan Riebold schrieb am 30. März 2007, 13:19 h    # 

Standardkonformes Webdesign ist eine der Grundvoraussetzungen für die weitere Ausweitung und Kommerzialisierung des WWW.
Solchen Tutorials helfen bei der Verbreitung barrierearmer Web-Technologien und machen das Web schöner und nutzbarer für alle. Daher vielen Dank für die Mühe.

50Dan Larkin schrieb am 31. März 2007, 12:58 h    # 

und wenn du das ganze noch ein bisschen dynamischer haben willst (frei nach dem motto “darfs noch ein bisschen mehr sein?”) lässt du die extrene css-datei als php-datei parsen (über .htaccess einstellen) und kannst dann richtig flexible mit farben und formen rumspielen ;-)

51news schrieb am 9. April 2007, 11:40 h    # 

Danke für diese Seite. sehr nützliche Information

52hans schrieb am 11. April 2007, 12:10 h    # 

recht nützlich dürfte hier die Einführung in CSS von HTMLWorld sein.

53fee schrieb am 15. April 2007, 21:08 h    # 

super Artikel ist das. Hoffentlich steigen dadurch mehr Webdesigner auf CSS-Layouts um.

54Dekada schrieb am 20. April 2007, 10:58 h    # 

Wenn du dann konkrete Fragen hast, kannst du sie gerne hier stellen.

55Pozycjonowanie schrieb am 21. April 2007, 12:35 h    # 

Hallo Andreas,
die systematische und bestens strukturierte Beschreibung hat mir viel geholfen und ich habe das beschriebene Vorgehen 1:1 angewendet und viel dabei gelernt. Danke für diese Seite. sehr nützliche Information.

56Stephan schrieb am 24. April 2007, 19:42 h    # 

Tipp: Auch moderne Browser sind leider selten fehlerfrei und interpretieren CSS-Anweisungen manchmal unterschiedlich. Zur Kontrolle sollte man sich seine Webseite spätestens bei Fertigstellung auch mal in verschiedenen Browsern ansehen. Ich habe dabei schon die ein oder andere Überraschung erlebt.

57One Night in Paris schrieb am 25. April 2007, 16:12 h    # 

Benedikt, viele class und id Attribute machen keine Probleme. Der Grund für den Rat, sich möglichst sparsam einzusetzen, ist die Lesbarkeit des Codes sowie der Grundsatz, dass man nicht mehr Markup schreiben sollte als unbedingt notwendig.

58Hannes Fuchs schrieb am 9. Mai 2007, 19:56 h    # 

super-tutorial. jetzt bin ich endlich motiviert, umzusteigen. bravo.

59Wolfgang schrieb am 15. Mai 2007, 06:39 h    # 

Hallo Andreas!

Danke für Deine Mühe. Ich habe einige Bücher durchgelesen und durchgesehen, aber keines war so abstrahierend wie dieser (übersetzte) Artikel. Weiter so.

60Anselm Rapp schrieb am 31. Mai 2007, 11:04 h    # 

Hallo Andreas,
als CSS-Neuling bin ich von diesem Tutorial sehr angetan und danke dafür. Als Deutsch-Fortgeschrittener stört mich allerdings, dass die Anrede “Sie” häufig kleingeschrieben ist. Korrektur würde das Gesamtbild perfektionieren.
Gruß, Anselm

61Euro 2012 schrieb am 6. Juni 2007, 14:24 h    # 

Thanks for very interesting article. btw. I really enjoyed reading all of your posts. It’s interesting to read ideas, and observations from someone else’s point of view… makes you think more. So please keep up the great work. Greetings

62Internetseite erstellen schrieb am 10. Juni 2007, 15:49 h    # 

Hallo Andreas,

Ich finde deine Tipps und Ratschläge sehr Lobenswert. Deine umfangreichen und gut beschriebenen Artikel sind sehr hilfreich. Hier findet man immer wieder sehr viele nützliche Ratschläge, Tipps und Tricks.
Hier schaue ich immer wieder gern vorbei!!!

Vielen, Vielen Dank!!!

Falls Du mal jemanden brauchst der Dir was mit Flash realisieren soll… würde ich mich sehr freuen wenn ich Dir dabei vielleicht helfen kann.

beste Grüße aus Brandenburg
Enrico

63Webdesign Berlin schrieb am 29. Juni 2007, 18:09 h    # 

Sehr gut beschrieben alles! CSS ist zwar in meinen Augen um einiges komplitzierter als eine Webseite mit Tabellen zu erstellen, jedoch kommt man in Zukunft nicht drum rum, da auch dei Browser von ihrer Darstellung her immer weiter auseinander driften… Vielen Dank für den guten Bericht!

64çeviri schrieb am 10. Juli 2007, 00:29 h    # 

Danke für diese Seite. sehr nützliche Information

65Pasta & Nudeln schrieb am 13. Juli 2007, 23:18 h    # 

Herzlichen Dank für die vielen verständlichen Erklärungen. Sie fanden bei mir vielerorts Anwendung rund um das Thema Nudeln und Pasta.

66CMC Werbeagentur schrieb am 14. Juli 2007, 00:11 h    # 

Hallo Andreas,
wir sind von Deinem Tutorial sehr begeistert und danken Dir dafür. Wir verweisen bei Fragen immer auf Deine Seite! Weiter so!! Das CMC MEDIA Webteam!

67DSL CAFE schrieb am 15. Juli 2007, 11:51 h    # 

Endlich mal wieder eine harmonisch gestaltete Internetseite. Geschmackvoll!! Meiner Frau gefallen die Australien Bilder. Sehe schon einen teuren Urlaub auf mich zukommen! :-)

68Büromöbel schrieb am 16. Juli 2007, 19:13 h    # 

sehr umfangreiches tutorial, das geht ja schon fast als ein kleines design-buch durch. sehr sehr gut gemacht und vor allem auch für nicht-profis (wie mich) zu begreifen. herzlichen dank dafür. nebenbei bemerkt: sehr schöne seite, wirkt sehr edel.

69klartexter schrieb am 22. Juli 2007, 09:48 h    # 

Wenn es die Anleitung auch komplett zum download gäbe, so wie es selfhtml macht, dann wäre es das Sahnehäubchen einer gelungenen Seite!

70Thomas schrieb am 25. Juli 2007, 16:28 h    # 

Hallo Andreas,
toll das Du Dir die Mühe gemacht hast die Beschreibung zu übersetzen und so strukturiert darzustellen. Mit dieser Anleitung sollte fast jeder in der Lage sein, ein tabellenloses Layout zu entwerfen. Die größte Problematik für mich ist immer die Prüfung in unterschiedlichen Browsern. Nicht jeder hat die Möglichkeit mehrer Rechner / Betriebssysteme nutzen zu können. Bei der „stand-alone“ Lösung kann man auch nicht alle Browser verwenden.

71Andreas Kalt schrieb am 25. Juli 2007, 16:36 h    # 

Die größte Problematik für mich ist immer die Prüfung in unterschiedlichen Browsern. Nicht jeder hat die Möglichkeit mehrer Rechner/Betriebssysteme nutzen zu können.

Ich denke, dass ein Hobby-Webdesigner auch nicht wirklich alles bis ins letzte Detail abklären muss. Das mache ich für meine privaten Sites auch nicht – im Zweifelsfall hilft ein Hinweis, dass Besucher evtl. Fehler per Mail mitteilen.

Und wenn man Webdesign professionell betreibt, dann muss man halt in ein zweites Betriebssystem oder eine kommerzielle Testlösung investieren.

72Thomas schrieb am 26. Juli 2007, 00:37 h    # 

Na ja, man müßte schon einiges an Aufwand betreiben um alle Browser abzufächern. Wie Du schon in dem Tutorial geschrieben hattest, sollte man sich vorher Gedanken machen, auf welche Browser man die Webseite ausrichtet. Meiner Meinung nach reicht es, sich auf den IE ab Version 5.5 und den Firefox zu konzentrieren. Eine Webseite soll ja auch noch bezahlbar bleiben.

73Christian Schmidt schrieb am 26. Juli 2007, 09:17 h    # 

Ich denk wer heutzutage noch nen alten Browser nutzt der soll auh damit leben können wenn was nicht richtig angezeigt wird ;)

74Danny schrieb am 4. August 2007, 17:10 h    # 

@Pozycjonowanie: du hast nicht nur das „beschriebene Vorgehen 1:1 angewendet“ sondern selbst deinen Kommentar 1:1 übernommen (von Uwe siehe Kommentar Nr.2), werden die spammer heutzutage neben faul auch noch einfallslos? tzzzz

@andreas: sehr gutes tutorial und ich schliesse mich deiner meinung vollkommen an, das man „hobby-webdesigner“ nun nicht die gesamte technik bis ins kleinste erläutern muss das wäre etwas „overdressed“ wie man so schön sagt. gute arbeit!

75Michl schrieb am 7. August 2007, 13:49 h    # 

Super Tutorial, nur eine Frage hätt ich noch: Die Navigation bei den verschiedenen Unterpunkten erfolgt dann wahrscheinlich am besten mittels Übergabeparameter und dem Einbinden der entsprechenden Seite, oder?

76Andreas Kalt schrieb am 7. August 2007, 14:13 h    # 

Michl, ich verstehe Deine Frage nicht. Das Layout, das am Ende des Tutorials steht, wird für jede einzelne HTML Seite komplett übernommen.

77Michl schrieb am 7. August 2007, 14:39 h    # 

Aso, danke, versteh schon, hab mich noch nicht wirklich mit CSS beschäftigt gehabt vorher, deswegen meine Verwirrung

78Tony schrieb am 8. August 2007, 12:50 h    # 

@Christian Schmidt

das Problem sind noch nicht mal unbedingt die alten Browser, denn auch wenn man eine Seite mit verschiedenen aktuellen Browsern ansurft, kommt es schon oft zu Darstellungsunterschieden.

79Jens schrieb am 11. August 2007, 20:33 h    # 

Herzlichen Dank für diese verständlichen Erklärungen und natürlich die Übersetzung die so manches vereinfacht. Ein faszinierendes Thema, so macht es auch dem Hobby-Webdesigner Spaß.

80Artikelverzeichnis schrieb am 12. August 2007, 14:08 h    # 

Die CSS Layouts heutzutage sind auch immer mehr eine Augenweide wenn ich mal etwas zurückdenke :D

81Parken Schönefeld schrieb am 13. August 2007, 19:05 h    # 

Auf jeden Fall sehr hilfreich werde ich gleich mal für meine Webseite umsetzen… :)

82überwachungskamera schrieb am 16. August 2007, 21:58 h    # 

Super Einführung, sehr hilfreich

83TIMBaER schrieb am 18. August 2007, 01:09 h    # 

Tolles Tutrorial. Hier kann man sich noch ein paar wichtige Tips zu Gestaltung und Umsetzung von Websites in CSS holen.

Echt gut gemacht und die Seite hier gefällt mir auch.

84Zauberer + Ballontiere schrieb am 18. August 2007, 11:09 h    # 

Hallo,
klasse Web site, prima Infos, Danke !!

85Dieter schrieb am 20. August 2007, 05:02 h    # 

Danke für diese klasse zusammenstellung! Bisher hatte ich immer nur die Hälfte vom CSS Layout kapiert, aber jetzt kann ich mal so richtig loslegen!

Vielen Dank nochmal!

86CSS Meister schrieb am 20. August 2007, 05:07 h    # 

Hallo Andreas,

klasse Tutorial – Hab ich wieder was dazu gelernt!

87Text schrieb am 25. August 2007, 11:48 h    # 

Vielen Dank für das super Tutorial! Es ist sehr gut und verständlich geschrieben!

88SEM schrieb am 25. August 2007, 12:10 h    # 

Danke Andreas für die Mühe die Du Dir hier gemacht hast! Echt klasse!

89Pension schrieb am 25. August 2007, 12:21 h    # 

Sehr nützlicher Beitrag! Danke!

90Link schrieb am 25. August 2007, 15:18 h    # 

Danke für die tolle Übersetzung!

91Caro schrieb am 25. August 2007, 18:01 h    # 

Danke für dieses sehr verständlich gemachtes Turtorial!

Ich habe jedoch ein Problem: Wenn ich im Bereich “contens” einen sehr langen Text eingebe, wird dieser ab einem Moment, den ich noch nicht eruieren konnte, über die Content Box hinausgeschrieben.

Was ist daran Schuld, ist das bekannt? Und
wie kann man das verhindern?

Grüße
Caro

92Marc schrieb am 26. August 2007, 23:41 h    # 

Danke für die Übersetzung, die Zeit ist echt mal sinnvoll aufgewendet gewesen. Gruß, Marc

93Anna schrieb am 27. August 2007, 12:45 h    # 

Meiner Meinung nach reicht es, sich auf den IE ab Version 5.5 und den Firefox zu konzentrieren.

aber, immer wieder leicht und verständlich geschrieben

Danke sehr!

94Nick schrieb am 27. August 2007, 23:29 h    # 

Besonders die Positionierungen der DIVs fällt mir sehr schwer! Auch wenn ich immer wieder lese ich soll die DIVs nicht für eine komplette Aufteilung der Seite verwenden. Um Templates für das CMS Joomla! zu gestalten kommt man aber gar nicht darum herum.

Grüße

95Sicherheitstechnik schrieb am 28. August 2007, 00:05 h    # 

Hi Andreas. Klasse Zusammenfassung – verständlich erklährt – was brauch man mehr…

Ich werde mich gleich mal an die Umsetzung machen!

Vielen vielen Dank!

Grüße
Herbert

96Andreas Kalt schrieb am 28. August 2007, 06:51 h    # 

Nick,

Auch wenn ich immer wieder lese ich soll die DIVs nicht für eine komplette Aufteilung der Seite verwenden.

Das verstehe ich nicht ganz. Sicherlich kann man hier und da ein anderes HTML Element als „Rahmen“ verwenden (z.B. <ul> in der Navigation), aber das grundlegende Gerüst einer Seite wird immer mit <div>s zu erstellen sein.

97Chris schrieb am 30. August 2007, 01:13 h    # 

Hey.

Kein Problem.

geh einfach mal auf selfhtml.org oder css4you.de und lies ein bissl.

wenn dir dann noch Fragen kommen, schreib mir einfach.

lg

98Mallorca Chules schrieb am 31. August 2007, 17:13 h    # 

klasse tutorial. konnte schon einiges bei der entwicklung meines aktuellen projekts einsetzten.

99Köln schrieb am 3. September 2007, 00:15 h    # 

sehr umfangreiches tutorial, das geht ja schon fast als ein kleines design-buch durch. sehr sehr gut gemacht und vor allem auch für nicht-profis (wie mich) zu begreifen. herzlichen dank dafür. nebenbei bemerkt: sehr schöne seite, wirkt sehr edel.

100ballonfigur ballontiere schrieb am 6. September 2007, 07:08 h    # 

Hallo, welch schöne Web seite hier und danke für all die klasse Infos, nette Grüße

101Google Pack schrieb am 7. September 2007, 20:43 h    # 

NE wieso mit CSS kann man alles vieeeel besser machen als mit Tabellen oder so. Dauert zwar teilweise länger aber im Endeffekt spaart es einem nacher viel Zeit.

102CS schrieb am 11. September 2007, 19:57 h    # 

Und CSS sieht auch mit den neuen Styles einfach schöner aus :)

103Thomas schrieb am 12. September 2007, 10:51 h    # 

was nützt dir ein schäneres layout wenn du nahcteile durch css bei google hast? ok, wenn deine besucher auf anderem wege deine webseite finden ….

104Andreas Kalt schrieb am 12. September 2007, 16:22 h    # 

Thomas, könntest Du mal erläutern, welche Nachteile bei den Suchmaschinen sich durch CSS-basiertes Webdesign ergeben sollen?

105Christian schrieb am 13. September 2007, 20:22 h    # 

Vielen Dank für die gute Übersetzung und die investierte Arbeit! Mal schauen, ob ich etwas verwenden kann.

106Daniel von Mallorca schrieb am 14. September 2007, 11:06 h    # 

Nachteile nun wirklich nicht – oder wo sollen diese liegen?
Direkte Vorteile sehe ich im Gros aber auch nicht – valider code scheint egal zu sein, Dateigröße ist zumeist geringer, die Möglichkeit den Quellcodeaufbau von der Browserdarstellung durch relative/absolute Positionierung der divs zu lösen ist etwas hilfreich, aber wohl auch nicht der Heilige Gral… indirekte Vorteile durch css gibt es da schon mehr… letztendlich sollte man eine barrierearme Auszeichnung jedoch für den Rezipienten umsetzen und der heisst wohl nicht in erster Instanz Suchmaschine ;-)

107Olaf Stroinski schrieb am 15. September 2007, 10:15 h    # 

Hallo Andreas,

danke für die vielen hilfreichen Infos.Manchmal kann man am CSS einfach nur verzweifeln,besonders wenn man die lästigen Tabellen loswerden will.
Gruss Olaf

108css schrieb am 16. September 2007, 15:20 h    # 

Gut geschrieben! Sehr informativ. Gefällt mir.

109Foto Verzeichnis schrieb am 16. September 2007, 15:28 h    # 

Endlich ein Tut, mit dem man arbeiten kann. Vielen Dank für die Mühe, das alles zu übersetzen.
Meine Meinung: CSS machen einem das Leben wirklich leichter, wenn man erst einmal verstanden hat worum es geht.

110Anno1337 schrieb am 19. September 2007, 15:46 h    # 

Hallo Andreas,

vielen Dank für diese wirklich wunderbare Einführung in die CSS Layouterei. Ich bin zwar schon ein alter Hase was den Bau von Websites angeht, doch bisher benutzte ich CSS nur sehr zaghaft, vor allem weil ich vieles nicht verstand. Dank diesem Tut hier habe ich gerade mein erstes komplexes CSS Layout gestaltet, komplett ohne Tabellen. Vielen Vielen Dank!

cu
Anno

111Lady schrieb am 21. September 2007, 09:55 h    # 

Ich baue meine Seiten auch nur mit CSS und DIV-Container. Ich muss aber sagen, dass es manchmal besser ist, zumindest punktuell Tabellen zu verwenden. Nicht weil die Technik schlecht ist, sondern weil die unterschiedlichen Browser manchmal Probleme mit der Darstellung haben. Man sollte darauf achten, dass man für das Design keine Tabellen verwendet. Wenn man jedoch Informationen in Tabellenform darstellen möchte, soll man die Tabellen auch nutzen.

112Gerald Mann schrieb am 21. September 2007, 09:57 h    # 

Ich habe gerade die Übersetzung entdeckt. ICh würde sagen diese Übersetzung ist das absolute MUSS in sachen CSS für einen Anfänger.

Cu

Euer Gerald aus Münster

113Dj Tiesto schrieb am 22. September 2007, 06:17 h    # 

Gut geschrieben! Sehr informativ. Gefällt mir.

114Federico schrieb am 22. September 2007, 06:19 h    # 

Also erstmal Danke das du dir soviel Mühe gemacht hast, diesen Artikel zu schreiben und so übersichtlich darzustellen. Damit hast du vielen geholfen. Mir persönlich lag CSS nicht so, deswegen war es gerade interessant das alles zu lesen…

115Alonzo Mourning schrieb am 22. September 2007, 06:21 h    # 

Danke für diese Seite. sehr nützliche Information

116Ipot schrieb am 23. September 2007, 20:20 h    # 

Vielen Dank schonmal für eine Antwort!

117Mathias schrieb am 24. September 2007, 07:51 h    # 

Hallo,
dem Dank schließe ich mich an! Auch ich konnte viel aus deinem Tutorial erfahren und lernen. CSS scheint eine schöne Sache zu sein, wenn man sie dann auch richtig kann :)

Viele Grüße,
Mathias

118Afrika Urlaub schrieb am 26. September 2007, 17:43 h    # 

Hallo,

Thomas hat geschrieben, dass CSS Nachteile bei Google einbringen kann. Was (abesehen von wirklich falschen Pogrammierungen) sollte das denn sein?
Solange der eigentliche Inhalt ausgelesen werden kann, dürfte doch eigentlich nichts schiefgehen, oder habe ich etwas übersehen?
Ansonsten natürlich Danke für die Tutorials.
Beste Grüße

119Dominik schrieb am 7. November 2007, 11:33 h    # 

finde ich auch klasse selbst google erfreut sich jedes mal wenn er mit seinem boot kommt! Dank dieser Technik koennen wir gut Ergebnisse aufweisen.

gruesse

120Sprecher schrieb am 10. November 2007, 01:16 h    # 

Hallo Andreas,
danke fuer die Muehe die du mit der Uebersetzung gegeben hast…

121Sinsemilla schrieb am 12. November 2007, 22:12 h    # 

ja, auf deutsch ist es sogar für mich verständlich! Werde mal versuchen, ob ich ein neues Layout damit hinbekomme – bin in css leider noch nicht sehr bewandert… aber danke!

122Nils Zimmermann schrieb am 15. November 2007, 11:13 h    # 

Hey!

Sehr guter Beitrag, man könnte eventuell noch auf die Existenz des CSS-Frameworks von YAML hinweisen. Dieses ist nun auch in Verbindung mit XT verwendbar, was besonders für Shop Betreiber interessant sein dürfte, da Shops bisher ja ohne Tabellen undenkbar waren.

Wir haben YAML bei mehreren unserer Projekte eingesetzt. Beispielsweise in unserem Rockabilly Shop.

Man kann die Standardtemplates genial schnell anpassen und auch eigenes schaffen. Total empfehlenswert!

Gruss
Nils

123Sebastian schrieb am 17. November 2007, 12:27 h    # 

Herzlichen Dank für dieses Tutorial – ist gebookmarkt! „Alte Webdesign Hasen“ wie ich haben tatsächlich ab und zu noch immer Probleme CSS strukturiert einzusetzen – schließlich liegen da lange Jahre fast ausschließlich Tabellen-formatiertes Layout hinter einem… :-)

124Webdesign schrieb am 23. November 2007, 16:56 h    # 

Hi !

Tolle Tutorial. Alles sehr schön beschrieben
und auch für versierte CSS Programmierer eine Fundgrube.

125Yaway schrieb am 26. November 2007, 10:37 h    # 

Gute Anleitung! Auch wenn man schon ne Weile mit CSS zu tun hat. Man lernt eben nie aus. Schönen Dank!

126Merchants schrieb am 26. November 2007, 14:50 h    # 

Danke für das von A bis Z, sehr hilfreich.

127Alexander schrieb am 26. November 2007, 14:55 h    # 

Schöne Zusammenfassung. Danke für deine Bemühungen. Artikel bekommt ein Lesezeichen.

128Roman schrieb am 27. November 2007, 09:17 h    # 

Good work!
Interesting and cognitive.

129Tomsen schrieb am 28. November 2007, 10:17 h    # 

Super Tutorial. Vielen Dank! Website find ich auch sehr gelungen. CSS rules!

130Jan schrieb am 30. November 2007, 23:07 h    # 

Sehr schön. Obwohl ich in Sachen CSS eigentlich sehr gfit bin, gab es doch ein paar neue Dinge zu entdecken. Weiter so !

131Andy schrieb am 9. Dezember 2007, 15:13 h    # 

Mensch, mit dieser Hilfe, traue ich mich als Anfänger auch mal an Cascading Stylesheets (CSS) ran.
Danke schön

132klaus schrieb am 13. Dezember 2007, 20:58 h    # 

Schöne Anleitung! Ich gehe ja immer noch mit der Idee schwanger, mal ein eigenes Theme für mein Wordpress Blog zu erstellen. Vielleicht wird es ja in 2008 mal was.

Gruss
Klaus

133Chris schrieb am 15. Dezember 2007, 15:09 h    # 

Danke für diese tollen Informationen!

Setzen CSS seit Beginn schon bei uns ein, aber man lernt ja nie aus… :))

134Dominik schrieb am 16. Dezember 2007, 10:38 h    # 

klasse , ich werde nun versuchen meine seite umzustellen!!

135Sigara schrieb am 17. Dezember 2007, 13:14 h    # 

Super Tutorial. Vielen Dank! Website find ich auch sehr gelungen. CSS rules!

136mutfak schrieb am 17. Dezember 2007, 13:14 h    # 

Vielen Dank. Website find ich auch sehr gelungen. CSS rules.

137gezi schrieb am 17. Dezember 2007, 13:15 h    # 

Auch wenn man schon ne Weile mit CSS zu tun hat. Man lernt eben nie aus. Schönen Dank.

138Scouty schrieb am 18. Dezember 2007, 09:43 h    # 

Wozu teure Bücher kaufen, wenn man die besten Anleitungen im Netz selbst findet. Vielen Dank für die Arbeit. Einfach unbezahlbar!

139Dirk schrieb am 22. Dezember 2007, 00:41 h    # 

Danke für das schöne Tutorial. Damit konnte ich noch viel dazulernen.

140Peter schrieb am 23. Dezember 2007, 20:40 h    # 

einfach genial und sehr einfach!! Ich habe mein design umgestellt!

141ev schrieb am 25. Dezember 2007, 02:30 h    # 

Danke für das schöne Tutorial. Damit konnte ich noch viel dazulernen

142Philipp schrieb am 26. Dezember 2007, 11:08 h    # 

Danke für das klar und gut strukturierte Tutorial. Als Anfänger hat mich CSS immer etwas abgeschreckt. Für ein neues Projekt werde ich mich mit dieser Anleitung aber an die Thematik wagen.

143Jan Feinkost schrieb am 27. Dezember 2007, 19:17 h    # 

Super Tutorial! Hat mir bei der Theme- Erstellung einer Web- Community auf Drupal Basis enorm geholfen.

144Thomas schrieb am 30. Dezember 2007, 02:28 h    # 

bisher habe ich immer mit tabellen gearbeitet. oldschool halt. ;) dank dieses tutorials werde ich aber den umstieg wagen. mal sehen, ob das auch gelingt. lol.

145webedesign Kö schrieb am 30. Dezember 2007, 11:42 h    # 

ein klasse service. manchmal muss eben auch beides kombinieren, leider kann man auf tabellen auch nicht immer verzichten ;-(

146PR Online schrieb am 4. Januar 2008, 03:34 h    # 

[..]leider kann man auf tabellen auch nicht immer verzichten ;-([..]

Stimmt vor allem bei Formularen :(
Wenn jemand der Meinung ist es geht doch, dann her damit.

147Tom schrieb am 7. Januar 2008, 11:20 h    # 

Auch bei Formularen geht es ohne Tabellen. Einfach „labels“ benutzen. Hier wird das z.B. ganz gut erklärt …

148Mallorca Thomas schrieb am 16. Januar 2008, 17:36 h    # 

sehr gutes und ausführliches tutorial. bei unserer aktuellen Relaunch werden wir das layout vollständig mit css umsetzen. danke!

149Dominik schrieb am 2. Februar 2008, 11:13 h    # 

wir haben es mit unserer Webseite umgesetzt und es bringt sogar suma punkte!!

150Willy schrieb am 2. Februar 2008, 20:15 h    # 

Vielen Dank für dieses Tutorial,
ich konnte es als CSSNeuling problemlos nachvollziehen.
Tschüüüß Tabellen. (:

151Peter schrieb am 6. Februar 2008, 23:03 h    # 

Vielen Dank für die geniale Zusammenstellung! Auch Anfänger können so eine gute Möglichkeit finden, eine gute Webseite mit CSS erstellen.

152automotive repair manual schrieb am 7. Februar 2008, 19:30 h    # 

Thomas hat geschrieben, dass CSS Nachteile bei Google einbringen kann. Was (abesehen von wirklich falschen Pogrammierungen) sollte das denn sein?
Solange der eigentliche Inhalt ausgelesen werden kann, dürfte doch eigentlich nichts schiefgehen, oder habe ich etwas übersehen?
Ansonsten natürlich Danke für die Tutorials.

153Irina schrieb am 12. Februar 2008, 12:00 h    # 

super! vielen dank für das tutorial. echt sinnvoll und gut nutzbar.

154Artur schrieb am 15. Februar 2008, 21:42 h    # 

Super, einfach genial!
Diese Seite werde ich weiterempfehlen.

Gerade für Einsteiger sehr geeignet.

155klaus peter schrieb am 19. Februar 2008, 21:39 h    # 

coole Hilfe, Super!

156Webdesign Trautmann schrieb am 21. Februar 2008, 00:08 h    # 

Vielen Dank, für diese tolle Übersetzung, eines tollen Tutorials!
Immer wieder toll, Grüße Chris

157theflasher schrieb am 21. Februar 2008, 21:57 h    # 

An wen richtet sich eigentlich dieses Tutorial ??

Als Anfänger wird man ja bereits bei Schritt 7 vollkommen im Stich gelassen. Wie positioniert man den genau die Container ?

Leider auch sehr knapp gehalten

158arma motoru optimizasyonu schrieb am 24. Februar 2008, 20:39 h    # 

danke für die informationen

159Holger Thies schrieb am 25. Februar 2008, 11:29 h    # 

Muss theflasher Recht geben: Für wen ist dieses Tutorial?
Ab dieser Stufe 7 versteht ein Anfänger überhaupt nichts mehr. Von jetzt auf sofort nur noch Fremdwörter die vorher nicht behandelt wurden und auch nicht erklärt werden.

160Andreas Kalt schrieb am 25. Februar 2008, 14:19 h    # 

@ theflasher und @Holger Thies:

Ich finde es etwas befremdlich, sich zu beklagen, dass ein kostenloses Tutorial einen nicht bis ins letzte Detail an der Hand nimmt. Das Netz ist voll von Informationen zu CSS — aber es liegt in der Natur des Mediums, dass sie verstreut und unstrukturiert sind.
Wenn Sie die Infos in kleinen Häppchen und von Anfang bis Ende serviert bekommen möchten, müssen Sie wohl 30,00 – 50,00 EUR in ein Buch investieren.
Ansonsten müssen Sie sich vielleicht etwas umsehen, um die vorhandenen Wissenslücken zu schließen.

161Achim schrieb am 29. Februar 2008, 23:59 h    # 

Ich muss Andreas zustimmen.
Man sollte die Arbeit respektieren und nicht einfach nur rumnögeln.
Jedem Recht manchen kann man es eh nicht.

Vielen Dank für die Übersetzung.

162Martin Hagen schrieb am 1. März 2008, 21:06 h    # 

Der Artikel, oder eher die Anleitung sind ordentlich recherchiert, gut strukturiert und gut erläutert.

Niemand wurde „gezwungen“ es zu lesen ^^

163Christian Dittmayer schrieb am 4. März 2008, 20:42 h    # 

Hi hätte da auch mal ne Frage,
ich bin gerade dabei eine Site zu erstellen, dazu lerne ich schon mit Selfhtml.org, nun bin ich auf diese Seite gestoßen. Ist es möglich diese CSS Codes auch in Frontpage einzugeben und sich dann das Ergebnis anzeigen zu lassen?

Vielen lieben Dank

Gruss Christian D.

PS. Tolle Seite, super erklärt.

164Seltener Daniel schrieb am 7. März 2008, 12:42 h    # 

Deine Anleitung ist Super Andreas. Es stehen sehr viele super nützliche Tipps und Tricks drin. Mir hat es geholfen den Aufbau eines CSS Designs mit anderen Augen zu betrachten. Vielen Danke für Deine Mühen.

165arama motoru optimizasyonu schrieb am 8. März 2008, 04:42 h    # 

danke andreas, wieder mal dazu gelernt

166Christian schrieb am 8. März 2008, 15:03 h    # 

Hallo,
eine super Anleitung und wunderbar übersetzt. Ich möchte meine Gildenseite umgestalten in reines CSS. Diese Anleitung hilft mir dabei ungemein. Vielen Dank nochmal :)

167chrissie schrieb am 10. März 2008, 02:34 h    # 

herzlichen dank superschöne übersichtliche und informative seite. hat mir sehr geholfen :-)

168Tobias schrieb am 11. März 2008, 15:18 h    # 

Vielen Dank für diese ausfürliche Schritt-für-Schritt Anleitung. Ich wollte mich schon länger mit CSS befassen, wußte aber nie wo anfangen. Hab die Seite gleich gebookmarked!
Danke für Deine Mühe,
Tobias

169Joe schrieb am 14. März 2008, 12:25 h    # 

Herzlichen Dank für eine wirklich gelungene Anleitung. Ich werde versuchen dies selbst mal anzuwenden.
Danke Joe

170Andreas schrieb am 16. März 2008, 00:08 h    # 

Supi! Genau das habe ich jetzt gebraucht um mit meinem Projekt etwas weiter zu kommen. Vielen Dank.

171Steffan Müffler schrieb am 18. März 2008, 08:58 h    # 

Klasse, echt ein gutes CSS Tutorial. Das hat mir sehr weitergeholfen mit meiner eigenen Seite. Voralledingen kann man es sehr gut Schritt für Schritt nach vollziehen.