16.05.2016: Es gibt ein paar Aktualisierungen auf unserem Blog! Die Underground Suchmaschine mit welcher ihr Seiten wie die Boerse oder Mygully durchsuchen könnt, wurde komplett überarbeitet. Die XXX Stream Liste wurde aktualisiert, tote Links mit neuen ersetzt, das gleiche gilt für die MP3 Suchmaschinen und die Liste mit den Android Apps wurde ebenfalls erweitert.

HTML/CSS Browser-Leiste

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!

Error: Image Not Found!

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:
.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 */
}

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.

Error: Image Not Found! (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

Kommentare:

  1. Ich habe einen Blog bei blogger, kann ich das dort einfügen ? Wenn ja wie ?

    AntwortenLöschen
  2. Erstmal 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...

    Diese 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

    AntwortenLöschen
  3. 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öschen
  4. Also mittels "Conditional Comments" könntest du für den IE6 folgende Angaben machen:

    .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.

    AntwortenLöschen
  5. 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öschen
  6. Das ist ganz einfach. Du musst nur eine bzw. wenn auch der Hover verändert werden soll, Zwei neue Klassen hinzufügen:

    .lste a{
    color:#333333;
    text-decoration:underline;
    }

    .lste a:hover{
    color:#999999;
    text-decoration:none;
    }

    AntwortenLöschen
  7. und z.b. durch http://de.selfhtml.org/diverses/anzeige/farbpalette_216.htm ersetzen

    AntwortenLöschen

ACHTUNG: Anonyme Kommentare werden nicht freigeschaltet! Bitte wählt aus der Dropdown-Liste "Name/URL" anstatt "Anonym". Mit "Name/URL" bleibt ihr ebenfalls anonym, jedoch kann so zwischen User A und User B unterschieden werden.

Gültige HTML-Tags: <a href="LINK">LINK TITEL</a> | <b>BOLD</b> | <i>KURSIV</i>