|
CSS - Footer Covers Text
Hey everyone,
I have decided to start back designing websites and so went back to the basics of html and css. So far things are ok except for the footer that I'm trying to get to sit at the bottom of the page. What I have done: So far I've been able to set the footer as fixed so that as I scroll I'll always see the footer. I don't have a problem always seeing my footer, the problem is that it's hiding some of the text when it reaches the bottom. This is what I have so far (and the website is w3c validated and so are the css) my website code: Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Home</title>
<link rel="stylesheet" href="css/shawnlynn.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/layout.css" type="text/css" media="screen">
</head>
<body>
<div class="wrapper">
<div id="header">
<img src="images/headerlynn.png" alt="header for Shawna Lynn">
</div><!-- end of header div-->
<ul id="navlist">
<li><a href="index.html" title="Home">Home</a>|</li>
<li><a href="about.html" title="About me">About Me</a>|</li>
<li><a href="blog.html" title="Blog">Blog</a>|</li>
<li><a href="services.html" title="services">Services</a>|</li>
<li><a href="clients.html" title="Clients">Clients</a>|</li>
<li><a href="contact.html" title="contact me">Contact Me</a></li>
</ul>
<hr>
<div id="maincontent">
<blockquote><h2><img src="images/celebration.png" title="Celebration Time" alt="celebration time image"></h2>
<p class="goldlinep">You have just struck gold! </p>
<p class="goldimage"><img src="images/gold-mine-icon.png" title="gold mine image" alt="gold mine image"></p>
<p class="goldlinep">A Standards-Compliant Website design like this is your personal Goldmine<br> Why not reap the benefits?!</p>
</blockquote>
</div><!--end of maincontent div-->
<div class="push"></div>
</div>
<div id="footer">
<p class="footerp">Copyright 2011- Shawna Lynn Creative Initiatives. Some images may be subject to copyright.</p> <br>
<p><a href="http://validator.w3.org/check?uri=http%3A%2F%2Fwww.lynnfolio.cz.cc/original/" target="_blank"><img src="validation/valid-html401-blue.png" title="valid html" alt="valid html"> </a>
<img src="validation/vcss-blue.gif" title="valid css" alt="valid css"></p>
</div><!--end of footer div-->
</body>
</html>
The general css is: Code:
/**Layout**/
#header{
top:10px;
right: 0px;
left: 200px;
position:absolute;
background-color: #ffffff;
}
#header, #sidebar, #maincontent, #footer{
position: absolute;
}
#maincontent{
top: 245px;
left: 285px;
}
#footer {
bottom:0px;
position:fixed;
width:100%;
background-color: #0000ff;
height:50px;
padding-right:0px;
margin:0;
}
/*Layout */
.footerp{ color: #ffffff;
text-align:center;}
h2 {
font-family: "Trebuchet MS", sans-serif;
font-size: 2em;
}
.goldlinep {
font-family: "Trebuchet MS", sans-serif;
text-align:center;
font-size: 1.25em;
word-spacing: 1pt;
}
.goldimage {
padding-left: 200px;
}
p {
font-family: "Trebuchet MS",sans-serif;
color: #000000;
font-size: .9em;
text-align: justify;
}
blockquote {
text-align: center;
width: 650px;
background-color: #ffffff;
}
li {
font-family: "Trebuchet MS", sans-serif;
}
body {
background-color:#ffffff;
background-repeat: repeat;
min-width: 768px;
max-width: 1280px;
font-size: 12px;
}
#colordiff {
background-color: #9a32cd;
}
.colordiffp {
background-color: #fffacd;
}
/**Navigation**/
#navlist {
padding-top: 200px;
padding-left: 0px;
list-style-type: none;
font-size: 14px;
text-align:center;
}
#navlist li {
display: inline;
font-size: 1.25em;
}
#navlist a{
padding: 3px 15px;
}
#navlist a:link, #navlist a:visited {
color: #00ccff ;
}
#navlist a:hover {
color: #00ffff;
}
/**Navigation**/
/* About Us Page */
#centtable
{
width: 650px;
text-align: justify;
font-family: "Trebuchet MS", Arial, sans-serif;
}
/* About Us Page */
and my second css was specifically done to try and fix my footer: Code:
* {
padding: 0;
}
.wrapper {
min-height: 100%;
height: 100%;
}
.footer, .push {
height: 500px;
}
My second css is a modification of a sticky footer code: Code:
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
height: 142px; /* .push must be the same height as .footer */
}
/*
Sticky Footer by Ryan Fait
http://ryanfait.com/
*/
What I would like to get: The footer across the entire bottom of the screen. (I currently have a 1-2px ugly white space to the left of it) The footer not covering any of the text. I am open to other options for putting in my footer. Sorry this is so long but since I'm new I cannot post direct links as yet Cheers PS other important information: Tested it on Firefox 3.6.x and IE 8 and got the same results/effect Similar TutorialsWhen content exceeds the window size, the fixed footer covers it. The center div has a min-width, the right div covers it when the window is resized to smaller than the min. (Also, center div drops in IE). I have googled these issues and searched the archives. I've tried many different techniques for getting these things in order, and this is the closest I've gotten so far. What I want: 1.A footer that sticks to the bottom of the viewport if there is not enough content AND stays below the container when the container is longer than the viewport. 2. The center div to be liquid with a min-fixed width and the right div to move along the edge of the center div and not cover it when viewport is sized smaller than the center div's min width. Here is a simplified version of the HTML (none of the extra divs that are used to make rounded corners) 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>Troubleshooting</title> <link rel="stylesheet" href="layout8.css" type="text/css" /> <link rel="stylesheet" href="round.css" type="text/css" /> </head> <body> <div id="header"> <div id="masthead"></div> <div id="topnav"><div class="searchbar">Search</div> <div class="homebar"><span>Home </span></div></div> </div> <div id="container"> <div id="left"></div> <div id="right"></div> <div id="content"></div> </div> <div class="clear"> </div> </div> <div id="footer"></div> </body> </html> I think there's too much CSS to post here, but everything can be found at: www. observera. com/troubleshootingpage/index. htm CSS @ layout.css and round.css I appreciate any help you can offer Em Hi, I am at a loss. I have a basic css webpage at websitehosting1.com/Tutorials.html when you go to the tutorials page that I created for my friends, the footer adds white space above it when I add text to the body. I want the left nav right nav and footer to be blue, but I can't figure this out. All help is appreciated. Thanks. E. Hi there, I'm new to CSS, and I have stumbled myself to where I am now, but I have two issues which are causing me problems. You can see the problem he URL http://img.photobucket.com/albums/v227/Fynci/ffsargh.jpg The code I am using is: Code: <html>
<head>
<!-- TemplateBeginEditable name="doctitle" -->
<title>Rack & Ruin records</title>
<!-- TemplateEndEditable -->
<style type="text/css">
<!--
body {
margin: 0px;
padding: 0px;
background-color: #B8C0D1;
text-align: center;
width: 780px;
}
#header {
width: 100%;
}
#leftcol {
float: left;
width: 350px;
height: 500px;
}
#biographyinfo {
font-size: 80%;
text-align: justify;
padding-top: 10px;
}
#rightcol {
float: left;
width: 420px;
height: 500px;
}
#biography {
font-size: large;
color: #000000;
float: left;
width: 300px;
text-align: left;
}
#artistimage {
height: 300px;
width: 300px;
float: left;
padding-bottom: 10px;
}
#content {
float: left;
width: 30px;
height: 500px;
}
#artistname {
font-size: large;
color: #000000;
text-align: left;
padding-bottom: 10px;
}
#footer {
clear: both;
width: 100%;
}
#albumart {
float: left;
height: 100px;
width: 100px;
padding-right: 5px;
}
#artistnews {
font-size: 60%;
text-align: justify;
float: left;
width: 330px;
}
#links {
font-size: large;
color: #000000;
float: left;
width: 300px;
text-align: left;
padding-top: 10px;
}
#artistnewsheader {
font-size: large;
text-align: left;
width: 350px;
padding-top: 10px;
padding-bottom: 10px;
}
#Linksarea {
font-size: 80%;
text-align: justify;
padding-top: 10px;
}
#albmuinfo {
font-size: 60%;
height: 100px;
text-align: left;
width: 350px;
}
#otherheader {
font-size: large;
text-align: left;
width: 350px;
padding-top: 10px;
padding-bottom: 10px;
}
#othertext {
font-size: 60%;
text-align: justify;
float: left;
width: 330px;
}
-->
</style>
<!-- TemplateBeginEditable name="head" --><!-- TemplateEndEditable -->
<link href="../new.css" rel="stylesheet" type="text/css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head>
<body>
<div id="header"><a href="../index.html"><img src="../images/rackandruinlogo.gif" alt="Rack & Ruin records" width="780" height="127" border="0" /></a></div>
<div id="nav">
<ul>
<li><a href="../news.php">News</a></li>
<li><a href="../artists.php">Artists</a></li>
<li><a href="../releasesfull.php">Releases</a></li>
<li><a href="../live.php">Live</a></li>
<li><a href="../links.php">Links</a></li>
<li><a href="../about.php">About</a></li>
<li><a href="../contact.php">Contact</a></li>
<li><a href="http://www.myspace.com/rackandruinrecords" target="_blank">Myspace</a></li>
<li><a href="http://www.rackandruinrecords.com/forum/" target="_blank">Forums</a></li>
<li><a href="http://rsspect.com/rss/rackandruinrssfeed.xml" target="_blank">RSS</a></li>
</ul>
</div>
<div id="artistname"><!-- TemplateBeginEditable name="Name" -->Artist<!-- TemplateEndEditable --></div>
<div id="leftcol">
<div id="artistimage"><!-- TemplateBeginEditable name="Artistimage" --><img src="" alt="Artist" name="artistimage" width="300" height="300" class="imageborder" style="background-color: #B8C0D1"><!-- TemplateEndEditable --></div><div id="biography">Biography
<div id="biographyinfo"><!-- TemplateBeginEditable name="biography" -->Content for id "biographyinfo" Goes Here<!-- TemplateEndEditable --></div>
</div>
<div id="links">Links
<div id="Linksarea"><!-- TemplateBeginEditable name="Linksarea" -->Content for id "Linksarea" Goes Here<!-- TemplateEndEditable --></div>
</div>
</div>
<!--Left section -->
<div id="rightcol">
<div id="albumart"><!-- TemplateBeginEditable name="albumart1" --><img src="" alt="" name="albumart" width="100" height="100" style="background-color: #B8C0D1"><!-- TemplateEndEditable --> </div>
<div id="albmuinfo"><!-- TemplateBeginEditable name="albuminfo" -->Content for id "albuminfo" Goes Here <!-- TemplateEndEditable --></div>
<div id="gap"></div>
<div id="artistnewsheader"><!-- TemplateBeginEditable name="artistnewsheader" -->Artist News<!-- TemplateEndEditable -->
<div id="artistnews"><!-- TemplateBeginEditable name="artistnews" -->Content for id "artistnews" Goes Hee<!-- TemplateEndEditable --></div>
</div>
<div id="gap"></div>
<div id="otherheader"><!-- TemplateBeginEditable name="otherheader" -->Other<!-- TemplateEndEditable -->
<div id="othertext"><!-- TemplateBeginEditable name="othertext" -->Other text<!-- TemplateEndEditable --></div>
</div><!--Right section -->
<div id="gap"></div></div>
<div id="footer"><img src="../images/Base.gif" alt="Creative Commons" width="90" height="33" /><br />
<span class="footertext">(c) 2008/2009 <a href="mailto:dean@rackandruinrecords.com">D.Birkett</a></span></div>
</body>
</html>
and the new.css file is: Code: body {
background-color: #B8C0D1;
text-align: center;
width: 780px;
margin-right: auto;
margin-left: auto;
}
.dateinfotext {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: medium;
color: #000000;
}
a:link {
text-decoration: none;
color: #000000;
}
#nav {
background-color: #B8C0D1;
text-align: center;
padding: 10px;
margin-bottom: 10px;
}
#nav ul {
margin: 0px;
padding: 0px;
}
#nav li {
display: inline;
list-style-type: none;
margin-right: 10px;
margin-left: 10px;
}
#nav a {
color: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
font-size: 85%;
}
#nav a:hover {
color: #FFFFFF;
font-size: 85%;
text-decoration: none;
}
a:visited {
color: #000000;
}
a:hover {
color: #000000;
}
#gap2 {
text-align: center;
padding: 5px;
clear: both;
}
.albuminfo {
font-size: 60%;
}
a:active {
color: #000000;
}
body,td,th {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: medium;
}
.imageborder {
border-top-width: 2px;
border-right-width: 2px;
border-bottom-width: 2px;
border-left-width: 2px;
border-top-style: ridge;
border-right-style: ridge;
border-bottom-style: ridge;
border-left-style: ridge;
}
#gap {
text-align: center;
padding: 5px;
clear: both;
}
#footer {
text-align: right;
float: right;
margin-right: 30px;
margin-top: 30px;
margin-bottom: 150px;
vertical-align: bottom;
}
.texttop {
vertical-align: text-top;
}
a {
color: #000000;
text-decoration: none;
}
.footertext {
font-size: small;
}
.normaltext {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #000000;
text-decoration: none;
}
Any help or advice would be greatly appreciated! 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 - 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 want to display text, image, videolinks in the header and footer images in my html with css.While header and footer images are displayed in the html , the intended text,image,videolinks are not displayed within the image block of header, footer.Will you please advise me the correct code in css, html to embed the text,image,videolinks inside the header and footer images. thanks 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 Hello All, My question regards footers using CSS. How would you have a footer like they do on Linkworth(dot)com so that it fluctuates depending on how long the page is? So if you have a really long scrolling page, the footer is at the bottom and likewise if the page is really short, the footer is also at the bottom, but so there is never any white space below it. I have a similar design I am working on, but when there is too much type, it runs behind the footer image and the footer never moves down accordingly. Thank you for your help - appreciated. Hello. Maybe this would be a better post on CSS. Here is my code. Right now I'm trying to add a set of links at the bottom of the web page. Any thoughts? This has been driving me nuts! Thanks again everyone HTML Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "(URL address blocked: See forum rules)">
<html>
<head>
<title> Attorneys at Law, New York Lawyer</title>
<meta name="" content="">
<META NAME="Generator" CONTENT="Microsoft FrontPage 5.0">
<meta name="KeyWords" content="HTML">
<link rel="stylesheet" type="text/css" href="index.css" />
<script src="index.js">
</script>
</head>
<body>
<div id="mainContainer">
<div id="topBar"><img src="webbanner.jpg" width="760" height="100">
<!--#include file="left_bar.shtml" -->
<!-- Main Content-->
<div id="mainContent">
<!-- Google Search-->
<form action="" id="cse-search-box">
<div align="right">
<input type="hidden" name="cx" value="013298611985327428493:xedrvpp2ns4" />
<input type="hidden" name="ie" value="UTF-8" />
<input type="text" name="q" size="31" />
<input type="submit" name="sa" value="Search" />
</div>
</form>
<script type="text/javascript" src="(URL address blocked: See forum rules)=cse-search-box&lang=en"></script>
<!-- BreadCrumb Nav-->
<div id="navBreadCrumb">
<a href="(URL address blocked: See forum rules)">Home</a>
<img src="breadcrumb_arrow.png" width="8" height="5" />
<a href="">Areas of Practice</a>
<img src="breadcrumb_arrow.png" width="8" height="5" />
<a href=""> Real Estate</a>
<img src="breadcrumb_arrow.png" width="8" height="5" />
<strong>Foreclosure</strong>
</div>
<h1><font face="times new roman, times, serif" size="5">About Our Firm</font> <hr size="2" width="100%" />
<!-- end content --></h1>
<p align="justify"><strong>Lawyer</strong> is a full-service law firm with conveniently located offices in ... and ... Counties. As the largest suburban general practice in ..., we have a skilled team of 31 attorneys, including a physician-attorney, as well as two on-staff Registered Nurses and an extensive support staff to serve our clients.</p>
<p align="justify">Test Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test Testv</p>
<h5>Why should you choose .... at your New York Attorney?</h5>
<p align="justify">Test Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test Testv </p>
<p align="justify">individual circumstances.</p>
<p align="justify">Test Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test Testv</p>
<p align="justify">Test Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestvTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test Testv</p>
<p align="justify">Test Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestvTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestvTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test Testv</p>
<h5>Affiliations</h5>
<p align="justify">Test Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestvvTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test Testv</p>
<p align="justify">Please visit our <a class="con" href="practice_areas.php">
areas of practice</a> for further information on our legal services or <a class="con" href="email.php">
contact us </a>directly for an initial consultation.</p>
</div>
</div>
</div>
</body>
</html>
CSS Code:
html{
height:100%;
}
body{
font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
font-size:0.8em;
margin:0px;
padding:0px;
background-color:#001b4f;
text-align:center;
}
.clear{
clear:both;
}
#mainContent{
padding-right:10px;
padding-left:210px;
padding-bottom:10px;
background-color:#fff;
}
#mainContainer{
width:760px;
text-align:left;
margin:0 auto;
background-color: #fff;
border-left:1px solid #272727;
border-right:1px solid #272727;
padding-bottom:10px;
}
#topBar{
width:760px;
height:100px;
padding-bottom:0px;
padding-top:0px;
border-bottom:2px solid #272727
}
#searchbox{
position:absolute:0,0;
}
#leftMenu{
width:200px;
padding-left:10px;
padding-right:1px;
float:left;
background-color: #fff;
padd
padding-top:25px;
}
#botTable{
display: table-footer-group;
float: top;
bottom: 100%
Hey All, I'm stumped on a problem I'm having with css. Here's the website I'm working on: johnraymondonline.com/mjbfoundation/ It's wordpress and I was working to modify a template. The problem I'm having is with the div for the footer. I've made the width 100% and it's not expanding the full width of the page. I've checked to see if it was encased in a div and it appears as if it isn't. I'm not sure what to do at this point...use absolute positioning? Any help would be appreciated. Thanks in advance!!! Hi, Im trying to make my footer on my page be a certain height of around 150px. BUT I want it to fill to the bottom of the page even when there is less content or the window is made larger or smaller. So basically a sticky footer which fills to the bottom of the page. An example would be the footer he yoast.com My current CSS is he #fwrap { background-color:#BAAE9F; border-top: 1px solid white; border-top-width: 1px; border-top-style: solid; border-top-color: white; width:100%; height:100%; height:145px; } Any help would be appreciated! Thanks So I have this site and I'm not great with css, but this one has to be done all in css I think. And I've got everything working except for the footer. The footer needs to display below the background image which is aligned center top. So if there is plenty of text, the footer should display below all of the text, and if there isn't much text then it should display under the background image. This is how its currently set up: container div header div wrapper div wrapper div left div middle div right div footer div wrapper div the footer has position: absolute; bottom: 0; the container with position: relative puts the footer up the top over the top of the header. With position: absolute it does something else weird, and with neither it puts the footer at the bottom of the screen over the top of the content. the wrapper has relative position, which seems to be why the left, middle and right divs are positioning correctly with their positions as absolute. I think the header just positions correctly since its up top. So it would seem I'd need the footer to be inside another div that is position relatively. I just tried that, but it also positions the footer at the bottom of the screen with more content under it.. I guess what I want really is to have the site split into three horizontal divs, header, main and footer. Then within each of those to center all of the content to only 975px wide. And really its only the main div that needs the background image at all. Can anyone help? Code: http://xbox-free.co.uk/ Can anyone advise as to why my footer is overlapping/floating to the right? Cheers, Neil I've read through a few CSS documents and I can't find any references to this, so excuse me if I've missed something (which I hope I have!). I want to be able to place a footer on my pages and always have it stuck to the bottom of the browser window, regardless of the amount of content in the page. So even if the page were nothing but the header and footer, the footer would be right at the bottom of the page. Can I do this in CSS? Hi all, I'm having troubles with my footer and I hope someone will be able to help: test.katiefleming .ca (remove space) User: wendy Pass: letmein The footer is supposed to span across the bottom forever should the user increase the browser window (this works). However, my text moves as the window is expanded/contracted. I want it to be fixed. No idea how to do this. Any help would be great! I want my footer to have no whitespace under it (like 1px ). I have it set like this: #footer { border-top:1px solid; text-align:right; margin:0px; font-size:smaller; padding-bottom:0px; } and it doesn't work so I'm guessing it is somewhere else in the file but I've tried messing around with most (all?) of the padding / margins and it still doesn't work. How could I do this? What I want is like the footer at http://www.oswd.org . Here is my page: http://dev.donmyersministries.com/ The CSS in on the page itself still. My problem: I want my footer to go at the bottom after the two columns, but I just can't figure it out. I have read several tutorials on keeping the footer at the bottom, but nothing has worked for me. This is my first (good) CSS only layout. Help! Thank you all. later My site, http://www.in-a-dream.org, is having problems with space under the footer. Before it was a lot smaller, and then when I changed the layout somehow it became super stretched. I have no idea what is going on. The layout is not completely finished and I know there are broken images right now which will be changed. For right now the css is: Code:
/* Begin Typography & Colors */
body {
font-size: 70%; /* Resets 1em to 10px */
font-family: Verdana, Arial, Sans-Serif,'Trebuchet MS';
background: #6C6C6C url('images/background.jpg');
color: #333;
text-align: center;
}
#page {
text-align: left;
position:relative;
left:0;
top:-1320px;
width: 894px;
}
#header {
background: #BB2845 url('images/header.jpg') no-repeat bottom center;
position:relative;
left:0;
top:0px;
width: 676px;
}
#topbackground {
background: #C7D67F url('images/topbackground2.jpg');
height: 1300px;
}
#headerimg {
margin: 7px 9px 0;
height: 370px;
width: 676px;
}
#content {
font-size: 1.2em;
background: #FFFFFF url('images/contentbackground.jpg');
position:relative;
left:0;
top:0px;
text-align: left;
padding: 0px 8px 0px 8px;
width: 660px;
}
.narrowcolumn .entry, .widecolumn .entry {
line-height: 1.4em;
}
#footer {
background: #DFE1E3 url('images/footerbackground.jpg');
border-bottom-color: #D2AED2;
border-bottom-width: 3px;
border-bottom-style: solid;
text-align: center
}
h1, h2, h3 {
font-family: 'Trebuchet MS', Verdana, Arial, Sans-Serif;
font-weight: normal;
border-bottom: 1px dashed;
line-height: 1.6em;
}
h1 {
font-size: 4em;
text-align: center;
}
h2 {
font-size: 1.6em;
}
#sidebar h2 {
font-family: 'Trebuchet MS', Verdana, Arial, Sans-Serif;
font-size: 1.2em;
font-weight: bold;
text-align: right;
}
h2, h2 a, h2 a:visited, h3, h3 a, h3 a:visited {
color: #333;
font-family: 'Trebuchet MS', Verdana, Arial, Sans-Serif;
}
h2, h2 a, h2 a:hover, h2 a:visited, h3, h3 a, h3 a:hover, h3 a:visited, #sidebar h2, cite {
text-decoration: none;
font-family: 'Trebuchet MS', Verdana, Arial, Sans-Serif;
}
.entry p a:visited {
color: #E0316C;
}
.commentlist li, #commentform input, #commentform textarea {
font: 0.9em Verdana, Arial, Sans-Serif,'Trebuchet MS';
}
.commentlist li {
font-weight: bold;
}
.commentlist cite, .commentlist cite a {
font-weight: bold;
font-style: normal;
font-size: 1.1em;
}
.commentlist p {
font-weight: normal;
line-height: 1.5em;
text-transform: none;
}
#commentform p {
font-family: Verdana, Arial, Sans-Serif,'Trebuchet MS';
}
.commentmetadata {
font-weight: normal;
}
#sidebar {
font: 1em Verdana, Arial, Sans-Serif,'Trebuchet MS';
background: #FFFFFF url('images/sidebarbackground.jpg');
}
small, #sidebar ul ul li, #sidebar ul ol li, .nocomments, .postmetadata, blockquote, strike {
color: #777;
}
code {
font: 1.1em Verdana, Arial, Sans-Serif,'Trebuchet MS';
}
a {
color: #E03164;
font-weight: bold;
text-decoration: none;
font-family: Verdana, Arial, Sans-Serif, 'Trebuchet MS';
}
a:hover {
color: #FFFFFF;
font-weight: bold;
text-decoration: none;
}
a:visited:hover {
color: #FFFFFF;
font-weight: bold;
text-decoration: none;
}
.images {
margin: 0px 12px 0 0;
padding: 10px;
background-color: #E6E6E6;
border-bottom: 1px solid #CBCBCB;
border-right: 1px solid #CBCBCB;
}
.images:hover {
margin: 0px 12px 0 0;
padding: 10px;
background-color: #D6D6D6;
border-bottom: 1px solid #D6D6D6;
border-right: 1px solid #D6D6D6;
}
.sideimages {
margin: 0px 0px 0 0;
padding: 5px;
background-color: #E6E6E6;
border-bottom: 1px solid #CBCBCB;
border-right: 1px solid #CBCBCB;
}
.sideimages:hover {
margin: 0px 0px 0 0;
padding: 5px;
background-color: #E2C1A2;
border-bottom: 1px solid #E2C1A2;
border-right: 1px solid #E2C1A2;
}
.images2 {
margin: 0px 6px 0 0;
padding: 5px;
background-color: #E6E6E6;
border-bottom: 1px solid #CBCBCB;
border-right: 1px solid #CBCBCB;
}
.images2:hover {
margin: 0px 6px 0 0;
padding: 5px;
background-color: #D6D6D6;
border-bottom: 1px solid #D6D6D6;
border-right: 1px solid #D6D6D6;
}
/* End Typography & Colors */
/* Begin Structure */
body {
margin: 0 0 20px 0;
padding: 0;
}
#page {
background-color:transparent;
margin: 20px auto;
padding: 0;
width: 894px;
}
#header {
background-color: #73a0c5;
margin: 0 0 0 1px;
padding: 0;
height: 370px;
width: 676px;
}
#headerimg {
margin: 0;
height: 370px;
width: 100%;
}
.narrowcolumn {
float: left;
padding: 0px 0px;
margin: 0px 0px 0px 1px;
width: 894px;
}
#footer {
clear: both;
padding: 8px 8px 8px 8px;
width: 660px;
margin: 0px 1px;
height: 142px;
font-family: Verdana, Arial, Sans-Serif,'Trebuchet MS';
color: #FFFFFF;
}
/* End Structure */
/* Begin Headers */
h1 {
padding-top: 70px;
margin: 0;
}
h2 {
margin: 15px 0 0;
}
#sidebar h2 {
margin: 5px 0 0;
padding: 0;
}
/* End Headers */
/* Begin Images */
p img {
padding: 0;
max-width: 100%;
}
img.centered {
display: block;
margin-left: auto;
margin-right: auto;
}
img.alignright {
padding: 4px;
margin: 0 0 2px 7px;
display: inline;
}
img.alignleft {
padding: 4px;
margin: 0 7px 2px 0;
display: inline;
}
.alignright {
float: right;
}
.alignleft {
float: left
}
/* End Images */
/* Begin Lists */
html>body .entry ul {
margin-left: 0px;
padding: 0 0 0 30px;
list-style: none;
padding-left: 10px;
text-indent: -10px;
}
html>body .entry li {
margin: 7px 0 8px 10px;
}
.entry ul li:before, #sidebar ul ul li:before {
content: "�BB �20";
}
#sidebar ul, #sidebar ul ol {
margin: 0;
padding: 0;
}
#sidebar ul li {
list-style-type: none;
list-style-image: none;
margin-bottom: 15px;
}
/* End Entry Lists */
/* Begin Form Elements */
#commentform input {
width: 170px;
padding: 2px;
margin: 5px 5px 1px 3px;
}
#commentform textarea {
width: 80%;
padding: 2px 2px 0 0;
margin: 5px 5px 1px 3px;
}
/* End Form Elements */
/* Begin Comments*/
.alt {
margin: 0;
padding: 10px;
}
.commentlist li {
margin: 15px 0 3px;
padding: 5px 10px 3px;
list-style: none;
}
#commentform p {
margin: 5px 0;
}
/* End Comments */
/* Begin Sidebar */
#sidebar
{ margin-top: -2px;
margin-left: 677px;
padding: 0px 9px 8px 8px;
width: 199px;
text-align: justify;
border-bottom-width: 2px;
border-bottom-color: #769BD2;
border-bottom-style: solid;
border-top-width: 2px;
border-top-color: #769BD2;
border-top-style: solid;
}
/* End Sidebar */
/* Begin Various Tags & Classes */
blockquote {
margin: 15px 30px 0 10px;
padding-left: 20px;
border-left: 5px solid #ddd;
}
blockquote cite {
margin: 5px 0 0;
display: block;
}
.center {
text-align: center;
}
hr {
display: none;
}
a img {
border: none;
}
/* End Various Tags & Classes*/
Also, how do I get my footer to stick to the content bar no matter how long or short it is so that it doesn't hang below the sidebar when the content area is shorter than the sidebar? I have a css file which looks good enough in internet explorer 6 but when i check it in firefox the footer box goes to the top of the page and the footer links go to the right column box. Where am I going wrong with this? Can anyone please point me in teh right direction please? Here is the css:- Code: body {
background-color: #4A4237;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-align: center;
background-image:url(../../../My Pictures/page_background.gif);
}
* {
margin: 0px;
padding: 0px;
}
html {height:100%; margin-bottom:1px;}
#wrapper {
width: 700px;
margin-right: auto;
margin-left: auto;
background-repeat: repeat-y;
text-align: left;
background-color: #FFFFFF;
}
#nav {
background-color: #775d42;
padding-top: 10px;
padding-bottom: 5px;
padding-left: 15px;
}
#navlist li
{
display: inline;
list-style-type: none;
padding-right: 20px;
text-transform: capitalize;
}
#navlist a {
text-decoration: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-size: 15px;
font-weight: bolder;
}
#navlist a:hover {
color: #AF9981;
}
#col1 {
float: left;
width: 500px;
}
#col2 {
float: left;
width: 200px;
}
#col1content p {
margin-bottom: 10px;
color: #666666;
font-size: 12px;
line-height: 140%;
text-align: justify;
}
#col1content {
padding: 0px 15px 15px;
}
.footer {
BORDER-TOP: #a4d0ed 2px solid; FONT-SIZE: 10px; PADDING-BOTTOM: 20px; WIDTH: 700px; COLOR: #707070; PADDING-TOP: 10px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; BACKGROUND-COLOR: #333333; TEXT-ALIGN: center; height: 60px;
}
.footer A:link {
COLOR: #9ebd18; TEXT-DECORATION: none
}
.footer A:visited {
COLOR: #9ebd18; TEXT-DECORATION: none
}
.footer A:hover {
COLOR: #a5cfeb; TEXT-DECORATION: underline
}
.footer A:hover {
COLOR: #a5cfeb; TEXT-DECORATION: underline
}
#col2content {
padding: 15px;
text-align: center;
}
.imageborder {
padding: 5px;
border: 1px solid #3A4A14;
background-color: #F2F3F4;
}
.subhead {
font-size: 11px;
color: #78442C;
margin-top: 5px;
margin-bottom: 5px;
}
.sidebar {
margin-bottom: 10px;
color: #666666;
font-size: 10px;
line-height: 140%;
}
h1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 36px;
color: #DAD6CF;
padding-top: 10px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 15px;
}
h2 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 20px;
color: #B4AA9E;
padding-top: 10px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 15px;
}
h3 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 20px;
color: #B4AA9E;
padding-bottom: 10px;
padding-top: 5px;
}
#footer p {
color: #EEEBE8;
font-size: 9px;
padding-top: 2px;
padding-bottom: 3px;
padding-left: 15px;
}
a:link {
color:#0059b4;
text-decoration: none;
}
a:visited {
color:#0059b4;
text-decoration: none;
}
a:hover {
color:#0059b4;
text-decoration: underline;
}
a:active { color:#0059b4;}
If anyone can help me it would be very much appreciated as i am absolutely puzzled. I am not sure if i have put something wrong in the footer or if it is the wrapper. Thanks in advance |
|||||||