Forums

marlonart

Here is the link to my blog theme design:
http://marlonart.com/dev/

I'm new to CSS but I've learned a lot since I've started with this project. It's basically a blog for my website. I downloaded a blank blog template and modified it to suit my needs.

My current problem is simple, although I haven't found a simple solution. The backgrounds of the sidebar and main content column don't want to extend downwards past the actual content. It's not so apparent with the main column as it is with the sidebar. I need the sidebar and main column to extend to the height of the browser at all times.

For reference, the way I have the DIVs arranged is like this:

Shell- wraps around everything. Not sure if this is even
necessary but for some reason it keeps everything in
place.
Wrapper- wraps the container houses a background image.
Container- houses the post data.
All of the above are auto centered left and right.
Topnav- houses the top navigation bar + images. Its within
the wrapper div.
Left- left floating image.

Here's the code:

style.CSS

body,h1,h2,h3,h4,h5,h6,blockquote,p{
margin: 0;
padding: 0;
}

body{
	margin: 0 0 0 0;
	font-family: Arial, Helvetica, Georgia, Sans-serif;
	font-size: 12px;
	text-align: left;
	vertical-align: top;
	background: #e5e5e5;
	color: #eeeeee;
	background-image: url(images/BGpaper.jpg);
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position: top center;
	
}



#topnav {
float: left;
width: 410px;
margin: 0 auto 0 auto;
}

#shell{
width: 1024px;
margin: 0 auto 0 auto;
}

#top{
font-size: 32px;
color: #ffba00;
width: 473px;
height: 229px;
margin: 0 0 0 0;
background-color: #929292;
background: url(\"images/top.png\");
}

#bottom{

width: 473px;
height: 80px;
margin: 0 0 0 0;
background: url(\"images/bottom.png\");

}

#right{

width: 130px;
height: 331px;
margin: 0 0 0 0;
padding: 0 0 0 0;
background: url(\"images/right.png\");
background-repeat: no-repeat; 
}

#left{
float: left;
width: 281px;
height: 459px;
margin: 0 0 0 0;
padding: 0 0 0 0;
background: url(\"images/left.png\");

}

#linkbar{

width: 473px;
height: 24px;
margin: 0 0 0 0;
background: url(\"images/mid.png\");
}

#wrapper{
float: left;
margin: 0 auto 0 auto;
width: 473px;
text-align: left;
background-attachment: scroll;
background-position: top center;
background-repeat: repeat;
background: url(\"images/main.png\");

}

#container{

width: 410px;
margin: 0 auto 0 auto;
}

.post{
padding: 35px 0 10px 0;
}

.post h2{
font-family: Verdana, Sans-serif;
font-size: 17px;
}

p.postmetadata{
border-top: 1px dotted #878787;

margin: 5px 0 0 0;
}

.navigation{
padding: 10px 0 0 0;
font-size: 14px;
font-weight: bold;
line-height: 18px;
}

a { text-decoration:none; }
  :link { color: #696969; }
  :visited { color: #66818a; }
  a:active { color: #5f8abb; }
  a:hover { color: #670000; }

.sidebar{

font-size: 11px;
color: #a5a5a5;
width: 130px;

margin: 0 0 0 0;
padding: 0 0 0 0;


}

.sidebar ul{
list-style-type: none;
margin: 0;
padding: 0 10px 0 10px;
}

.sidebar ul li{
padding: 5px 0 5px 0;
}

#searchsubmit{
border: 1px solid #a5a5a5;
background: #a5a5a5;
color: #dddddd;
font-size: 1.1em;
}

#s{
border: 1px solid #a5a5a5;
background: none;
color: #5b5b5b;
font-size: 1.1em;
width: 115px;
}

#sidewrap{
float: left;
width: 130px;

margin: 0 0 0 0;
padding: 0 0 0 0;
background: url(\"images/side.png\");
background-repeat: repeat;
background-attachment: scroll;
background-position: top center;
}

/*
*{border: 1px solid red;}
*/

index.PHP

<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\">

<head profile=\"http://gmpg.org/xfn/11\">

	<title><?php bloginfo('name'); ?><?php wp_title(); ?></title>

	<meta http-equiv=\"Content-Type\" content=\"<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>\" />	
	<meta name=\"generator\" content=\"WordPress <?php bloginfo('version'); ?>\" /> <!-- leave this for stats please -->

	<link rel=\"stylesheet\" href=\"<?php bloginfo('stylesheet_url'); ?>\" type=\"text/css\" media=\"screen\" />
	<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'); ?>\" />

	<?php wp_get_archives('type=monthly&format=link'); ?>
	<?php //comments_popup_script(); // off by default ?>
	<?php wp_head(); ?>
</head>
<body>


<div id=\"shell\">

<div id=\"left\">
  </div>



<div id=\"wrapper\" >

	<div id=\"topnav\">
	
	<div id=\"top\">
	</div>
	<div id=\"linkbar\">
	</div>
	<div id=\"bottom\">
	</div>

</div>


<!--
<div id=\"header\" >

<h1><a href=\"<?php bloginfo('url'); ?>\"></a></h1>
</div>
-->

<div id=\"container\" >

	<?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>

		<a href=\"<?php bloginfo('url'); ?>\">
		<?php bloginfo('description'); ?>
		</a>
		<div class=\"post\" id=\"post-<?php the_ID(); ?>\">

			<h2><a href=\"<?php the_permalink(); ?>\" title=\"<?php the_title(); ?>\"><?php the_title(); ?></a></h2>

			<div class=\"entry\">

				<?php the_content(); ?>

				<p class=\"postmetadata\" >
<?php _e('Filed under&#58;'); ?> <?php the_category(', ') ?> <?php _e('by'); ?> <?php  the_author(); ?><br />
<?php comments_popup_link('No Comments &#187;', '1 Comment &#187;', '% Comments &#187;'); ?> <?php edit_post_link('Edit', ' &#124; ', ''); ?>
				</p>

			</div>

		</div>

	<?php endwhile; ?>

		<div class=\"navigation\" >
			<?php posts_nav_link(); ?>
		</div>

	<?php else : ?>

		<div class=\"post\">
			<h2><?php _e('Not Found'); ?></h2>
		</div>

	<?php endif; ?>

</div>



<!--
<div id=\"footer\">
<p>
Copyright &#169; 2007 <a href=\"<?php bloginfo('url'); ?>\"><?php bloginfo('name'); ?></a>
</p>
</div>
-->

</div>

<div id=\"sidewrap\">
<div class=\"sidebar\">
<div id=\"right\">
</div>

<ul>

<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar() ) : else : ?>

	<li id=\"search\">
	  <?php include(TEMPLATEPATH . '/searchform.php'); ?>
	</li>
	<!--
	<li id=\"calendar\"><h2><?php _e('Calendar'); ?></h2>
		<?php get_calendar(); ?>
	</li>
	

	<?php wp_list_pages('depth=3&title_li=<h2>Pages</h2>'); ?>
	-->
	
	<li><h2><?php _e('Categories'); ?></h2>
		<ul>
			<?php wp_list_cats('sort_column=name&optioncount=1&hierarchical=0'); ?>
		</ul>
	</li>

	<li><h2><?php _e('Archives'); ?></h2>
		<ul>
			<?php wp_get_archives('type=monthly'); ?>
		</ul>
	</li>
	<!--
	<?php get_links_list(); ?>
	-->
	<li><h2><?php _e('Meta'); ?></h2>
		<ul>
			<?php wp_register(); ?>
			<li><?php wp_loginout(); ?></li>
			<?php wp_meta(); ?>
		</ul>
	</li>

<?php endif; ?>
</ul>

</div>
</div>

</div>

</body>
</html>

Any help would be appreciated. Thanks!

creativeideas

Hi marl,

I got the simple solution of your problem...try this
html, body
{
height:100%;
margin:0px;
padding:0px;
}
#sidewrap
{
background:transparent url(images/side.png) repeat scroll center top;
float:left;
height:100%;
margin:0;
padding:0;
width:130px;
}

marlonart

Unfortunately that didn't seem to work, although I'll keep trying and playing with it. I forgot to mention that the #sidewrap contains the .sidebar in order to give it a background, much like I did with the #wrapper and #container. Problem is I dont know how to make the background extend down all the way, which is more apparent in the sidebar than the main column. Any other suggestions?

TheDoc

This, unfortunately, is a common problem with many different solutions (all of them seem to be relatively bad, imo). Here's one for you that didn't look too bad:

http://matthewjamestaylor.com/blog/equa ... s-no-hacks

And of course, there's always faux columns:

http://www.alistapart.com/articles/fauxcolumns/

Soh Tanaka

thanks for that first link doc, that is pretty smart. I never thought of doing it that way :-) We learn something new each day!

marlonart

No dice. It seems that I've run into one of CSS's limitations. The "faux" columns and even the suggestions from another forum have to do with background color and I need the background image extending down the length of the column. ALA has a page on referencing images with this method but that doesn't seem to do much either:

http://www.alistapart.com/articles/fauxcolumns/

Also for some reason the "repeat-y" doesn't work at all and I see no reason why it shouldn't. Its damn frustrating. Could it be the height of the background image thats causing the problem? The sidebar like the main column has a specific design, so they're pretty tall pixel wise. The image I need tiled on the sidebar is 130x772. What should I do? Is there anything I can do?

apostrophe

Here's a hack that will force it:

#sidewrap {
background:transparent url(images/side.png) repeat scroll center top;
float:left;
height:1200px;
margin:0;
padding:0;
width:130px;
}

But it's not dynamic, if you add another post it won't extend with the main content.
Your problems are in your markup. You have a really odd hierarchy of divs, the sidebar is not attached to the main content in any way. Most sites do it something like this:

<div id=\"container\">

<div id=\"header\">
</div><!--end header-->

      <div id=\"content\">

          <div id=\"main_content\">
          </div><!--end main_content-->

          <div id=\"sidebar\">
          </div><!--end sidebar-->

      </div><!--end content-->

<div id=\"footer\">
</div><!--end footer-->

</div><!--end container-->

Yours is somewhat more convoluted with all kinds of strange divs going on in there.
With faux columns the principle is the same whether it's just color or an image, the content bg and the column bg shoud be one combined image, that way if one extends the other has to grow with it.

TheDoc

"marlonart" said:
No dice. It seems that I've run into one of CSS's limitations. The "faux" columns and even the suggestions from another forum have to do with background color and I need the background image extending down the length of the column.

As far as I'm aware there is no such limitation. It doesn't matter what is applied to the "background", whether it be a color or an image, the CSS will render it the same regardless.

treehouse : what would you like to learn today?

Forums

Help with div backgrounds