Webkrauts Logo

Webkrauts Webkrauts Schriftzug

- für mehr Qualität im Web

Adventskalender 2005

Seit 2005 ist es gute Tradition auf webkrauts.de jedes Jahr aufs neue einen Adventskalender mit interessanten Themen aus dem Webbereich zu füllen. Es sind alle Themen vertreten, die Webworkern das Herz höher schlagen lassen. Von CSS3 und SASS über Wireframes und Tools hin zu SEO, Barrierefreiheit und dem mobilen Web.

CSS der Zukunft

von Jens Meiert am 24.12.2005

CSS 3 nimmt immer mehr Konturen an. Und auch wenn CSS 3, das im Gegensatz zu CSS 1 und 2 aus einzelnen "Modulen" besteht, in seiner Gesamtheit auch 2008 noch keine offizielle W3C-Spezifikation sein wird, sind einige Module wie das Syntax- oder Farben-Modul relativ weit fortgeschritten. Dieser Artikel beschreibt ein paar Neuerungen, die mit unterschiedlicher Wahrscheinlichkeit mit CSS 3 kommen werden. |  Kommentare: 10

Organisation großer CSS-Dateien

von Knut Karnapp am 23.12.2005

Wer die ersten selbsterstellten Seiten hinter sich hat und sich nach und nach immer weiter wachsenden Webseiten gegenüber sieht wird schnell feststellen, dass Stylesheets sehr schnell eine durchaus schwer überschaubare Größe annehmen. Daher ist es wichtig, sich im Vorfeld ein paar Gedanken zur inhaltlichen Struktur und Organisation der Styles zu machen. |  Kommentare: 10

Styling der Navigation als ungeordnete Liste

von Oliver Roick am 22.12.2005

Betrachtet man die Navigation einer Website — egal ob vertikal oder horizontal — strukturell, dann ist das Ganze nichts anderes, als ein Liste von Links. Deshalb sollte diese im HTML-Markup auch als solche ausgezeichnet werden. Oft werden diese jedoch durch endlose Strings aufeinanderfolger Links oder eingerahmt in DIVs dargestellt. Begründet wird das meist lapidar damit, dass man keine Aufzählungszeichen vor den Links haben möchte. Dieser Beitrag soll zeigen, wie man mit einigen einfachen CSS-Anweisungen eine als Liste ausgezeichnete Navigation umsetzen kann. |  Kommentare: 5

Splintered striper - Streifen machen schlank

von Patrick Lauke am 21.12.2005

Im März 2004 demonstrierte David F. Miller ein wenig DOM Skripting Magie in seinem A List Apart Artikel Zebra Tables. |  Kommentare: 5

Ein Standard-Design

von Eric Eggert am 20.12.2005

Heute geht es um die Erstellung eines einfachen 3-Spalten-Layouts mittels XHTML und CSS. |  Kommentare: 24

HTML und XHTML: Lassen Sie sich nicht irritieren

von Harald Kampen am 19.12.2005

Es gibt verschiedene Versionen von HTML und XHTML, auf die ich im folgenden Text kurz eingehe. Eine ganze Reihe davon sind entweder veraltet oder noch nicht in Gebrauch. Wenn Sie die XHTML-1.0-Varianten strict, transitional und frameset wählen, haben Sie Ihr vollständiges Sortiment für den Profi- und Hausgebrauch. |  Kommentare: 2

Conditional Comments für den Internet Explorer

von Nicolai Schwarz am 18.12.2005

In einer idealen Webstandards Welt würde sich alle Webdesigner, Browser und Tools an die Vorgaben des W3C halten. In der Praxis ist das leider nicht der Fall. Insbesondere der Internet Explorer macht in allen Versionen ständig Probleme. Eine Möglichkeit, auch diese Browser dazu zu bekommen, ein Design richtig anzuzeigen sind sogenannte Conditional Comments. Diese Technik gehört nicht zu den Webstandards, kann in der Praxis aber hilfreich sein. Kommentare: 1

Hilfe bei Browserbugs

von Nina Gerling am 17.12.2005

Früher oder später trifft jeder Webdesigner auf einen sogenannten Browserbug. Eigentlich ist man sich sicher, dass man alles richtig gemacht hat, aber Tests zeigen, dass die Webseite in einem oder mehreren Browsern nicht so dargestellt wird wie gewünscht. |  Kommentare: 4

Festes vs. flexibles Layout

von Nicolai Schwarz am 16.12.2005

Mittlerweile haben wir genügend CSS-Wissen gesammelt, um uns Gedanken über das Grunddesign zu machen. Eine entscheidende Frage ist, wie sich unsere Seite in der Breite verhalten soll. In Frage kommen ein festes Layout, das immer dieselbe Breite einnimmt, oder ein flexibles Layout, das sich dynamisch dem Browserfenster anpasst. |  Kommentare: 9

Positionierung mit CSS

von Teresia Kuhr am 15.12.2005

CSS ist nicht nur zur Auszeichnung von Schrift oder zur farbigen Gestaltung da - mit CSS können alle Elemente auch im Raum positioniert werden. So kann ein ansprechendes Layout gestaltet werden - ganz ohne Stützkorsett aus Tabellen, wie es lange üblich war. Das hat den Vorteil, dass ein solches Layout später jederzeit leicht ohne Eingriff ins Markup verändert werden kann - nur durch Veränderungen in der CSS-Datei. So kann z. B. leicht ein Menü von links nach rechts versetzt werden - nur durch eine Änderung in der CSS-Datei und das auf allen Seiten gleichzeitig! |  Kommentare: 12

Das Box-Modell

von Jens Meiert am 14.12.2005

Alles im Internet ist eckig, selbst dann, wenn es nicht so scheint. Das CSS-Boxmodell beschreibt den rechteckigen Raum, der für alle Elemente im Dokumentenbaum generiert wird. Im Grunde einfach, wird das Boxmodell dann zur Herausforderung, wenn Browser es fehlinterpretieren: So hat es nahezu jeder Webdesigner und -entwickler beim Internet Explorer 5 kennengelernt. |  Kommentare: 8

Schriften im Internet

von Boris Stumpf am 13.12.2005

Im zeitgemäßen standardkonformen Webdesign verfügen wir über eine ganze Reihe von interessanten Möglichkeiten, unsere Dokumente typografisch zu gestalten. Die durch das Medium World Wide Web und die darauf gründenden Webstandards gegebene Flexibilität und Dynamik ermöglicht uns, Webdokumente für unsere Leser optimal vorzubereiten und zu gestalten. Wenn wir diese Flexibilität im Sinne unserer Leser nutzen, so ermöglichen wir ihnen, unsere Dokumente ihrem eigenen Bedürfnis entsprechend – und nach Möglichkeit ihrer bevorzugten Software – darzustellen. Schauen wir uns einige Möglichkeiten an: |  Kommentare: 6

Die Kaskade

von Eric Eggert am 12.12.2005

Meist unterschätzt und oft schwierig zu verstehen ist das, was CSS die „Kaskade“ nennt. Die Kaskade bestimmt welche Regeln auf Elemente angewandt werden oder nicht. Vieles davon nehmen wir als selbstverständlich hin, doch bei Problemen ist hier oft die Lösung zu finden. |  Kommentare: 6

Klassen & IDs

von Sebastian Kippe am 11.12.2005

Um HTML-Elemente nicht auf der gesamten Seite einheitlich optisch zu verändern, sondern auch Unterschiede zwischen gleichen Elementen machen zu können, wurden in HTML die Attribute “class” und “id” festgelegt. Beide Attribute dienen außerdem dazu, die allgemeine Struktur eines Dokumentes zu verfeinern, indem die Seite z.B. in einzelne Bereiche wie Header, Navigation und Footer eingeteilt wird. |  Kommentare: 6

Das Basisstylesheet

von Jens Grochtdreis am 10.12.2005

Eine (X)HTML-Seite ohne jede CSS-Information ist nichts weiter als unformatierter Text. Jeder Browser gibt einer Webseite allerdings CSS-Grundregeln mit auf den Weg. So sind zum Beispiel Schriftart und -größe, sowie Abstände vordefiniert. Mit einfachen Methoden kann man diese Grundformatierungen zurückzusetzen, um die Kontrolle über die Eigenschaften zu behalten. |  Kommentare: 11

Einfache Anweisungen / erste Formatierungen in CSS

von Manuel Bieh am 09.12.2005

Cascading Style Sheets dienen dazu, das Design eines Dokuments von deren logischer Struktur zu trennen. Einige HTML-Attribute wurden dabei in gleicher oder ähnlicher Form in CSS übernommen (z.B.: font-size, border), viele gänzlich neue kamen hinzu. In diesem Artikel wird gezeigt, wie CSS-Formatierungen korrekt angewandt werden. |  Kommentare: 2

Wie binde ich Cascading Style Sheets (CSS) ein

von Nina Gerling am 08.12.2005

CSS kann sehr unterschiedlich in eine Webseite eingebunden werden. Der folgende Beitrag beschreibt diese Möglichkeiten kurz und erklärt, wann sie eingesetzt werden. |  Kommentare: 2

Kleine Helferlein

von Nicolai Schwarz am 07.12.2005

Bevor wir mit dem Aufbau von CSS-Dateien beginnen, geben wir Ihnen heute ein paar nützliche Tools und Tipps mit auf den Weg. Damit erledigt sich das Webdesign zwar nicht von selbst, aber es wird um einiges einfacher. |  Kommentare: 13

CSS zum Bewundern

von Martin Labuschin am 06.12.2005

CSS-Galerien werden manchmal als Phänomen angesehen. Einige halten sie für eine Quelle der Inspiration, andere nutzen sie als Motivation Besseres zu schaffen. Damit man sich eine eigene Meinung bilden kann, stelle ich hier bekannte ausländische und deutsche CSS-Galerien vor. |  Kommentare: 14

Programme zur Website-Gestaltung

von Stefan Walter am 05.12.2005

Die Produktion von Webseiten ist ein komplexer Prozess. Im Folgenden stellen wir ein paar Programme vor, die bei der Planung und Erstellung helfen. Die Struktur folgt dem üblichen Arbeitsablauf eines Projekts. Zuerst die Planung, dann erste Layouts und die Überlegungen, wie man diese Layouts in HTML und CSS umsetzt. Nach der eigentlichen Umsetzung geht es normalerweise an die Fehlersuche, browserspezifische Probleme wollen beseitigt werden. Den Abschluss bilden ein paar allgemeine Anmerkungen, wie man sich eine lokale Entwicklungsumgebung einrichten kann und das eigentliche »Online stellen« der Website. |  Kommentare: 17

Barrierefreies Internet

von Teresia Kuhr am 04.12.2005

Bei modernen Webseiten sollte man auf gute Erreichbarkeit und Bedienbarkeit für alle Kunden achten, denn das Internet wird heute von allen Bevölkerungsgruppen genutzt. Insbesondere ist dabei auch an Menschen mit Behinderungen zu denken, die das Internet zum Teil sogar überproportional häufig nutzen, weil es die Kontakt- und Informationsmöglichkeiten für körperbehinderte Menschen deutlich erweitert. |  Kommentare: 4

Semantische Websites

von Björn Seibert am 03.12.2005

Oft zitiert ist die »Semantik einer Website«. Das Beispiel der Überschriften in (X)HTML soll stellvertretend erläutern, worum es beim Einsatz der »semantisch relevanten« Elemente ankommt. |  Kommentare: 4

HTML vs. CSS vs. Javascript

von Markus Wulftange am 02.12.2005

HTML, CSS und Javascript sind drei Webstandards, die jeweils einen anderen Aspekt der Webseite abdecken. Deshalb kann man in diesem Zusammenhang auch von einem »Drei-Schichten-Modell« sprechen. |  Kommentare: 0

Wozu Webstandards?

von Jens Grochtdreis am 01.12.2005

Dieser Adventskalender dreht sich hauptsächlich um Webstandards. Es handelt sich hierbei nicht um einen Modebegriff wie »Web 2.0« und auch nicht um eine Modeerscheinung. Webstandards symbolisieren den Grundgedanken des Internet. |  Kommentare: 0