Infobox mit CSS
Jan Heinicke am 03.02.2003 – 2 Kommentare
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.
Beispiel mit Erläuterungen
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 unterhalb der Box zur Folge haben. Dieser Bereich bekommt eine ID zugewiesen, welche im Stylesheet die entsprechenden Formatierungen enthält. 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.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
<!--
body {
padding-top:130px;
}
#box {
color:black;
background-color:transparent;
position:absolute;
top:100px;
left:30px;
z-index:1;
}
#box a {
color:#f6e4c1;
background-color:#b8ab8f;
font-family:arial, sans-serif;
font-size:100%;
font-weight:bold;
text-decoration:none;
display:block;
padding:5px;
border-top:2px solid #e4d9c0;
border-right:2px solid #837c6b;
border-bottom:2px solid #837c6b;
border-left:2px solid #e4d9c0;
}
#box a:visited {
color:#f6e4c1;
background-color:#b8ab8f;
}
#box a:hover {
color:#f6e4c1;
background-color:#b8ab8f;
text-decoration:none;
width:400px;
border-top:2px solid #837c6b;
border-right:2px solid #e4d9c0;
border-bottom:2px solid #e4d9c0;
border-left:2px solid #837c6b;
}
#box a:active {
color:#f6e4c1;
background-color:#b8ab8f;
}
#box a .info {
display:none;
}
#box a:hover .info {
color:black;
background:#b8ab8f;
font:14px courier,sans-serif;
display:block;
padding:5px;
text-align:justify;
}
-->
</style>
</head>
<body>
<div id="box">
<a href="#">Infobox <span class="info">Hier steht der zusätzliche Infotext.</span></a>
</div>
<p>...weiterer Text der Seite...</p>
</body>
</html>Erläuterung:
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 Elementenfluss herausgenommen.
Mit dem Kindselektor #box a wird das Grundformat des <a> Elements innerhalb von Divs mit der ID box festgelegt. Die Angabe display:block veranlasst, dass die Links nicht als Inlineelemente, sondern als Blockelemente dargestellt werden. Somit können für sie Höhe und Breite definiert werden.
Mit den Kindselektoren #box a:visited, #box a:hover und #box a:active wird das Verhalten der Pseudoformate des <a>-Elementes in den jeweiligen Zuständen definiert.
Weiter ist eine zusätzliche Klasse notwendig, die für das Einblenden bzw. Ausblenden des Infotextes zuständig ist, im Beispiel ist das .info. Entscheidend in dieser Klasse ist display:none. Der Wert none veranlasst, dass der Text ausgeblendet ist, das Pseudoformat a:hover bewirkt, dass der Text beim Überfahren des Links mit der Maus eingeblendet wird.
Bitte beachten:
Bei dieser Art der Formatierung besteht das Problem, dass ältere Browser (und Opera bis zur Version 6) diese Formatierung nicht unterstützen, im speziellen die zusätzliche Klasse .info. 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.
Beispiel 2
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 .info die Position anzugeben, dies geschieht mittels position:absolute.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Cascading Stylesheets: Infobox - Beispiel 2</title>
<style type="text/css">
<!--
body {
margin-top:130px;
}
#box {
color:maroon;
background-color:#CDC6AD;
border-top:2px solid #e4d9c0;
border-right:2px solid #837c6b;
border-bottom:2px solid #837c6b;
border-left:2px solid #e4d9c0;
width:70px;
}
#box a {
color:maroon;
font:14px courier, sans-serif;
text-decoration:none;
background-color:#CDC6AD;
display:block;
border-top:1px solid #99917D;
border-right:1px solid #E4D9C0;
border-bottom:1px solid #E4D9C0;
border-left:1px solid #99917D;
text-align:center;
}
#box a:visited {
color:maroon;
background-color:#CDC6AD;
}
#box a:hover {
color:#F9F3DD;
text-decoration:none;
background-color:#CDC6AD;
border-top:1px solid #E4D9C0;
border-right:1px solid #99917D;
border-bottom:1px solid #99917D;
border-left:1px solid #E4D9C0;
}
#box a:active {
color:maroon;
background-color:#b8ab8f;
}
#box a .info {
display:none;
}
#box a:hover .info {
color:black;
background:#b8ab8f;
font:14px courier,sans-serif;
display:block;
position:absolute;
top:5px;
right:5px;
padding:5px;
width:200px;
text-align:left;
border-top:2px solid #837c6b;
border-right:2px solid #e4d9c0;
border-bottom:2px solid #e4d9c0;
border-left:2px solid #837c6b;
}
-->
</style>
</head>
<body>
<div id="box">
<a href="#">Infobox <span class="info">Hier stehen dann die Infos.</span></a>
</div>
</body>
</html>Erläuterung:
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.
1 Kommentar
Und ich dachte, sowas geht nur mit Javascript. Nicht schlecht.
Andre am 23.09.2008