Inhaltsbereich

Updates zum großen Little Boxes-Buch

Bye bye: Das große Little Boxes-Buch

Das große Little Boxes-Buch 
Webseiten gestalten mit HTML & CSS.
Grundlagen, Navigation, Inhalte, YAML und mehr 

Markt + Technik · 800 Seiten (gebunden) · 34,95 €
erschienen am 30. Juni 2011

Der offizielle Nachfolger ist »Einstieg in CSS«

Hier finden Sie alle bisher bekannten Fehler zu »Das große Little Boxes-Buch« (ISBN: 978-3-8272-4714-8). Die folgende Tabelle enthält wirklich alle bekannten Fehler, auch fehlende Leerstellen und dergleichen, lassen Sie sich also von der Länge der Tabelle nicht abschrecken. Die wirklich wichtigen Fehler sind fett gedruckt

1. Nachdruck vom Herbst 2012

Fundstelle Beschreibung
  Letzte Änderung: 17. März 2013
Seite 193
im Listing 8.6
In Zeile 86 ist am Ende ein "84" zuviel.
Seite 237
im ToDo
Ganz oben im Listing, im Style für form, sind die folgenden zwei Zeilen nur versehentlich hineingerutscht:
input:focus, textarea:focus
background-color: #ffeda0;

Diese beiden Zeilen müssen da unbedingt raus.

Außerdem sollten Sie ganz unten in der allerletzten Zeile des Listings in der background-color das Grau #d9d9d9 durch z. B. einen hellen Gelbton wie z. B. #ffeda0ersetzen.
Seite 267
Abbildung 13.1
Die Abbildung 13.1 hat es geschafft, sich unverändert aus der 2009-Ausgabe in das große Buch hinüber zu retten. Schade eigentlich, denn einige Details stimmen nicht mehr mit der Beispielsite überein:
  1. Im Kopfbereich gibt es kein div mit der Klasse skiplink mit einem a darin. Skiplinks werden erst ab Seite 415 eingebaut.
  2. Der Absatz p im Kopfbereich hat die ID slogan
  3. Die Listenelemente li haben keine ID (navi01 und navi02
  4. Das erste li hat die Klasse sie-sind-hier
Seite 492

Aus Sicherheitsgründen wird :visited in fast allen neuen Browsern nur eingeschränkt umgesetzt. Es sind zum Beispiel keine Hintergrundgrafiken mehr erlaubt, sodass das Beispiel im ToDo nicht mehr funktioniert. Die meisten Browser nehmen stattdessen einfach den Style für unbesuchte Links. Gerald Brozek hat dazu in seinem Blog hyperkontext.at einen lesenswerten Beitrag geschrieben (in neuem Tab oder Fenster):

Originalausgabe vom Juni 2011

Fundstelle Beschreibung
  Letzte Änderung: 31. Mai 2013
Seite 56 Das Add-On Web Developer wird nicht "im Anhang" beschrieben, sondern in Kapitel 38. Seite 774 stimmt.
Seite 60
im Tipp
Auf einem Mac geht das Speichern und Wechseln per Tastatur mit
CMD + S
CMD + TAB
CMD + R
Seite 61 Firebug wird in Kapitel 38 auf Seite 775 vorgestellt.
Seite 68
oben
Es sollte heißen:
4. body enthält den Inhalt
und nicht "mit dem Inhalt"
Seite 69
im ToDo
Im Stammelement html stehen ein Paar hübsche französische Klammern. Das sieht zwar gut aus, ist aber leider falsch. Im Quelltext gibt es immer nur ganz normale Anführungszeichen. Richtig ist also:
<html lang="de">
Seite 70
oben
Es muss heißen "ihn interessieren nur die Tags".
Seite 71 Im zweiten Absatz fehlt eine öffnende Klammer: (de = deutsch)
Seite 83
oben im ToDo
Der letzte Schritt im ToDo sollte die Nr. 5 haben:

5. Speichern Sie die Datei.

(gefunden von Sebastian Doppel)
Seite 85
im ToDo
In Schritt 2 sollte <body> ohne ID sein (gefunden von Katja Solbrig).
Seite 86
Abbildung 4.1
In Abbildung 4.1 <body> sollte ohne ID sein.
Seite 92
Abbildung 4.3
Abbildung 4.3 zeigt nicht die im Text darunter erwähnte Hervorhebung der Inline-Elemente. Die korrekte Grafik können Sie sich online anschauen.
Seite 93
im ToDo
Die erwähnten "eingefügten Absätze" werden auf Seite 90 eingefügt (und nicht wie beschrieben auf Seite 89).
Seite 112
im ToDo
Im ToDo auf Seite 112 ist der Paragraph unvollständig dargestellt. Es fehlt id="slogan". (von Arne Kleinschmidt gefunden)
Seite 114
Tabelle 5.2
In der Tabelle 5.2 auf Seite 114 sind die Zeichen für die kleinen Umlaute ö und ä als Großbuchstaben gedruckt.
Seite 135
unten
Die Grafik in Listing 6.1 heißt little_boxes_logo.gif und der Querverweis sollte auf Seite 107 verweisen.
Seite 140
Mitte
Im Text ist bei "neue" ein "e" zuviel. Richtig muss es heißen: "Mit CSS können Sie Hyperlinks völlig neu gestalten, ..."
Seite 159
Listing 7.13 und 7.14
Um eine durchgängig einheitliche Schreibweise sicherzustellen, müsste bei color jeweils das Leerzeichen vor dem Doppelpunkt gelöscht werden.
Seite 193
im Listing 8.6
In Zeile 83 fehlt der auf Seite 156 definierte Style zum Gestalten des Wortes "Grundlagen":
p#slogan span {
 color: #d90000; /* Schriftfarbe */
}
Seite 202
unten
"Das folgende Beispiel sorgt ..."
Seite 218
im ToDo
Der Kommentar /* war #d90000 */ gilt eigentlich für die background-color und steht somit eine Zeile zu tief.
Seite 237
im ToDo
Als Hintergrundfarbe zur Kennzeichnung des aktiven Eingabefeldes nehmen Sie am besten nicht wie im ToDo beschrieben die Hintergrundfarbe des Formulars (#d9d9d9), sondern irgendetwas anderes. Besser erkennbar wäre zum Beispiel ein heller Gelbton:
input:focus, textarea:focus {
background-color: #ffeda0;
}
Seite 243
im ToDo

In Schritt 1 bitte die beiden Zeilen nach der einzufügenden, fett gedruckten Zeile mit dem versteckten inputFormularfeld streichen.


Die beiden Zeilen mit label und dem input darunter haben in diesem ToDo nichts zu suchen. Stattdessen sollte nach dem versteckten Formularfeld wie im Formular Seite 232 ganz normal das Eingabefeld für »Besuchername« kommen.

Seite 244
im TIPP
Die beiden INPUT-Elemente benötigen keinen abschließenden Slash.
Seite 267
Abbildung 13.1
Die Abbildung 13.1 hat es geschafft, sich unverändert aus der 2009-Ausgabe in das große Buch hinüber zu retten. Schade eigentlich, denn einige Details stimmen nicht mehr mit der Beispielsite überein:
  1. Im Kopfbereich gibt es kein div mit der Klasse skiplink mit einem a darin. Skiplinks werden erst ab Seite 415 eingebaut.
  2. Der Absatz p im Kopfbereich hat die ID slogan
  3. Die Listenelemente li haben keine ID (navi01 und navi02
  4. Das erste li hat die Klasse sie-sind-hier
Seite 292
ToDo unvollständig!
Im ToDo fehlt die komplette zweite Hälfte!
===
1. Ändern Sie das Stylesheet bildschirm.css wie folgt:
#kopfbereich {
 position: relative; /* positioniert, aber bleibt im Fluss */
 background: #ffe574 url(farbverlauf.jpg) repeat-y left top;
 color: black;
 padding: 10px 20px 0 20px;
}
p#slogan {
 position:absolute;
 top: 10px ;
 right: 20px; /* war vorher left: 50%; */
 padding: 5px 0 5px 0;
 margin-bottom: 0;
}

2. Speichern Sie das Stylesheet, und betrachten Sie die Webseiten im Browser.
====
Seite 293
unter Abb. 14.8
Falls Sie das rot eingefärbte Wort "Grundlagen" eine Zeile tiefer setzen möchten, sollten Sie den Punkt nach dem Wort entweder in das span setzen oder ganz entfernen.

Der Punkt wird ansonsten unterhalb von "Grundlagen" in eine eigene Zeile gesetzt und wirkt dann ein bisschen unmotiviert.
Seite 325
ToDo, Schritt 3

Im ToDo ist in Schritt 3 der Relativsatz "..., der Sie die Klasse clearing zuweisen" komplett überflüssig.


Ein Zeilenumbruch br hinterlässt im Browserfenster weniger Spuren als die beschriebene horizontale Zeile hr.

Seite 332
ToDo
Im ToDo sollten die Schritte 6. und 7. eigentlich 4. und 5. sein.
Seite 400
ganz unten
In der allerletzten Zeile auf der Seite ist eine # zuviel. Der Inline-Patch für den IE6 sollte heißen:
* html div.galerie { height: 1%; }
Seite 442
ganz unten
Der Querverweis sollte auf Seite 682 verweisen. Dort wird das im Text angesprochene Element fieldset erläutert.
Seite 484
Mitte
In Schritt 3 sollte der Farbverlauf VERTICAL verlaufen (siehe Abbildung 24.13 direkt darüber).
Seite 490
Abbildung 24.16
Die Abbildung ist nicht wirklich lesbar. Auf der Downloadseite von little-boxes.de finden Sie die Grafik in voller Größe:
http://little-boxes.de/downloads/beispieldateien.html
Seite 491
in Tabelle 24.2
Beim vierten Beispiel (mit der Tilde) steht links die Klasse infobox, in der Spalte rechts daneben wird aber von der Klasse warnung gesprochen. Gemeint ist natürlich auch hier die Klasse infobox.
Seite 491
in Tabelle 24.2
Im letzten Beispiel (mit dem Dollar) sollte das Code-Beispiel natürlich mit .pdf aufhören. Ein passendes Beispiel wäre zum Beispiel:
<a href="http://little-boxes.de/errata.pdf">...</a>
Seite 492

Aus Sicherheitsgründen wird :visited in fast allen neuen Browsern nur eingeschränkt umgesetzt. Es sind zum Beispiel keine Hintergrundgrafiken mehr erlaubt, sodass das Beispiel im ToDo nicht mehr funktioniert. Die meisten Browser nehmen stattdessen einfach den Style für unbesuchte Links.

Gerald Brozek hat dazu in seinem Blog hyperkontext.at einen lesenswerten Beitrag geschrieben (in neuem Tab oder Fenster):

Seite 492
im ToDo
Wie oben beschrieben, funktioniert die Darstellung der Grafik für besuchte Links in den meisten Browsern nicht mehr. Wer es trotzdem ausprobieren möchte: Die Grafik heißt linksinsweb_visited.gif, mit einem Unterstrich. Der Style in Schritt 4 sollte deshalb auch einen Unterstrich haben:
a:visited[href^="http"]{
  background-image: url(linkinsweb_visited.gif) ;
}

Oder Sie benennen die Grafik um. Das geht auch.
Seite 557
im ToDo
In Schritt 2 muss es id="suchfeld" heißen, wie auf Seite 553 unten beschrieben.
Seite 587
Mitte
Im Stylesheet navi_dropdown.css muss Schritt 5 nach Schritt 6 erfolgen, sonst wird die zweite Navigationsebene beim Anklicken nicht rot:

/* Schritt 6: Hover-Effekt für die zweite Ebene */
div#navibereich ul.level2 a:hover {
background: #ffe05a;
color: black;
}
/* Schritt 5: Moment des Klicks in der zweite Ebene */
div#navibereich ul.level2 a:active {
background: #b80000;
color: white;
}


Im Kapitel 28 wird zuerst :active erklärt und dann :hover. Im Stylesheet sollten die beiden Styles aber umgedreht werden, da sonst der Hover-Effekt den Moment des Klicks überlagert. Im Buch wird das auf Seite 145 im Abschnitt »Die Reihenfolge der Pseudo-Klassen im Stylesheet ist wichtig« erklärt.
Seite 617
im Tipp
Zwei URLs stehen ohne Zeilenumbruch hintereinander. So ungefähr sollte es aussehen:
  • google.com/webfonts
  • bit.ly/google-font-quick-start
    (Kurz-URL zu code.google.com)
Seite 669
im ToDo
Die Grafiken in Kapitel 32.3 sind 240px breit und werden in eine 200px breite Lücke geschoben. Das funktioniert auch, wenn das Listing im ToDo auf Seite 669 in Schritt 3 vollständig wäre. Dort fehlen die letzten beiden Zeilen mit den Angaben zu width und height:
ul li img {
position: absolute;
top: 0;
left: 0;
width: 180px;
height: 180px;
}

Gefunden von Nicole Strübin. In den Beispieldateien ist übrigens alles korrekt.
Seite 685
im ToDo
Im HTML kann das Attribut required für select ruhig fehlen, da ja immer eine Option ausgewählt ist und die Browser es daher sowieso ignorieren.
Seite 726
in »Auf einen Blick«
Die vierte Grundregel zur Arbeit mit YAML lautet – Trennung von YAML-CSS und Ihren eigenen Stylesheets (Ihren mit "n" und nicht mit "m")
Seite 791
Mitte der Seite
Bei der Liste der Foren zu HTML und CSS können Sie spotlight.de getrost streichen. Das ist nicht mehr aktiv.
Seite 798
Stichwortverzeichnis
Die Kurzschreibweise von margin wird bereits ab Seite 202 geschildert (gefunden von Leserin C. Kleis).

Haben Sie einen Fehler gefunden? Kurz gucken, ob er hier schon gelistet ist und wenn nicht, gleich schreiben.