|
CSS - Irritating Height How Get It 100% Between Header And Footer
You can see an example on http://www.cauwenbergh.be/dzone/
The yellow div does not fill between header and footer when there is not enough text in it :s So is there any way to get it filled between header and footer... html: Code: <div id="wrap"> <div id="header"> <div id="balk"> <div id="balk_midden">...</div> </div> <div id="header_wrap"> <img src="images/header.gif" alt="Dutchzone voor al uw internettoepassingen: Webhosting - webdesign - netwerken"/> </div> <div id="balk"> <div id="balk_midden">...</div> </div> </div> <div id="inner-wrap"> <div id="pagebox">Hier komt tekst</div> </div> <div id="footer"> <div id="copyright">Footer</div> </div> </div> css: Code: body, html {
height:100%;
}
body {
margin:0;
padding:0;
background-image:url(../images/bg34.gif);
font-family: "trebuchet ms", verdana, helvetica, sans-serif;
font-size: 14px;
}
#wrap {
position:relative;
width:100%;
margin:auto;
min-height:100%;
}
* html #wrap {
height:100%;
}
#inner-wrap {
padding-bottom:20px;
}
#inner-wrap:after {
content:" ";
display:block;
clear:both;
background-color:#00FF33;
}
* html #inner-wrap {
height:1px;
}
#header_wrap {
background:#333333 url(../images/dzheader_back.gif);
color:#FF00FF;
margin:0; padding:0;
height:120px;
text-align: center;
}
#balk {
padding: 0px;
width: 100%;
background-color:#7999B9;
border-bottom: 1px solid #F7F7F9;
border-top: 1px solid #F7F7F9;
height: 20px;
}
#balk_midden {
width: 800px;
margin-left: auto;
margin-right: auto;
background-color:#7999B9;
border-right: 1px solid #FFFFFF;
border-left: 1px solid #FFFFFF;
color: #FFFFFF;
line-height: 20px;
text-align: right;
}
#header {
background-image:url(../images/dzheader_back.gif);
margin: 0px;
margin-left: auto;
margin-right: auto;
padding: 0px;
}
#header img {
text-align:center;
border-left: 1px solid #FFFFFF;
border-right: 1px solid #FFFFFF;
margin:0;
margin-bottom: -4px;
padding-left: 30px;
padding-right: 30px;
}
#pagebox {
width: 800px;
margin: auto;
background-color:#FFFF00;
border-left: 1px solid #807E7A;
border-right: 1px solid #807E7A;
height: 300px;
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:20px;
background-color:#7999B9;
}
#copyright {
padding: 0px;
width: 800px;
text-align: center;
background-color:#7999B9;
border-left: 1px solid #FFFFFF;
border-right: 1px solid #FFFFFF;
vertical-align: bottom;
margin: 0 auto 0 auto;
color: #FFFFFF;
bottom: 0;
height: 20px;
}
Similar TutorialsHi i want to have a site with 3 columns a header and a footer where the height of the content and both the columns spreads to fill the page even if there is only a few lines of content. Also i wanted to have a margin round the page so that the page doesnt fill the screen horizontal. i cant seem to get it to work correctly does anyone have an example i can look at? cheers Andy I want to do this design: http://hermann.sonyextreme.com/upload/design.png * means it should be "the rest". Just like when working with frames. So the sites height is 100% and width is 800px. I've set it up like this: Code: <div id="container">
<div id="header">
</div>
<div id="main">
<div id="menu">
</div>
<div id="content">
</div>
</div>
<div id="footer">
</div>
</div>
But no matter what I try, the css just keeps ****ing with me So do you have any tricks/know any sites who have done this succesfully... or just anything to help me, then I'd love to hear from you Thanks in advance Hermann Hello, im trying to make Fixed width 3 columns (each column have fixed width) layout 100% height with header and footer. -Well I see alot of examples around the web, but i dont see complete one and im really tired of searching, i made the Fixed width 3 comlumns layout, left and right are absolute position, and center is relative to the header -the problem is that all columns dont fill the whole height of the browser windows, the footer doesnot work good. so the whole thing is missed up, so please show 100% working example of what i need. Thanks in Advanced Samer Hello, I'm working now on div layout that contains 3 sections (header, body, footer) in one centered wrapper with border (divs with background imgs). My problem is: - divs that are in fact borders (id="l_outerborder_b" and id="r_outerborder_b") don't stretch when main container (id="body_content_text") grows. Here is a html code: Code: <!--BEGIN TEMPLATE HEADER -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="template.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="template.js" />
</head>
<body onload="onloadprocedures()">
<div id="main_container">
<div id="template_header">
<div id="tl_outerborder"></div>
<div id="t_outerborder"></div>
<div id="tr_outerborder"></div>
<div id="l_outerborder_h"></div>
<div id="header_content">
<div id="logo"><img src="img/logo.png" alt="" /></div>
<div id="slogan"><img src="img/slogan.png" alt="Centrum zdrowia" /></div>
</div>
<div id="r_outerborder_h"></div>
</div>
<!-- END TEMPLATE HEADER -->
<!-- BEGIN TEMPLATE BODY -->
<div id="template_body">
<div id="l_outerborder_b"></div>
<div id="body_content">
<div id="body_content_text">
<p>TEST</p>
</div>
</div>
<div id="r_outerborder_b"></div>
</div>
<!-- END TEMPLATE BODY -->
<!-- BEGIN TEMPLATE FOOTER -->
<div id="template_footer">
<div style="clear:both"></div>
<div id="l_outerborder_f"></div>
<div id="footer_content"></div>
<div id="l_outerborder_f"></div>
<div id="bl_outerborder"></div>
<div id="b_outerborder"></div>
<div id="br_outerborder"></div>
</div>
</div>
</body>
</html>
<!-- END TEMPLATE FOOTER -->
and CSS: Code: @charset "utf-8";
/* CSS Document */
body {
background-color:#FFFFFF;
font-family:Tahoma, Verdana, "Times New Roman", Arial;
font-size:12px;
}
a:link {text-decoration: none} /* unvisited link */
a:visited {text-decoration: none} /* visited link */
a:hover {text-decoration: none} /* mouse over link */
a:active {text-decoration: none} /* selected link */
#main_container {
position:relative;
margin:auto;
width:960px;
height:auto;
}
#template_header {
float:left;
position:relative;
width:960px;
height:300px;
}
#header_content {
float:left;
position:relative;
width:900px;
height:270px;
}
#logo {
width:310px;
height:130px;
position:relative;
float:left;
top:0px;
left:0px;
}
#slogan {
width:580px;
height:100px;
position:relative;
float:left;
top:0px;
left:0px;
}
#tl_outerborder {
float:left;
position:relative;
background-image:url(img/tl_outerborder.png);
width:30px;
height:30px;
}
#t_outerborder {
float:left;
position:relative;
background-image:url(img/t_outerborder.png);
width:900px;
height:30px;
}
#tr_outerborder {
float:left;
position:relative;
background-image:url(img/tr_outerborder.png);
width:30px;
height:30px;
}
#l_outerborder_h {
float:left;
position:relative;
background-image:url(img/l_outerborder.png);
background-repeat:repeat-y;
width:30px;
height:270px;
}
#r_outerborder_h {
float:right;
position:relative;
background-image:url(img/r_outerborder.png);
background-repeat:repeat-y;
width:30px;
height:270px;
}
#body_content {
float:left;
position:relative;
width:900px;
overflow:hidden;
}
#body_content_text {
float:left;
position:relative;
width:600px;
margin: auto;
overflow:hidden;
}
#l_outerborder_b {
float:left;
position:relative;
background-image:url(img/l_outerborder.png);
background-repeat:repeat-y;
width:30px;
height:inherit;
}
#r_outerborder_b {
float:right;
position:relative;
background-image:url(img/r_outerborder.png);
background-repeat:repeat-y;
width:30px;
height:inherit;
}
#l_outerborder_f {
float:left;
position:relative;
background-image:url(img/l_outerborder.png);
background-repeat:repeat-y;
width:30px;
height:inherit;
}
#r_outerborder_f {
float:right;
position:relative;
background-image:url(img/r_outerborder.png);
background-repeat:repeat-y;
width:30px;
height:inherit;
}
#template_body {
float:left;
position:relative;
width:960px;
overflow:hidden;
}
#bl_outerborder {
float:left;
position:relative;
background-image:url(img/bl_outerborder.png);
width:30px;
height:30px;
}
#b_outerborder {
float:left;
position:relative;
background-image:url(img/b_outerborder.png);
width:900px;
height:30px;
}
#br_outerborder {
float:left;
position:relative;
background-image:url(img/br_outerborder.png);
width:30px;
height:30px;
}
Thanks in advance for info how to stretch those doomed divs EDIT: Here is layout concept. URL hTTp://qsrc.pl/layout.jpg Hello. I'm presently writing a JavaScript applet which will be included into websites to produce a dynamically created header and footer through PHP. That's not important for the most part. What I would like to do is create the header and footer through CSS. I do, howver, have a slight problem. I can not have the user edit their websites in any way except for adding the script inclusion. (<script language="javascript" src="http://webaddress/script.js">) Now, this is what I've come up with for the CSS. css Code: Original - css Code body { padding: 25px 0 25px 0; } .ixga_header { position: fixed; font-size: 11px; font-family: /*Arial, */Verdana, Helvetica, sans-serif; color: #EAEAEA; top: 0; left: 0; } .ixga_header table,tr,td { font-size: 11px; font-family: /*Arial, */Verdana, Helvetica, sans-serif; color: #FFFFFF; } .ixga_header a, a:visited { font-size: 11px; font-family: /*Arial, */Verdana, Helvetica, sans-serif; color: #EAEAEA; } .ixga_header a:hover { font-size: 11px; font-family: /*Arial, */Verdana, Helvetica, sans-serif; color: #EAEAEA; } /* hide from mac ie5 \*/ .ixga_header { position: absolute; } /* end hide from mac ie5 */ html>body .ixga_header { position: fixed; } .ixga_footer { position: fixed; font-size: 11px; font-family: Verdana, Helvetica, sans-serif; color: #EAEAEA; bottom: 0; left: 0; } .ixga_footer table,tr,td { font-size: 11px; font-family: Verdana, Helvetica, sans-serif; color: #FFFFFF; } .ixga_footer a, a:visited { font-size: 11px; font-family: Verdana, Helvetica, sans-serif; color: #EAEAEA; }
body {
Does this seem right to you? Now, the HTML injected by the remote script is as follows. html Code: Original - html Code <div class="ixga_header"> <link href="http://localhost/header/header.css" rel="stylesheet" type="text/css" media="all" /> <table width="100%" height="25" border="0" cellpadding="0" cellspacing="0"> <tr height="25" style="background-image:url(\'http://localhost/header/images/bg.gif\')"> <td align="left"> <b> <a href="http://gaming.localhost"> Gaming Network </a> </b> - <a href="http://ds.localhost"> Demonic Sights: The Adventure Begins </a> - <a href="http://ds2.localhost"> Demonic Sights: The War of Aegis </a> - <a href="http://ta.localhost"> Total Apocalypse </a> </td> <td align="right"> <a href="http://localhost/login.php">Login</a> | <a href="http://localhost/register.php">Register</a> </td> </tr> </table> </div> <div class="ixga_footer"> <table width="100%" height="25" border="0" cellpadding="0" cellspacing="0"> <tr height="25" style="background-image:url('http://localhost/header/images/bg.gif')"> <td align="left"> This is a test footer. Woo. </td> </tr> </table> </div>
<div class="ixga_header">
<link href="http://localhost/header/header.css" rel="stylesheet" type="text/css" media="all" />
<table width="100%" height="25" border="0" cellpadding="0" cellspacing="0">
<tr height="25" style="background-image:url(\'http://localhost/header/images/bg.gif\')">
<td align="left">
<b>
<a href="http://gaming.localhost">
Gaming Network
</a>
</b>
-
<a href="http://ds.localhost">
Demonic Sights: The Adventure Begins
</a>
-
<a href="http://ds2.localhost">
Demonic Sights: The War of Aegis
</a>
-
<a href="http://ta.localhost">
Total Apocalypse
</a>
</td>
<td align="right">
<a href="http://localhost/login.php">Login</a>
|
<a href="http://localhost/register.php">Register</a>
</td>
</tr>
</table>
</div>
<div class="ixga_footer">
<table width="100%" height="25" border="0" cellpadding="0" cellspacing="0">
<tr height="25" style="background-image:url('http://localhost/header/images/bg.gif')">
<td align="left">
This is a test footer. Woo.
</td>
</tr>
</table>
</div>
The problem I face is that any HTML on the original page somehow gets shoved UNDER the footer, no matter the case, as if it just shoves the data that SHOULD be there into the footer division itself. Can someone please suggest a better method I can take of doing this? Or perhaps point me to a resource where I can see how to dynamically add a header and footer to a webpage through CSS _WITHOUT_ having to include a division for the page contents itself? This needs to work out of the box. Thanks in advance. I'm currently using .php to include a common header and footer. Is there a way to use CSS to include a common footer. Not the style, but the text themselves. Hey I am creating a website in php with a header and footer attached as in: <?php include("header.php"); ?> I have set the minimum height of the page to 600px however in IE it doesnt' work it displays half up the page In Firefox it is fine but in IE it doesn;t work any clues? cheers J Hello! I'm here after much googling, and I am bashing my head against the wall, so any help is appreciated: Footer and header, fixed size, attached to top and bottom of screen. I want the center div to be a fluid height to sit between the header and footer, and if the content extends beyond that, I want it to scroll within the div, not the page. Here, I'm linking to a picture to explain more clearly: portlandworkshop-dot-com-slash-projects-slash-divs-dot-jpg (it won't let me direct link.. durrr) Nothing I do seems to fix this conundrum... Can ANYONE point me in the right direction? Hello to all those reading A really simple question for the knowledgeable, I suppose, however a question nevertheless. I've attached and image to try and save us all time and be as straightforward as I can. How would I accomplish the following with CSS? Problem: if I use absolute positioning on header and footer, I have difficulties centering them. Problem #2: how can I assign fixed values to header and footer and allow the body to stretch dynamically to accomodate different resolutions and\or content. In other words make the middle piece of the design mobile\fluid. I am new to PSD to html slicing. i want some help on how this the following template would be sliced for footer and header. Will i need have one large back ground image or seperate for header n footer I have a Corporate Phone List extension sheet that is served on our Intranet. When users print this document from their browser IE defaults to 0.75 margins all around and has IE's default header and footer. Over 300 people will be printing this document. Is it possible to set the margins and get rid of the header/footer through either CSS or HTML? I have had some success in moving the margin of the tables through a stylesheet but I don't know how to set it for the whole page and I don't know how to get rid of the default header/footer. Code: <link rel="stylesheet" href="print.css" type="text/css" media="print" /> Code: td {font-size: 9pt;}
table {margin:0em 1em 0em 1em}
jililu.com/portfolio2 I have upload the files that I currently have. I like to have the trapeziod header where the edges will align with the content. Right now I have the header with three sections, a left image, right image and a box in the center. It doesn't seems to be working. Eventually I would also like a drop shadow for the header. I have been trying this for days and it is not working. Can anybody please help. !!!! Hey gang, Ok, this is embarrassing, but I'm currently working at redesigning my website (here), and would love to get rid of the craptacular tables-based layout. I've spent the last few days googling for a good two-column header and footer tutorial but I can't see any that works well and explains what is going on ( I'd rather know what's working than cut'n'paste someone's css scheme ). I'm not too worried about <IE5.5/etc compatibility as most of the data on the page is UTF-8 ( and IE5.0 - 5.5 makes up 1.49% of my visitors ). This is what I have so far - I just need to get rid of those two cells! Can anyone point me in the right direction (or laugh hard at my crappy google-skills ). I have found many different ways of doing the 3 column fluid layout on the net... http://css-discuss.incutio.com/?page=ThreeColumnLayouts But none of theme seem simple enough to implement 3 fluid columns where each column is a percentage. I have found a couple, but modifying the css to find my percentage needs loses the effect often times because the css code is long and complicated with many embeded divs. Isnt there an easy way to have a header at top, 3 columns (20%,60%,20% widths) each stretching the same height and a footer at the end? I thought that floating would work, but i get mixed and undesired output in IE and FF. Thanks to all that contribute. I'm having two issues with IE on my site. 1. IE is displaying the body background image (bg.jpg) throughout the entire page. 2. IE is pushing the sidebar way down. Neither of these issues exist in Firefox. I think the second issue may have something to do with the first issue. Here is the relevant code. Code: html,body * {
padding:0px;
margin:0px;
}
body {
background-image:url(images/bg.jpg);
background-repeat:repeat-x;
background-color:#fb7d21;
margin:0 auto;
height:100%;
}
div#container {
width:792px;
margin:0 auto;
background-image:url(images/filler.jpg);
background-repeat:repeat-y;
}
div#header {
width:792px;
height:109px;
background-image:url(images/header.jpg);
background-repeat:no-repeat;
margin-top:20px;
}
div#content {
float:left;
width:570px;
padding:0 0 0 10px;
margin-top:-40px;
}
div#sidebar {
float:right;
width:212px;
margin-top:-95px;
}
div#footer {
clear:both;
width:792px;
height:84px;
background-image:url(images/footer.jpg);
background-repeat:no-repeat;
}
You can see the issues on my site here. Any idea what is causing this? Thanks in advance. Hi, was wondering if someone could please enlight me on this. Im creating what look like MS Word doc pages for a site and I would like to have it such that the body content div remains the same distance from the top and bottom of its container div regardless of whether header or footer divs are inserted into the same container div. How would I achieve this? Shall I use z-index in the .header and .footer classes and make them higher than the z-index of the .body class so as to stop them from affecting the margin of the body content div? Thanks in advance. Hi all, I am trying to basically have a centre column of data on my page. Within this centre column, I am trying to place a header and footer. The CSS is working quite well with the exception that the header and footer seem to be shorter than the width of the main column. In other words, there seems to be a margin on the right and left side between the end of the footer/header and main column. I am not sure what is going on as I have made the widths the same. I am sure I am over-seeing something small. I was following the example found http://www.pmob.co.uk/temp/1colcentred.htm Code:
html{height:100%;}
body {
padding:0;
margin:0;
height:100%;
background-color: #98AFC7;
color: #000000;
}
#outer{
min-height:100%;
width:800px;
background:pink;
color: #000000;
margin:auto;
text-align:left;
position:relative;
}
* html #outer{height:100%}
#header {
border-top:1px solid #000;
border-bottom:1px solid #000;
background:blue;
left:-1px;
width:800px;
height:40px;
overflow:hidden;
color: #000000;
z-index:100;
//margin-left:6px;
//margin-right:6px;
}
#footer {
position:absolute;
bottom:0;
left:0;
background:green;
height:40px;
border-top:1px solid #000;
width:800px;
//margin-left:1%;
//margin-right:1%;
}
#clearfooter{clear:both;height:40px;}/*needed to make room for footer*/
<body>
<div id="outer">
<div id="header">Header</div>
<p>middle</p>
<p>middle</p>
<div id="clearfooter"></div>
<div id="footer">Footer</div>
</div>
</body>
</html>
There is an invoice preview webpage. I want to set header and footer information off while printing it. I know we can edit the page setup settings. But I wanted to know if we can do something without changing the default page setup settings. With default setting inside page setup, webpage title and webpage path are displayed for header and footer respectively. Thanks Hey all, I have a background image that I want to repeat horizontally at the top and the bottom of a page (below all of the content, not necessarily at the bottom of the screen) that I'm creating, for the Header and Footer. I would like it to look something like this. I'm using this code for the background image, for the Header: body { background-image: url(stars.gif); background-repeat: repeat-x } And I'm wondering whether I can include another background image in the "body" code, telling it to repeat horizontally, but at the bottom of the page? Here is the code that I'm assuming would have to be used: { background-image: url(stars.gif); background-repeat: repeat-x; background-position: bottom; } Can someone suggest to me where this code should go? Could I include it in the "body" css code? Or should I put it below all of the rest of the columns/content code? Thanks. |
|||||||