[an error occurred while processing this directive]

Neu: Inspirationen für Webdesigner

Entdecken Sie die schönsten Seiten im Netz

Hier klicken und mehr erfahren

Programme von Machern für Macher

Die Grammiweb-Produktreihe hält viele praktische Tools für Webdesigner bereit

Hier klicken und mehr erfahren

[an error occurred while processing this directive]

(Stand: 07.07.20, 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>


Zurück zum Inhaltsverzeichnis

[an error occurred while processing this directive] [an error occurred while processing this directive]

© Grammiweb.de Internetlösungen. Alle Rechte vorbehalten. Stand: 07.07.2020
Seitenanfang - Sponsor werden - Datenschutz - Medien - Impressum - Werbung - Hilfe - Kontakt