|
CSS - Css Footer Moves Down With Text
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. Similar TutorialsI fixed this issue ages ago on another template and now I can't remember what sorted it. My footer sits at the bottom (or drops down if the page is longer). When the page is maximised it looks fine but when the browser (IE) is not maximised it moves up 1px and you can see the background behind it. Any ideas? Thanks. 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 There.. I am still learning CSS/Xhtml so please be patient and understanding, . Anyway, I am making a site for my business and wanted to try some new idea. Everything looks good except for my navigation bar in IE. Whenever I change resolution the navigation bar moves out of position and I have to refresh to get it to snap into place. In Firefox and Chrome I do not have this issue. I have been googling trying to find the solution but have come up empty. Could someone look at my code and tell me when I did wrong so I don't make the same mistake again? Thanks for your help. Here is the CSS: <style type="text/css"> <!-- #html, body { top: 0px; right: 0px; bottom: 0px; left: 0px; width:920px; height: 100%; background: url(desk.jpg) white center no-repeat; background-repeat:no-repeat; margin: 0 auto; text-align: center; font-family: Verdana, Helvetica, sans-serif; } #container { width: 900px; height:840px; background-image: url(bg1.png); margin: 0 auto; text-align: left; } #mainContent { padding: 3px 60px; margin-top: 0px ; } #text { padding: 0; margin-left: 35px; text-align: center; } #navigation { float:right; display:block; width: 400px; margin-top: 15px ; font-family:Trebuchet MS, Helvetica, sans-serif; overflow:hidden; } #navigation ul { float:left; list-style:none; margin:0; padding:0; position:relative; left:50%; text-align:center; } #navigation ul li { display:block; float:left; list-style:none; margin:0; padding:0; position:relative; right:50%; } #navigation ul li a { display:block; margin:0; padding:.4em .8em; color:#000; text-decoration:none; line-height:1.3em; } #navigation ul li a span { display:block; } #navigation ul li.active a { color: #fff; font-weight:bold; } #navigation ul li a:hover { color: #fff; font-weight: bold; } .guy { float: right; margin-top: -70px; } .yell { float: left; margin-top: 20px; padding-bottom: 0px; margin-right: 30px; margin-left: 20px; } .second { margin-top:45px; } #footer { font-size: 11px; margin-bottom: 10px; } --> 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 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 - 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'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 have strange problem with IE 8 where an element is incorrectly placed when i open an Iframe, but if the iFrame is closed and reopened the element in question is correctly placed. I don' know if this is a code problem or if it's an IE 8 issue?? i see i cannot post a url. any help without seeing the problem? Here is the code snippet from the iframe: Code: <div style="margin: 0px;" id="votes"> <ul style="margin: 0px;" id="xvotes-0" class="star-rating-noh"> <li id="xvote-0" style="width: 81.25px;" class="current-rating"></> <span id="mnmc-0"> <li class="one-star-noh"></li> <li class="two-stars-noh"></li> <li class="three-stars-noh"></li> <li class="four-stars-noh"></li> <li class="five-stars-noh"></li> </li> </ul> </div> I've been adding local styles to try and zero any potential problems. i can post all css styles if noone has any ideas. Any help would be much appreciated. Thanks. Hey, I know this is my first post here and it's code support, but this forum's been recommended to me, so here goes: Right, so I want two little 'mini buttons' that when hovered over, they will expand. I have the concept pretty much figured out; I have a div called 'logo' that everything header-side goes in, I have a div called 'minibuttons' (outlined in blue on the screenshot), and, a div called 'login' which is outlined in green. Screenshot: And when minibuttons is hovered over: But as you can see, it moves the login div too. Appropriate CSS: Code: div.logo
{
background-image: url("/images/logo.gif");
border: solid 1px #808080;
border-bottom: none;
border-top: none;
height: 85px;
margin-left: auto;
margin-right: auto;
width: 775px
}
div.login
{
border: solid 1px #00ff00;
height: 75px;
left: 625px;
position: relative;
top: -18px;
width: 145px
}
div.minibuttons
{
border: solid 1px #0000ff;
left: 570px;
position: relative;
top: 70px;
width: 48px
}
div.minibuttons:hover
{
left: 570px;
position: relative;
top: 1px;
width: 48px
}
Appropriate HTML: Code: <div class="logo"> <div class="minibuttons"> <a href="http://www.conquerhosting.com"><img src="images/mini/hosting2.gif" alt="H" id="hosting2" onmouseover="over(8)" onmouseout="out(8)" /></a> <a href="http://www.conquerdesigning.com"><img src="images/mini/designing.gif" alt="D" id="designing" onmouseover="over(9)" onmouseout="out(9)" /></a> </div> <div class="login"> <form id="login" method="post" action="http://<?=$_SERVER["HTTP_HOST"]?>:2082/login" onsubmit="disable()"> <fieldset class="login"> <input type="text" name="user" value="username" class="login" onfocus="clearbox(this)" /><br /> <input type="password" name="pass" value="password" class="login" onfocus="clearbox(this)" /><br /> <select class="service" name="service"> <option value="2082">cPanel</option> </select> <input type="submit" name="login" value="Login" class="button" /> </fieldset> </form> </div> </div> Appropriate JS: Code: if (document.images)
{
var flipped = new Array();
for(i=0; i< inames.length; i++)
{
flipped[i] = new Image();
if(i <= 7)
flipped[i].src = "/images/roll/"+inames[i]+".gif";
if(i > 7 && i <= 9)
flipped[i].src = "/images/full/"+inames[i]+".gif";
}
}
function over(num)
{
if(document.images)
{
revert[num] = document.images[inames[num]].src;
document.images[inames[num]].src = flipped[num].src;
}
}
function out(num)
{
if(document.images)
document.images[inames[num]].src = revert[num];
}
Any ideas people? Thanks, Danny. I want products listed horizontally first, then move to next line if there is to many. But instead, each product listed on a new line. http://www.refinethetaste.com/html/default.asp?Section=products&CATEGORYID=4 PHP Code: /* products.css */ #products { float: left; } #products .productbox { background-color: #ececec; width: 150px; padding: 10px; margin-top: 10px; } #products .productfooter { background: url(../images/arrow.gif) 20px 0 no-repeat; padding-left: 58px; margin-bottom: 10px;} #products img#product { width:150px; height:150px; border: 0px; } 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 I have a table with 5 columns. I only want the table to cross about 70% of the screen. Whenever I try to re-size it either via css or just 'width = 70%' the table stays the same width and just jumps towards the right of the page. It doesn't matter if I put a width on my body, a div wrapper, or the table.. same results. I've never had these resizing issues before but I admit i haven't coded anything in 6 months Thanks for any help. **Edit** Oh, I forgot to mention the table is initially wider than the screen and its seems to be staying that wide because each column will stay as wide as it's longest entry. Hey, as always it seems to work normal with FF. But IE starts moving images when you go over it. link: http://www.net-force.com/hotest/a1.html any suggestions how to fix it so it displays properly in IE? thx! I swear, its just one of those days. I'm pretty good with CSS/HTML, but I had not touch it in a while. I sat down, and for the life of me I can solve even the simple problems... I know I solved this a buch of times, but now I cant remember how, looking back on my old code/sites dosent tell me much. So I have a div in the header. When I put margin-top (org just margin: x 0 0 0;) the whole page moves down because of the margin. Its like child div is influencing parrent div. I tried positioning every parrent div to relative but no luck... I cant get this child to behave. I know this is an easy question, I'm just not myself today. Hi, I have spend 2 days trying to figure out why this happens, and i just cant figure it out... My links in my main menu moves 1 - 3px to the right in IE explorer at mouse-over....but only when i set a: hoover to change background color.... if i only change text color with a : hoover its fine. Anyway i just realized that this was a complete waste of time since i'm not allowed to give my URL for people to see the problem... Cheers, Bukit1 Hello, not entirely sure how to go about this, but I'm using Dreamweaver CS5 and I'm working on my home page. The way I have it set up is I have a "sidebar" to the left, then a large "main_image" to the right of that which begins my "container" div followed by some "body_copy" below that. Everything looks good when the window is in a max size. The problem arrises whenever I resize my window the main_image moves to below the sidebar and everything just seems to shift down... The main_image is set to relative so the body_copy text can form properly under it. Is there any way to have the image remain stationary despite window size? Thanks for your help!! Hello, I have what I hope is an easy question. I am trying to make a horizontal navigation menu based on code I have found on the net. I got 99% of it working EXCEPT: When sub menu text is displayed it "pushes" the main menu text to the right. my example is located he www(dot)katieandconrad(dot)com I have validated both my HTML and CSS, the errors that are displayed have nothing to do with this issue. However, I will be fixing the HTML error tonight. There's nothing I can do with the CSS errors. Thank you very much for your help. Regards, CB Hi, I am very new to CSS and am having a small problem with a breadcrumb that moves in different browsers. It's in the right place in IE but it moves down a little in Firefox, and moves even further down in Opera. If you look at the page it is the red "Home" above the menu bar (well it is in IE and Firefox, it is behind the menu bar in Opera). I know that IE doesn't always show things like it should, but what I wanted to know was - is it me or them? and if it is them which one is right? If it's me could you point me in the right direction please. The page is URL The 2 stylesheets that are used are; URL URL I would really appreciate some advice. Thanks |
|||||||