Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6

Thread: Footer

  1. #1
    New Coder
    Join Date
    Jan 2009
    Posts
    83
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Footer

    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:

    Code:
    <!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:

    Code:
    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;
    }

  • #2
    Regular Coder
    Join Date
    Oct 2007
    Location
    Glencoe, Ontario, Canada
    Posts
    340
    Thanks
    19
    Thanked 27 Times in 27 Posts
    add position:absolute; to #footer
    Eric "PitbullMean" Melo
    Always Start your layout with*{border:0; margin:0; padding:0;}
    Be sure to Thank ALL Users who give assistance.

  • #3
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Quote Originally Posted by PitbullMean View Post
    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.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #4
    Regular Coder
    Join Date
    Oct 2007
    Location
    Glencoe, Ontario, Canada
    Posts
    340
    Thanks
    19
    Thanked 27 Times in 27 Posts
    ha didnt see that
    Eric "PitbullMean" Melo
    Always Start your layout with*{border:0; margin:0; padding:0;}
    Be sure to Thank ALL Users who give assistance.

  • #5
    New Coder
    Join Date
    Jan 2009
    Posts
    83
    Thanks
    4
    Thanked 0 Times in 0 Posts
    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.

  • #6
    Regular Coder BoldUlysses's Avatar
    Join Date
    Jan 2008
    Location
    Winston-Salem, NC
    Posts
    938
    Thanks
    10
    Thanked 190 Times in 187 Posts
    What you might be after are called Server Side Includes (SSIs). We've had a number of threads about them recently.
    matt | design | blog


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •