(Stand: 22.11.24, Adresse: http://www.grammiweb.de/html/html093.shtml)
Kleine Lesehilfe mit CSS
Gerade textlastige Seiten haben damit zu kämpfen, dass Inhalte trotz ihrer Fülle noch lesbar "rüberkommen". Schnell verliert das Auge des Betrachters den Fokus, und schon sinkt die Lesemotivation.
Eine praktische Möglichkeit, dem Leser eine Hilfestellung zu bieten, findet sich in CSS:
Der <p>-Tag, für die Darstellung von Inhalten hauptverantwortlich, wird einfach
in einen <div>-Container gepackt und mit dem hover-Event versehen.
Die passenden Attribute, zum Beispiel eine andere Hintergrundfarbe oder eine größere
Schriftart, verwandeln so jeden mit <p> beginnenden Absatz in einen
echten Hingucker (sollten Sie's noch nicht ausprobiert haben: Fahren Sie mit dem Mauszeiger
einfach über diesen Text).
Leider funktioniert dieser Effekt nicht in allen Browsern. Der Internet Explorer, in Sachen CSS nicht unbedingt als Highlight zu bezeichnen, reagiert zum Beispiel überhaupt nicht. Auf der anderen Seite wird aber auch kein Fehler verursacht, weshalb die Lesehilfe als Schmankerl für die restliche Browserwelt angeboten werden kann.
Der Quellcode:
<html>
<head>
<style type="text/css">
#lesehilfe p:hover {
background-color: #e3e3e3;
}
</style>
</head>
<body>
<p>Hier erscheint der Effekt nicht</p>
<div id="lesehilfe">
<p>Hier erscheint der Effekt</p>
</div>
</body>
</html>
© Grammiweb.de Internetlösungen. Alle Rechte vorbehalten. Stand: 22.11.2024
Seitenanfang - Sponsor werden - Datenschutz - Medien - Impressum - Werbung - Hilfe - Kontakt