Statischer Header beim Scrollen
Ich habe eine Homepage codiert und versuche nun, eine Kopfzeile zu erstellen, die statisch ist, als würde man nicht scrollen, wenn der Inhalt gescrollt wird. Es sollte oben bleiben, während der Inhalt darunter / darunter geht. Ich habe diese Lösung gefundenHierEs funktioniert jedoch nicht für mich, da ich nicht weiß, wo ich diesen Code einfügen soll, weil alles, was ich versucht habe, nicht funktioniert hat.
KlickenHier für jsfiddle !.
Mein HTML ist:
<!-- #PAGE -->
<div id="page1">
<!-- #HEADER -->
<div id="header1">
<div class="content-wrapper">
<div class="ft-div-left">
<center>
<img src="FW_Logo_Website.png">
</center>
</div>
<div class="ft-div-right">
<center>
</br>
<a href="logout.php" style="text-decoration:none;">
<button class="button-logout" name="Ausloggen">Logout</button>
</a>
</center>
</div>
<div class="ft-div-middle"> </div>
</div>
</div>
<!-- HEADER ENDE -->
<!-- #CONTENT -->
<div id="content">
<div class="wrapper">
<div class="left_box">
<center>
<img alt="" src="images/camera.png" width="100" height="100" />
<h1 class="headline" style="font-family:'Montserrat',sans-serif;">RAW DATA</h1>
<p class="explanation">Alle unretuschierten Fotos.</p>
<table>
<tbody>
<tr>
<td><img alt="" src="images/megabyte.png" width="20" height="20" /></td>
<td> 24.5 MB</td>
</tr>
<tr>
<td><img alt="" src="images/image.png" width="20" height="20" /></td>
<td> 758</td>
</tr>
<tr>
<td><img alt="" src="images/resolution.png" width="20" height="20" /></td>
<td> 3459 x 3294</td>
</tr>
</tbody>
</table>
</br>
<button class="button" name="DownloadRaw" onClick="getRawData()">Download</button>
</center>
</div>
<div class="right_box">
<center>
<img alt="" src="images/brush.png" width="100" height="100" />
<h1 class="headline" style="font-family:'Montserrat',sans-serif;">RETUSCHIERT</h1>
<p class="explanation">Alle retuschierten Fotos.</p>
<table>
<tbody>
<tr>
<td><img alt="" src="images/megabyte.png" width="20" height="20" /></td>
<td> 24.5 MB</td>
</tr>
<tr>
<td><img alt="" src="images/image.png" width="20" height="20" /></td>
<td> 758</td>
</tr>
<tr>
<td><img alt="" src="images/resolution.png" width="20" height="20" /></td>
<td> 3459 x 3294</td>
</tr>
</tbody>
</table>
</br>
<button class="button" name="DownloadRet" onClick="getRetouchedData()">Download</button>
</center>
</div>
<div class="clearer"></div>
</div>
</div>
<!-- #FOOTER -->
<div id="footer1" style="position: fixed; bottom: 0;">
<div class="content-wrapper">
<div class="ft-div-left"> </div>
<div class="ft-div-right">
<p></p>
</div>
<div class="ft-div-middle">
<center>
<p>
<center>
<a href="" style="text-decoration:none; color:white;"><span class="icon-facebook4" id="facebook" style="color: white;"></span></a>
<a href="" style="text-decoration:none; color:white;"><span class="icon-network" id="website" style="color: white;"></span></a>
<a href="" style="text-decoration:none; color:white;"><span class="icon-stumbleupon3" id="issuu" style="color: white;"></span></a>
<a href="" style="text-decoration:none; color:white;"><span class ="icon-twitter3"></span></a>
</br>
<br>
<br>
<span style="font-family:'Open Sans',sans-serif; font-size:11px; color:grey;">© 2014. Frederik Wilhelm. All Rights Reserved.</span>
</center>
</p>
</center>
</div>
</div>
</div>
<!-- FOOTER ENDE -->
</div>
Mein CSS ist:
body {
font-family: 'Open Sans', sans-serif;
background-color: #FFF;
position: center;
margin: 0;
padding: 0;
/*height: 350px; */
}
#page1 {
/*font-family: 'Open Sans', sans-serif;*/
background-color: #FFF;
position: center;
}
#header1 {
padding: 5em;
height: 100px;
background-color: #FFF;
background: url(images/myLogo.png) no-repeat scroll transparent;
background-position: center;
/*border-bottom: 3px solid #000;*/
-webkit-box-shadow: 2px 2px 2px rgba(100, 100, 100, 0.6);
-moz-box-shadow: 2px 2px 2px rgba(100, 100, 100, 0.6);
box-shadow: 2px 2px 2px rgba(100, 100, 100, 0.6);
}
#content {
padding: 10px;
padding-bottom: 7em; /* Höhe des Footers */
}
#footer1 {
position: absolute;
bottom: 0;
background: #333;
height: 7em; /* Höhe des Footers*/
width: 100%;
-webkit-box-shadow: 2px -2px 2px rgba(100, 100, 100, 0.6);
-moz-box-shadow: 2px -2px 2px rgba(100, 100, 100, 0.6);
box-shadow: 2px -2px 2px rgba(100, 100, 100, 0.6);
}
/***** 2 INHALTSBOXEN *****/
.wrapper {
width: 630px;
margin: 0 auto;
}
.left_box {
float: left;
padding: 10px;
width: 290px;
height: 350px;
text-align: center;
border: 2px solid white;
margin-top: 10px;
}
.right_box {
float: right;
padding: 10px;
width: 290px;
height: 100%;
text-align: center;
border: 2px solid white;
margin-top: 10px;
}
.clearer {
clear: both;
padding: 1px;
width: 100%;
height: 0.5px;
}
.content-wrapper {
margin: 0 auto;
max-width: 1216px;/*padding: 10px;*/
}
.ft-div-left {
float: left;
}
.ft-div-right {
float: right;
}
.ft-div-middle {
text-align: center;
}
li {
display: block;
float: left;
}
table {
list-style: none;
margin: 0;
padding: 0;
text-align: left;
font-family: 'Open Sans', sans-serif;
font-weight: 200;
font-size: 13px;
}