Skip to navigation
How to create fixed header with css?
07.12.13
<html> <header> <style type="text/css"> body{ margin: 0; font-family: Verdana, sans-serif; font-size: 0.8em; } div#header{ position: fixed; top: 0; left: 0; width: 100%; height: 100px; background-color: #CCC; } div#content{ padding: 110px 20px 0 20px; } </style> </header> <body> <div id="header">HEADER</div> <div id="content"> <p>een heleboel tekst</p> <p>en nog meer tekst</p> <p>en nog een paragraaf met tekst</p> <p>en de laatste met een heleboel tekst erin</p> <p>en nog meer tekst</p> <p>en nog een paragraaf met tekst</p> <p>en de laatste met een heleboel tekst erin</p><p>en nog meer tekst</p> <p>en nog een paragraaf met tekst</p> <p>en de laatste met een heleboel tekst erin</p><p>en nog meer tekst</p> <p>en nog een paragraaf met tekst</p> <p>en de laatste met een heleboel tekst erin</p><p>en nog meer tekst</p> <p>en nog een paragraaf met tekst</p> <p>en de laatste met een heleboel tekst erin</p><p>en nog meer tekst</p> <p>en nog een paragraaf met tekst</p> <p>en de laatste met een heleboel tekst erin</p><p>en nog meer tekst</p> <p>en nog een paragraaf met tekst</p> <p>en de laatste met een heleboel tekst erin</p><p>en nog meer tekst</p> <p>en nog een paragraaf met tekst</p> <p>en de laatste met een heleboel tekst erin</p><p>en nog meer tekst</p> <p>en nog een paragraaf met tekst</p> <p>en de laatste met een heleboel tekst erin</p><p>en nog meer tekst</p> <p>en nog een paragraaf met tekst</p> <p>en de laatste met een heleboel tekst erin</p><p>en nog meer tekst</p> <p>en nog een paragraaf met tekst</p> <p>en de laatste met een heleboel tekst erin</p><p>en nog meer tekst</p> <p>en nog een paragraaf met tekst</p> <p>en de laatste met een heleboel tekst erin</p> </div> </body> </html>
Reply
Anonymous
How to create fixed header with css?
<html> <header> <style type="text/css"> body{ margin: 0; font-family: Verdana, sans-serif; font-size: 0.8em; } div#header{ position: fixed; top: 0; left: 0; width: 100%; height: 100px; background-color: #CCC; } div#content{ padding: 110px 20px 0 20px; } </style> </header> <body> <div id="header">HEADER</div> <div id="content"> <p>een heleboel tekst</p> <p>en nog meer tekst</p> <p>en nog een paragraaf met tekst</p> <p>en de laatste met een heleboel tekst erin</p> <p>en nog meer tekst</p> <p>en nog een paragraaf met tekst</p> <p>en de laatste met een heleboel tekst erin</p><p>en nog meer tekst</p> <p>en nog een paragraaf met tekst</p> <p>en de laatste met een heleboel tekst erin</p><p>en nog meer tekst</p> <p>en nog een paragraaf met tekst</p> <p>en de laatste met een heleboel tekst erin</p><p>en nog meer tekst</p> <p>en nog een paragraaf met tekst</p> <p>en de laatste met een heleboel tekst erin</p><p>en nog meer tekst</p> <p>en nog een paragraaf met tekst</p> <p>en de laatste met een heleboel tekst erin</p><p>en nog meer tekst</p> <p>en nog een paragraaf met tekst</p> <p>en de laatste met een heleboel tekst erin</p><p>en nog meer tekst</p> <p>en nog een paragraaf met tekst</p> <p>en de laatste met een heleboel tekst erin</p><p>en nog meer tekst</p> <p>en nog een paragraaf met tekst</p> <p>en de laatste met een heleboel tekst erin</p><p>en nog meer tekst</p> <p>en nog een paragraaf met tekst</p> <p>en de laatste met een heleboel tekst erin</p><p>en nog meer tekst</p> <p>en nog een paragraaf met tekst</p> <p>en de laatste met een heleboel tekst erin</p><p>en nog meer tekst</p> <p>en nog een paragraaf met tekst</p> <p>en de laatste met een heleboel tekst erin</p> </div> </body> </html>
07.12.13
Reply
Anonymous
Information Epoch 1772781172
Design for simplicity, add complexity only where you must.
Home
Notebook
Contact us
