Clues of DUG
DUG Partner
Stream Panel
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>
<!-- 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:
.durd {
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) 8px center no-repeat; /* Hintergrundfarbe + Hintergrundbild */
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 */
}
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) 8px center no-repeat; /* Hintergrundfarbe + Hintergrundbild */
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 14x14 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/9 ect., 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...
Tags: browserleiste, css browserleiste, css leiste, css html div leiste
Loading engine...
Ich habe einen Blog bei blogger, kann ich das dort einfügen ? Wenn ja wie ?
AntwortenLöschenErstmal solltest du, wenn nicht schon gemacht, die Browser-Leiste von Blogger ausblenden (dieser hat ja eine eigene). Sonst hast du dann ja zwei Leisten untereinander...
AntwortenLöschenDiese blendest du wie folgt aus:
#navbar { display: none; }
#navbar-iframe { display: none; }
Dann fügst du meinen Code, also nur den Teil wo steht "Leiste Start" bis "Leiste Ende", direkt bei Blogger nach dem öffnenden body Tag ein.. Der CSS Code kann auch einfach bei Blogger in den CSS Bereich eingefügt werden.
Blogger -> Layout -> HTML bearbeiten
Den Internet Explorer 6 nutzen eh immer weniger, der ist sowieso bald ausgestorben. Aber nur aus reinem Interesse, könntest du die Anpassungen dafür trotzdem noch posten?
AntwortenLöschenAlso mittels "Conditional Comments" könntest du für den IE6 folgende Angaben machen:
AntwortenLöschen.lste {
position:absolute;
width:100%;
}
Das sollte eigentlich reichen. Wobei die Leiste dann nicht mehr so funktioniert wie sie eigentlich sollte, sprich sie ist natürlich nicht mehr fixiert.
Wie kann ich da die link farbe ändern? ich hab da links drinnen und die sind blau das is ja nicht so schön.
AntwortenLöschenDas ist ganz einfach. Du musst nur eine bzw. wenn auch der Hover verändert werden soll, Zwei neue Klassen hinzufügen:
AntwortenLöschen.lste a{
color:#333333;
text-decoration:underline;
}
.lste a:hover{
color:#999999;
text-decoration:none;
}
und z.b. durch http://de.selfhtml.org/diverses/anzeige/farbpalette_216.htm ersetzen
AntwortenLöschen