Jasinski Technical Wiki

Navigation

Home Page
Index
All Pages

Quick Search
»
Advanced Search »

Contributor Links

Create a new Page
Administration
File Management
Login/Logout
Your Profile

Other Wiki Sections

Software

PoweredBy

Fixed Navigation Bar - CSS

RSS
Modified on Tue, May 21, 2013, 11:44 AM by Administrator Categorized as HTML and CSS
The following HTML/CSS demonstrates how to have a fixed area at the top of a web page.

<html>
<head>
<style type='text/css'>
body
{
    padding: 0 0 0 0;
    margin: 0 0 0 0;
}
.fixedNavBar
{
    position: fixed;
    top: 0;
    background-color: silver;
    width: 100%;
    white-space: nowrap;
}
.content
{
    margin-top: 30px;
}
</style>
</head>
<body>
<div class='fixedNavBar'>This is my navigation bar</div>

<div class='content'>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nulla nisi, porttitor at 
    auctor non, tincidunt vel magna. Pellentesque condimentum molestie nibh sit amet lacinia. Donec 
    nisl mi, dapibus lacinia scelerisque vitae, gravida a quam. Integer vel risus lorem. Vestibulum 
    ut ante elit. Maecenas rutrum mattis nisl nec fringilla. Ut molestie felis a turpis auctor sed 
    ultrices neque fringilla. </p>
</div>
</body>
</html>

ScrewTurn Wiki version 3.0.1.400. Some of the icons created by FamFamFam. Except where noted, all contents Copyright © 1999-2018, Patrick Jasinski.