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 5 of 5
  1. #1
    New to the CF scene
    Join Date
    May 2009
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Exclamation Wordpress CSS Footer help?

    Hello,

    So, I tried to teach myself how to code a WP theme from scratch. Everything turned out pretty well, but I can't for the life of me figure out how to get the footer to be "pushed down" with the main content when there is more content.

    If I add more content to the sidebar, it *does* push the footer down with the sidebar, but if I add more content to the main section, it doesn't. Ultimately, I will likely only display one post at a time, but when you pop the comments in there, it should stretch.

    The other issue with it is the height:100% issue in Firefox. I tried a couple things but nothing has seemed to work.

    The site is www dot the86400 dot com. If you look at it now, you will see that the footer is "attached" to the sidebar, but the content from the main (white) section spills over and the white background stops. (You'll see.)

    ANY HELP anyone can give would be great--I am so excited about starting to write some posts, but this is the last thing I have left to figure out! I can post the php and css here if that helps.

    THANK YOU!!!

  • #2
    New to the CF scene
    Join Date
    May 2009
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    the code

    index.php

    Code:
    <?php get_header(); ?>
    <div id="background">
    <div id="evol5abutton"><a  href="http://localhost/wordpress/?page_id=36"  title="...get in touch..."></a></div>
    <div id="evol4abutton"><a  href="http://localhost/wordpress/?page_id=30"  title="...add me on facebook..."></a></div>
    <div id="evol3abutton"><a  href="http://localhost/wordpress/?page_id=27"  title="...the 86400 archive..."></a></div>
    <div id="evol2abutton"><a  href="http://localhost/wordpress/?page_id=25"  title="...the 86400 feed..."></a></div>
    <div id="graytopbar"></div>
    <div id="logo">
    <a id="logolink" href="http://localhost/wordpress/" title="The 86400"></a>
    </div>
    <div id="evol1abutton"><a  href="http://localhost/wordpress/?page_id=2"  title="...about..."></a></div>
    <div id="container"><br /><br />
    <div class="post">
    <?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>
    <h2><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>
    
    <div class="entry">
    <p class="postmetadata">
    posted on <?php the_date(); ?> <?php _e('by'); ?> <b><?php  the_author(); ?></b><br />
    <?php comments_popup_link('Leave a Comment »', '1 Comment »', '% Comments »'); ?> <?php edit_post_link('Edit', ' | ', ''); ?>
    				</p>
    <?php the_content(); ?>
    				
    </div>
    <?php endwhile; ?>
    <div class="navigation">
    <?php posts_nav_link('<img src="http://localhost/wordpress/wp-content/themes/86400/offmedia/middle2.gif" />','<img src="http://localhost/wordpress/wp-content/themes/86400/offmedia/newer.gif" />','<img src="http://localhost/wordpress/wp-content/themes/86400/offmedia/older.gif" />'); ?>
    </div>
    <?php else : ?>
    
    <div class="post" id="post-<?php the_ID(); ?>">
    <h2><?php _e('Not Found'); ?></h2>
    </div>
    <?php endif; ?>
    </div>
    </div>
    <div id="shoespic"></div>
    <div id="layer12"></div>
    <div id="layer13"></div>
    <div id="layer10"></div>
    <div id="layer14"></div>
    <div id="layer11"></div>
    <div id="layer15"></div>
    <div id="layer17"></div>
    <div id="layer15copy"></div>
    
    <?php get_sidebar(); ?>
    <?php get_footer(); ?>
    style.css

    Code:
    a  {
       text-decoration: none;
       color: #000000;
    }
    
    a ins  {
       text-decoration: none;
    }
    
    #evol5abutton a:hover,
    #evol3abutton a:hover  {
       background-position: -72px 0%;
    }
    
    #evol4abutton a:hover  {
       background-position: -88px 0%;
    }
    
    #evol2abutton a:hover  {
       background-position: -47px 0%;
    }
    
    #evol1abutton a:hover  {
       background-position: -58px 0%;
    }
    
    #evol2abutton a  {
       background: url(offmedia/evol2abutton.gif) no-repeat 0% 0px;
       display: block;
       height: 88px;
       width: 47px;
       font-size: 88px;
       line-height: 88px;
    }
    
    #evol5abutton a  {
       background: url(offmedia/evol5abutton.gif) no-repeat 0% 0px;
       display: block;
       height: 141px;
       width: 72px;
       font-size: 141px;
       line-height: 141px;
    }
    
    #evol3abutton a  {
       background: url(offmedia/evol3abutton.gif) no-repeat 0% 0px;
       display: block;
       height: 116px;
       width: 72px;
       font-size: 116px;
       line-height: 116px;
    }
    
    #evol4abutton a  {
       background: url(offmedia/evol4abutton.gif) no-repeat 0% 0px;
       display: block;
       height: 130px;
       width: 88px;
       font-size: 130px;
       line-height: 130px;
    }
    
    #evol1abutton a  {
       background: url(offmedia/evol1abutton.gif) no-repeat 0% 0px;
       display: block;
       height: 58px;
       width: 58px;
       font-size: 58px;
       line-height: 58px;
    }
    
    #evol4abutton  {
       visibility: visible;
       position: absolute;
       left: 846px;
       top: 33px;
       z-index: 4;
       width: 88px;
       height: 130px;
    }
    
    #evol5abutton  {
       visibility: visible;
       position: absolute;
       left: 926px;
       top: 21px;
       z-index: 4;
       width: 72px;
       height: 141px;
    }
    
    #evol3abutton  {
       visibility: visible;
       position: absolute;
       left: 783px;
       top: 46px;
       z-index: 4;
       width: 72px;
       height: 116px;
    }
    
    #evol1abutton  {
       visibility: visible;
       position: absolute;
       left: 663px;
       top: 103px;
       z-index: 4;
       width: 58px;
       height: 58px;
    }
    
    #evol2abutton  {
       visibility: visible;
       position: absolute;
       left: 730px;
       top: 76px;
       z-index: 4;
       width: 47px;
       height: 88px;
    }
    
    #layer17  {
       background: url(offmedia/layer17.gif) no-repeat;
       visibility: visible;
       position: absolute;
       left: 0px;
       top: 773px;
       z-index: 10;
       width: 290px;
       height: 218px;
    }
    
    #layer15copy  {
       background: url(offmedia/layer15copy.gif) no-repeat;
       visibility: visible;
       position: absolute;
       left: 0px;
       top: 991px;
       z-index: 8;
       width: 300px;
       height: 11px;
    }
    
    #wrapper{
    margin: 0 auto 0 auto;
    width: 1000px;
    text-align: left;
    }
    
    #header{
    float: left;
    width: 1000px;
    height: 0;
    }
    
    .sidebar{
    float: right;
    width: 240px;
    background: #eeeeee;
    margin: 0 0 0 10px;
    display: inline;
    }
    
    #footer{
    clear: both;
    float: right;
    width: 1000px;
    background: #000000;
    color: #FFFFFF;
    }
    
    body{
    	margin: 0;
    	padding: 10px;
    	padding-bottom: 60px;
    	font-family: Arial, Helvetica, Georgia, Sans-serif;
    	font-size: 12px;
    	text-align: left;
    	vertical-align: top;
    	background: #ffffff;
    	color: #000000;
    }
    
    a:link, a:visited{
    			text-decoration: underline;
    			color: #FF0000;
    }
    
    a:hover{
    text-decoration: none;
    }
    
    #graytopbar  {
       background: url(offmedia/graytopbar.gif) no-repeat;
       visibility: visible;
       position: absolute;
       left: 0px;
       top: 94px;
       z-index: 3;
       width: 1000px;
       height: 31px;
    }
    
    #background  {
       margin: 0px auto 0px auto;
       background: url(offmedia/background.gif);
       background-repeat: repeat-y;
       visibility: visible;
       height: 1140px;
       width: 1000px;
       position: relative;
    }
    
    #shoespic  {
       background: url(offmedia/shoespic.gif) no-repeat;
       visibility: visible;
       position: absolute;
       left: 0px;
       top: 125px;
       z-index: 4;
       width: 291px;
       height: 218px;
    }
    
    #layer14  {
       background: url(offmedia/layer14.gif) no-repeat;
       visibility: visible;
       position: absolute;
       left: 0px;
       top: 552px;
       z-index: 8;
       width: 299px;
       height: 11px;
    }
    
    #layer13  {
       background: url(offmedia/layer13.gif) no-repeat;
       visibility: visible;
       position: absolute;
       left: 12px;
       top: 342px;
       z-index: 8;
       width: 287px;
       height: 11px;
    }
    
    #layer12  {
       background: url(offmedia/layer12.gif) no-repeat;
       visibility: visible;
       position: absolute;
       left: 289px;
       top: 127px;
       z-index: 7;
       width: 11px;
       height: 865px;
    }
    
    #layer15  {
       background: url(offmedia/layer15.gif) no-repeat;
       visibility: visible;
       position: absolute;
       left: 0px;
       top: 767px;
       z-index: 8;
       width: 296px;
       height: 11px;
    }
    
    #layer11  {
       background: url(offmedia/layer11.gif) no-repeat;
       visibility: visible;
       position: absolute;
       left: 0px;
       top: 561px;
       z-index: 6;
       width: 291px;
       height: 218px;
    }
    
    #layer10  {
       background: url(offmedia/layer10.gif) no-repeat;
       visibility: visible;
       position: absolute;
       left: 0px;
       top: 343px;
       z-index: 5;
       width: 291px;
       height: 218px;
    }
    
    #container  {
       
       visibility: visible;
       position: absolute;
       left: 315px;
       top: 118px;
       z-index: 2;
       width: 405px;
       float: left;
    }
    
    #evol5a  {
       background: url(offmedia/evol5a.gif) no-repeat;
       visibility: visible;
       position: absolute;
       left: 929px;
       top: 21px;
       z-index: 4;
       width: 69px;
       height: 141px;
    }
    
    #evol1a  {
       background: url(offmedia/evol1a.gif) no-repeat;
       visibility: visible;
       position: absolute;
       left: 665px;
       top: 103px;
       z-index: 4;
       width: 56px;
       height: 58px;
    }
    
    #evol4a  {
       background: url(offmedia/evol4a.gif) no-repeat;
       visibility: visible;
       position: absolute;
       left: 863px;
       top: 33px;
       z-index: 4;
       width: 48px;
       height: 130px;
    }
    
    #evol3a  {
       background: url(offmedia/evol3a.gif) no-repeat;
       visibility: visible;
       position: absolute;
       left: 789px;
       top: 46px;
       z-index: 4;
       width: 59px;
       height: 116px;
    }
    
    #evol2a  {
       background: url(offmedia/evol2a.gif) no-repeat;
       visibility: visible;
       position: absolute;
       left: 733px;
       top: 76px;
       z-index: 4;
       width: 44px;
       height: 88px;
    }
    
    #logo  {
       background: url(offmedia/logo.gif) no-repeat;
       position: absolute;
       left: 0px;
       top: 21px;
       z-index: 8;
       width: 372px;
       height: 138px;
    }
    
    #logolink  {
       background: url(offmedia/logo.gif) no-repeat;
       position: absolute;
       left: 0px;
       top: 0px;
       z-index: 8;
       width: 372px;
       height: 138px;
    }
    
    html, body  {
       padding: 0px;
       margin: 0px;
       background-image: url('offmedia/scratches.gif');
    	background-repeat: repeat-y
    	background-repeat: repeat-x
    	height: 100%;
    }
    
    div.navigation a { 
    	color:#FFFFFF;
    }
    
    .comments-template{
    	margin: 10px 0 0;
    	border-top: 1px solid #ccc;
    	padding: 10px 0 0;
    }
    
    .comments-template ol{
    	margin: 0;
    	padding: 0 0 15px;
    	list-style: none;
    }
    
    .comments-template ol li{
    	margin: 10px 0 0;
    	line-height: 18px;
    	padding: 0 0 10px;
    	border-bottom: 1px solid #ccc;
    }
    
    .comments-template h2, .comments-template h3{
    	font-family: Georgia, Sans-serif;
    	font-size: 16px;
    }
    
    .commentmetadata{
    	font-size: 12px;
    }
    
    .comments-template p.nocomments{
    	padding: 0;
    }
    
    .comments-template textarea{
    	font-family: Arial, Helvetica, Georgia, Sans-serif;
    	font-size: 12px;
    }
    
    li {
      list-style: url(offmedia/littlestar.gif);
      margin: 0px;
      padding: 0px 0px 10px;
      font-family: Georgia, Sans-serif;
      font-size: 12px;
    }
    header.php

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
    <meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats please -->
    <link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />
    	<link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" />
    	<link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<?php bloginfo('atom_url'); ?>" />
    	<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
    
    <title>the 86400</title>
    
    <link rel="stylesheet" type="text/css" media="screen, print, projection"  href="wp-content/themes/86400/style.css"></link>
    <?php wp_get_archives('type=monthly&format=link'); ?>
    	<?php //comments_popup_script(); // off by default ?>
    	<?php wp_head(); ?>
    </head>
    
    <body link="#FFFFFF" alink="#FFFFFF" vlink="#FFFFFF">
    <div id="wrapper">
    <div id="header"></div>
    sidebar.php
    Code:
    <div class="sidebar">
    <ul><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar() ) : else : ?>
    <li id="search">
    <?php include(TEMPLATEPATH . '/searchform.php'); ?>
    </li>
    <li id="calendar"><h4><?php _e('by the date:'); ?></h4>
    <?php get_calendar(); ?>
    </li>
    <li><h4><?php _e('the last five:'); ?></h4>
    <ul>
    <?php wp_get_archives('title_li=&type=postbypost&limit=5'); ?>
    </ul>
    </li>
    <?php get_links_list(); ?>
    <li><h4><?php _e('the nerd stuff:'); ?></h4>
    <ul>
    <?php wp_register(); ?>
    <li><?php wp_loginout(); ?></li>
    <?php wp_meta(); ?>
    </ul>
    </li>
    <?php endif; ?>
    <img src="http://localhost/wordpress/wp-content/themes/86400/offmedia/upc.gif" />
    </ul>
    </div>
    footer.php

    Code:
    <div id="footer">
    <p><br />
    Copyright © 2009 <?php bloginfo('name'); ?><br />
    coded by hand with <font color="#FF0000">♥</font><br>
    <a href="mailto:nick@the86400.com">nick@the86400.com</a>
    </p><br /><br />
    </div>
    </div>
    </div>
    </div>
    </body>
    </html>

  • #3
    New Coder
    Join Date
    May 2009
    Location
    Arizona
    Posts
    20
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Can you provide a link? - would be much easier to find a fix for this if so.

  • #4
    New to the CF scene
    Join Date
    May 2009
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    oops

    Duh, my apologies.

    http://www.the86400.com

  • #5
    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
    Your side bar is a floated one, so it can be cleared and it does. But your container is absolutely positioned, which can't be cleared. If you are trying to make a 3 column layout, I'd recommend you to do it like http://bonrouge.com/3c-hf-fixed.php
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Tags for this Thread

    Posting Permissions

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