Videos eBook Forum Kontakt

jetzt Videos kaufen
zum Lernen von HTML,
CSS und Webdesign

Jetzt das HTML-Seminar bestellen als
Video-Tutorial mit über 210 Videos:
von den Grundlagen bis zur fertigen Website
Video-Kurs HTML5, CSS & Webdesign

Video-Kurs bestellen HTML5, CSS & Webdesign
Video-Kurs bestellen HTML5, CSS & Webdesign

Bilder im Inhalt mit Design versehen

Rechts haben wir im Bereich <aside> die 3 Bilder mit den kleinen Fenneks. Diese wollen wir nun mit Design über CSS versehen. Die Bilder sollen in dem Bereich zentriert werden und mit einem Rahmen versehen werden.

Bilder im Inhalt mit Design versehen – bisheriges Aussehen
Bilder im Inhalt mit Design versehen – bisheriges Aussehen

Im ersten Schritt zentrieren wir die Bilder. Dazu greifen wir in dem Bereich <aside> mit dem Typ-Selektor img auf die Bilder zu.

aside {
    /* background-color: #808000; */
    width: 175px;
    float: right;
}

aside img {

}

Wir wollen die Bilder nun zentriert. Jetzt könnte man auf die Idee kommen dies mit der CSS-Anweisung text-align: center; zu versuchen – allerdings sind unsere Bilder Inline-Elemente und müssten dann erst zu einem Block-Element über display: block; umgewandelt werden.

Die einfachere und direkte Methode für diesen Fall ist über einen Abstand. Hierzu nehmen wir einen Außenabstand, da die Bilder ja auch einen Rahmen bekommen und dieser bei einem Innenabstand dann eine „Lücke“ hat – also über die CSS-Anweisung über den Außenabstand margin.

aside img {
    margin-left: 10px;
    border:1px solid silver;
}

Somit sind meine Bilder im Bereich <aside> zentriert und mit einem Rahmen versehen:

Bilder zentrieren und mit Rahmen versehen
Bilder zentrieren und mit Rahmen versehen

Was jetzt noch fehlt, ist die Beschriftung „Bildersammlung“. Diese hängt noch am linken Rand.

Wenn wir uns den HTML-Code ansehen, sehen wir, dass wir am besten über den Typ-Selektor auf den HTML-TAG <p> vor der Beschriftung „Bildersammlung“ zugreifen.

aside p {
    margin-left: 10px;
}

Als Ergebnis kommt unter Umständen etwas vom Design unerwartetes:

Bilder verrutschen zu weit nach rechts
Bilder verrutschen zu weit nach rechts

Jetzt wirkt der Abstand 2 x auf die Bilder – einmal von dem Absatz <p>, in dem die Bilder drin stecken und einmal von dem Abstand, den wir vorher den Bildern zugeteilt haben.

Unsere Bilder sind also bereits mit einem Abstand versehen, den wir jetzt wieder entfernen müssen. Im folgenden Code auskommentiert durch /**/, damit besser sichtbar ist, wo die Änderung stattgefunden hat. Nun der komplette CSS-Code zur besseren Übersicht:

aside {
    /* background-color: #808000; */
    width: 175px;
    float: right;
}

aside p {
    margin-top: 20px;
    margin-left: 10px;
}

aside img {
    /* margin-left: 10px; */ 
    border:1px solid silver;
}

Einen Abstand noch oben, zwecks schöneren Designs, ist im letzten Quellcode auch bereits integriert.

Unser fertiges Beispiel in der Ausgabe im Browser:

fertiges Aussehen des Designs für die Bilder rechts
fertiges Aussehen des Designs für die Bilder rechts

Entfernen wir nun den roten Rahmen um das Layout.

#wrapper {
    /* background-color: #eeeeee; */
    width: 900px;
    /* border: 2px solid red; */
    margin: 0 auto;
    text-align: left; 
    background-image: url(bilder/durchsichtig8.png);   
}

Unser Layout sieht vom Aufbau, langsam aber sicher, wie das gewünschte aus. Gehen wir nun auf die Schrift und Abstände los.

weitere eigene Projekte: