Jörg Reinholz: fixen Header

Beitrag lesen

SELF-Forum

fixen Header

Jörg Reinholz
– Informationen zu den Bewertungsregeln

So werden header und footer fix, der Inhalt wird mit dem normalen Scrollbalken ganz rechts gescrollt. Das schafft Bequemlichkeit für den Benutzer und löst Dein Problem:

  
<html>  
 <head>  
   <style type="text/css">  
 	body, html {  
 		margin: 0;  
 		padding: 0;  
 		background: #f0f0f0;  
 		}  
 	#header {  
 		position: fixed;  
 		top: 0;  
 		left:0;  
 		width: 100%;  
 		height:40px;  
 		background: #CCE34A;  
                z-index:999;  
 		}  
 	#content {  
		padding-top: 50px;  
                padding-bottom: 30px;  
		}  
        #footer {  
 		position: fixed;  
 		bottom: 0;  
                left:0;  
 		width: 100%;  
 		height:20px;  
 		background: #CCE34A;  
                z-index:999;  
        }  
     </style>  
 </head>  
 <body>  
 		<div id="header">  
 			<h1>fixierter Header</h1>  
 		</div>	  
 		<div id="content">  
                  <script type="text/javascript>  
for (i=0; i<50; i++) {  
   document.write ('<p>Lorem Ypsum, dolor si amet! Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet!</p>');  
}  
                 </script>  
 	       <div id="footer">  
                   Footer  
               </div>  
</body>  
</html>

Jörg Reinholz

Beitrag melden
–
Informationen zu den Bewertungsregeln