Auf Thema antworten

Beitrag

[QUOTE="JoePetts, post: 7736, member: 769"]
Hi Leute,

ich habe hier ein Problem mit einem Hintergrund, weil dieser nicht im Hintergrund bleiben will.

Die Idee ist:

Ich möchte einen Streifen im hintergrund haben, der "fixed" ist und beim Scrollen mitläuft.
Mitlaufen tut der Streifen zwar, bleibt aber nicht im Hintergrund.

CSS[CODE]@charset "UTF-8";
/* ProjektM */

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

body {
    background-image:url(../bilder/background2.png);
    background-color:#515151;
}

#streifen {
    margin-top:150px;
    position:fixed;
    z-index:10;
    background-image:url(../bilder/streifen.jpg);
    height:66px;
    width:100%;
    float:none;
}

#wrapper {
    background-color:#133E84;
    background-image:url(../bilder/background4.jpg);
    width:800px;
    height:auto;
    margin:auto;
    -moz-box-shadow: 0px 0px 15px 1px #ED6400;
    -webkit-box-shadow:  0px 0px 15px 1px #ED6400;
    box-shadow: 0px 0px 15px 1px #fff;
    z-index:1;
}

#sidebar {
    float:left;
}

#logo {
    margin-top:200px;
    margin-left:687px;
    background-image:url(../bilder/logo3.png);
    width:120px;
    height:66px;
    position:fixed;
}

.clear {
    clear:left;
}

#inhalt {
    background-color:#fff;
    width:600px;
    height: auto;
    margin-top:50px;
    margin-left:auto;
    margin-right:auto;
}

#inhalt2 {
    padding-top:20px;
    background-color:#fff;
    width:500px;
    margin: auto;
}

#kopf {
    background-color:#133E84;
    height:150px;
    width:800px;
    margin-left: -100px;
}

.clear {
    clear:left;
}

/* Horizontale-Navi */

#cssmenu {
    width: 100%;
    height: 27px;
    margin-left:50px;
    margin: 0;
    padding: 0;
    margin-top:10px;
    background: #000000 url(../bilder/bg-bubplastic.gif) top left repeat-x;
}

#cssmenu ul {
    list-style: none;
    margin: 0 0 0 30px;
    padding: 0;

}
#cssmenu ul li {
    float: left;
    margin: 0;
    padding: 0;
    background: transparent url(../bilder/bg-bubplastic-button.gif) top left no-repeat;
}

#cssmenu ul li a {
    display: block;
    height: 27px;
    padding-left: 35px;
    float: auto;
    text-transform: uppercase;
    font-family: 'Helvetica Neue',helvetica,'microsoft sans serif',arial,sans-serif;
    font-size: 70%;
    color: #FFFFFF;
    text-decoration: none;
}

#cssmenu ul li a span {
    display: block;
    float: left;
    height: 22px;
    padding-top: 5px;
    padding-right: 35px;
    background: transparent url(../bilder/bg-bubplastic-button.gif) top right no-repeat;
    cursor: pointer;
}

#cssmenu ul li a:hover,
#cssmenu ul li.active a {
    background: transparent url(../bilder/bg-bubplastic-h-gray.gif) top left no-repeat;
}
#cssmenu ul li a:hover span,
#cssmenu ul li.active a span {
    background: transparent url(../bilder/bg-bubplastic-h-gray.gif) top right no-repeat;
}

footer {
    background-color:#C60;
    width:600px;
    height: 30px;
    margin: 0 auto;
}[/CODE]HTML[CODE]<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="../css/main.css">
<title>ProjektM</title>
</head>

<body>

<div id="sidebar">
        <div id="logo"></div>
    </div>
    
    <div id="inhalt">
    
        <div id="kopf">
        kopf
        </div>
        
        <div id="cssmenu">
              <ul>
                 <li><a href="index.html"><span>Startseite</span></a></li>
                 <li><a href="#"><span>Über Uns</span></a></li>
                 <li><a href="#"><span>Referenzen</span></a></li>
                 <li><a href="#"><span>Impressum</span></a></li>
              </ul>
        </div>
        
        <div id="inhalt2">
       
        </div>
        
    </div>
    
    <footer>
    Footer Inhalt
    </footer>

</div>

</body>
</html>

[/CODE]Hätet ihr vielleicht da eine Idee was ich falsch gemacht habe?
[/QUOTE]

Authentifizierung