InfoBox 02 - Demo 01  (Formatierung)

Für die Info-Box 02 habe ich separate Beispielseiten ohne weitere Erklärungen erstellt. Im Wesentlichen handelt es sich um Varianten durch benutzerseitige Anpassungen.

Demo zur Formatierung der InfoBox 02. Die CSS-Anweisungen für die Box sollen angepasst werden. Hintergrundgrafik und -farbe der Box soll bestimmt werden. Die Box-Breite soll 350 Pixel betragen. Der Rand soll farblich angepasst 5 Pixel gelb sein. Zur Anzeige der Info-Box den Mauszeiger über einen Link bewegen.

Textlink für Box 01 (nur InfoBox)    Textlink für Box 02 (als Link)    Textlink für Box 03    Textlink für Box 04    Textlink für Box 05

Breite der Info-Box: 350 Pixel Anzeige: am Link Hintrgrundgrafik: bg04-copy.gif Hintergrundfarbe: #F9F9F9 Rand: 5px solid #FDEA02 Text: Arial 11px Zeilenhöhe: 130% Textfarbe: #5F5F5F

<style type="text/css">
<!--

#InfoBox2 {
background:url(bg04-copy.gif) #F9F9F9 bottom right no-repeat;
width:350px;
padding:10px;
margin:0px;
border:5px solid #FDEA02;
font-family:Arial,Helvetica,sans-serif;
font-size:11px;
line-height:130%;
color:#5F5F5F;
}

#InfoBox2 b{
font-size:14px;
font-weight:bold;
color: #FF9F00;
}

#InfoBox2 h2{
font-size:18px;
font-weight:bold;
color: #FF9F00;
}

-->
</style>

Die Hintergrundgrafik 'bg04-copy.gif' wurde unten rechts positioniert und soll nicht gekachelt (wiederholt dargestellt) werden (no-repeat). Dort wo die Grafik den Hintergrund nicht abdeckt, soll der Hintergrund die Farbe '#F9F9F9' haben. '#F9F9F9' entspricht dem Farbwert des hellen Grau.

#InfoBox2 {
background:url(bg04-copy.gif) #F9F9F9 bottom right no-repeat;
...

#E6F8E5

#EDF4FB

#FCEEE1

#F9F9F9