""

Mit float lassen sich mit CSS mehrere Elemente nebeneinander anzeigen: Reicht der Platz aus, wird ein "float:left" Element neben einem anderen Element mit der Eigenschaft "float:left" angezeigt. Trotzdem ist es nicht ganz einfach, verschiedene floating-Elemente zu platzieren - vor allem, wenn sie auch noch zentriert werden sollen.   display: flex - DIVs flexibel und zentriert nebeneinander Die neue CSS Eigenschaft "display: flex" hilft hier aus, sie wird mittlerweile auf allen großen Browsers unterstützt. Statt einem "flot:left" und ...

Tipp: So sieht das Bild ohne CSS Filter aus! Für manche Effekte braucht man kein Bildbearbeitungsprogramm: Mit den CSS Filtern können die Browser viele Effekte selber darstellen - und das, ohne das ursprüngliche Bild zu verändern. Einer dieser Effekte ist der grayscale Filter: Damit wird aus einem bunten Bild eine schicke schwarz-weiß Grafik. Das einfärben des ...

Mit Javascript lassen sich die CSS Werte eines Elements nicht nur auslesen, sondern auch setzen: So kann man mit Javascript etwa dynamisch Elemente in der Größe verändern oder neu platzieren. Damit das funktioniert, muss man auf die Werte aber auch zugreifen können. Ganz wichtig ist dabei die ID des Objektes (in unserem Beispiel einfach ein DIV). Über dessen ID (die auf der gesamten HTML-Seite nur einmal vorhanden sein darf) lassen sich die Werte auslesen und ...

Für Responsive-Webseiten, die nicht nur in großer Auflösung auf dem Desktop-Rechner, sondern auch auf dem Tablet oder Handy gut aussehen, muss man oft bestimmte Elemente in der Größe an das Webseiten-Fenster (oder die verfügbare Bildschirmbreite) anpassen. Das geht mit CSS sehr leicht: Hier zeigen wir zum Beispiel, wie man mit CSS ein Bild immer automatisch mitskaliert). Zum Beispiel: ...

Mit CSS lassen sich Bilder ganz einfach an die Größe des Browserfenster anpassen - sogar automatisch, wenn es sich verkleinert oder vergrößert. Aber zusätzlich funktioniert dieser Trick auch für Responsive-Webseiten, damit die Bilder nicht nur auf dem Desktop, sondern auch auf mobilen Webseiten in der vollen Breite angezeigt werden, ohne dass wichtige Informationen abgeschnitten werden. Beispiel: So sieht es aus! Für ...

Nur mit HTML und CSS kann man einer Schrift ganz einfach einen schönen Outline-Effekt geben: Einen farbigen Rand um die Text-Zeile herum. Das passt gut für Überschriften, aber auch für Text, der auf einem Bild platziert werden soll und dann so aussehen könnte wie in dem Beispiel-Screenshot oben. Für die CSS Outline definiert man dafür einfach einen Schatten um die Schrift - aber ...

Mit einem kleinen Trick lassen sich Elemente einer Webseite nur mit CSS fest definieren: dann bleiben sie auch beim Scrollen fest an ihrer Position und bewegen sich nicht mit - das ist ideal für eine schmale Menüleiste, die immer sichtbar sein soll.   position:fixed Mit dem Befehl "position:fixed" wird ein Element absolut platziert, allerdings mit dem Unterschied zu "position:absolute", dass es auch fest an seiner Position bleibt. Scrollt man auf der Seite nach unten, bleibt das fix ...

Möchte man eine Menüleiste (oder ein anderes Element wie die Navigation) immer sichtbar anzeigen lassen, geht das mit der CSS Angabe "position" - außerdem kann man das Element noch leicht transparent gestalten, damit man beim Scrollen die anderen Inhalte unten noch ein wenig durchscheinen sieht.   HTML Element mit CSS immer sichtbar fixieren Der CSS Befehl zum immer sichtbaren Fixieren eines HTML Elemts lautet ...

Mit CSS, den Cascading Style Sheets, kann man Elemente einer Webseite anpassen - so lassen sich zum Beispiel Texte schnell und einfach formatieren und die Farbe des Textes, die Schriftgröße und die Schriftart ändern, um den Text nach eigenen Wünschen zu gestalten. Farbe definieren color:black; <div style="color:black;">Beispieltext</div> So sieht es aus: Beispieltext   Fetter Text und andere Farbe Statt schwarz kann man auch eine andere Farbe wählen - statt dem Farbwert als Text kann man die ...

Mit den CSS Style Sheet Befehlen oder auch Grafiken lassen sich langweilige Absende-Buttons in HTML Formularen etwas aufpeppen und an das Gesamt-Design der Website anpassen. Neben den Buttons lassen sich aber auch die Eingabefelder eines Formulars verschönern! Standardbutton: <input type="submit" value="Absenden"> Mit zusätzlicher Grafik: <input type="submit" value=" Absenden" style="background-image:url(fragezeichen.gif); background-repeat: no-repeat; background-position: 3px 2px;"> Mit (transparentem) Hintergrundbild:...

Links lassen sich sehr geschickt formatieren, um gut zum Rest der Seite zu passen: Möchte man zum Beispiel die Farbe ändern oder die Unterstreichung entfernen, geht das sehr einfach mit CSS. Außerdem lässt sich statt dem normalen Unterstrich auch eine gepunktete Linie nutzen oder eine Hintergrundfarbe.   Keine Unterstreichung unter dem Link: Um den Unterstrich unter einem Link wegzulassen, fügt man das folgende CSS Kommando ein: text-decoration: none; Wir zeigen es hier direkt im Tag, alternativ lässt es sich aber ...

Lange Tabellenzeilen sind nicht immer angenehm zu lesen, und auch das dezente Abwechseln von Hintergrundfarben hilft nicht viel. In diesem Beispiel zeigen wir einen einfachen MouseOver oder Hover Effekt, der die aktuelle Tabellenzeile unter dem Mauszeiger farbig hervorhebt. Das Beispiel nutzt hier Javascript (obwohl es auch nur mit CSS möglich wäre) - ist daher etwas flexibler und kann bestimmte Zeilen daher auch leicht mit anderen Farben hervorheben, wie wir im zweiten Beispiel zeigen. table.hover{ ...

HTML ist nicht nur für einfache Webseiten geeignet, sondern auch für später ausdruckbare Seiten: So kann ein Onlineshop die Rechnungen direkt in HTML anzeigen, und schon für das Drucken optimieren. Anders als bei scrollbaren Bildschirmseiten werden die Ausdrucke aber von der Papierlänge eingeschränkt: Hier hilft ein einfacher HTML Seitenumbruch, um längere Seiten passend für den Druck zu optimieren. Den Seitenumbruch kann man in HTML ganz einfach per CSS Befehl erzeugen: Schon lassen sich längere Dokumente ...

CSS Image Sprites sind eine einfache Methode, um die HTTP-Aufrufe ihrer Webseite zu verringern. Hat man beispielsweise Grafiken mit einem MouseOver-Effekt von Bildern als Link, so brauchen diese meist lange Nachladezeiten mit oft unschönen Effekten. Im schlimmsten Fall erscheint sogar gar kein Bild für eine kurze Zeit. Um das Laden dieser zweiten Bilder zu erleichtern, wird mit dem CSS-Sprites ein Bild daraus gemacht. Die beiden Grafiken werden dabei neben- oder übereinander gelegt ...

Kai Laborenz präsentiert modernen Webdesignern mit dem CSS Praxis Buch ein optimales Naschlagewerk. Wer nämlich immer noch auf Tabellen setzt und Style Sheets aus Kompatibilitätsgründen missachtet, gehört längst zum alten Eisen. Nach der Einführung, Praxisbeispielen und einigen Skript-Tricks, zum Beispiel zum Schutz vor zu kleinen Schriften oder verschiedenen Style-Switchern zur Auswahl des benötigten Style Sheets werden im letzten Kapitel die eigenen CSS Elemente einzeln erklärt. Diese sind dabei nach Benutzung, ...