Eine einfache Browser-Leiste, welche immer am oberen Browser Rand angeheftet ist. Es kann beliebiger Text eingefügt werden, Bilder, Links oder was auch immer… Praktisch für Werbung, Hinweise, oder auch als Navi einsetzbar!
Wie immer habe ich auch hier den Code versucht so kurz wie möglich zu gestalten. Die Leiste selbst besteht gerade mal aus einer Zeile:
HTML Code:
<!DOCTYPE HTML PUBLIC „-//W3C//DTD HTML 4.01 Transitional//EN“ „http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd“> <!– HTML/CSS Browser-Leiste by www.dug-portal.com –> <HTML> <HEAD> <LINK rel=stylesheet type=text/css href=“style.css“> </HEAD> <BODY>
<!– ### Browser-Leiste Start ### –>
<div class=“durd“><div class=“lste“>HIER DER INHALT, EIN LINK, EIN BILD ODER WAS AUCH IMMER…</div></div>
<!– ### Browser-Leiste Ende ### –></BODY>
</HTML>
Und der CSS Code dazu:
padding-bottom:30px; /* Abstand zwischen Leiste und Seiten-Inhalt */
}.lste {
font-family: Verdana, Sans-Sherif; /* Schriftart */
font-size: 11px; /* Schriftgröße */
background:#FFAE5E url(alert.png) no-repeat; /* Hintergrundfarbe + Hintergrundbild */
background-position:8px 5px;
position:fixed;
top:0px;
right:0px;
left:0px;
padding:5px 8px 5px 28px;
border-width:1px 0px 1px 0px;
border-style:solid;
border-color:#333333; /* Border Farbe */
}
.lste:hover {
background-color:#FFCC99; /* Hintergrundfarbe bei Mouseover */
}
Dazu kommt auch noch ein 14×14 Pixel großes PNG Image, welches in den gleichen Ordner gespeichert werden muss, wo sich auch die style.css befindet.
(Einfach rechte Maustaste -> Grafik speichern unter..)
Kompatibel mit allen gängigen Browsern (Internet Explorer 7/8, Firefox, Opera, Safari ect.)!
Hinweis: IE6 wird hier nicht mehr unterstützt, da er die Angabe „position:fixed“ schlicht weg nicht versteht. Man könnte es anpassen, mit position:absolute ect. was ich aber nicht mache, da ich so einen veralteten „Browser“ nicht mehr supporte (aus Sicherheitsgründen, Inkompatiblität ect.) Irgendwann muss das auch mal ein Ende haben…
