Wir haben noch ein klein wenig Kosmetik zu machen.
Sieh dir diesen flatternden Text nochmals an und achte vor allem auf die Abstände zwischen den Buchstaben.Das ist wirklich nicht sehr schön. Woher kommt das?
Eine Erklärung wird sichtbar, wenn wir alle unsere 23 divs mit Rahmen versehen.
Wenn man die Buchstaben in ihren Kästchen sieht, leuchtet es bald mal ein: Die divs sind
alle gleich breit, die Buchstaben hingegen nicht. Wenn die Buchstaben nun in ihren divs drin
linksbündig stehen, dann kommt's zu so knappen Abständen wie nach dem "m" von Homepapa oder zu so grossen
Lücken wie nach dem "i" beim President.
Also dann, hier ist noch ein Schalter, mit dem kannst du die Buchstaben in ihren divs
zentrieren.
So, besser geht's nicht mehr. Noch immer hat's um das "i" herum relativ viel Platz, aber dem könnte man nun erst beikommen, wenn man die genaue Breite der Buchstaben hätte, und die kriegt man nicht. Aber der Effekt ist gut genug und wenn dich die unregelmässigen Abstände stören, dann nimm eben eine Monospace-Schrift wie z.B. Courier.
Du erinnerst dich, dass wir im Abschnitt "schreiben" eine CSS-Class definiert
haben, in der wir vor allem die absolute Positionierung der divs ermöglichten. Hier sind nun
also zum Schluss noch ein paar Eigenschaften zu definieren:
.flatter { position: absolute ;
font-family: Verdana ;
font-size: medium ;
text-align: center ;
}
und damit klappt die ganze Sache.