Bilder Info und Cascading Style Sheets

Als Marc Andreessen, der Gründer von Netscape, Anfang der 1990er-Jahre dafür sorgte, dass der Browser auch Bilder darstellen konnte, setzte er damit nicht nur eine weltweite Diskussion in Gang, sondern ergänzte das Web gleichzeitig um eine weitere visuelle Komponente. Plötzlich waren Webdokumente nicht mehr dazu verdammt, als textüberladene akademische Schriften...

Bilder mit Rahmen versehen mit border

Sie wollen einen eigenen Rahmen für ein Bild verwenden. Legen Sie anhand der Kurzschrifteigenschaft border eigene Stile für den Rahmen fest. Wir verwenden in dieser Lösung die Kurzschrifteigenschaft border, um für alle vier Rahmenseiten die gleichen Werte in einer Deklaration anzugeben. Der erste der drei Werte besagt, dass der Rahmen eine Breite von 6 Pixeln erhalten soll, der...

Rahmen um Bilder nicht darstellen mit none

Eine allgemeine CSS-Regel definiert für alle Bilder der Website einen Rahmen. Dieser soll für bestimmte Bilder entfernt werden. Verwenden Sie eine Regel mit höherer Spezifität und setzen Sie den Rahmenstil auf den Wert none. Am einfachsten geht das, wenn Sie die betreffenden Bilder mit einem class-Attribut versehen, das Sie dann im Stylesheet auswählen können. Hier die...

Die Rahmenfarbe ändern mit Mauszeiger und :hover

Ein Bild soll als Link verwendet werden. Damit dies leichter erkennbar ist, soll sich die Rahmenfarbe ändern, wenn sich der Mauszeiger über dem Bild befindet, wie in Abbildung gezeigt. Verwenden Sie die Pseudoklasse :hover für den Link und geben Sie für den Rahmen des Bilds die gewünschte Farbe an. Die erste Regel umgibt das Bild mit einem 3 Pixel breiten schwarzen...

Skalierbare Bilder mit max-width

Bilder sollen skaliert werden, wenn sich die Größe des Browserfensters äändert. Geben Sie die Breite der Bilder in Prozent an. Diese Regel besagt, dass das Bild so breit sein soll wie sein umgebender Block (z.B. ein div-Element für den Hauptinhalt einer Seite oder der Ansichtsbereich). Damit diese Lösung funktioniert, muss das Bild entweder ein Kinnelement des body-Elements sein, oder...

Bilder mit einer Bildunterschrift mit div und figure

Sie wollen Bilder mit einer Beschriftung versehen. Die Breite soll sich dynamisch an die Bildgröße anpassen. Umgeben Sie die Einzelteile mit einem div-Element, das Sie mit einem passenden class-Attribut versehen. Darin befindet sich das Bild (img) sowie ein Absatz mit Text, der für die Bildunterschrift verwendet werden soll. Die einzelnen Bestandteile können Sie nun per Klassen...

Text durch Grafiken ersetzen mit text-indent

HTML-Text, in unserem Beispiel eine Überschrift, soll durch eine grafische Darstellung ersetzt werden, beispielsweise wenn die typografischen Möglichkeiten von CSS nicht ausreichen oder die gewünschte Schrift ansonsten lizenziert werden muss. Verwenden Sie die Phark-Methode zur Textersetzung (gezeigt in Abbildung). Hierbei wird der Text mittels der CSS-Eigenschaft text-indent...

Bilder als Panorama mit einem div-Element

Die Breite eines Bilds soll dynamisch an die Größe des Browserfensters angepasst werden, wie in Abbildungen zu sehen ist. Umgeben Sie das gewünschte Bild mit einem div-Element. Definieren Sie das gleiche Bild als Hintergrund für das div-Element und positionieren Sie es in der rechten oberen Ecke des Blockelements. Danach verbergen Sie das ursprüngliche Bild, wie hier...

Verschiedene Bildformate mit div-Container

Die drei in Abbildung gezeigten Einzelbilder sollen zu der Montage zusammengefügt werden. Hierbei soll für die Einzelbilder jeweils das bestmögliche Bildformat verwendet werden. Umgeben Sie die drei Bilder mit einem div-Container und platzieren Sie sie in der Reihenfolge ihrer Benutzung im HTML-Code der Seite, wie hier gezeigt. Danach können Sie den Container gestalten...

Sprites zum Speichern von Icons verwenden

Um das Laden Ihrer Seiten zu beschleunigen, sollen alle Icons als sogenannte Sprites in der gleichen Grafikdatei gespeichert werden. Nach der Erstellung der Icons werden diese nicht in separaten Dateien gespeichert. Stattdessen ordnen Sie sie in einer gemeinsamen Bilddatei über- oder nebeneinander an. Diese Datei wird als Hintergrundbild für das gewünschte Element...