[an error occurred while processing this directive]

Verwalten Sie Ihre Webfarben

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

Hier klicken und mehr erfahren

Neu: Inspirationen für Webdesigner

Entdecken Sie die schönsten Seiten im Netz

Hier klicken und mehr erfahren

[an error occurred while processing this directive]

(Stand: 05.08.20, Adresse: http://www.grammiweb.de/html/html088.shtml)

 

CSS-Informationsbox

Mit CSS und der Möglichkeit, Elemente (un-)sichtbar zu machen, können Sie eine Informationsbox gestalten, in der sich zusätzliche Angaben zu einem Schlüsselbegriff befinden.

Im Beispiel wird der vom <span>-Tag umschlossene Textteil erst angezeigt, wenn der Mauszeiger über dem entsprechenden Link hält.
 

Beispiel (einfach den Mauszeiger über das Fragezeichen bewegen):

Eine Infobox rein in CSS (?) Information:

Tolle Tipps gibt es im Grammiweb
realisiert.

Der Quellcode:

<html><head>
<style type="text/css">
a.info { border-bottom: 1px dashed #800000; text-decoration: none }
a.info:hover { cursor: help; background: #FFFFFF }
a.info span { visibility: hidden; position: absolute; left: 20em; margin-top: 1em; padding: 1em; text-decoration: none }
a.info:hover span { visibility: visible; border: 1px solid #800000; color: #800000; background: #F8F9B9 }
</style>

</head><body>

<p>Eine Infobox rein in CSS <a class="info" href="#">(?)
<span>
<b>Information:</b><br><br>
Cascading Style Sheets
</span>
</a> realisiert.</p>

</body>


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: 05.08.2020
Seitenanfang - Sponsor werden - Datenschutz - Medien - Impressum - Werbung - Hilfe - Kontakt