|
CSS - Stretching Middle Container Problem Between Header And Footer
Hi
I am quite familiar with CSS but am stumped on how I could do the following. Basically I need a template with a header, body and footer, I know, sounds simple right, but I need to have the middle body section of the page stretching to the height of the browser, so that the space in between the header and footer is filled in with the middle container. The middle container that stretches to the required height needs to have a background image that cannot be covered over by the header or the footer. This is the problem, because if the middle container is set to 100% height, then a scroll bar is always present because of the header and footers height. I have been able to create what I am trying to do with a table, but obviously I want to avoid using a table for a layout. Is there any way to recreate this but via CSS? Take a look at the table layout and change the size of your browser to see the effect I am aiming for, but in CSS http://labwaves.com/temp/index3.php This is an attempt in CSS, but It requires me to set the headers and footers background image to the same as the bodys background image, with I can't have . http://labwaves.com/temp/index2.php Congratulations on making it to the end of this long, but hopefully un-confusing post Thanks and any reply's are really, really appreciated as I am so stuck on this one! Similar Tutorialshttp://cheers-sendai.com/fluidframe.htm has a great and simple example of 3 cols (OK, 2 cols in the middle section makes "4 cols"), header and sticky footer, where the middle col has overflow:auto so it can be scrolled. GREAT example, I think (due to the use of bg colors, etc.). The left/right/width values of the divs are manipulated so that the middle section runs from 10% to 90% and the left/right divs fill in accordingly. I'd like to be able to set, for example, the left and right divs to be 150 px wide (NO percentages!) and have the middle section stretch between them (regardless of viewport width) and be able to be scrolled, too. The problem I see is that most examples use percentages. I can set the left div to be a fixed width, then set the middle section left coord. to be, say, 150px, but then I need to set its width to stretch to "150 to the left of the right side of the viewport" and I don't know how to do this. Thanks. Hello. I have no idea how to fix my problem, and I am hoping someone would be kind enough to help me. I have set up my template to have a wrapper div with a top, middle, and bottom div inside. What I need to do is have the footer (bottom div called (wrapper_bottom) move down when the content in the middle div (wrapper_middle) has more content added. Currently, when content is added to the middle div (wrapper_middle), it pushes the bottom div content out of the way. Maybe I have the divs set up wrong or maybe have them listed in the html file incorrectly? I have uploaded a zip file of my files he www (*) dpegues (*) com (slash) site_help (*) zip Also, I have posted a live version of it at: www (*) dpegues (*) com (slash) site_help It contains my site images, the template in the folder called Templates, and the css file. And one more thing if everyone doesn't mind - how do I keep the bottom buttons attached to the bottom of the footer bar? I am learning CSS right now, and unfortunately have to teach myself. I think I have learned a lot though in the few days I have been doing it!!! Thank you everyone. Hey guys, I have a site where I have a 3 column layout in the middle of the site. What I did to get it to work was made a container for the three column div with a relative position then gave the three column div an absolute position within it to position it correctly in the site. I want a border across all three columns to appear at the bottom of the page. Unfortunately though, because all three columns will differ in height depending on content the border appears at different places across the bottom. My quick solution was giving the container div a border bottom and give it a definite height (like 300px). That works fine, as long as any of the three column divs don't have more content that that, then the content will overlap the container div border. Okay Okay, I know you're probably tired of reading, so here's the css and markup that I have to help... The CSS: Code:
/*-- three column container --*/
#tcontent {
position: relative;
width: 758px;
height: 350px;
margin: 0 0;
padding: 0 0;
border-bottom: solid 1px #9E5459;
/*-- the three column div --*/
#leftcontainer {
position: absolute;
left: 0;
top: 0;
width: 175px;
height: auto;
}
#centercontainer {
margin-left: 175px;
margin-right: 215px;
height: auto;
}
html>body #centercontainer {
margin-left: 175px;
margin-right: 215px;
height: auto;
}
#rightcontainer {
position: absolute;
right: 0;
top: 0;
width: 215px;
text-align: left;
height: auto;
}
/*-- the divs that hold the content for each of the three columns --*/
#tleftcontent {
width: 175px;
height: auto;
margin: 30px 0 0 0;
padding: 0 0;
}
#centercontent {
float: left;
width: 327px;
height: auto;
margin: 27px 0 0 0;
padding: 0 15px 0 0;
voice-family: "\"}\"";
voice-family: inherit;
width: 342px;
text-align: left;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 80%;
letter-spacing: 0em;
line-height: 1.5em;
}
#rightcontent {
float: left;
width: 215px;
height: auto;
margin: 28px 0 0 0;
padding: 0 0;
}
And now the markup: Code: <div id="tcontent"> <div id="leftcontainer"> <div id="tleftcontent"> left content here </div> </div> <div id="centercontainer"> <div id="centercontent"> center content here </div> </div> <div id="rightcontainer"> <div id="rightcontent"> right content here </div> </div> If I make the height in the #tcontent div "auto", the bottom border shoots up to the top. If I give it a definite height, the copy from either of the three column content div's overlaps it. Does anyone have any ideas on how I might be able to solve this? Thanks, I know this was a long question! -B 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 Hi again, i've built an image gallery using an unordered list and php to grab 'em from the database. when you first go to the page (both in FF and IE) the footer bar sits in the middle of the page, until you refresh, then it's fine. same thing happens when you click to enlarge it. Here's the page Here's the CSS; Code:
/* SHOWCASE STYLE - firefox */
html>body ul.showcase {
margin:5px 1px;
margin:auto;
list-style: none;
width:760px;
}
html>body li.showcase {
margin-top:5px;
margin-left:10px;
float:left;
width:180px;
}
/* SHOWCASE STYLE - IE */
* html ul.showcase {
margin:5px 1px;
margin:auto;
list-style: none;
width:750px;
}
* html li.showcase {
margin-top:5px;
margin-left:8px;
float:left;
width:179px;
}
img.showcase {
border:1px solid #CCCCCC;
}
i'm sure it's somethin' to do with clearing the floats, but i just don't get why it's cool after you refresh. thanks! I have an image and to the right of it I have text. I want the text to be aligned veritcally to the middle of the image. I can do the following and it works: Code:
.icon {vertical-align: middle;}
<a href="index.php"><img src="images/icon.png" class="icon" border="0" /></a>
Header Goes Here
However, if I wrap H1 tags around "Header Goes Here" the text drops below the image. Any ideas on how to use header tags and have it aligned? I know I could make the icon as a background with H1 but I want it to be clickable. Is there any way to make it so the H1 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 kutassy.com/RedApple/index.html kutassy.com/RedApple/css/style.css I'm trying to get a centered, fixed width design. so far its adequate but appears to be broken in Firefox and Safari. Its not tooo bad with IE but i guess thats by accident more than design. The footer should hopefully be in the same "container" as the content/everything else in order to get that drop shadow effect of the main background. In Firefox, the footer butts to the left of the browser. In IE, it seems to behave... Any help gratefully recieved. I'm attempting to get it so when the main content div exceeds my min-height specifications, that it expands the div, which in turn expands the container with an absolutely positioned footer at bottom:0;. Works fine in all newer browsers with the exception of IE7. What do I need to do to get it to expand in that version? Here is the link to the page: http://www.chcs-ut.com/chcs-new.php And the stylesheet: http://www.chcs-ut.com/css/style.css Also, I would really rather not have to specify a min-height for my main content div. I'd rather just have it automatically fill to 100% of the main container that is set to 100% height and min-height, so that the footer automatically appears at the bottom of the screen if the content is not large enough to push it down there by itself. Can't seem to get it to work, though (in ANY browser) without specifying a min-height for the main content div. Problem with that is different resolutions/browsers would require a different value, so hard-coding it isn't a desireable solution. Any thoughts? EDIT: Both problems were fixed by adding "height:auto !important" to my main content container, instead of specifying a "min-height". Works across the board! 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 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. 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. 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. !!!! 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}
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;
}
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. |
|||||||