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
HTML
Hätet ihr vielleicht da eine Idee was ich falsch gemacht habe?
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;
}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="streifen"></div>
<div id="wrapper">
<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>Hätet ihr vielleicht da eine Idee was ich falsch gemacht habe?
