|
CSS - Trying To Get Container To Stretch And Push Footer To The Bottom In Ie7
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! Similar TutorialsI've spent the last two days struggling, trying to get the footer to stay at the bottom of the window and the two right most columns in my layout to stretch to the footer. I've search this site thorough for answers, and yes, there were many of them. But still, after implementing everyone I came across, I can't get the layout to do the above criteria in both IE and Firefox. HTML Code: <!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> <title>Mall</title> <link href="css/template.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="wrapper"> <div id="main"> <div id="header"> <div id="ecommerce"> <div id="logo"><img src="images/logo.jpg" width="188" height="18" alt="Mall" title="Mall" border="0" /></div> <div id="text"><a href=""><img src="images/cart.gif" width="16" height="16" alt="Master Basket" title="Master Basket" border="0" /> Basket</a> | <a href="">Register</a> | <a href="">Login</a></div> </div> <div id="content"> <div id="searchform"> <form> <fieldset> <legend>Search Shopping Mall</legend> <div id="search_btn"><input type="submit" value="Search" class="button" /></div> <div id="search_type"> <select> <option>Products</option> <option selected="selected">Stores</option> </select> </div> <div id="search_input"><input type="text" name="query" id="query" value="" size="22" maxlength="200" /></div> </fieldset> </form> </div> <!-- end searchform --> </div> <!-- end content --> </div> <!-- end header --> <div id="mall"> <!-- top navigation --> <div id="topnav"> <div id="nav-container"> <ul id="nav"> <li id="nav-home"><a href="index.html" accesskey="1">Home</a></li> <li id="nav-browse"><a href="browse.html" accesskey="2">Browse Mall</a></li> <li id="nav-getastore"><a href="getastore.html" accesskey="3">Get A Store</a></li> <li id="nav-featstore"><a href="featstore.html" accesskey="4">Featured Store</a></li> <li id="nav-featitem"><a href="featitem.html" accesskey="5">Featured Item</a></li> <li id="nav-aboutus"><a href="aboutus.html" accesskey="6">About Us</a></li> <li id="nav-contactus"><a href="contactus.html" accesskey="7">Contact Us</a></li> <li id="nav-help"><a href="help.html" accesskey="8">Help</a></li> </ul> </div> </div> <!--<div id="topnav"> <div id="menu"><a href="index.html">Home</a><span id="sp"><img src="images/navsp.gif" align="absmiddle" /></span><a href="browse.php">Browse Mall</a><span id="sp"><img src="images/navsp.gif" align="absmiddle" /></span><a href="">Get A Store</a><span id="sp"><img src="images/navsp.gif" align="absmiddle" /></span><a href="">Featured Stores</a><span id="sp"><img src="images/navsp.gif" align="absmiddle" /></span><a href="browse.php">Featured Items</a><span id="sp"><img src="images/navsp.gif" align="absmiddle" /></span><a href="">About Us</a><span id="sp"><img src="images/navsp.gif" align="absmiddle" /></span><a href="">Contact Us</a><span id="sp"><img src="images/navsp.gif" align="absmiddle" /></span><a href="">Help</a></div> </div>--> <!-- banner image --> <div id="banner"><img src="images/banner.jpg" width="764" height="150" alt="Welcome to the Mall!" title="Welcome to the Mall!" border="0" /></div> <div id="midspacer"></div> <div id="mallbody"> <!-- left navigation --> <div id="leftnav"> <div class="menu_topleftcorner"><img src="images/menu_topleftcorner.jpg" width="6" height="6" border="0" /></div> <br/> <div class="sections">Mall Categories</div> <div id="navcontainer"> <ul id="navlist"> <li id="active"><a href="#" id="current">Home</a></li> <li><a href="">Books, Music & Movies</a></li> <li><a href="">Clothing & Apparel</a></li> </ul> </div> <br/> <div class="sections">Shop by Store</div> <ul id="navlist"> <li id="active"><a href="#">Salsa Products</a></li> </ul> <div class="menusp"></div> <div class="menu_bottomleftcorner"><img src="images/menu_bottomleftcorner.jpg" width="6" height="6" border="0" /></div> </div> <!-- content --> <div id="content"> <p><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/></p> </div> <!-- right navigation --> <div id="rightnav"> <p></p> </div> </div> </div> <!-- end mall --> </div> <!-- end main --> </div> <!-- end wrapper --> <div id="footer"> <div id="bg"> ads ad ad a </div> <div id="compliant"> <a href="http://validator.org/check/referer" target="_blank"><img src="images/compliant/w3cxhtml10.png" width="80" height="15" alt="W3C XHTML 1.0 Validated" title="W3C XHTML 1.0 Validated" border="0" /></a> <a href="http://jigsaw.w3.org/check/referer" target="_blank"><img src="images/compliant/w3ccss.png" width="80" height="15" alt="W3C CSS 1.0 Validated" title="W3C CSS 1.0 Validated" border="0" /></a> <a href="http://www.mozilla.org" target="_blank"><img src="images/compliant/mozilla.png" width="80" height="15" alt="Mozilla Firefox Browser Compatible" title="Mozilla Firefox Browser Compatible" border="0" /></a> </div> </div> <!-- end footer --> </body> </html> PS - Kravitz, I've check alot of the links you have posted. While they were helpful, I wasn't successful in implemented many of the techniques suggested in them to solve my problems. Hello, I've had an issue for a while where when the text on the page gets to a certain point it just overlaps the Copyright Information which I want to stay at the bottom of the page. --- (I did look at older forum posts, but with no resolve) --- In the CSS code, I have the copyright (a.k.a. .footerlinks) set with an "Absolute" Position which I know is probably "part of" or "the" problem, but if I change the Positioning the footer ends up on the top of the page or somewhere I don't want it. (** Unfortunately due to New Members not being able to post hyperlinks I am unable to give a link to the webpage or CSS page for viewing. **) But, I have included the code snippet I use for the Footer itself and the "container" and "body" code whether its needed..... body{ margin:0; text-align:center; background-color: #FFFFFF; } .container{ position: relative; width:965px; margin:0 auto 0; height: 100%; } .footerlinks{ position: absolute; top: 1140px; left: 237px; width: 551px; font-size: 75%; font-family: verdana; text-align: center; } CSS is quite new to me so be as specific as possible as to what I should be looking at changing in my code.... Your assistance is much appreciated! Thanks! Dan - All I wanna do is to stretch my container div vertically depending on the maincontent div part of my css PHP Code: body { margin: 0px; background-color: #000000; text-align: center; /*height: 100%;*/ } #container { /*using this to center*/ margin-right: auto; margin-left: auto; width: 720px; height: 100%; padding-top: 0px; position: relative; border: 1px solid #FFFFFF; <<<<-----bottom-border must stretch, sort to speak } #mainContent { /*div on the right of my nav-div*/ width: 560px; height: 100%; right: 0px; top: 40px; position: absolute;/* voor ie*/ text-align: left; background-color: #FF0000; } But my border(container div does't stretch) Complete PHP Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style type="text/css"> <!-- body { margin: 0px; background-color: #000000; text-align: center; /*height: 100%;*/ } #container { /*using this to center*/ margin-right: auto; margin-left: auto; width: 720px; height: 100%; padding-top: 0px; position: relative; border: 1px solid #FFFFFF; } #mainContent { width: 560px; height: 100%; right: 0px; top: 40px; position: absolute; text-align: left; background-color: #FF0000; } --> </style> </head> <body> <div id="container"> <div id="mainContent"></div> </div> </body> </html> Any tips, solutions I'm having trouble with my website structure... view this page for an example... css is here... The Footer (which currently consists just of the validation images) is suppossed to be at the bottom of the page... It works in IE except there is a little line between the images (it is also part of the link...), and it doesn't work at all in FF... how do I get rid of the line in IE, and what do I need to add or change in my css to get it to be viewed properly in FF? Thanks Bryan Code: html, body {
margin: 0;
padding: 0;
font: 62.5%/1.5;
}
#container {
width: 770px;
margin: 15px auto 15px auto;
background: white;
}
#headera {
height: 57px;
}
#nav {
background: white;
height: 28px;
}
#headerb {
height: 158px;
margin-bottom:10px;
}
#sidebar {
float: right;
width: 250px;
}
#content {
margin-right: 250px;
}
#footer {
clear: both;
background: white;
height: 50px;
}
IE is not recognizing the bottom margin for the container. The container is centered and 15px off the top of the page but the bottom of the container is not 15px off the bottom of the page. It works fine in other browsers. So, what IE bug is this? Hi guys, I'm having a real problem with CSS on this page. The page views fine in IE, but in firefox I cannot get the green box (div id=maincontent) to extend down to the bottom of the black box... as you can see the black box simply flows out. The green box is extending down to the bottom of the white box, but it stops there. Can anyone think of any obvious ways to fix this? I tried placing a clear:both div at the bottom of main content (which is the red bar you can see) , but that too only actually clears the white box, not the black one. Here's the main bits of css... Code:
#maincontent
{
position:relative;
width:762px;
margin-top:0px;
background-image:url(contentbkg.jpg);
background-repeat:no-repeat;
padding-top:10px;
text-align:left;
}
#left
{
font-size:12px;
color:#FFFFFF;
float:left;
margin-left:5px;
margin-top:10px;
}
#right
{
color:#FFFFFF;
float:right;
margin-right:10px;
margin-top:10px;
position:absolute;
#position:relative;
}
#translucentblack {
width: 150px;
float:right;
background-color: #000000;
filter:alpha(opacity=40);
-moz-opacity:0.4;
opacity: 0.4;
font-family:Verdana, Arial, Helvetica, sans-serif;
padding:5px;
}
#opaqueblack {
width: 150px;
background-color: transparent;
float:right;
position:absolute;
margin-left:592px;
#margin-left:22px;
z-index: 2;
font-family:Verdana, Arial, Helvetica, sans-serif;
padding:5px;
}
#translucentbkg {
color:#FFFFFF;
font-size:12px;
width: 566px;
background-color:#FFFFFF ;
filter:alpha(opacity=80);
-moz-opacity:0.8;
opacity: 0.8;
padding:5px;
text-align:left;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
#opaquetext
{
color:#006600;
font-size:12px;
width: 566px;
background-color: transparent;
position:absolute;
z-index: 2;
padding:5px;
text-align:left;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
basically left and right sit inside maincontent, then opaquetext and translucentbkg sit inside left, whilst opaqueblack and translucentblack sit inside right! phew The reason for opaque and translucent divs is that I'm using mozilla's tip here http://developer.mozilla.org/en/docs/Useful_CSS_tips:Color_and_Background mirroring content and positioning one div over another to get semi transparent backgrounds. Hope that all made sense... any help would be incredible!!! thanks! Hi, I'm trying to do something that is simple with table cells but which I'm finding difficult using CSS. Basically I have a container div that is 400px height. I want to position 3 divs in a row (float: left) at the bottom of that div and put an image in each of them. So, in short... <div id="outer"> <div id="inner1"><img src="x.jpg" /></div> <div id="inner2"><img src="y.jpg" /></div> <div id="inner3"><img src="z.jpg" /></div> </div> ...where the three images are bottom aligned. I want to have the images in their own div containers so that I can give each of their boxes 33% of the screen width and set apdding if required. No doubt I'm approaching this the wrong way. Can anyone help? Thanks, Pat I have a container div that has a height of 500px. My page content only takes up about 300px and I want a copyright notice at the bottom of the page. So I am trying to get the copyright div to bottom align on the container div. In FF, position:absolute;bottom:0; works but that doesn't work in IE which for some reason places the div outside the container div. Any tips on how to do this? Ok, so I've learned to stay away from tables when you don't need them, and I have an instance where this is the case. I have a container div that has a header, content and a footer. On my home page, I have to divs next to each other with the same height and a div below them towards the right. To simplify my problem, look at this example. Code:
<html>
<body>
<div style="float:right">
Hello there!
</div>
<hr>
</body>
</html>
If there's a "float:right" on that div, the hr tag below doesn't get pushed down. But if I use relative positioning and don't use the floats, I can't put the two top divs next to each other. The other option is to use absolute positioning, but again content below doesn't get pushed down correctly. It seems that using "clear:both" works, but it seems weird that this has to be done. For example if I have floating divs in a container, I can get them to stretch out the container like so: Code:
<html>
<body>
<div style="border: 1px solid #000; ">
<div style="float:right">
Hello there!<br />
Hello there!<br />
Hello there!<br />
Hello there!<br />
Hello there!<br />
Hello there!<br />
Hello there!<br />
</div>
<div style="clear: both"></div>
</div>
<hr>
</body>
</html>
Am I missing something fundamental here? Is there a better solution? Thanks in advance. 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. Hi All, I'm trying to create some expanding headers using images and background color/images. Everything seems to be working fine except that at the bottom of the heading there is a 1 or 2 pixel showing of the background color! I assume it is something I'm missing in the CSS rule as the problem occurs in both Mozilla and IE! Click here to see example It's not the images as there on a white background and are cropped fine as can be seen from the enlarged left side image. [html] <div style="width: 162px; color: white; background: green; margin: 0; padding: 0;"><img src="/RhL.gif" width="25" height="50" border="0"><span>HEADING TEXT</span><img src="/RhR.gif" width="25" height="25"></div> [/html] Any help kindly appreciated PHP Addict 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! 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 I created a footer that sits on the bottom of the screen using this code: .footer { padding-top:5px; margin-top:5px; font-size:8pt; color:#FFFFFF; position:absolute; bottom:0px; background-image:url('gfx/bg-bottom.jpg'); height:22px; width:100%; } It looks fine when the window is expanded to the size of the screen, but when you shrink it down (so the scroll bar will appear) and then scroll, the footer bar scrolls with the page.. It's kind hard to explain, just give it a try he http://www.juiceboxseo.com/do-it.php Is there a way to make sure it stays on the bottom? Hey I am relativly new to CSS and i was wondering how can i make the footer of my page stick to the bottom of the screen if the page is relativly short. I use a 800x600 as my design size but there might be long and short pages. Can anyone shed some light? Here is my code PHP Code: <!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> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> <link rel="stylesheet" title="Disabled for Preview-in-Browser: ../css/basics.css" type="text/css" /> <style type="text/css"> <!-- /* CSS Document */ body{ background-color:#FFFFFF; color:#000000; font-family:Verdana, Arial, Helvetica, sans-serif; margin:0px; padding:0px; font-size:80%; text-align:center; } #wrapper{ width: 750px; background-color:#FFFFFF; margin: 10px auto; text-align: left; } /* ---------------------------------Header content---------------------------------------------*/ #header { height: 150px; border-bottom: 1px solid #CC0000; } /*this is to make sure al content apears below the header*/ .clearit{ clear: both; display: block; } /*---------------------------------Main Contant------------------------------------------------*/ #content { background-color:#FFFFFF; margin-left:177px; margin-top:25px; margin-right:100px; } #content p{ background-color:#FFFFFF; } #content h1{ font-size: 140%; color: #CC0000; padding: 0; margin-bottom:20px; font-weight:bold; } #content h2{ font-size: 110%; color: #CC0000; padding: 0; margin-top:30px; } #content li{ color:#000000; list-style-position:inside; list-style-type:disc; } #content form h3{ font-size: 100%; color: #CC0000; padding: 0; margin:0; } #content form h2{ font-size: 115%; color: #CC0000; padding: 0; text-transform:uppercase; } .BoldRed{ color:#CC0000; font-weight:bold; } .verse{ color:#006699; font-style:italic; } /*use for commendattions names*/ .greyed { color:#666666; font-style:italic; } .leftimage{ float: left; margin-right: 10px; margin-bottom:10px; border: 1px solid #000000; clear:left; } .container{ width:99%; float:right; } /*-------------------------------Left Collum Content---------------------------------------------*/ #leftcol { font-size:100%; margin-top:30px; float:left; width: 167px; background-color: #FFFFFF; } /*------------------------------Footer Content---------------------------------------------------*/ #footer{ margin-top:30px; border-top: 1px solid #CC0000; background-color: #FFFFFF; color: #000000; clear: both; } --> </style> </head> <body> <!-- Start wrapper --> <div id="wrapper"> <!-- Start of Header --> <div id="header"> <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="750" height="150"> <param name="movie" value="../homepageFlashElements/header.swf" /> <param name="quality" value="high" /> <embed src="../homepageFlashElements/header.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="750" height="150"></embed> </object> <!-- Clear a line--> <div class="clearit"> </div> </div> <!-- End of Header --> <!-- Start of Left Colum --> <div id="leftcol"> <div align="left"><img src="../images/courses/colours_08.jpg" width="143" height="143" border="1px"/></div> <p> Navigation content here </p> <p></p> </div> <!-- End of Left Colum --> <!-- Start of Content --> <div id="content"> <h1>Heading</h1> <p>Some Content. This may very in length</p> </div> <!-- End of Content --> <!-- Start of Footer --> <div id="footer"> <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="750" height="50"> <param name="movie" value="../homepageFlashElements/footer.swf" /> <param name="quality" value="high" /> <embed src="../homepageFlashElements/footer.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="750" height="50"></embed> </object> </div> <!-- End of Footer --> </div> <!-- End wrapper --> </body> </html> http://wdcb.org/newsite/ Having some difficulty here in putting the footer at the bottom of the page. I've looked at dozens of help tools, and none of them work. I'm obviously missing something. Page code: Code:
<html>
<body>
<div id="header">
<?php include('includes/menu_new.inc'); ?>
</div>
<div id="leftcol">
<div class="element">
<img alt="" src="../images/buttons/PledgeNow.jpg">
<p>This is what text underneath would look like. I know that some of our boxes on the right side can do this so we want to make sure it looks right.</p>
</div>
<div class="element">
<b>PLEDGE NOW</b>
</div>
<div class="element">
<b>PLEDGE NOW</b>
</div>
</div>
<div id="content">Content Section dfsdf dfdf fsdf dfsdf sdfsd ghh ghgh hghtr ytgdf gfdfgdf </div>
<div id="rightcol">
<div class="element">
<a href="http://iRockJazz.com/" target="_blank"><img alt="" border=0 src="../images/ads/iRJ_wdcb_tile_199pix.jpg"></a>
</div>
<div class="element">
<img alt="" src="../images/mini-headers/MiniHeader-FolkRoots.jpg" width="200">
<p>
Our days may be dedicated to jazz, but during the evenings it's all about the folk! WDCB plays more folk and acoustic roots music than any other station in Northern Illinois.
<br><br>
<a href="programming/progfolkroot.php">Click here</a> to learn more.
</p>
</div>
</div>
<div id="footer">
<?php include('includes/footer.inc'); ?>
</div>
</body>
</html>
CSS code: Code:
#header {
position: absolute;
top: 5px;
left: 5px;
width: 1000px;
height: 182px;
}
#leftcol {
background: #f00;
position: absolute;
top: 187px;
left: 0px;
width: 235px;
}
#leftcol .element {
margin-bottom:15px;
}
#leftcol p {
margin-left:5px;
}
#content {
background: #ccc;
position: absolute;
top: 187px;
left: 250px;
width: 540px;
}
#rightcol {
background: #f00;
position: absolute;
top: 187px;
left: 800px;
width: 200px;
}
#rightcol .element {
margin-bottom:15px;
}
#rightcol p {
margin-left:5px;
}
#footer {
position:fixed;
bottom:0px;
width:1000px;
height:100px;
background:#005288;
}
Thank you in advance for your help. Hi! i'm trying to position footer at the very bottom. this example does it as expected (if the page is longer than viewport, footer will be at the end of page): Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<style type="text/css">
<!--
body {
margin: 0;
padding: 0;
font: 12px/1.5 verdana, arial, helvetica, sans-serif;
}
#content {
padding: 10px;
background-color: #ff8080;
}
#footer {
position: absolute; /* Needed for Safari */
padding: 10px;
background-color: #aa3939;
width: 75%;
}
#footer h1 {
padding-bottom: 0;
}
h1, p {
margin: 0;
padding-bottom: 1em;
}
h1 {
font-size: 12px;
line-height: 1.5em;
}
-->
</style>
<script type="text/javascript">
<!--
function getWindowHeight() {
var windowHeight = 0;
if (typeof(window.innerHeight) == 'number') {
windowHeight = window.innerHeight;
}
else {
if (document.documentElement && document.documentElement.clientHeight) {
windowHeight = document.documentElement.clientHeight;
}
else {
if (document.body && document.body.clientHeight) {
windowHeight = document.body.clientHeight;
}
}
}
return windowHeight;
}
function setFooter() {
if (document.getElementById) {
var windowHeight = getWindowHeight();
if (windowHeight > 0) {
var contentHeight = document.getElementById('content').offsetHeight;
var footerElement = document.getElementById('footer');
var footerHeight = footerElement.offsetHeight;
if (windowHeight - (contentHeight + footerHeight) >= 0) {
footerElement.style.position = 'absolute';
footerElement.style.top = (windowHeight - footerHeight) + 'px';
}
else {
footerElement.style.position = 'static';
}
}
}
}
window.onload = function() {
setFooter();
}
window.onresize = function() {
setFooter();
}
//-->
</script></head><body>
<div id="content">
<h1>Content</h1>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</div>
<div style="position: absolute; top: 810px;" id="footer">
<h1>Footer</h1>
</div>
</body></html>
but when i try to add left/right boxes, it fails. try to scroll down the page (footer is placed at the bottom of viewport, not page): Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<style type="text/css">
<!--
body {
margin: 0;
padding: 0;
font: 12px/1.5 verdana, arial, helvetica, sans-serif;
}
#head
{
padding-left:20px;
padding-top:20px;
padding-right:20px;
background-color: #FFF;
background-image: url('/public/images/header-background.gif');
background-repeat: repeat-x;
background-position: bottom
}
#logo
{
height: 100px;
background-image: url('/public/images/header.jpg');
background-repeat: no-repeat
}
#content
{
}
#leftcontent
{
float:left;
width:67%;
margin:10px;
padding:30px 30px 70px 30px;
border: 1px solid #000;
background-color: #33251C
}
#leftcontent h1
{
color: #936FC4
}
#leftcontent h2
{
color: #FFF
}
#rightcontent
{
margin:15px
}
p, pre
{
margin:0px 30px 10px 30px
}
#rightcontent p
{
font-size:10px;
margin-left:0px
}
#navcontainer
{
margin: 0;
padding: 0;
height: 22px;
font: 11px Verdana, sans-serif;
width: 100%;
border-top: 1px solid #bbb;
border-bottom: 1px solid #bbb;
list-style-type: none;
background: #FFF
}
#navlist li
{
float: left;
margin: 0;
padding: 0;
width: auto;
display: block
}
#navlist li a, #navlist li a:link
{
background: #FFF;
color: #555;
text-decoration: none;
padding: 3px 5px 3px 5px;
display: block
}
#navlist li a#current, #navlist li a#current:link
{
color: #000;
cursor: default;
font-weight: bold;
border-bottom: 3px solid #f90;
background: #EEE
}
#navlist li a#current:hover
{
border-bottom: 3px solid #999;
background: #DDD
}
#content {
padding: 10px;
background-color: #ff8080;
}
#footer {
position: absolute; /* Needed for Safari */
padding: 10px;
background-color: #aa3939;
width: 75%;
}
#footer h1 {
padding-bottom: 0;
}
h1, p {
margin: 0;
padding-bottom: 1em;
}
h1 {
font-size: 12px;
line-height: 1.5em;
}
-->
</style>
<script type="text/javascript">
<!--
function getWindowHeight() {
var windowHeight = 0;
if (typeof(window.innerHeight) == 'number') {
windowHeight = window.innerHeight;
}
else {
if (document.documentElement && document.documentElement.clientHeight) {
windowHeight = document.documentElement.clientHeight;
}
else {
if (document.body && document.body.clientHeight) {
windowHeight = document.body.clientHeight;
}
}
}
return windowHeight;
}
function setFooter() {
if (document.getElementById) {
var windowHeight = getWindowHeight();
if (windowHeight > 0) {
var contentHeight = document.getElementById('content').offsetHeight;
var footerElement = document.getElementById('footer');
var footerHeight = footerElement.offsetHeight;
if (windowHeight - (contentHeight + footerHeight) >= 0) {
footerElement.style.position = 'absolute';
footerElement.style.top = (windowHeight - footerHeight) + 'px';
}
else {
footerElement.style.position = 'static';
}
}
}
}
window.onload = function() {
setFooter();
}
window.onresize = function() {
setFooter();
}
//-->
</script></head><body>
<div id="content">
<div id="head">
<div id="logo">
</div>
</div>
<div id="navcontainer">
<ul id="navlist">
<li><a href="/">home</a></li><li><a href="/mix/" id="current">mixes</a></li><li><a href="/gallery/">gallery</a></li><li><a href="/contact/">contact</a></li></ul>
</div><br/>
<div id="leftcontent">
<h1>My Mixes</h1>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</div>
<div id="rightcontent">
right side
</div>
</div>
<div style="position: absolute; top: 810px;" id="footer">
<h1>Footer</h1>
</div>
</body>
</html>
how may i fix it? thanx! |
|||||||