Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations TouchToneTommy on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Simple Layout

Status
Not open for further replies.

dvannoy

MIS
May 4, 2001
2,765
US
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;
}







 
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
 
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 ?
 

dvannoy said:
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
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top