Leiste für Hp

S

StonedLover

Mitglied
Hallo,
Ich suche einen Script der eine Leiste im unteren Bereich des Browser erscheinen lässt welcher immer zu sehen ist egal ob man ganz oben oder unten auf der Homepage ist. Dort möchte ich mit html Buttons einbauen.
Kann mir da jmd. weiter helfen?
 
Hi!

Du kannst einfach eine div Box mit position:fixed am oberen Rand bauen und dort alles hineinschmeissen, was dein Herz begehrt.

Grüße Anton
 
Also ich lese immer "..im unteren Bereich.."

Habe hier ein Beispiel gefunden das recht gut funktioniert:

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<style type="text/css">
 body{
  margin:0;
  padding:0 0 <length> 0;
 }
 div#footer{
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  height:<length>;
 }
 @media screen{
  body>div#footer{
   position: fixed;
  }
 }
 * html body{
  overflow:hidden;
 }
 * html div#content{
  height:100%;
  overflow:auto;
 }
</style>
<div id="footer"> Dieser DIV Container bekommt die Leiste </div>
<div id="content">Dieser DIV Container bekommt dann den restlichen Inhalt der Seite</div>
 
Danke hat geklappt.
Wie kann man evtl. mit css ein Bild in die Lesite einfügen das sozusagen das bg img ist auf das dann alles drauf kommt. Das Problem ist es soll bei jedem Bildschirm(auflösung) komplett zu sehn sein und nicht ein teil weggeschnitten oder zu lang sein. geht das i.wie?
 
HeyHo,
habe jetzt schon so gut wie alles fertig, hab nur ein Problem.
Ich möchte die Mitte dieser Leiste anders aussehen lassen, nun habe ich versuch dies zu diffen leider klappt das nicht so ganz woran liegt dies?

Code: 
/* Leiste */
 .leistebgl
{
position: fixed;
  bottom:0;
  left:200px;
  width:30%;
  height:8%;
  background-image: url('images/bg_leiste.gif')
 }
 
  .leistebgr
{
position: fixed;
  bottom:0;
  right:200px;
  width:30%;
  height:8%;
  background-image: url('images/bg_leiste.gif')
 }
 
 .leister
{
 position:fixed;
  right:0;
  width: 200px;
  height: 8%;
  background-image: url('images/leiste_r.gif');
}

.leistecenterr
{
position:fixed;
right:500px;
height:8%;
width:20%;
background-image: url ('ímages/leiste_centerr.gif')

}

.leistecenterl
{
position:fixed;
left:400;
height:8%;
width:20%;
background-image: url ('ímages/leiste_centerl.gif')

}

 .leistel
{
 position:fixed;
  left:0;
  width: 200px;
  height: 8%;
  background-image: url('images/leiste_l.gif');
}

/* end Leiste */

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US" xml:lang="en">
<head>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Leiste</title>

    <link rel="stylesheet" href="style.css" type="text/css" media="screen" />

    <script type="text/javascript" src="script.js"></script>
</head>
<body>
 
                   <div class="cleared"></div>
				<div class="leistebgl">
				<div class="leistebgr">
				<div class="leister">
				<div class="leistecenterr">
				<div class="leistecenterl">
				<div class="leistel">
				</div>
				</div>
				</div>
				</div>
				</div>
				</div>
</body>
</html>

MFG StonedLover
 
StonedLover hat gesagt.:
Ich möchte die Mitte dieser Leiste anders aussehen lassen, nun habe ich versuch dies zu diffen leider klappt das nicht so ganz woran liegt dies?
Zum Vergrößern anklicken....
Was bitte ist "diffen"? Wenn, dann wohl eher "divven" - abgeleitet vom HTML-Tag <div> :suspekt:

CSS: 
.leistecenterl
{
position:fixed;
left:400;
height:8%;
width:20%;
background-image: url ('ímages/leiste_centerl.gif')
 
}
Hier fehlt zumindest augenscheinlich für die left-Angabe die Maßeinheit (px), da der Wert größer null ist (gilt auch bei negativen Werten, also kleiner null).

Ansonsten weiß nämlich der Browser im Standardsmode nix damit anzufangen. Dies könnten 400 Äpfel, oder 400 Zigaretten, oder auch 400 Schuhe sein :suspekt:

Aber.... Das Verschachteln von einzelnen fixiert positionierten Elementen, so wie es in deinem DIV-Auflauf der Fall ist, dürfte wohl von Hause aus voll in die Hose gehen, da sich diese Art der Positionierung immer auf den Dokumentrand (<body>) bezieht. Schaust du dir dazu noch deine Dimensionsangaben für die einzelnen Blöcke an, kannst du nachvollziehen, warum der Browser diesen Kraut-und-Rüben-Salat produziert.

Es sollte völlig genügen, ein Elternelement auf diese Weise zu positionieren, und seine Unterteilungen mittels position:absolute oder float:left / float:right vorzunehmen.

Frohes schaffen. Prost!
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück