Jump to content

Help my CSS footer has gone awol

JackPike

By JackPike
in Technical Help Forum

 Share

Recommended Posts

JackPike Member

JackPike

Posted
Posted

I was feeling rather chuff with my new design web site but why on earth wont my footer stay at the bottom of the main page.

 

body {

height: 100%;

margin: 0;

padding: 0;

font: 12px/1.5 verdana, arial, helvetica, sans-serif;

 

}

#head{

background-image: url(southport.png);

background-repeat: no-repeat;

background-position: top center;

height: 85px;

}

p {

color: Black;

padding-top: 0;

margin-top: 0;

}

a

{

 

text-align:center;

font-family:Arial black;

font-size: 16pt;

 

background-image: url(pics/normal.gif);

background-repeat: no-repeat;

display:block;

width: 160px;

 

margin-bottom: 5px;

text-decoration:none;

}

a:visited

{color: #DAA520;}

a:hover

{

color: ButtonHighlight;

background-image: url(pics/over.gif);

background-repeat: no-repeat;

}

form {

margin: 0;

padding: 0;

}

#content {

 

 

top: 20%;

margin: 66px 260px 0px 240px;

padding: 10px;

}

#content h1 {

text-align: center ;

padding-right: 20px;

font: 150% Georgia, "Times New Roman", Times, serif;

color: #2F4F4F;

}

#side1 {

font-weight: bolder;

position: absolute;

width: 200px;

top: 81px;

left: 10px;

padding: 70px 10px 10px 10px;

background-color: White;

z-index:0;

height: 593px;

}

#side2 {

position: absolute;

width: 220px;

top: 81px;

right: 17px;

padding: 70px 10px 10px 10px;

height: 590px;

}

#side2 h3 {

font: 110% Georgia, "Times New Roman", Times, serif;

margin: 0;

padding-bottom: 4px;

}

 

#side3 {

 

float: left;

position: relative;

width: 200px;

top: 10px;

left: 10px;

 

}

.adbox {

padding: 2px 4px 2px 6px;

margin: 0 0 10px 0;

border: 1px dotted #B1B1B1;

background-color: #F4F4F4;

 

}

#side1 h3 {

font: 110% Georgia, "Times New Roman", Times, serif;

color: #13623B;

background-color: transparent;

margin: 0;

padding-bottom: 4px;

}

 

 

 

 

 

 

#nav2 a:hover {

color: #FFD700;

}

 

#nav2 {

position: absolute;

width: 20%;

font: italic;

border: solid 1px gray;

left: 13px;

top: 156px;

 

}

 

#nav2 ul {

list-style-type: none;

margin: 0;

padding: 0;

border: none

}

 

#nav2 li {

margin: 0;

padding: 0.25em 0.5em 0.25em 1em;

 

list-style-type: none;

}

 

 

#footer {

position: absolute;

bottom: 0;

padding: 10px;

background-color: #0066b2;

width: 75%;

}

He who simply trys, Is not trying hard enuff

Link to comment
Share on other sites
JackPike Member

JackPike

Posted
  • Author
Posted (edited)
Can we see the the site or the html to help us determine the problem :)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

 

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Welcome to S.D.A.A</title>

<meta http-equiv="content-type"

content="text/html; charset=iso-8859-1" />

<link rel="stylesheet" type="text/css" href="3col12.css" />

</head>

<body>

 

 

 

<div id="head">

<h1>HEADER</h1>

</div>

 

<div id="content">

<h1>Welcome to the S.D.A.A</h1>

<p>The S.D.A.A was founded in 1906 and is now one of the fastest growing angling club in the Northwest of England with a membership of around 500 senior and junior anglers. The Association offers a excellent choice of waters to fish, with double figure barbel from the River Ribble to 100lb bags of bream from the vast but scenic 190 acre Anglezarke Reservoir.</p>

<p>Closer to home the famous River Crossens drain system has pike to over 20lbs and the some of the best tench fishing in the area.</p>

<p>So have a browse through this site and you may well find waters to suit your type of fishing.

Head Bailiff Mr Steve Johnson Tel 07768212070 Southport </p>

<img src="\college-work\New3col\ribbleleaflet.jpg" alt="" />

</div>

 

 

<div id="nav2">

 

 

<li><a href="#">About Us</a></li>

<li><a href="#">News</a></li>

<li><a href="#">Articles</a></li>

<li><a href="#">Waters</a></li>

<li><a href="#">Matches</a></li>

<li><a href="#">Forum</a></li>

<li><a href="#">Links</a></li>

<li><a href="#">Membership</a></li>

<li><a href="#">Guest Book</a></li>

<li><a href="#">Contact Us</a></li>

<div class="adbox">

<p><img src="file:///D|/sav2 31/back_drain_small.jpg" width="204" height="175" /></p>

</div>

</div>

 

 

 

 

<div id="side2">

<div class="adbox">

<p><img src="file:///D|/sav2 31/back_drain_small.jpg" width="204" height="175" /></p>

</div>

<div class="adbox"><p>Sed mattis, orci eu porta facilisis, purus ipsum mollis nibh, eu laoreet wisi purus a sem. Pellentesque tortor sapien, sodales eu, feugiat eget, pulvinar quis, erat. </p></div>

 

<div class="adbox">

<h4 align="center">The Match Length </h4>

<img src="file:///D|/sav2 31/waterpics/sluicepics/sluice match pegs.jpg" width="204" height="175" />

</div>

 

</div>

 

</div>

 

</body>

</html>

Edited by JackPike

He who simply trys, Is not trying hard enuff

Link to comment
Share on other sites
JackPike Member

JackPike

Posted
  • Author
Posted
According to the html above, <div id="footer>text here</div> is missing.

I had it in but the footer didnt appear at the bottom of the page kept coming in half way down or when I moved it in the html it appeared in one of the side boxes :schmoll:

He who simply trys, Is not trying hard enuff

Link to comment
Share on other sites
Jim Bob 9 Pants Junior Member

Jim Bob 9 Pants

Posted
Posted (edited)

That should do it

 

Can you do it in PHP then also put the nav into includes if you have a few pages, that way you update one file and the whole site is correct

Edited by Jim Bob 9 Pants

Holiday cottages in Cornwall | Fishing guide |

Bass fishing

 

Win £40 worth of sea fishing tackle - click here for more details

Link to comment
Share on other sites
JackPike Member

JackPike

Posted
  • Author
Posted

Never tried PHP before just plodding on with css I thought I was nearly there it seems only to drop to the bottom when the contents div is full I will have another play with it or I might make a class content container to nest within the the ID contents or even start from scratch again.

He who simply trys, Is not trying hard enuff

Link to comment
Share on other sites
Si... Member

Si...

Posted
Posted

You could use php something like this, which makes things easier for editing, as in you only have a max of 3 files to edit for the main look of the site, instead of all the files

 

header.php

 

<?php

echo "<html.............";

?>

 

menu.php

<?php

echo "<div id=\"menu\"></div>..........";

?>

 

footer.php

 

<?php

echo "</div>.................
</html>";

?>

 

index.php

 

<?php

include ("header.php");
include ("menu.php");

echo "Page content";

include ("footer.php");

?>

 

One thing to be wary of is when you use the double quotes in your html if using php you will have to escape them (\" instead of ") when using the echo function with double quotes (you`ll have a error), or use single quotes '.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We and our partners use cookies on our website to give you the most relevant experience by remembering your preferences, repeat visits and to show you personalised advertisements. By clicking “I Agree”, you consent to the use of ALL the cookies. However, you may visit Cookie Settings to provide a controlled consent.

  I accept