HTML-Floatingbar

Mithilfe von wenigen Zeilen HTML und CSS stylinh ist es möglich so eine „Warnleiste“ zu kreieren, wie sie häufig von den Browsern verwednet wrid.

Dies kann man dann z.B. benutzen um den Besuchen Hinweise sich zu registrieren zu gaben. 🙂

Im ersten Schritt wird hier ein DIV Block angelegt, der dann mit CSS entsprechend formattiert wird:

<div class="floatingbar">
  <a href="/register.php" id="floatingbar"><img src="logo.gif" width="16" height="16" border="0" align="absmiddle">Registriere dich hier, um versteckte Bereiche sehen zu können!</a>
</div><br />
 
<style type="text/css">
.floatingbar a:hover, a:hover#floatingbar
{
  background-color: #45484F;
  color:#ffffff;
}
.floatingbar a, .floatingbar a:link
{
  background-color: #F1EEC8;
  color:black;
  position:fixed;
  padding:5px 10px;
  display:block;
  top:0;
  left:0;z-index:100;
  width:100%;
  border-bottom:2px solid gray;
  font-size:11px;
  font-family:Tahoma;
  margin:0;
  text-decoration:none;
}
</style>

Und das ganze sieht dann so aus:

html-floatingbar-01

 

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert