Click here to Skip to main content
11,479,486 members (46,648 online)
Click here to Skip to main content

Fixed or Sticky header or ASP.NET webpage

, 19 Dec 2010 CPOL 18.1K 8
Rate this:
Please Sign up or sign in to vote.
Fixed or Sticky header or ASP.NET webpage
If you want the header section of the website to be fixed on top with menus and other information, you can simply use the below CSS to do so:

        .header
        {
            background-color:Gray;
            width:100%;
            height:100px;
            position:fixed;
            top:0px;
            margin:0px;
            padding:0px;
        }
 
        body
        {
            padding-top:110px;
            margin:0px;
        }

Use it like:

        <div class="header">
               Header content goes here...
        </div>
        <div>
               Body content goes here...
        </div>

This can be used with Master pages too.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Amit Kumar Tiwari
Technical Lead
India India
I am module lead with experience in Microsoft Technologies like .NET, SharePoint etc.
Follow on   Google+

Comments and Discussions

 
GeneralThanks, that does make things easier! Pin
Walt Fair, Jr.18-Dec-10 16:21
subeditorWalt Fair, Jr.18-Dec-10 16:21 
GeneralReason for my vote of 5 Thanks for sharing this tip Pin
linuxjr17-Dec-10 8:41
memberlinuxjr17-Dec-10 8:41 
GeneralReason for my vote of 5 My vote 5 for good work! Pin
Abdul Quader Mamun17-Dec-10 6:17
memberAbdul Quader Mamun17-Dec-10 6:17 
GeneralThank you so much for appreciation :) Pin
Amit Kumar Tiwari16-Dec-10 16:58
memberAmit Kumar Tiwari16-Dec-10 16:58 
GeneralGood Tips Pin
Abdul Quader Mamun16-Dec-10 9:33
memberAbdul Quader Mamun16-Dec-10 9:33 
GeneralReason for my vote of 5 That's good TIP, It's working like a... Pin
Hiren Solanki15-Dec-10 22:19
memberHiren Solanki15-Dec-10 22:19 
GeneralGood Job Amit Pin
anil Madan20-Dec-10 8:48
memberanil Madan20-Dec-10 8:48 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.150520.1 | Last Updated 19 Dec 2010
Article Copyright 2010 by Amit Kumar Tiwari
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid