SELFHTML aktuell Artikel CSS
CSS:
Infobox
Jan Heinicke
Hinweise zum Thema
Beispiel 1 mit Erläuterungen
Beispiel 2 mit Erläuterungen
Beispiel 3 mit Erläuterungen
Weiterführende Links
| SELFHTML aktuell Artikel CSS | |
|
CSS:
|
|
|
| |
| E-Mail: |  jan.heinicke@online.de |
|---|---|
| Homepage-URL: |  http://css.fractatulum.net/ |
Bei Fragen zu diesem Beitrag bitte den Autor des Beitrags kontaktieren!
In diesem Beispiel soll es darum gehen, einen Button zu erstellen, der bei Mausberührung seine Größe ändert
und innerhalb des Linkbereiches oder aber an einer beliebigen Stelle der Seite einen zusätzlichen Informationstext einblendet.
Realisiert wird das ausschließlich durch den Einsatz von CSS und HTML, Javascript wird nicht benötigt. Wie so oft beim Einsatz
von CSS muss auch hier das Verhalten älterer Browser beachtet werden. Wenn es zu Problemen mit der Darstellung kommt, kann eine
CSS-Browserweiche
weiterhelfen.
Das Grundelement der aufklappbaren Infobox ist ein
<div>-Bereich,
welcher auf der Seite
absolut positioniert
ist. Wäre der Bereich fließend im Text angeordnet, würde das ein Verrutschen des Inhaltes unter die Box zur Folge
haben. Dieser Bereich bekommt eine
ID
zugewiesen, welcher im Stylesheet die entsprechenden Formatierungen zugewiesen werden. Innerhalb des <div>-Bereiches
befinden sich ein
<a>-Element
sowie der einzublendende Text, umfasst von einem
<span>-Element.
Dieses wird zunächst mittels
display:none
als unsichtbar definiert.
Anzeigebeispiel: So sieht's aus
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="de">
<head>
<title>Infobox</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
<!--
#box {
position:absolute; top:50px; left:50px;
z-index:3;}
#box a {
color:#ffffff;
background:#b3b06c;
font:bold 16px verdana, sans-serif;
text-decoration:none;
display:block;
padding:5px;
border:1px solid black;}
#box a:hover {
color:black;
background:#ddd8b7;
width:400px;}
#box a span {display:none;}
#box a:hover span {
color:black;
background:#ffffff;
font:normal 16px courier, sans-serif;
border:1px solid black;
display:block;
padding:10px;}
-->
</style>
</head>
<body>
<div id="box"><a href="#">INFOBOX<span>Lorem ipsum dolor sit amet</span></a></div>
</body>
</html>
In diesem Beispiel wird einem <div>-Bereich die ID box zugewiesen, mit dem
ID-Selektor #box
werden das Aussehen und die Position festgelegt. Das <div>-Element ist
absolut positioniert,
es wird damit aus dem Fluss der Elemente herausgenommen.
Mit dem
Kindselektor #box a
wird das Grundformat des <a> Elements innerhalb von Divs mit
der ID box festgelegt. Mit dem Kindselektor #box a:hover wird das Verhalten des Pseudoformates
des <a>-Elementes bei Mausberührung definiert.
Für das Einblenden bzw. Ausblenden des Infotextes ist in diesem Beispiel das <span>-Element entscheidend. Im Grundzustand ist der Infotext ausgeblendet, dies geschieht mit der Angabe display:none im Selektor #box a span. Der Wert none veranlasst, dass der Text ausgeblendet ist, das Pseudoformat :hover bewirkt, dass der Text beim Überfahren des Links mit der Maus eingeblendet wird.
Bei dieser Art der Formatierung besteht das Problem, dass ältere Browser (und Opera bis zur Version 6) diese Formatierung nicht
unterstützen, im speziellen sind es Selektoren wie #box a:hover span. Der Infotext wird also nicht eingeblendet. Damit aber für Besucher, die einen solchen Browser benutzen die Information nicht unzugänglich bleibt, bietet es sich an, im <a>-Element eine Seite zu referenzieren, welche die Informationen ebenfalls enthält.
Anzeigebeispiel: So sieht's aus
Alternativ kann der einzublendende Text auch an einer beliebigen, fixen Stelle der Seite eingeblendet werden. Dazu ist es
nötig, im Kindselektor #box a:hover span die Position anzugeben, dies geschieht mittels
position:absolute.
Anzeigebeispiel: So sieht's aus
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="de">
<head>
<title>Infobox</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
<!--
#box a {
color:#ffffff;
background:#b3b06c;
font:bold 16px verdana, sans-serif;
text-decoration:none;
display:block;
width:150px;
padding:5px;
border:1px solid black;}
#box a:hover {
color:black;
background:#ddd8b7;}
#box a span {display:none;}
#box a:hover span {
position:absolute; top:10px; right:10px; z-index:3;
display:block;
width:300px;
color:black;
background:#ffffff;
font:normal 16px courier, sans-serif;
border:1px solid black;
padding:10px;}
-->
</style>
</head>
<body>
<div id="box"><a href="#">INFOBOX<span>Lorem ipsum dolor sit amet.</span></a></div>
</body>
</html>
In diesem Beispiel ist der <div>-Bereich selbst nicht absolut positioniert, er befindet sich im normalen
Dokumentenfluss. Jedoch wird nun der einzublendende Text absolut positioniert, er erscheint somit an einer festgelegten Stelle der
Seite. Das Prinzip dieser Konstruktion ist davon abgesehen dasselbe wie in Beispiel 1.
In diesem Beispiel wird wieder bei Mausberührung eines Elementes zusätzliche Information eingeblendet. Der Unterschied zu den vorangegangenen Beispielen besteht darin, dass das Pseudoformat :hover nun nicht dem <a>-Element, sondern einem anderen HTML Element, in diesem Fall einem <div>, zugewiesen wird.
Diese Art der Formatierung besitzt den Vorteil, dass nicht nur ein Inline-Element sondern auch ein Block-Element eingeblendet werden kann, welches wiederum Blockelemente enthalten darf. Ein Nachteil ist, dass nur ausreichend CSS-fähige Browser diese Art der Formatierung beherrschen, nicht so der Internet Explorer einschließlich der Version 6. Die aktuellen Versionen von Netscape, Mozilla und Opera dagegen haben damit keine Probleme.
Damit nun die einzublendenden Informationen für alle Benutzer, egal welchen Browser sie nutzen, zugänglich sind, wird in diesem Beispiel das kleine Bild mit einem Link versehen, welcher zu einer Seite verweist, auf der die Informationen ebenfalls bereit stehen.
Anzeigebeispiel: So sieht's aus
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="de">
<head>
<title>Infobox</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
<!--
img {
border:none;
}
#box{
height:80px;
width:80px;
padding:0;
margin:20px;
border:1px solid black;
font:bold 14px verdana, sans-serif;}
#box div{display:none;}
#box:hover div{
display:block;
width:300px;
position:absolute;top:20px;right:20px;
border:1px dashed black;
padding:15px;
font:normal 14px verdana, sans-serif;}
-->
</style>
</head>
<body>
<div id="box"><a href="info.htm"><img src="bild.png" width="80" height="80" alt=""></a>
<div>
<p><strong>INFO</strong></p>
<p>Lorem ipsum dolor sit amet.</p>
</div>
</div>
</body>
</html>
Durch das Einbringen des <a>-Elementes werden alle Benutzer mit grafischen Browsern bedient. Es gibt jedoch auch Software,
welche CSS gar nicht oder nur sehr eingeschränkt CSS beherrscht, wie zum Beispiel Textbrowser oder Netscape bis zur Version 4. In diesen Browsern
wird der eigentlich ausgeblendete Bereich innerhalb des restlichen Inhaltes angezeigt. Damit die Inhalte der Seite auch in diesen Browsern in
verständlicher Weise angezeigt werden, sollten alle Elemente der Seite so angeordnet bzw. ausgezeichnet werden, dass kein großes
Durcheinander entsteht. Wenn die Seite trotz der Entfernung aller Stylesheets immer noch logisch aufgebaut ist, haben Sie alles richtig gemacht.
Die folgenden Stellen werden empfohlen, um das obige Beispiel besser zu verstehen, oder um weitere Möglichkeiten und Details zu erfahren.
Edition W3C: CSS2-Selektoren (Vorabversion)
W3C: CSS2-Selektoren
SelectORacle: Selektoren entziffern
Eric Meyer: pure CSS menus
Lynx-Viewer