|
CSS - Css Footer Problem
The dreaded CSS footer.
I've managed to get it working perfectly in IE, but Firefox isn't happy atm. If you resize the window so that it needs to be scrolled down the footer soon gets very messed up. If you figure that out then you really, really know your stuff. Or you're a lot more awake than I am. http://www.vaya.ws/vayadesign/ Similar TutorialsI have an odd problem with my footer layout. I use 1280x1024 resultion and it works fine but when I change to a lower resultion or reduce browser window from full screen or put on longer text so you need to scroll the page down my footer doesn't sit on the bottom of the page. Check the attached screenshots and the css code bellow to see my exact problem. Code:
#footer {
position: absolute;
margin-left: -50%;
left: 50%;
bottom: 0px; !important;
text-align: center;
font-family: Verdana, Arial, sans-serif;
font-size: 9px;
padding: 5px;
padding-bottom: 8px;
background-image: url(../images/design/bg.gif);
}
Any idea? Thanks I am having problems with the footer of our site on the homepage at http://www.themax.co/ . This problem is ONLY occurring in the AOL browser (yes, it's annoying). See the attached image... In the AOL browser, the footer links (HOME, ABOUT, etc.) are sitting ontop of the READ MORE buttons (in the 3 bottom boxed). I tried adding a <div style="clear:both"></div> between the footer and the boxes, but that didn't work. Then I tried a min-height hack - I added the <div class="prop"></div> and <div class="clear"></div> tags to each of the boxes. But that didn't work (the prop and clear class are defined in my stylesheet) ... but that didn't work either. Ug. Running out of ideas. Please help. hi Guys, Ive had a play and cant solve this problem. Ive got a gradient that is 200px tall that repeats across the top of my page set as the background. I also have a container with a width of 850px centered. I need to create another gradient that repeats across the bottom of the page (200px tall also). What ive done is taken the footer div out of the container and put it underneath in the html set the width to 100% height to 200px and repeated the background - this works but if there is no content in the container the footer sits half way up the page sooooo I add position: absolute with bottom: 0px which brings the footer to the bottom of the page even if no content is in the container SWEET but if I start streching the actual browser window up and down the footer will ride over any other element on page. this is where it is about: sdomien .be/sdomien6-positionated/ the footer (now it is just the red ugly thing) looks like i want it in IE7, but when i open it in IE8 or FF it seems to be not like in IE7 what did i do wrong? #footer{background-color:red; width:100%; position:relative; bottom:auto;margin-bottom:0 auto;} I am trying to create a footer and facing a problem while doing so... This is my html code: Code: <div id="container"> <div id="main"> <div id="terms"> // content </div> // closing terms </div> // closing main <div id="footer"> // content </div> </div> // closing container And css is Code: html, body {
height:100%;
margin:0;
background: #F0FAFF;
}
#container {
min-height:100%;
position:relative;
}
#main {
height:100%;
font-size:150%;
clear:both;
overflow:auto;
padding-bottom:80px;
}
#footer {
position:absolute;
background-color:#FF6633;
bottom:0;
width:100%;
height:80px;
}
#termsandpolicy {
position:absolute;
left:3%;
width:72%;
top:90px;
}
And result that I get is http://www.walknshine.com/termsofuse.php What is the problem...I have searched in google a lot but not able to get any significant css code...plzz help.... Hiya everyone. Right am having major issues with my new site. The problem i am finding, is that my footer is not at the foot at the page when the content in the middle of the page is not big enough. When i add a doze of lines to the main layer it's OK. please check these : Works ok with content in the middle Click here without much content - footer rises. Click Here I've spend 3 hours try to sort out this annoying problem out. Basically i want the footer to main a defined size, remaining at the very bottom of the page. Would someone be kind enough to assist me please ? Hi, I've created a page with two tables, which is basically structured like <table> main content </table> <table id="footer"> footer content </table> and in my style sheet i have Code:
#footerid {
position: absolute;
bottom: 0px;
}
The problem is that the footer is overlapping the content if the content is greater then a page's length. What I need is for the footer to come after the content table insetad of overlapping as it is now. Does this require some sort of id attached the first table? Thanks for any help on this one Hi, I am generating what should be a simple css layout. I have a header, some left content (which is comprised of layers that hold an image and some over the top to form a kind of navigation tablet), some content to the right of that for text, and finally a footer. Bog standard design... The problem I have is that the content to the right of the left content is sat below both the left content and the footer currently. What it should be doing is sitting to the right of the left content and where the text 'grows' push the footer down the page: 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 name="generator" content="HTML Tidy for Linux (vers 1 September 2005), see www.w3.org" />
<title>Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
/* mac hide \*/
html, body {height:100%}
/* end hide*/
body {
padding:0;
margin:0;
color: #000000;
}
#wrapper {
position: relative;
min-height: 100%;
height: auto !important;
height: 100%;
}
#header{
position:absolute;
top:0;
left:0;
width:100%;
height:224px;
border-top:0px solid #feffff;
border-bottom:0px solid #feffff;
overflow:hidden;
color: #000000;
}
#content {
background-color: #ccc;
padding-bottom: 50px;
}
* html #footer {/*only ie gets this style*/
\height:40px;/* for ie5 */
he\ight:38px;/* for ie6 */
}
#navlist li
{
list-style: none;
margin: 0;
padding: 0.25em;
border-top: 0px white;
}
#navlist li a {
color: #4E261B;
text-decoration: none;
font-family: palatino linotype, helvetica, sans-serif;
font-size: .90em;
line-height: 200%;
}
a{
font-family: Tempus Sans ITC;
color: #4E261B;
font-weight: bold;
font-size: 14pt;
}
#content {
background-color: white;
padding-bottom: 50px;
padding-left: 200px;
padding-top: 0px;
}
#footer {
background-color: #ff0;
width: 100%;
height: 50px;
line-height: 50px;
position: absolute;
bottom: 0 !important;
bottom: -1px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<img border="0" src="images/Banner_flat.jpg" alt="Banner" width="100%" height="224" align="left" />
</div>
<div style="position: absolute; width: 169px; height: 243px; z-index: 1; left: 4px; top: 229px" id="layer1">
<img border="0" src="images/bridetablet1.bmp" alt="Menu" width="190" height="302" /></div>
</div>
<div style="position: absolute; width: 169px; height: 243px; z-index: 2; left: 14px; top: 257px" id="layer2">
<div id="navcontainer"></div>
<ul id="navlist">
<li><a href="hello" class="c2">Home</a></li>
<li><a href="About%20Us" class="c2">About Us</a></li>
<li><a href="User%20Register" class="c2">User Register</a></li>
<li><a href="User%20Log-In" class="c2">User Log-In</a></li>
<li><a href="Supplier%20Log-In" class="c2">Supplier Log-In</a></li>
<li><a href="Join" class="c2">Join</a></li>
</ul>
</div>
<div id="content">
<p>Stuff.</p>
<p>Blah, blah blah</p>
<p>Blah, blah blah</p>
<p>Blah, blah blah</p>
<p>Blah, blah blah</p>
<p>Blah, blah blah</p>
<p>Blah, blah blah</p>
<p>Blah, blah blah</p>
<p>Blah, blah blah</p>
<p>Blah, blah blah</p>
<p>Blah, blah blah</p>
<p>Blah, blah blah</p>
<p>Blah, blah blah</p><p>Blah, blah blah</p>
<p>Blah, blah blah</p>
<p>Blah, blah blah</p>
<p>Blah, blah blah</p>
<p>Blah, blah blah</p>
<p>Blah, blah blah</p>
<p>Blah, blah blah</p>
<p>Blah, blah blah</p>
</div>
<div id="footer">
<p>Footer</p>
</div>
</div>
</body>
</html>
Thanks, G Hello, I have a problem with a footer on a website I'm building. I want it to my down as text fills the space between the top blue thing, and the bottom blue thing, but as you can see, the text skip past the bottom. I want the bottom to be pushed down by the text. Here's the site And here's the css Hope you can help me with this. 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, It's turning out to be 'one of those days'. I thought I had a pretty good understanding of using containers and a footers 'bottom' property to make sure the footer lines up with the last elements of the page. I've set it up in code and just can't seem to find why the footer is showing up at the top of the page. Anyone spot the problem? -----------> CSS references outside file Code: #footer_global
{
background-color: #FFFFFF;
font-family: helvetica,;
position: absolute;
left: 0px;
width: 812px;
height: auto;
z-index: 0;
bottom: auto;
}
----------------Page Coding 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=UTF-8" />
<link href="css_layout.css" rel="stylesheet" type="text/css" />
<link href="css_fonts.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#body_container
{
background-color: #FFFFFF;
font-family: helvetica,;
margin:0;
padding:0;
position: absolute;
left: 0px;
top: 216px;
width: 812px;
height: 277;
z-index: 0;
}
#site_container
{
background-color: #FFFFFF;
font-family: helvetica,;
margin:0;
padding:0;
position: absolute;
left: 30px;
top: 50px;
width: 812px;
height: auto;
z-index: 0;
}
</style>
</head>
<body>
<div id="site_container">
<div id="header_global">
<!-- ImageReady Slices (global_header.psd) -->
<table id="Global_Header" width="812" height="216" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="3">
<img src="images/global_header_01.jpg" width="480" height="51" alt=""></td>
<td>
<img src="images/global_header_02.jpg" width="163" height="51" alt=""></td>
<td> </td>
</tr>
<tr>
<td colspan="3">
<img src="images/global_header_04.jpg" width="480" height="52" alt=""></td>
<td> </td>
<td> </td>
</tr>
<tr>
<td rowspan="3">
<a href="index.html"><img src="images/global_header_07.jpg" width="157" height="113" alt="Ask_Bob" border="0"></a></td>
<td rowspan="3">
<a href="main_P3_input.html"><img src="images/global_header_08.jpg" width="161" height="113" alt="Project_Pricing_Profiler" border="0"></a></td>
<td rowspan="3">
<a href="main_identify_input.html"><img src="images/global_header_09.jpg" width="162" height="113" alt="Identity_Local_Companies" border="0"></a></td>
<td rowspan="3">
<a href="main_workshop_input.html"><img src="images/global_header_10.jpg" width="163" height="113" alt="Workshop_Opportunities" border="0"></a></td>
<td>
<img src="images/global_header_11.jpg" width="169" height="21" alt=""></td>
</tr>
<tr>
<td>
<a href="http://www.churchsolutionsmag.com/" target="_blank"><img src="images/global_header_12.jpg" width="169" height="83" alt="Featured_Sponsor" border="0"></a></td>
</tr>
<tr>
<td>
<img src="images/global_header_13.jpg" width="169" height="9" alt=""></td>
</tr>
</table>
<!-- End ImageReady Slices -->
</div>
<div id="body_container">
<div id="body_main_global">
<img src="images/index_body.jpg" width="642" height="277" alt="Ask_Bob">
</div>
<div id="sponsors_global">
<!-- ImageReady Slices (sponsors.psd) -->
<table id="Global_Sponsors" width="170" height="277" border="0" cellpadding="0" cellspacing="0">
<tr>
<td rowspan="4">
<img src="images/global_sponsors_01.jpg" width="7" height="277" alt=""></td>
<td>
<img src="images/global_sponsors_02.jpg" width="163" height="19" alt=""></td>
</tr>
<tr>
<td>
<a href="http://www.csdus.com" target="_blank"><img src="images/global_sponsors_03.jpg" width="163" height="89" alt="CSD" border="0"></a></td>
</tr>
<tr>
<td>
<a href="http://trane.com/Default.asp" target="_blank"><img src="images/global_sponsors_04.jpg" width="163" height="71" alt="Trane" border="0"></a></td>
</tr>
<tr>
<td>
<a href="http://www.****ersonandassociates.com/" target="_blank"><img src="images/global_sponsors_05.jpg" width="163" height="98" alt="****erson_And_Associates" border="0"></a></td>
</tr>
</table>
<!-- End ImageReady Slices -->
</div>
</div>
<div id="footer_global">
<!-- ImageReady Slices (global_footer.psd) -->
<table id="Global_Footer" width="812" height="140" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="9">
<img src="images/global_footer_01.jpg" width="479" height="17" alt=""></td>
<td rowspan="3"><img src="images/global_footer_02.jpg" width="164" height="93" alt="" /></td>
<td rowspan="3">
<a href="index.html"><img src="images/global_footer_03.jpg" width="169" height="93" alt="Brought_To_You_by_NACDB" border="0"></a></td>
</tr>
<tr>
<td>
<a href="info_building_main.html"><img src="images/global_footer_04.jpg" width="105" height="21" alt="Building_A_Church" border="0"></a></td>
<td>
<img src="images/global_footer_05.jpg" width="3" height="21" alt=""></td>
<td>
<a href="info_qualifications_main.html"><img src="images/global_footer_06.jpg" width="92" height="21" alt="Our_Qualifications" border="0"></a></td>
<td>
<img src="images/global_footer_07.jpg" width="4" height="21" alt=""></td>
<td>
<a href="info_resources_main.html"><img src="images/global_footer_08.jpg" width="90" height="21" alt="Church_Resources" border="0"></a></td>
<td>
<img src="images/global_footer_09.jpg" width="3" height="21" alt=""></td>
<td>
<a href="info_about_main.html"><img src="images/global_footer_10.jpg" width="67" height="21" alt="About_NACDB" border="0"></a></td>
<td>
<img src="images/global_footer_11.jpg" width="3" height="21" alt=""></td>
<td>
<a href="info_contact_main.html"><img src="images/global_footer_12.jpg" width="112" height="21" alt="Contact_Us" border="0"></a></td>
</tr>
<tr>
<td colspan="9">
<img src="images/global_footer_13.jpg" width="479" height="55" alt=""></td>
</tr>
<tr>
<td colspan="11">
<img src="images/global_footer_14.jpg" width="812" height="47" alt="Copyright_Information"></td>
</tr>
</table>
<!-- End ImageReady Slices -->
</div>
</div>
</body>
</html>
Hi. I've been banging my head against the wall for ages with this! Could someone please explain, and perhaps offer some code, on why the footer on the Home and About Me pages (http://www.freewebs.com/mike-elley/) renders the page header and title below, differently. These pages seem to work fine in IE6. I'm testing on Opera 7.23 by the way. Thanks very much for any help! Hi - I've got an issue with the positioning on my footer - It displays at the top of the page (underneath the top content and stuff) when I want it to display at the end of my main DIV - #wrapper. here's my css: Code:
/* WRAPPER corresponds to the container that surrounds all the content (navigation, text, etc.) */
#wrapper {
position: absolute;
width: 768px;
left: 0px;
top: 0px;
background-color: #FFFFFF;
}
/*BEGIN content elements (display within the wrapper - in theory) */
.inner_header {
position: absolute;
top: 4px;
width: 565px;
}
.inner_content {
position: relative;
top: 126px;
left: 189px;
width: 515px;
}
.inner_headline {
position: absolute;
top: 94px;
left: 189px;
width: 350px;
font-family: verdana;
font-size: 11pt;
font-weight: bold;
color: #000066;
}
.inner_top_right {
position: absolute;
left: 565px;
top: 4px;
width: 203px;
}
.inner_searchbox {
position: absolute;
top: 250px;
left: 7px;
width: 166px;
}
.inner_topbar {
position: absolute;
width: 768px;
height: 4px;
background-color: #1f295c;
}
/*END content */
/* HERE's the part I want to display at the END of all other loaded content. */
#footer {
width: 768px;
margin-top: 0px;
}
Here's the HTML: Code: <div id="wrapper">
<div class="nav">
<?php include "nav.php"; ?>
</div>
<div class="landing_page">
<?php include "land.php"; ?>
</div>
<h1><?php echo $message; ?></h1>
<div class="header">
<?php include "header.php"; ?>
</div>
<div class="searchbox">
<?php include "searchbox.php"; ?>
</div>
<div class="featured_jobs">
<?php include "featjobs.php" ?>
</div>
</div> <!--close the wrapper-->
<div id="footer">
<?php include "footer.php"; ?>
</div>
Thank you in advance for considering my question. -Taylor Hi all, I have a 2-column layout for my web pages plus a header and footer section. The left column contains a navigation menu (which grows and shrinks depending on the current menu selection), and the right column contains the main text and other information. I float the nav menu left. No problem. But when the footer is displayed (and I have set "clear: both" on the footer element to try and keep it at the bottom), it will appear somewhere in the middle of the menu in cases where the menu is long (vertically) and the main content area contains only a few lines of text. My current method to drop the footer below the menu is very klunky, and probably what most people do (unless they know of a better way). Yes, the series of <br /> tags before printing the footer. Is there a better way of ensuring that the footer is placed where it should (below all other content) so I don't have to insert all those <br /> tags? My CSS for the page layout is: Code: #doc { /* Main document area */
margin-left: 5%;
margin-right: 5%;
margin-top: 5px;
border: solid 1px #900;
}
#logo {
text-align: center;
background: #c30000;
}
#main {
margin-left: 150px;
margin-right: 0%;
padding: 10px;
border-left: solid 1px #c00;
background: #fff;
color: #000;
}
#nav {
position: absolute;
margin-left: 0%;
float: left;
padding: 0px;
border: 0px;
top: 110px;
width: 150px; /* Same as margin-left setting in #main */
color: #000;
}
#footer {
clear: both;
margin-left: 0%;
margin-right: 0%;
border-bottom: 2px solid #906;
background-color: #c00;
color: #ddd;
font-weight: bold;
text-align: center;
line-height: 1.5;
}
And a typical html page would be structured thusly: Code: <!-- USUAL HTML BEGINNING STUFF HERE -->
<body>
<div id="doc">
<!-- Logo image -->
<div id="logo">
<!-- LOGO GOES HERE -->
</div>
<!-- Main content window -->
<div id="main">
<!-- MAIN CONTENT GOES HERE -->
</div>
<!-- Navigation menu -->
<div id="nav">
<!-- NAV MENU CODE HERE -->
</div>
<!-- footer -->
<div id="footer">
<!-- FOOTER CODE HERE -->
</div>
</div>
</body></html>
Is my CSS coding incorrect, or is this a universal problem? Any help/suggestions will be much appreciated. I know this is probably something very simple I'm overlooking, but I can't seem to get this page to display corrrectly in IE. The portion I'm talking about is the footer div: although the CSS clears both, in Firefox I see the footer correctly but in IE there is some encroachment of the footer background color on the right side of the screen. URL is: http://www.readaloudproject.org/about/ Please disregard all of the other aspects of the page... this is very much still under construction and a lot more styling needs to be done. But this footer is driving me crazy because I copied working code from other sites that is now no longer working. Help! Thanks! Hi, 1st problem : when i try to validate the html on this document: http://www.chocolateriewanders.com/new/new2/about_us.php the validation failes and i have no idea why can i not just put a list in another list? 2nd problem [SOLVED AS WELL]: the footer behaves kinda weird on my mac. i have fairly high resolution and i am not able to re-create the prob on my ibm. an image file is attached. in firefox the footer is located above th other floating boaxes. i use no positioning and just clear and float values - i have no idea how it got there http://www.chocolateriewanders.com/new/new2/about_us.php ___________ i am trying to re-design my existing page to get the navigational menu more integrated and to make the page more colorful. furthermore am i trying to ONLY use float to position the elements. the only tiny obsticle is, that i couldn't get around the table in the center yet - but i am working on it Hi! My first post I got a problem with my sticky footer as you can see the footer is fine, fixed to the bottom of the page but I got an unnecessary scroll The site: www dot flyttamig dot com think the problem is that i put 100% height on html html, body { margin:0; padding:0; height:100%; } Can you guys help me get rid of this scroll Thanks Hi all, Basically I want to position a footer at the very bottom of my page which is 100% in width. So far I have: Code: .linkbar {
display:block;
background-color:black;
position:absolute;
height:100px;
width:100%;
bottom:0px;
left:0px;
}
.picturebox {
display:block;
background-color:blue;
position:absolute;
height:50px;
width:50px;
bottom:0px;
left:0px;
}
This is what I have so far and I geta reasonable result in IE but nothing at all in firefox, the box doesn't even appear. Any help would be greatly appreciated! Regards, Jack. |
|||||||