[an error occurred while processing this directive]

Finden Sie harmonische Farben

Mit MyColor Studio, dem professionellen Farbmanagement für Ihre Webseite

Hier klicken und mehr erfahren

Formulare ganz einfach erstellen

Onlineformulare mit wenigen Mausklicks einfach und bequem selbst gemacht

Hier klicken und mehr erfahren

[an error occurred while processing this directive]

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