[an error occurred while processing this directive]

Ganz schön bunt

Laden Sie jetzt stimmige Farbwelten für Ihre Webseiten herunter - kostenlos

Hier klicken und mehr erfahren

Verwalten Sie Ihre Webfarben

Behalten Sie mit MyColor Studio den Überblick über Ihre Onlineprojekte

Hier klicken und mehr erfahren

[an error occurred while processing this directive]

(Stand: 08.03.21, 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: 08.03.2021
Seitenanfang - Sponsor werden - Datenschutz - Medien - Impressum - Werbung - Hilfe - Kontakt