Lucida Console schwarz
oder in Courier schwarz notiert, anpassungsbedürftige Teile sind farbig.<style type="text/css">
.infoBoxS { /* Erläuterungen: siehe unten */
background-color: #F6F6F6;
padding: 8px 10px 10px 10px;
border-radius: 14px;
box-shadow: 3px 3px 3px #AFAFAF;
border: 1px solid #AFAFAF;
width: 88%;
behavior: url($(res.396.PIE_htc.path)); }
</style>
AddType text/x-component .htc
em
angeben position:absolute; margin-left: 860px; top: 130px;
<div style="position: fixed; width: 200px;"> /* HTML-Absatz vor Textabsatz */
</div> /*HTML-Absatz nach Textabsatz */
box-shadow
:<p style=" background-color: #F6F6F6; padding: 8px 10px 10px 10px; border-radius: 14px; box-shadow: 3px 3px 3px #AFAFAF; border: 1px solid #AFAFAF; width: 88%;">
... Text, der in der Infobox erscheinen soll ...
</p>
<style type="text/css"> .name { .... } </style>
<p style=" .... "> ... </p>
div
-Element mit der Stilvorgabe für die Infobox verwenden:<div style=" .... "> ... Inhalt der Infobox ... </div>
notizS
.backgroundGreyShadow
.<style type="text/css"> /* Zeile entfällt im Projekt-CSS */
/* Notizbox mit Schatten und Eck ==================== */
.notizS {
background: none repeat scroll 0 0 #F2F5F8;
overflow: hidden;
padding: 18px 10px;
box-shadow: -1px 1px 1px #AFAFAF; /* Schatten links und unten */
position: relative;
width: 88%; /* Breitenreduktion wg. Innenabstands */
}
.notizS:before { /* das Eselsohr */
background: none repeat scroll 0 0 #F2F5F8;
border-color: #FFFFFF #FFFFFF #ADBAC7 #ADBAC7; /* Farbe des Ecks */
border-style: solid;
border-width: 0 15px 15px 0; /* das Eck oben rechts */
box-shadow: 0 1px 1px #666666, -1px 1px 1px #999999; /* Schatten */
content: "";
display: block;
position: absolute; /* absolute Positionierung */
right: 0; /* Position rechts */
top: 0; /* Position oben */
width: 0;
}
</style> /* Zeile entfällt im Projekt-CSS */
infoBoxS2
zugeordnet.<style type="text/css"> /* Zeile entfällt im Projekt-CSS */
.infoBoxS2 {
padding: 12px 12px 8px 12px;
width: 86%;
border: 1px solid #AFAFAF;
border-radius: 4px;
box-shadow: 0 0 2px #ADBAC7, 0 0 6px #CAD2DB inset;
}
</style> /* Zeile entfällt im Projekt-CSS */
backgroundGreyShadow
zugewiesen. Sie wird auch auf anderen Seiten verwendet.<style type="text/css">
.websiteBox { padding: 12px 6px;
background: #f2f2f2;
background: linear-gradient(to bottom, #f0f0f0, #f8f8f8);
background: -ms-linear-gradient(top, #f0f0f0 0%, #f8f8f8 100%);
border: 1px solid #C6C6C6 !important; border-radius: 4px;
box-shadow: 0px 2px #999999;
width: 95% !important; }
</style>
<style type="text/css">
.infoBoxErhoeht {
text-align: center;
width: 78% !important;
padding: 1em;
margin: 3em 5em;
background: #ffffff;
box-shadow: 0 15px 10px -10px #666666,
0 1px 6px #AFAFAF,
0 0 30px 6px #E6E6E6 inset; }
</style>
<style type="text/css">
#box {}
#box a {
color: #ffffff;
text-align: center;
background: #0E3F8D;
text-decoration: none;
display: block;
width: 150px;
padding: 5px;
border: 1px solid black;}
#box a:hover {
color: black;
background: #B0C4DE;
width: 400px;}
#box a span {display:none;}
#box a:hover span {
position: relative;
z-index: 3;
display: block;
font-size: 80%;
color: black;
background: #ffffff;
border: 1px solid black;
padding: 10px;}
</style>
<style type="text/css">
#box a:hover {
width: 600px; }
</style>
<div id="box"><a><b>Neuigkeiten</b><span>Diese Infobox ist ausschliesslich mit HTML und CSS implementiert.<br />
Javascript wird nicht benötigt.<br />
Zu beachten: box ist ein Id-Element und darf auf einer Seite nur einmal vorkommen.<br />
... ...
</span></a></div>
Ingo Turskis Infobox Infobox:
Noch eine Infobox, gänzlich ohne Javascript.
Es lohnt sich, bei Ingo Turski zu stöbern.