Direktnavigation

Weitere Infos

Sie lesen:
LB Teil 1 (2009)

Little Boxes Teil 1 (Cover)

Aktuell (2015)
Einstieg in CSS

Einstieg in CSS (Cover)


2. Auflage!

Einstieg in CSS (Cover)

Inhaltsbereich

Das CSS im Überblick

Im CSS wurden ebenfalls einige Änderungen vorgenommen.

Im ersten Teil des Stylesheets wurden Styles für h3 sowie die Klassen .bildrechts, .bildlinks und .clearing hinzugefügt:

01 h2, h3, p, ul, ol { margin-bottom: 1em; }
02 ...
03 h3 { font-size: 110%; }

Im zweiten Teil für die Layoutbereiche wurden die Styles für die Navigation entsprechend angepasst:

01 #navibereich a:hover,
02 #navibereich a:focus,
03 #startseite #navi01 a,
04 #galerieseite #navi02 a,
05 #kontaktseite #navi03 a {
06   color: black;
07   background-color: white;
08   border-bottom: 1px solid white;
09 }

Last, but not least wurde im dritten Teil am Ende des Stylesheets das CSS für die kleine Galerie hinzugefügt, wobei der hellgraue Hintergrund entfernt und die Grafiken um einen dezenten Rahmen ergänzt wurden.

01 /* Die kleine Galerie */
02 div.galerie {
03   overflow: hidden; /* zum Einschließen der Floats */
04   padding: 25px 10px 10px 0;
05   margin: 0 3px 3px 0;
06 }
07 div.galerie img {
08   float: left;
09   padding: 4px;
10   border: 1px solid #ddd;
11   border-right-color: #aaa;
12   border-bottom-color: #aaa;
13   margin-right: 15px;
14   margin-bottom: 15px;
15 }

Achten Sie darauf, dass im Listing die per width definierte feste Breite von 500px für div.galerie entfernt wurde, damit sich die Galerie später möglichst flexibel in andere Layouts anpasst.