Not signed in (Sign In)
SkillShare - A place to discuss Web Standards and Web Design topics
Categories
Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.
- Friends
-
I want to have page like this:
width:100%
height:100%
IT has three column:
header:100px
footer:100px
main:rest
I didn't know how to do,i try like this:
<body>
<div id="wrap">
<div id="header"></div>
<div id="main"></div>
<div id="footer"></div>
</div>
html{
height: 100%;
}
body {
text-align: center;
margin: 0;
padding: 0;
font-size: 14px;
height: 100%;
}
#wrap {
position: relative;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
text-align: left;
}
#header {
height : 100px;
width: 100%;
background: transparent;
margin:0;
padding: 0;
border-bottom: 1px dashed gray;
}
#footer {
text-align: center;
margin: 0;
clear: both;
width: 100%;
position: absolute;
height: 50px;
bottom: 0;
left: 0;
border-top: 1px dashed gray;
}
But fail
My purpose is to set HEADER FOOTER fix,set the all rest room to MAIN,and if the content of MAIN too long,scoll,not cover FOOTER...
CSS is hard.... T_T -
Something like this?
http://marthastable.marylandmedia.com/ -
May be ...
I want a page footer and header fix
and another problem is scoll,the effect like a iframe -
I didn't know what the .clearfix do...
-
mringlein is using the footerStickAlt method. Here's is an explanation of how to force the footer to the bottom:
http://themaninblue.com/writing/perspective/2005/08/29/
don't worry about the .clearfix, it does not pertain to the footer issue you're trying to work out -
I found this one - Fluid Design by Kat Giles & Tammy Gray
-
ThanQ all.
Although this id still didn't know what exactly to do.
i saw JohnRiv's comment and saw the article
then i improved:
* {
margin: 0;
padding: 0;
}
html{
height: 100%;
}
body {
text-align: center;
margin: 0;
padding: 0;
font-size: 14px;
height: 100%;
}
#header {
height : 120px;
width: 100%;
background: transparent;
margin-bottom:-121px;
padding: 0;
border-bottom: 1px dashed gray;
}
#content {
position: relative;
width: 100%;
height: 100%;
min-height: 307px;
}
#leftbar {
float: left;
width: 200px;
border-right: 1px dashed gray;
margin: 121px 0 86px 0;
padding: 0;
}
#menu {
height: 100px;
margin: 0 2px 0 0;
padding: 0;
}
#textArea {
margin: 121px 0 86px 0;
float: left;
padding : 0;
min-height: 200px;
overflow: auto;
}
#targetText {
height: 100%;
}
/* for Internet Explorer */
/*\*/
* html #content #textArea {
height: 200px;
}
/**/
#footer {
text-align: center;
margin: 0;
padding: 0;
width: 100%;
position: relative;
height: 85px;
margin-top: -86px;
border-top: 1px dashed gray;
}
---------the html------
<body id="home">
<div id="header">
</div>
<div id="content">
<div id="leftbar">
<div id="menu">menu</div>
</div>
<div id="textArea">
<div id="targetText">
</div>
</div>
</div>
<div id="footer">
<div id="linklist">
<ul>
<li><img src="/image/emax.jpg" title="emax" /></li>
</ul>
</div>
<div id="authInfo">dishonest</div>
</div>
</body>
HEADER and FOOTER are OK now,But the only problem is:
content in the targetText is Larger then page long,so it OVERFLOW and COVER the FOOTER,
i didn't know how to make it scoll only in the right side when overflow,didn't destroy the layout!! -
-
CommentAuthorDarren Hoyt
- CommentTimeJul 21st 2006
My purpose is to set HEADER FOOTER fix,set the all rest room to MAIN,and if the content of MAIN too long,scoll,not cover FOOTER...
Not sure if I'm understanding correctly, but like this?
http://www.456bereastreet.com/lab/cssframes/ -
-
- -b
Sorry for my poor English
Your answer are of great use,thank you very much! -
- CommentAuthorred_gorgeous
- CommentTimeJul 26th 2006
#header {
background: whatever (image, transparent or any colors);
background-position: top center; /* the important thing is the TOP while the CENTER is additional */
}
#footer {
background: whatever (image, transparent or any colors);
background-position: bottom center; /* again the important thing is the BOTTOM while the CENTER is additional */
}
I've tried it in my layout, it keeps the header and the footer in its place and when the content became longer, it didn't cover the footer *sorry if my english is not clear enough :)
Hope this might help
Cheers :)
1 to 10 of 10