CSS-Praxis

Lösungen zu gängigen Webdesign-Problemen

Diese Praxisbeispiele begleiten einen längeren Artikel, der erstmals im April 2015 im c't-Sonderheft Webdesign erschien. Dort finden Sie auch ausführliche Erläuterungen zu den hier verlinkten Beispielen.

1. Wie kann ich ein Element horizontal und vertikal zentrieren?
   • horizontal zentrieren
   • vertikal zentrieren (Verfahren 1)
   • vertikal zentrieren (Verfahren 2)
   • vertikal zentrieren (Verfahren 3)
2. Wie kann ich die Höhe an dessen Breite anpassen, ohne diese zu kennen?
   • Breite an Höhe anpassen
3. Kann man nur mit CSS einen Kasten mit Pfeilspitzen versehen?
   • CSS-Pfeile und -Sprechblasen
4. Wie kann ich eine Liste gestalten, die als Listenzeichen einen von mir gewählten Buchstaben benutzt?
   • Liste mit eigenem Listenzeichen (Verfahren 1)
   • Liste mit eigenem Listenzeichen (Verfahren 2)
5. Wie baue ich ein Ausklappmenü ohne JavaScript?
   • Ausklappmenü
6. Kann ich die Menüpunkte im obigen Ausklappmenü, hinter denen eine Unterliste steckt, per CSS hervorheben?
   • Ausklappmenü
7. Wie nummeriere ich in CSS Listen oder Überschriften?
   • Nummerierung von Listen
   • Nummerierung von Überschriften
8. Wie sorge ich für typographisch korrekte Anführungszeichen?
   • Typographische Anführungszeichen
9. Wieso ist der Container, der meine Float-Element enthält, so flach, dass diese herausragen?
   • Float-Probleme
10. Wie kann ich einem Element die Höhe seines Elternelements zuweisen?
    • Element mit der Höhe des Elternelements
    • Element mit der Höhe des Elternelements (alternativ)
    • Element mit der Höhe des Elternelements (verbessert, Verfahren 1)
    • Element mit der Höhe des Elternelements (verbessert, Verfahren 2)
    • Element mit der Höhe des Elternelements (verbessert, Verfahren 3)
11. Wie kann ich Elemente gleichmäßig über die Breite ihres Containers verteilen?
    • Gleichmäßig verteilte Elemente
    • Gleichmäßig verteilte Elemente (alternativ)
12. Kann ich mit Hilfe von CSS die Anzahl der HTTP-Anfragen reduzieren, die ein Aufruf meiner Seite auslöst?
    • CSS-Sprites und Daten-URIs
13. Ich arbeite mit einem CSS-Framework. Wenn ich Abmessungen für ein Element eingebe, verhält sich das Layout nicht so wie gewohnt. Wie kommt das?
    • Alternative Box-Modelle
14. Was sind und wozu brauche ich Sprungmarken?
    • Sprungmarken