INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Jobs

Simple Layout

Simple Layout

(OP)
I'm trying to create a simple layout to be used on an asp.net master page. I would like the header and menu to stay in position while the content scrolls up or down. Also the footer to stay at the bottom of the page at all times

Example of what I'm looking to do

-----------------------------------------------
| HEADER |
| |
-----------------------------------------------
-----------------------------------------------
| MENU |
-----------------------------------------------
-----------------------------------------------
| CONTENT |
| |
| |
| |
-----------------------------------------------
-----------------------------------------------
| FOOTER |
-----------------------------------------------

I have tried setting the z-index for the div's but some of them won't even show up. any help would be appreciated. Thanks


.header {
position: fixed;
background-color: #4C6A92;
margin: 0;
padding: 0;
width: 100%;
top:0;
z-index:1;
height:50px;
}
.menu {
position:absolute;
background-color: black;
width: 100%;
text-align: center !important;
z-index:2;
}
.content {
position:relative;
width: 100%;
min-height:1200px;
background-color: green;
margin: 0 0 0 0;
}
.footer {
position: relative;
bottom:0;
width: 100%;
height: 30px;
background-color:#4C6A92;
}







RE: Simple Layout

Since you did not provide the HTML you are using, I assumed 4 independent non nested divs with some form of content(otherwise they may not appear). As such, something like this should work:

CODE

.header {
position:fixed;
background-color: #4C6A92;
margin: 0;
padding: 0;
width: 100%;
top:0;
z-index:2;
height:50px;

}
.menu {
position:fixed;
background-color: black;
width: 100%;
text-align: center !important;
z-index:1;
top:50px;
color:#fff;
}
.content {
position:relative;
width: 100%;
min-height:1200px;
background-color: green;
margin: 0 0 0 0;
}
.footer {
position:relative;
bottom:0;
width: 100%;
height: 30px;
background-color:#4C6A92;
} 

----------------------------------
Phil AKA Vacunita
----------------------------------
OS-ception: Running Linux on a Virtual Machine in Windows which itself is running in a Virtual Machine on Mac OSx.

Web & Tech

RE: Simple Layout

(OP)
Thank you
sorry for not posting the markup, it's basically just a blank page I'm starting with.

Should I wrap all the div's into another div as a wrapper ?

RE: Simple Layout


Quote (dvannoy)

Should I wrap all the div's into another div as a wrapper ?
You can if you want to, but its not necessary.

----------------------------------
Phil AKA Vacunita
----------------------------------
OS-ception: Running Linux on a Virtual Machine in Windows which itself is running in a Virtual Machine on Mac OSx.

Web & Tech

Red Flag This Post

Please let us know here why this post is inappropriate. Reasons such as off-topic, duplicates, flames, illegal, vulgar, or students posting their homework.

Red Flag Submitted

Thank you for helping keep Tek-Tips Forums free from inappropriate posts.
The Tek-Tips staff will check this out and take appropriate action.

Reply To This Thread

Posting in the Tek-Tips forums is a member-only feature.

Click Here to join Tek-Tips and talk with other members!

Resources

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close