Go Back   CodingForums.com > :: Client side development > HTML & CSS
Reload this Page Wordpress CSS Footer help?

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 05-25-2009, 06:58 PM   PM User | #1
nicktenx
New to the CF scene

 
Join Date: May 2009
Posts: 3
Thanks: 0
Thanked 0 Times in 0 Posts
nicktenx is an unknown quantity at this point
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!!!
nicktenx is offline   Reply With Quote
Old 05-25-2009, 07:10 PM   PM User | #2
nicktenx
New to the CF scene

 
Join Date: May 2009
Posts: 3
Thanks: 0
Thanked 0 Times in 0 Posts
nicktenx is an unknown quantity at this point
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>
nicktenx is offline   Reply With Quote
Old 05-26-2009, 05:11 AM   PM User | #3
straderade
New Coder

 
Join Date: May 2009
Location: Arizona
Posts: 20
Thanks: 4
Thanked 0 Times in 0 Posts
straderade is an unknown quantity at this point
Can you provide a link? - would be much easier to find a fix for this if so.
straderade is offline   Reply With Quote
Old 05-26-2009, 05:13 PM   PM User | #4
nicktenx
New to the CF scene

 
Join Date: May 2009
Posts: 3
Thanks: 0
Thanked 0 Times in 0 Posts
nicktenx is an unknown quantity at this point
oops
Duh, my apologies.

http://www.the86400.com
nicktenx is offline   Reply With Quote
Old 05-26-2009, 05:22 PM   PM User | #5
abduraooft
Supreme Master coder!

 
abduraooft's Avatar
 
Join Date: Mar 2007
Location: N/A
Posts: 14,678
Thanks: 158
Thanked 2,182 Times in 2,169 Posts
abduraooft is just really niceabduraooft is just really niceabduraooft is just really niceabduraooft is just really niceabduraooft is just really nice
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
__________________
Quote:
The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)
abduraooft is offline   Reply With Quote
Reply

Bookmarks

Tags
css, wordpress

Jump To Top of Thread


« Previous Thread | Next Thread »
Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump


All times are GMT +1. The time now is 07:41 PM.
Advertisement
Log in to turn off these ads.