...

View Full Version : Wordpress CSS Footer help?



nicktenx
05-25-2009, 07:58 PM
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!!! :confused:

nicktenx
05-25-2009, 08:10 PM
index.php


<?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




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


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


<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


<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>

straderade
05-26-2009, 06:11 AM
Can you provide a link? - would be much easier to find a fix for this if so.

nicktenx
05-26-2009, 06:13 PM
Duh, my apologies.

http://www.the86400.com

abduraooft
05-26-2009, 06:22 PM
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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum