Inhaltsbereich

Updates zum großen Little Boxes-Buch

Das große Little Boxes Buch - Cover

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

Markt + Technik · 800 Seiten (gebunden) · 34,95 €
ISBN: 978-3-8272-4714-8 (erschienen am 30. Juni 2011) 

Komplett aktualisiert. Jetzt mit HTML5 und CSS3.  

Ausführlicher Inhaltsüberblick
Leseproben (als PDF zum Download)

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. 

Fundstelle Beschreibung
  Letzte Änderung: 1. Mai 2012
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 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 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 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 Formularfeld streichen. Die haben da nichts zu suchen. Stattdessen sollte wie im Formular Seite 232 ganz normal das Eingabefeld für »Besuchername« kommen.
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. Ansonsten funktioniert das Beispiel wie beschrieben.
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 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 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 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 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.

Nach oben