...

View Full Version : Footer



rickfink
03-02-2009, 03:06 PM
Having trouble getting my footer to the bottom of the page, it will when there is enough content but if there isn't it comes up a bit. Messed around with the positioning but can't seem to figure it out. Any help would be great!

HTML:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

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

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>Bayside Baptist Church</title>

<link rel="stylesheet" href="style.css" type="text/css" charset="utf-8" />

<style type="text/css">

<!--

.style1 {font-weight: bold}

.style7 {font-size: 12px}
.style8 {
font-size: 14px;
font-weight: bold;
padding-bottom: 5px;
}
.style10 {
font-size: 15px;
color: #8DA35C;
}
.style11 {font-size: 14px}
.style13 {
border-bottom-width: 2px;
border-bottom-style: double;
border-bottom-color: #000000;
display: block;
width: auto;
font-family: tahoma, arial, sans-serif;
padding-top: 4px;
padding-bottom: 4px;
color: #5C5C5C;
font-size: 12px;
margin-top: 2px;
margin-bottom: 2px;
}

-->

</style>


<script type="text/javascript">

var timeout = 500;

var closetimer = 0;

var ddmenuitem = 0;

// open hidden layer

function mopen(id)

{

// cancel close timer

mcancelclosetime();

// close old layer

if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';



// get new layer and show it

ddmenuitem = document.getElementById(id);

ddmenuitem.style.visibility = 'visible';



}

// close showed layer

function mclose()

{

if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';

}



// go close timer

function mclosetime()

{

closetimer = window.setTimeout(mclose, timeout);

}



// cancel close timer

function mcancelclosetime()

{

if(closetimer)

{

window.clearTimeout(closetimer);

closetimer = null;

}

}

// close layer when click-out

document.onclick = mclose;
</script>

</head>
<body>

<div id="wrapper">

<div id="header">

<div id="logo">

<h1>Bayside Baptist Church</h1>
</div>

<div id="logo2">

<h1 class="style7">Service Times:<br/>

Sunday at 9:15am </h1>
</div>

<div id="nav">

<ul id="sddm">

<li><a href="index.html" onMouseOver="mopen('m1')" onMouseOut="mclosetime()">Home</a> </li>

<li><a href="ministries.html" onMouseOver="mopen('m2')" onMouseOut="mclosetime()">Ministries</a>

<div id="m2" onMouseOver="mcancelclosetime()" onMouseOut="mclosetime()">

<a href="#">For Men</a>

<a href="#">For Women</a>

<a href="#">Children's Ministry</a>

<a href="#">Young Adults</a>

<a href="#">Senior Adults</a>

<a href="#">DivorceCare</a>

<a href="#">Missions</a>

<a href="#">Outreach</a>

<a href="#">Journey of Faith</a>

<a href="#">Small Group Bible Study</a>

<a href="#">Christian Education Hour</a> </div>
</li>

<li><a href="#" onMouseOver="mopen('m3')" onMouseOut="mclosetime()">Calendar</a>

<div id="m3" onMouseOver="mcancelclosetime()" onMouseOut="mclosetime()">
<a href="#">Upcoming Events</a>

<a href="calendar.html">Interactive Calendar</a>

<a href="Calendar/February%202009calendar.pdf">PDF Calendar</a>

<a href="Calendar/February%202009.pdf">PDF Newsletter</a> </div>
</li>

<li><a href="#" onMouseOver="mopen('m4')" onMouseOut="mclosetime()">Connect</a>

<div id="m4" onMouseOver="mcancelclosetime()" onMouseOut="mclosetime()">

<a href="#">Staff Positions</a>

<a href="#">Prayer</a>

<a href="#">Christian Education Hour</a>

<a href="#">Young Adults</a>

<a href="#">Worship Team</a>

<a href="#">Greeting</a>

<a href="#">Children's Ministry</a>

<a href="#">Martha Ministry</a> </div>
</li>

<li><a href="faq.html" onMouseOver="mopen('m5')" onMouseOut="mclosetime()">FAQ</a>

<div id="m5" onMouseOver="mcancelclosetime()" onMouseOut="mclosetime()">

<a href="#">How to Know Jesus</a>

<a href="#">What We Believe</a>

<a href="#">Constitution</a>

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

<a href="#">Tools</a> </div>
</li>

<li><a href="youth.html" onMouseOver="mopen('m6')" onMouseOut="mclosetime()">Youth</a> </li>

<li><a href="#" onMouseOver="mopen('m7')" onMouseOut="mclosetime()">Pictures</a> </li>

<li><a href="contact.html" onMouseOver="mopen('m8')" onMouseOut="mclosetime()">Contact</a>

<div id="m8" onMouseOver="mcancelclosetime()" onMouseOut="mclosetime()">

<a href="contact.html">Office</a> <a href="#">Staff</a>

<a href="http://www.mapquest.com/maps?name=Bayside+Baptist+Church&city=Superior&state=WI&address=3915+N+16th+St&zipcode=54880&country=US&latitude=46.719504&longitude=-92.133389&geocode=ADDRESS&id=7058780">Directions</a>

<a href="#">Prayer Requests</a> </div>
</li>
</ul>

<div style="clear:both"></div>

<div style="clear:both"></div>
</div>
</div>

<div id="headline">

<div id="sidebar">
<h2 class="style8"><span class="style10">Ministries</span></h2>
<p class="style13"><a href="#">For Men</a></p>
<p class="style13"><a href="#">For Women</a></p>
<p class="style13"><a href="#">Children</a></p>
<p class="style13"><a href="#">Young Adults</a></p>
<p class="style13"><a href="#">Senior Adults</a></p>
<p class="style13"><a href="#">DivorceCare</a></p>
<p class="style13"><a href="#">Missions</a></p>
<p class="style13"><a href="#">Outreach</a></p>
<p class="style13"><a href="#">Journey of Faith</a></p>
<p class="style13"><a href="#">Small Group Bible Study</a></p>
<p class="style13"><a href="#">Christian Education Hour</a></p>
</div>

<div id="content"><img src="images/puzzle.jpg" width="442" height="75" alt="ministries" />

<p><span class="style7"><em>They devoted themselves to the apostles' teaching and to the fellowship, to the breaking of bread and to prayer</em>.* Acts 2:42</span></p>
<p class="style11">Bayside desires to equip adults, teens, and children to be transformed by Christ through the Holy Spirit in their ability to love God (Matthew 22:37), love others (Matthew 22:39), and live out Christ's mission (Matthew 28:18-20).* Please join us in any of the ministry opportunities listed on the left.* We would love to have you involved as a participant or a worker.</p>
<p class="style11">Our purpose is to become a community of believers who support, encourage, and care for one another spiritually, emotionally, and physically to the glory of God and the expansion of His kingdom.* </p>

<h1 class="style8">&nbsp;</h1>
</div>

<div id="search-news">

<h2 class="downcast">Sermons</h2>

<div id="news-box">

<p><a href=".../Sermons/01.11.09.m3u">02.22.09</a></p>

<p><a href=".../Sermons/01.11.09.m3u">02.15.09</a></p>

<p><a href=".../Sermons/01.11.09.m3u">02.08.09</a></p>
</div>



<h2 class="downcast">News &amp; Events</h2>

<div id="news-box">

<h3><a href="#">12.21.08</a></h3>

<p> Join us at the <strong>Christmas Program</strong> for a time filled with music...</p>

<p class="more"><a href="#">more</a></p>

<h3><a href="#">12.24.08</a></h3>

<p>Come to the <strong>Christmas Eve Candlelight Service</strong> to celebrate...</p>

<p class="more"><a href="#">more</a></p>
</div>
</div>

<div class="clear"></div>
</div>

<div id="body">
<div class="clear">

<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</div>
</div>
</div>

<div id="footer">

<p>&nbsp;</p>
</div>

</body>

</html>



CSS:


html, body, ul, li {
margin: 0;
padding: 0;
list-style: none;
}
img {

}
a {
font-weight: bold;
text-decoration: none;
}
a:hover {

}
.more {
text-align: right;
padding-right: 5px;
padding-left: 5px;
}
.left {
float: left;
margin-right: 10px;
}
.right {
float: right;
}
.clear {
clear: both;
}

body, h1, h2, h3, form {
font: 10px tahoma, arial, sans-serif;
margin: 0;
padding: 0;
color: #5C5C5C;
}

body {
text-align: center;
background-image: url(images/header_bg.jpg);
background-repeat: repeat-x;
}
#wrapper {
text-align: left;
margin: auto;
width: 774px;
display: block;
padding-right: 15px;
padding-left: 15px;
}

#header {
height: 203px;
width: 774px;
position: absolute;
}

#header h1 {
margin-top: 44px;
font-family: "Futura Md BT";
font-size:18px;
color: #e1e1c8;
}
#header h1 img {
display: block;
}

#logo {
}

#logo h1, #logo h2 {

float: left;

margin: 0;

padding: 0 0 0 10px;

line-height: normal;

}

#logo h1 {
font-family: "Futura Md BT";
font-size:19px;
font-style: normal;
color: #e1e1c8;
padding-top: 67px;
padding-left: 0px;
font-weight: 400;
text-transform: capitalize;
font-variant: normal;
}

#logo2 {
}

#logo2 h1, #logo h2 {

float: left;

margin: 0;

padding: 0 0 0 10px;

line-height: normal;
}

#logo2 h1 {
font-family: "Futura Md BT";
font-size:12px;
font-style: normal;
color: #e1e1c8;
padding-top: 62px;
padding-left: 275px;
font-weight: 400;
text-transform: capitalize;
font-variant: normal;
}

#nav {
margin-top: 95px;
background: url(images/menu.gif) no-repeat left top;
height: 45px;
width: 639px;
}

#nav img {
float: left;
}

#sddm
{
width: 639px;
float: left;
margin-top: 12px;
}

#sddm li
{
margin: 0;
padding: 0;
list-style: none;
float: left;
font: bold 11px arial;
}

#sddm li:hover{
background:#8b9b5c;
}

#sddm li a
{
display: block;
width: 56px;
color: #FFF;
text-align: center;
text-decoration: none;
margin-top: 0;
margin-right: 1px;
margin-bottom: 0;
margin-left: 0;
padding-top: 8px;
padding-right: 11px;
padding-bottom: 8px;
padding-left: 11px;
}

#sddm li a:hover
{ background: #8b9b5c;
}

#sddm div
{ position: absolute;
visibility: hidden;
margin: 0;
padding: 0;
background: #EAEBD8;
border: 1px solid #ffffff;
}

#sddm div a
{ position: relative;
display: block;
margin: 0;
padding: 5px 10px;
width: auto;
white-space: nowrap;
text-align: left;
text-decoration: none;
background: #57574e;
color: #ffffff;
font: 11px arial}

#sddm div a:hover
{ background: #8b9b5c;
color: #FFF}

#headline {
padding-top: 205px;
}

#photo {
float: left;
width: 624px;
}
#photo div {
border: 1px solid #D8D8D8;
padding: 2px;
}
#photo img {
display: block;
}

#content {
width: 442px;
float: left;
padding-left: 16px;
padding-right: 16px;

}
#content img {
display: block;

}

#calendar {
width: 765px;
float: left;

}

#search-news {
float: right;
width: 140px;
}
#search-news div {
padding: 3px 0;
margin: 0;
}
#search-news #q {
width: 140px;
border: 1px solid #859D31;
}
#search-news .downcast {
background: #E6E7E7;
border-top: 1px solid #CFD0D0;
padding: 3px 4px 4px 4px;
margin: 2px 0 0 0;
}
#search-news h3 {
background: url(images/bullet_letter.gif) no-repeat;
padding-left: 15px;
font-weight: bold;
margin: 1em 0 0.4em 0;
}
#search-news p {
padding-left: 15px;
padding-right: 2px;
margin-top: 0.1em;
margin-right: 0;
margin-bottom: 0.1em;
margin-left: 0;
}
a {
font-weight: bold;
color: #5C5C5C;
}



#sidebar {
float: left;
width: 155px;
padding: 2px;
}

#sidebar p {
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #959595;
}

#sidebar h1 {
}


#nav1 {
background: url(images/nav_left.jpg) no-repeat;
}
#nav1 ul {
margin-left: 9px;
padding-left: 1px;
padding-bottom: 29px;
background: #2A2A2A bottom left url(images/nav_bot.jpg) no-repeat;
}
#nav1 li {
list-style: none;
font: 14px "arial narrow", arial, sans-serif;
border-top: 1px solid #959595;
background: 188px 10px url(images/arr_white.gif) no-repeat;
padding: 7px 0 0 31px;
}
#nav1 a {
color: #fff;
text-decoration: none;
border-left: 1px solid #959595;
padding-left: 10px;
display: block;
width: 90%;
padding: 2px 0 6px 8px;
}
#nav1 a:hover {
text-decoration: underline;
}
#nav1 .important {

background: 188px 10px url(images/arr_orange.gif) no-repeat;
}
#nav1 .important a {
color: #E9C379;
}


#body {
padding-top: 2em;
text-align: justify;
}

#body-left {
float: left;
width: 408px;
}
#body-right {
width: 330px;
float: right;
}

#body-left ul.plussbullets {
margin-top: 20px;
margin-left: 150px;
padding: 0;
font-weight: bold;
}
#body-left ul.plussbullets li {
background: top left url(images/bullet_plus.gif) no-repeat;
margin: 0 0 10px 0;
padding: 0 0 0 25px;
}

#body h2, #body p {
margin: 0.3em 0;
}

#body-right p {
margin-right: 2em;
}

#body a.green {
color: #9AAB68;
font-weight: normal;
text-decoration: underline;
}

#gallery img {
float: left;
}

#footer {
color: #FFFFFF;
font-weight: bold;
height: 220px;
background-repeat: repeat-x;
bottom: 0px;
background-image: url(images/footer_bg2.gif);
margin-top: 1em;
}
#footer p {
margin: 0;
padding: 0;
}
iframe {
border: 0px solid #ffffff;
}

PitbullMean
03-02-2009, 03:26 PM
add position:absolute; to #footer

abduraooft
03-02-2009, 03:45 PM
add position:absolute; to #footer That alone won't make any difference(since the footer is outside of wrapper)

Hi rickfink, I'd recommend your to check http://bonrouge.com/3c-hf-fluid.php to see how to make a good 3 column layout.

PitbullMean
03-02-2009, 04:16 PM
ha didnt see that

rickfink
03-02-2009, 10:23 PM
Sweet that worked, thanks!

Another question now, for the site I'm building I am going to have a sidebar that will be on every page, is there a way to add it so if I wanted to change it, I only change it once and everything would change. Almost if there was a way to make it a <div>, then I could only change the <div> and everything with that <div> would change. Would be a lot easier than using the find/replace in dreamweaver.

Sorry if that is confusing.

BoldUlysses
03-02-2009, 11:04 PM
What you might be after are called Server Side Includes (http://www.w3schools.com/PHP/php_includes.asp) (SSIs). We've had a number of threads (http://www.codingforums.com/showthread.php?t=159937) about them recently (http://codingforums.com/showthread.php?t=159622).



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum