|
CSS - Hiding Page Bg Below Footer?
In a basic CSS single column layout with Header, Content, Footer div structure, where the page background image is defined in the Body CSS, is there a way to specify that below the Footer div, the page background does not show?
Similar TutorialsHello, I just joined the forum, I'm new to web design although I have some experience in video post production. I'm attempting to create a layout for a website using sticky footer technique and an image for the border shadow in the main column. The sticky footer works well until I tweak the css to add the background border image, then I get this empty space in the middle of the body where the border image background should be extending to. It's probably a novice mistake but I can't get to find it. Your help would be much appreciated. The HTML: Code: <body>
<div id="nonFooter">
<div id="wrapShadow">
<div id="header">
<div id="linksHead"></div>
<div id="mainMenu"></div>
</div>
<div id="content">
<div id="bannerSlider"> (SWF file)
</div>
<div id="contentBuscador">
</div>
<div id="contentTours">
</div>
<div id="contentElite">
</div>
<div id="contentTestimonios">
</div>
<div id="contentPromos">
</div>
</div>
</div>
</div>
<div id="footer">
<div id="wrapShadowFooter">
</div>
</div>
<script type="text/javascript">
swfobject.registerObject("FlashID");
</script>
</body>
The CSS: Code: html,body {
padding: 0;
margin: 0;
}
html
{
height: 100%;
}
body
{
height: 100%;
background-color: #3399cc;
}
#nonFooter
{
position: relative;
min-height: 100%;
background-image: url(_images/shadow920x1ver3.gif);
width: 920px;
padding: 0px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
* html #nonFooter
{
height: 100%;
}
#content
{
padding-bottom: 7em;
width: 900px;
margin-top: 0px;
margin-right: 10px;
margin-bottom: 0px;
margin-left: 10px;
padding-top: 0px;
padding-right: 0px;
padding-left: 0px;
clear: both;
border-top-width: medium;
border-top-style: solid;
border-top-color: #336;
}
#header {
width: 900px;
height: 100px;
position: relative;
margin-top: 0px;
margin-right: 10px;
margin-bottom: 0px;
margin-left: 10px;
}
#footer
{
position: relative;
margin-top: -6em;
height: auto;
background-image: url(_images/shadow920x1ver3.gif);
width: 920px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#wrapShadow {
width: 920px;
margin: 0px;
padding: 0px;
height: auto;
}
#wrapShadowFooter {
width: 900px;
margin-top: 0px;
margin-right: 10px;
margin-bottom: 0px;
margin-left: 10px;
padding: 0px;
background-image: url(_images/footerCruiseship.jpg);
background-repeat: no-repeat;
float: left;
height: 100px;
}
All #content(area) Divs in content have the same code as this:
#contentBuscador {
float: left;
height: 100px;
width: 880px;
padding: 0px;
margin-top: 5px;
margin-right: 10px;
margin-bottom: 5px;
margin-left: 10px;
}
Thank you, pixelMason. Edit: Problem Solved thanks to f_nietzsche Not sure whether this would be a CSS thing or a PHP application. But I'm working on a new site design that randomly shows a large photograph as a background to my portal site (1 photo randomly out of a library of 500 or so photos). I want to allow my visitors to press a shortcut key to hide everything on the page except the page's background if they ever wanted to see what was peeking through the portal columns and around the sides of the page. Is this possible? And if so, how? Hey all, I am creating a site which sells Three 3G Mobile Phones and at the bottom of the pages i have a footer which is included into each page, see here. If you view the site in Firefox then the footer is in the correct place and rests just where the main content finishes. However in IE the footer is miles down the page creating a box effect arround the content which to be honest looks crap. If anyone would be so kind as to give me an idea why this is happening then i would be very grateful. Also, there are many sites around which give tutorials etc about text decoration and such with CSS, but i am yet to find a really good begginers tutorial on how to layout a page with CSS and Divs, does anyone know of one? Thanx for reading. CSS Code (siteInfo is the footer in question: Code:
#masthead{
padding: 0px 0px 0px 0px;
border-bottom: 1px solid #cccccc;
width: 100%;
}
#navBar{
float: left;
width: 15%;
margin: 0px;
padding-right: 2px;
height: 100%;
}
#headlines{
float:right;
width: 45%;
padding-right: 2px;
}
#content{
float: left;
width: 70%;
padding: 0px 0px 0px 0px;
background-color: #FFFFFF;
position: inherit;
}
#siteInfo{
clear: both;
font-size: 75%;
color: #FFFFFF;
padding: 10px 10px 10px 10px;
text-align: center;
background-color: #CCCCCC;
border-top: 1px solid #107FA4;
position: relative;
font-weight: bold;
}
Edited to add CSS. 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. hey all, i have a strange problem... When the page opens the footer appears on top of the page content but if i refresh the page it goes to the bottom as expected?? really wierd can someone please help me with this? here is the page lin to see what i mean page with the problem and here is a link to me css css page Any ideas would be great. I am using firefox Thanks RF Hi, I've just reworked my site, and I'm having trouble keeping the footer at the bottom of the page. my site stylesheet (see div#footer) Any ideas? I've tried setting body min-height (and height for ie) to 100% and setting position:absolute; bottom:0px; but that didn't work. Hi everyone, I'm having some trouble positioning this footer to the bottom of the page. I'd like for the footer box to display directly under the content/navigation bar, with a gap of four pixels between the respective boxes. In action: http://www.stabhead.com/css/index.html Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN">
<html>
<head>
<title>Layout</title>
<style type="text/css">
<!--
body {
background-color: #FFFFFF;
color: blue;
text-align: center;
margin: 5px 0px 0px 0px;
}
#container {
position: relative;
width: 981px;
border: 0;
padding: 0;
margin: 0;
text-align: left;
}
#topbar {
position: absolute;
width: 981px;
height: 95px;
top: 0px;
background-color: #DDDDDD;
}
#loginbox {
position: absolute;
width: 249px;
height: 92px;
top: 97px;
background-color: #FFBD72;
}
#adbar {
position: absolute;
top: 97px;
left: 251px;
width: 730px;
height: 92px;
background-color: #949494;
}
#navbar {
position: absolute;
top: 193px;
left: 0px;
width: 117px;
background-color: #DDDDDD;
}
#content {
position: absolute;
top: 193px;
left: 121px;
width: 860px;
background-color: #DDDDDD;
}
#footer {
position: absolute;
bottom: 0px;
width: 100%;
height: 64px;
background-color: #DDDDDD;
}
-->
</style>
</head>
<body marginheight="0" marginwidth="0">
<div align="center">
<div id="container">
<div id="topbar">topbar</div>
<div id="loginbox">loginbox</div>
<div id="adbar">adbar</div>
<div id="navbar">navbar</div>
<div id="content">content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>
</div>
</div>
</div>
<div id="footer">footer</div>
</body>
</html>
The content may consist of something that is 500 pixels in height, or 10,000 pixels - it totally depends on how many words or images are in there, so the footer needs to grip on to the bottom of the content and stretch across the whole of the bottom of the page. If anyone could help me out here, it would be greatly appreciated. Hello everyone I have a problem with keeping a footer at the bottom of a page. It hovers over other elements in Firefox 3.6.6 Also I'd like to have the footer at the right side and not centered. If I define "right" however, part of it disappears in IE. The style sheet is no from me. I would appreciate, if someone were kind enough to have a look and help me. Thanks in advance for any input Eva Here it is: /***********************************************/ /* 3col_leftNav.css */ /* Use with template 3col_leftNav.html */ /***********************************************/ /***********************************************/ /* HTML tag styles */ /***********************************************/ body{ background-image: url(../../Lokale%20Einstellungen/Temporary%20Internet%20Files/Lokale%20Einstellungen/Temporary%20Internet%20Files/Content.IE5/4WPRVLBA/head6.png); background-repeat: no-repeat; background-position: left top; font: 13px Verdana, Arial, Helvetica, sans-serif; /* size: 100%; */ color: #333333; line-height: 1.3; margin: 0px; padding: 0px; } img{ border: 0; } a{ color: #006699; text-decoration: none; } a:link{ color: #006699; text-decoration: none; } a:visited{ color: #006699; text-decoration: none; } a:hover{ color: #006699; text-decoration: underline; font-weight: bold; } h1{ font-family: Verdana,Arial,sans-serif; font-size: 114%; color: black; margin: 0px; padding: 0px; } h2{ font-family: Verdana,Arial,sans-serif; font-size: 100%; color: black; margin: 0px; padding: 0px; } h3{ font-family: Verdana,Arial,sans-serif; font-size: 100%; color: black; margin: 0px; padding: 0px; } h4{ font-family: Verdana,Arial,sans-serif; font-size: 100%; font-weight: normal; color: #333333; margin: 0px; padding: 0px; } h5{ font-family: Verdana,Arial,sans-serif; font-size: 100%; color: #334d55; margin: 0px; padding: 0px; } ul{ list-style-type: square; } ul ul{ list-style-type: disc; } ul ul ul{ list-style-type: none; } label{ font-family: Arial,sans-serif; font-size: 100%; font-weight: bold; color: #334d55; } table{ padding: 5 px; } /***********************************************/ /* Layout Divs */ /***********************************************/ #masterhead{ padding: 30px 0px 0px 0px; /* border-bottom: 1px solid #cccccc; */ width: 950px; } #navBar{ float: left; width: 195px; margin: 0px; /* 19.08.2008 padding-top: -5px;*/ padding-top: -5px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; /* background-color: #e4f2f9; */ /* 19.08.2008 border-right: 1px solid #cccccc; */ } #headlines{ position: absolute; left: 690px; top: 135px; font-size: 85%!important; /* font-size: 90%; */ /* float:right; */ width: 230px; margin-top: -30px; /* border-left: 1px solid #cccccc; */ /* border-bottom: 1px solid #cccccc;*/ /* padding-right: 10px; */ } #headlines h3{ margin-top: 3px; margin-bottom: 3px; margin-left: 10px; padding-top: 1px; padding-bottom: 1px; font-weight: 900; } #content{ float: left; padding-left: 24px; width: 460px; font-size: 107%; line-height: 1.4; /* position: absolute; top: 184px; left: 210px; */ } #content h1,h2 { margin: 0px; padding-top: 2px; padding-right: 2px; padding-bottom: 2px; padding-left: 0px; font-size: 130%; font-color: black; } #content h3 { margin: 0px; padding-top: 2px; padding-right: 2px; padding-bottom: 2px; padding-left: 0px; font-size: 120%; font-height: 90%; font-weight: 900; } /***********************************************/ /* Components */ /***********************************************/ #siteName{ margin: 0; padding-top: 0px; padding-right: 0; padding-bottom: 0; padding-left: 200px; /* font-size: x-large; */ color: #FF9900; } /************* #globalNav styles **************/ #globalNav{ /* border-bottom: 1px solid #CCC; */ color: #006699; text-align: center; /* font-weight: bold; */ margin-top: 40px; padding-top: 10px; padding-right: 0px; padding-bottom: 5px; padding-left: 10px; /* 19.08.2008 border-top: 1px solid #cccccc; */ } #globalNav img{ display: block; } #globalNav a { /* font-size: 120%; */ padding: 0 4px 0 0; } /*************** #pageName styles **************/ /* #pageName{ margin: 0px; padding-top: 30px; padding-right: 0px; padding-bottom: 0px; padding-left: 20px; } */ /************* #breadCrumb styles *************/ #breadCrumb{ font-size: 80%; padding: 2px 0px 0 10px; } /************** .feature styles ***************/ .feature{ padding: 2px 2px 10px 10px; font-size: 80%; } .feature h3{ padding: 30px 0px 5px 0px; text-align: center; color: #006699; } .feature img{ float: left; padding: 10px 10px 0px 0px; } /************** .story styles *****************/ .story{ clear: both; font-size: 80%; padding-top: -40px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; } .story p{ padding: 0px 0px 10px 0px; } /************* #siteInfo styles ***************/ #siteInfo{ font-size: 75%; color: #cccccc; padding: 10px 10px 10px 10px; text-align: right; border-top: 0px none #cccccc; /* border-right: 1px solid #cccccc; border-bottom: 1px solid #cccccc; border-left: 1px solid #cccccc; */ } #siteInfo img{ padding: 4px 4px 4px 10px; vertical-align: middle; } /************* #search styles ***************/ #search{ padding: 5px 0px 5px 10px; border-bottom: 1px solid #cccccc; font-size: 90%; } #search form{ margin: 0px; padding: 0px; } #search label{ display: block; margin: 0px; padding: 0px; } /*********** #navBar link styles ***********/ #navBar ul a:link, #navBar ul a:visited {display: block;} #navBar ul {list-style: none; margin: 0; padding: 0;} /* hack to fix IE/Win's broken rendering of block-level anchors in lists */ #navBar li {border-bottom: 1px solid #EEE;} /* fix for browsers that don't need the hack */ html>body #navBar li {border-bottom: none;} /*********** #sectionLinks styles ***********/ #sectionLinks{ position: relative; margin: 0px; padding: 0px; /* border-bottom: 1px solid #006699; */ font-size: 90%; } #sectionLinks h3{ padding: 10px 0px 2px 10px; } #sectionLinks a { display: block; /* border-top: 1px solid #006699; */ padding: 2px 0px 2px 10px; } #sectionLinks a:hover{ /* background-color: #dddddd;*/ } .navigate { overflow: hidden; width: 204px; padding-bottom: 1px; } /**Navigation Menu **/ .navigate ul, .navigate li { list-style: none; margin: 0px 0px!important; padding: 0px 0px!important; line-height: 1.5em; } /**erste Navigationseben**/ .navigate li.current span, .navigate li a, .navigate li a:link, .navigate li a:visited, .navigate li a:hover, .navigate li a:focus, .navigate li a:active { display: block; border: 0; border-bottom: 1px solid #86c2e3; border-top: 1px solid #fff; border-right: 1px solid #86c2e3; width: 100%; text-decoration: none; margin: 0; padding: 5px 5px 5px 15px; font-size: 1.0em; font-weight: bold; } .navigate[class] li.current span, .navigate[class] li a, .navigate[class] li a:link, .navigate[class] li a:visited, .navigate[class] li a:hover, .navigate[class] li a:focus, .navigate[class] li a:active { width: auto; } .navigate li a, .navigate li a:link, .navigate li a:visited, .navigate li a:hover, .navigate li a:focus, .navigate li a:active { background: url(../../Lokale%20Einstellungen/Temporary%20Internet%20Files/Lokale%20Einstellungen/Temporary%20Internet%20Files/Content.IE5/4WPRVLBA/navi_0_0.png) #e4f2f9 no-repeat 0px 0px; padding: 5px 5px 5px 15px; color: #000; font-weight: bold; } .navigate li a:hover, .navigate li a:focus, .navigate li a:active { background: url(../../Lokale%20Einstellungen/Temporary%20Internet%20Files/Lokale%20Einstellungen/Temporary%20Internet%20Files/Content.IE5/4WPRVLBA/navi_0_1.png) #e4f2f9 no-repeat 0px 0px; } .navigate li.current span, .navigate li.current a, .navigate li.current a:link, .navigate li.current a:visited, .navigate li.current a:hover, .navigate li.current a:focus, .navigate li.current a:active { background: url(../../Lokale%20Einstellungen/Temporary%20Internet%20Files/Lokale%20Einstellungen/Temporary%20Internet%20Files/Content.IE5/4WPRVLBA/navi_root_current.png) #EFE9D3 no-repeat 0px 0px; color: #000; } .navigate li.current a.current, .navigate li.current a.current:link, .navigate li.current a.current:visited, .navigate li.current a.current:hover, .navigate li.current a.current:focus, .navigate li.current a.current:active { background: url(../../Lokale%20Einstellungen/Temporary%20Internet%20Files/Lokale%20Einstellungen/Temporary%20Internet%20Files/Content.IE5/4WPRVLBA/navi_root_current.png) #EFE9D3 no-repeat 0px 0px; color: #000; } /*********** .relatedLinks styles ***********/ .relatedLinks{ position: relative; margin: 0px; padding: 0px 0px 10px 10px; font-size: 90%; } .relatedLinks h3{ padding: 10px 0px 2px 0px; } .relatedLinks a:link, .relatedLinks a:visited { display: block; } /************** #advert styles **************/ #advert{ padding: 30px 0px 10px; } #advert img{ display: block; } /************** #headlines styles **************/ #headlines{ margin: 0px; padding: 10px 0px 20px 10px; } #headlines p{ padding: 5px 0px 5px 0px; } /**Footer**/ #footer { clear: both; position: relative; border-top: 4px solid #CCECF4; font-size: 11px; padding: 4px 4px 8px 10px; margin-top: 4px; bottom:0; zoom: 1; } #footer .left { float: left; width: 700px; bottom:0; } #footer .right { float: right; width: 150px; text-align: right; margin-top: -2.3em; zoom: 1; position: relative; z-index: 0; bottom:0; } #footer p { color: #000 !important; padding: 0; margin: 0; bottom:0; } #footer a, #footer a:link, #footer a:visited, #footer a:hover, #footer a:focus, #footer a:active { color: #306479; text-decoration: none; font-weight: bold; } #footer a:hover, #footer a:focus { text-decoration: underline; } #navispalte { font: 1em Verdana, Geneva, Arial, Helvetica, sans-serif; width: 202px; float: left; } Hi everyone, It's been a while since I've opened up a .css file so forgive me. I have a couple of questions about this partiular site. It's a test site I'm workig on... http://www.karenwilliamson.com/joom2/ I would like if possible to fix the footer in a fixed position and not have it rise and fall according to the amount of content on each page. Click some of the random links and you'll see what I mean. Also, while I'm here I can't figure out how to adjust the spacing in the main content area to be more uniform between IE7 and FF. It seems to my novice eyes that it should be controlled by Code: table.contentpaneopen Maybe I'm being too nitpicky but I'm sure there is a way to make it more uniform among the two browsers? Thanks for any input Rob Hello, I have been working on this for over 2 days and learning plenty in the process. Yet, I have come to a roadblock. I need the footer, which is outside the main container, to extend to the height of the page. The problem is that the page height changes with each page, and will change in the future, as the info for the pages will be pulled from a database. Please have a look at the footer on my site and tell me what might be a good solution. Here's the site: http://www.caillouette.com/FriendsCSS2/index.php thanks -Sean 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 - Greetings, My example page is located here. As you can see I'm having issues on the bottom of the page. I believe I know what is causing the issue, just not how to fix it. I need it only to work in IE and at a resolution of 1024x768 and higher. I have the footer outside of the other wrappers which are set to 100% height. But wrapper_04, which does not include the header, seems to be extending past the footer the same height as the header because it is trying to be the same height as the other parent wrapper elements? Any thoughts on how I can fix this using just CSS? I do have some js which sets the height of the content_wrapper so the background image extends the full height (yellow line image on the right of the page), but it should not be affecting the rest of the page. Thanks in advance for any assistance! Hi I want to make a three column page. I will divide this page into three portions later with php. header, footer and mainbody and will use them as includes in a single page. for now I am making the home page. I want the footer area (div) to push downward automatically according to the contents of the main area. But it is not working. I placed <br> to do it manually but it is not the desired way. here is my CSS code Code: /* CSS Document */
div.head {
width: 1000px;
text-align: center;
}
div.container {
width: 1000px;
border: 0px;
position: absolute;
left: 11%;
}
div.lef {
width: 150px;
float:left;
/* border: 1px solid green;*/
}
div.cen {
width: 500px;
float:left;
/* border: 1px solid red; */
text-align: left;
}
div.rig {
width: 150px;
float:left;
/*border: 1px solid black;*/
}
div.bot {
width: 800px;
height: 30px;
font-size: 14px;
font-weight: bold;
text-align: center;
background-color: #996633;
color: white;
position: absolute;
left: 10%;
}
p.bodytxt {
font-size: 12px;
font-family: verdana;
color: black;
line-height: 150%;
margin: 2px 2px 2px 2px;
}
and here is the html code Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="/styling.css" />
</head>
<body>
<div class="head"> <img class="head" src="/images/header.gif">
</div>
<div class="container">
<div class="lef">left column text goes here</div>
<div class="cen">
<p class="bodytxt"> center column text goes hereasdasdasd as das d asd as
das d as das d asdasdas d asd as da sd as da sd sad asdasdas dasdasdasd
as das das d a sdas dasdasdas dasdasdasdasdasdas dasd asdasdasdasdas dasdasdasdsadasdas
dasdasdasdasdasdas d asd as d asd as d asd as d asd as d asd as dasd asdasdasdasdasdasdasd
das das d a sdas dasdasdas dasdasdasdasdasdas dasd asdasdasdasdas dasdasdasdsadasdas
dasdasdasdasdasdas d asd as d asd as d asd as d asd as d asd as dasd asdasdasdasdasdasdasd
</p>
</div>
<div class="rig">right column text goes here</div>
</div>
<br><br><br><br><br><br><br><br><br><br>
<div class="bot">footer</div>
</body>
</html>
thank you I bought a php template to put my father website together with. I had worked with html and asp and had thrown together sites quickly in the past, so I didnt think much of it... But php turns out to be a whole new animal I guess, or maybe im missing something simply in the css. I have spent the last 4 hours looking online and asking friends, and I am no closer. I see plenty of forums with footer issues here, but none have given me any clues. Here is the site(im new, i cant post URLs): http://aeroprepare.com You will note that the bottom of the page has a large gray gap, between the footer content and the copywrite area. I simply want to remove this gap, shorten it, so the footer fits closer to the bottom of the page, like the copywrite section does. Sounds simple, but its driving me NUTS. here is my CSS: Code: /*** CSS Resets ***/
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 14px;
font-family: inherit;
vertical-align: baseline;
}ul {list-style: none;}table { border-collapse: separate; border-spacing: 0;} caption, th, td {text-align: left; font-weight: normal;}blockquote:before, blockquote:after,q:before, q:after {content: "";} blockquote, q {quotes: "" "";}
/*** Start Site CSS ***********************************************************/
html, body {height: 100%;}
body {
font-family: Arial, Helvetica, Verdana, Times New Roman, sans-serif;
font-size:12px;
background-color:#fff;
}
#hm_background, #background {
min-height: 100%;
height: auto !important;
height: 100%;
margin-bottom:-340px;
}
#hm_background {
background-repeat:repeat-x;
background-position:top;
}
#background {
background-repeat:repeat-x;
background-position:top;
}
.clear {
clear:both;
}
.clear-border {
margin:15px 0 15px 0;
clear:both;
border:1px solid #dbdbdb;
}
#wrapper {
margin:0 auto;
width:960px;
}
#logo {
float:left;
margin:27px 0 0 0;
width:284px;
height:67px;
}
#logo_home {
float:left;
margin:32px 0 0 45px;
width:212px;
height:52px;
}
/*** navigation ***************************************************************/
#nav_wrap {
position:relative;
margin:25px 0 0 460px;
padding:12px 0 0 15px;
background-repeat:no-repeat;
width:464px;
height:52px;
z-index:99;
}
#nav {
list-style-type:none;
margin:0;
padding:0;
}
#nav li {
float:left;
margin:0;
padding:0;
}
#nav li a {
position: relative;
float: left;
margin: 0 11px 0 0;
padding: 0 17px 0 0;
height: 37px;
text-decoration: none;
color: #fff;
font-size:12px;
z-index: 2;
}
#nav li a span {
display: block;
line-height: 21px;
padding: 3px 0 5px 20px;
color: #fff;
}
#nav_hover {
position: absolute;
float: left;
margin: 0 11px 0 0;
padding: 0 17px 0 0;
height: 28px;
z-index: 1;
}
#nav_hover span {
display: block;
padding: 3px 0 5px 20px;
line-height: 21px;
height: 28px;
z-index: 1;
}
/*** Dropdown ***/
#nav ul {
position:absolute;
display:none;
padding:0 0 12px 0;
width:142px;
top:48px;
list-style-type:none;
z-index:99;
}
#nav li ul li {
margin:0;
padding:0;
}
#nav li ul a, #nav li ul a:visited {
float:left;
padding:4px 0 0 12px;
width:130px;
height:20px;
font-weight:normal;
}
#nav ul ul{
top:auto;
}
#nav li ul ul {
left:142px;
margin:0;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul{
display:none;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul{
display:block;
}
/*** footer *******************************************************************/
#footer_wrap, .push {
height: 360px;
clear: both;
}
#footer_wrap {
background-color:#e5e5e5; /*e5e5e5*/
border-top:1px solid #B3BCBF;
}
#footer {
margin:0 auto;
padding:12px 0 0 40px;
width:920px;
}
#footer a {
text-decoration:none;
}
.foot_clm_block {
float:left;
margin:25px 15px 15px 0;
width:165px;
}
.foot_clm_heading {
margin:0 0 5px 0;
font-size:14px;
text-transform:uppercase;
color:#fff;
}
.foot_clm_block ul {
margin:0;
padding:0;
list-style-type:none;
}
.foot_clm_block ul li {
color:#7F7F7F;
}
.foot_clm_block ul li a {
display:block;
padding:5px 0 0 5px;
height:20px;
color:#fff;
border-bottom:1px solid #CDCDCF;
font-size:12px;
}
.foot_clm_block ul li a:hover {
color:#4E4E4E;
}
#search_form_footer {
margin:5px 0 10px 1px;
height:24px;
border:1px solid #fff;
background-color:#fff;
}
#search_footer {
float:left;
padding:3px;
width:120px;
border:none;
}
#social_icons {
margin:5px 0 0 6px;
}
#social_icons a {
margin:0 4px 0 0;
}
#copyright_wrap {
border-top:1px solid #f1f1f1;
height:40px;
}
#copyright_txt {
margin:0 auto;
margin-top:10px;
width:880px;
color:#fff;
font-size:11px;
}
#copyright_txt a {
color:#fff;
font-size:11px;
}
/*** home page ****************************************************************/
#hm_header {
height:139px;
background-repeat:no-repeat;
background-position:top center;
padding-top: 1px;
padding-bottom: 1px;
}
#slider {
margin:0 0 0 23px;
padding:10px 0 0 33px;
background-repeat:no-repeat;
width:881px;
height:298px;
}
#slider_imgs img {
display:none;
}
#news {
margin:15px 0 10px 25px;
background-image:url(../images/news_back.jpg);
background-repeat:no-repeat;
width:911px;
height:65px;
overflow:auto; /* fixes margin collapsing */
}
#news_icon {
float:left;
margin:17px 0 0 17px;
background-image:url(../images/airplaneminilogo.png);
background-repeat:no-repeat;
width:55px;
height:41px;
}
#news_text {
margin:20px 0 0 15px;
float:left;
font-size:20px;
text-align:left;
width:800px;
}
#news_text ul {
margin:0;
padding:0;
list-style-type:none;
}
#news_text a {
text-decoration:none;
}
#three_columns {
margin:0 0 0 25px;
background-image:url(../images/3column_back.jpg);
background-repeat:no-repeat;
width:910px;
}
.three_clm_block {
float:left;
margin:25px 0 45px 0;
padding:0 25px;
width:250px;
height:200px;
background-image:url(../images/3column_border.jpg);
background-repeat:no-repeat;
background-position:top left;
}
.three_clm_circle {
float:left;
padding:6px 0 0 0;
width:32px;
height:26px;
background-repeat:no-repeat;
background-position:top left;
color:#fff;
text-align:center;
font-size:16px;
font-weight:bold;
}
.three_clm_title a {
float:left;
padding:5px 0 0 8px;
font-size:20px;
text-decoration:none;
}
.three_clm_text {
padding-top:7px;
clear:both;
line-height:19px;
}
/*** portfolio ****************************************************************/
#port_title h1 {
margin:15px 0;
font-size:34px;
font-weight:normal;
}
#port_wrap {
padding:32px 0 0 0;
}
.port_block {
float:left;
margin:0 22px 22px 0;
padding:7px;
background-color:#d6d9da;
border:1px solid #a7a9a9;
width:426px;
height:346px;
}
.port_img {
position: relative;
border:1px solid #fff;
background-color:#fff;
width:425px;
height:324px;
}
.port_txt {
position: absolute;
top: 110px;
left: 0;
padding:2px 0 0 10px;
width:240px;
height:18px;
background-color:#fff;
}
.port_mag_img {
position: absolute;
top: 10px;
left: 81px;
}
.port_txt a {
font-weight:bold;
text-decoration:none;
}
.port_img img {
border:none;
}
/*** blog / static page *******************************************************/
#header {
height:139px;
background-repeat:no-repeat;
background-position:top center;
padding-top: 1px;
padding-bottom: 1px;
}
#breadcrumb {
padding:15px 0 0 0;
height:25px;
color:#fff;
font-weight:bold;
}
#breadcrumb a {
color:#fff;
font-weight:bold;
text-decoration:none;
}
/*** sidebar ***/
#sidebar {
float:left;
margin:25px 0 0 0;
width:220px;
}
.sidebar_block {
margin:0 0 35px 0;
}
.sidebar_heading {
font-size:18px;
border-bottom:5px solid #d6d9da;
color:#23353e;
}
#sidebar ul {
margin:0;
padding:0;
list-style-type:none;
}
#sidebar ul li a {
display:block;
padding:4px 0 0 30px;
height:21px;
border-bottom:1px solid #d6d9da;
text-decoration:none;
color:#B3BCBF;
background-image:url(../images/bullet_arrow.jpg);
background-repeat:no-repeat;
}
#sidebar ul li ul li a {
padding:4px 0 0 54px;
background-image:url(../images/bullet_arrow_sub.jpg);
background-repeat:no-repeat;
}
#sidebar a:hover {
color:#959D9F;
}
#search_form {
margin:5px 0 0 1px;
width:216px;
height:24px;
border:1px solid #d6d9da;
background-color:#fff;
}
#search {
float:left;
padding:3px;
width:180px;
border:none;
}
.search_btn {
float:right;
margin:1px 0 0 0;
background-image:url(../images/search_icon.jpg);
background-repeat:no-repeat;
background-position:center;
border:none;
background-color:transparent;
cursor:pointer;
width:25px;
height:22px;
}
/*** content ***/
#content {
float:left;
margin:25px 0 0 55px;
width:645px;
}
#contentblog {
float:left;
margin:25px 0 0 55px;
width:100%;
}
#content_full {
float:left;
margin:25px 0 0 0;
}
.post_block {
margin: 0 0 20px 0;
padding: 0 0 20px 0;
border-bottom:1px solid #d6d9da;
}
#page_block {
margin: 0 0 20px 0;
padding: 0 0 20px 0;
}
#page_title h1 {
margin:0 0 5px 0;
padding:0;
font-size:34px;
font-weight:normal;
}
#content h1 a {
font-size:34px;
font-weight:normal;
}
.post_meta {
height:20px;
font-weight:bold;
color:#929393;
}
.post_meta a {
text-decoration:none;
font-weight:bold;
color:#929393;
}
.post_img {
padding:7px 0;
margin:10px 0;
border-top:1px solid #d6d9da;
border-bottom:1px solid #d6d9da;
}
.post_txt {
line-height:20px;
color:#23353e;
}
.post_txt img {
padding:3px;
border:1px solid #b3b3b3;
}
.onethird {
padding: 0 0 0 15px;
float:left;
width:30%;
}
.onehalf {
padding: 0 0 0 15px;
float:left;
width:47%;
}
.twothirds {
padding: 0 0 0 15px;
float:left;
width:64%;
}
.post_readmore {
margin:5px 0 0 0;
}
.post_readmore a {
text-decoration:none;
font-weight:bold;
color:#23353e;
}
#pagination {
margin:15px 0;
height:32px;
}
#pagination ul {
margin:0;
padding:0;
list-style-type:none;
}
#pagination ul li { float:left;}
#pagination ul li a {
float:left;
margin:0 5px 0 0;
padding:8px 0;
width:31px;
height:23px;
color:#fff;
text-decoration:none;
text-align:center;
font-weight:bold;
background-image:url(../images/pagination.jpg);
background-repeat:no-repeat;
}
#pagination ul li a.active, #pagination ul li a:hover {
background-image:url(../images/pagination_active.jpg);
background-repeat:no-repeat;
}
/*** comments *****************************************************************/
#comments {
margin:0 0 40px 0;
}
.comm_block {
padding:25px 0 25px 0;
border-bottom:1px solid #e7e7e7;
}
.comm_avatar {
float:left;
padding:3px;
width:50px;
height:50px;
background-color:#fff;
border:1px solid #e7e7e7;
}
.comm_meta {
float:left;
margin: 0 0 0 20px;
width:550px;
}
.comm_author {
font-size:16px;
}
.comm_text {
float:left;
margin: 0 0 0 20px;
width:564px;
line-height:18px;
}
.comm_even {
background-color:#fff;
}
#comm_form {
margin:20px 0;
}
/*** contact ******************************************************************/
#contact_txt {}
#google_map {
margin:5px 0;
border:1px solid #b3b3b3;
}
#contact_form {
margin:20px 0;
}
.err {
color:#BF2323;
}
/*** forms ********************************************************************/
.form_tb {
padding:3px;
width:400px;
height:18px;
border:1px solid #b3b3b3;
color:#254A59;
}
.form_ta {
padding:3px;
width:639px;
height:150px;
border:1px solid #b3b3b3;
font-family:Arial, Helvetica, Verdana, sans-serif;
font-size:12px;
color:#254A59;
}
.form_btn {
padding:5px 7px;
font-family:Arial, Helvetica, Verdana, sans-serif;
font-size:12px;
color:#fff;
border:none;
background-color:#fff;
cursor:pointer;
background-repeat:no-repeat;
width:114px;
height:33px;
}
/*** global *******************************************************************/
ul {
padding:0 0 0 30px;
list-style-type:square;
}
ol {
padding:0 0 0 30px;
}
a {
color:#03181F;
}
p {
margin:0 0 10px 0;
}
h1 {
margin:0 0 15px 0;
font-size:34px;
font-weight:normal;
}
h1 a {
text-decoration:none;
}
h2 {
margin:0 0 7px 0;
font-size:24px;
font-weight:normal;
}
h3 {
margin:0 0 5px 0;
font-size:18px;
font-weight:normal;
}
h4 {
margin:0 0 5px 0;
font-size:16px;
font-weight:bold;
}
h5 {
margin:0 0 3px 0;
font-size:14px;
font-weight:bold;
}
blockquote {
margin:20px 0 20px 30px;
padding:0 10px;
border-left:5px solid #dbdbdb;
}
strong {
font-weight:bold;
}
.hidden {
display:none;
}
.noborder {
border:none;
}
.noimage {
background-image:none;
}
.aligncenter, div.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}
.alignleft {
float: left;
}
.alignright {
float: right;
}
view page source to see the home page. I dont have the footer in an incorrect div (that i can see) Please can someone far smarter than me see whats going on here. I have taken the footer apart, edited the style sheet a 100 different gut-shot ways, tried to recreate the page, ripped apart the wrapper and other sections... If I touch the height on the footer push, the whole footer moves to the center of the page... If I try to move around it, I get dead space between the end of the text and the beginning of the footer.... PLEASE someone show me what im missing, ive lost hair over this, and my laptop is about to find out if its impact resistant. I have footerStickAlt design for my page. Been trying to implement a new page with a big div (gonna be flash video) but it's causing the footer to bounce from bottom of page to middle of page where the big div seems to be ignored. The thing that is really aggrivating is that if you load ctrl-refresh page again, it goes back to bottom, then ctrl-refresh load page again it pops up to wrong spot. Inconsistent like that. Do it 20 times and it pops up like half the time? But it gets stranger. When the footer pops up (those page loads when IE7 is ignoring the big div height) just adjusting the size of window causes the footer to go back to bottom where it belongs. This type of buggy inconsistent behavior is not occurring in Firefox. It's really aggravating me. I've seen this before on my main index page where I used to have a div (an advertisement) which was also confusing the IE7 just as it is now. So I removed that div on index page to evade the issue. But I want to get to root cause now and fix the situation. I'm not well versed in CSS, especially not the strange bugs like this that only occur on IE7 and only on first page load. Seems it's something to do with IE7 not interpreting the page at load, but it understands when I modify the window size it fixes itself. Please assist o smart computer gods! 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! Hello, I'm currently in the works of converting an old HTML site of mine into CSS and have run into what seems to be a notorious problem with the page text not pushing the footer down when the text gets to a certain length. Instead the text just covers and hides the footer. I've been trying to remedy this problem for about a week, but to no avail. I've Googled this problem and tried the suggested fixes, but once again have had no such luck. I'm left to believe that every instance is unique. If you view the Style Sheet, I have the 'footerlinks' set at an "Absolute" position because it looks fine on the other pages and I do relize this will have to be changed. As to what else has to be changed I would really appreciate some input as to what I need to do to get the footer to slide down when the text gets lengthy. ------- Here's a link to the page thats having issues with the footer... *** Note: I keep getting an error message saying I can't post URLs on this forum because I have a new user account so below this line is the link to the page I'm having trouble with without the http:// ........ infoheaven.bravepages.com/Testamonials/Testimonials.htm The URL to the STYLE SHEET is located at the top of the page between the "Head" tags of the website source code I provided above. I tried listing my CSS code here, but once again I kept getting the "New user accounts are not permitted to create posts containing URLs" error message. Sorry for the inconvenience.... Dan - I use this css: #clearfooter { /* VERTICALLY ALIGN THE FOOTER TO BOTTOM WHERE REQUIRED */ clear: both; height: 170px; overflow: hidden; } #footerbox { /* BOX FOR THE FOOTER */ height: 170px; width: 759px; margin:0 auto; padding:0; margin-top :-170px; text-align: center; } It puts the footer at the bottom of the page. In IE I can click on the links in that part of the page. In FF I cannot. If I remove the "clearfooter" id then it works in FF although obviously it knackers the page layout...any solution available? 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 |
|||||||