CSS Forum

**FutileSoul** · 02-14-2006, 06:11 PM

on http://futilesoul.com you can see there are two small white rectangles at the top of the page on each side of my layout. Those are supposed to stretch all the way down to the bottom of the page.
Does anyone know how to do that?
Thanks

**mrksoliz** · 02-14-2006, 10:00 PM

Hey FutileSoul you could use somthing like this just adjust the px to fit what you want

.right { z-index: 1; background-color: #000000; position: absolute; right: 98px; top: 50px; height: 1016; width: 4px; padding: 1em; }

.left { z-index: 1; background-color: #000000; position: absolute; left: 137px; top: 40px; height: 1020px; width: 4px; padding: 1em; }

**FutileSoul** · 02-14-2006, 11:43 PM

the height isn't fixed, it will vary day to day

**vangogh** · 12:26 AM

You'll need to make sure the divs with that white background are extending all the way to the end of the page. You have a height of 100% applied to them now, but that will only be 100% of the div not the whole page. The way you would ensure the divs extend to the bottom of the page is to have something inside of them that extends the whole page like content. I'm not sure how you have it set up now will work.

I have a suggestion though. You could try to wrap everything in your page between the opening and closing body tag in a div and then give that div a 5px white border on the right and left. Since everything on the page would be enclosed within your new wrapper div it should extend the entire length of th page.

You may need to readjust how you set some of the positioning on things to get the same look as you have though.

**mrksoliz** · 02-15-2006, 08:37 AM

What if you used a .jpg or .gif with the image height at 100% then use css to position the image

**FutileSoul** · 02-15-2006, 12:53 PM

i tried to do multiple things, and i do have images set at 100%, the images are http://futilesoul.com/images/left.gif and http://futilesoul.com/images/right.gif

I tried to wrap the sides around all of the content, then it puts the content to the right and the sidebars are where i want them, but still not the length of all of the content.

i'm lost.

**vangogh** · 02-15-2006, 02:30 PM

I'm not sure if this is what you tried wth wrapping the sides, but what I'm suggesting is something like this:

<body>

<div id="page">
everthing inside your body tags
</div>

</body>

Then for your css I would add:

div#page {border-width:0 5px; border-color:#fff}

I think that will work, though depending on how you positioned things you may need to make some adjustments. Because you used absolute positioning on your content it's taken out of the document flow and thus not really contained inside the page div. I'm guessing if you tried this the white borders extended as far down as your navigation table.

What you can do is position the page div to be centered and then use margins on your content to get it to display where you want. You can position the page div by specifiying a width in either px or % and then use

div#page {margin:0 auto;}

You may also need to give the page div relative or absolute positioning, but you won't need to specify a top or left.

**mrksoliz** · 02-15-2006, 03:24 PM

Ok Futilesoul I think this might work I did it on my desktop and it worked, in your image tag set your height at 100%

<img height="100%" src="whatever.gif">

know to position you image

.left { z-index: 1; position: absolute; top:250px; left: 0px; }

then just <img class="left" height="100%" widht="whatever" src="whatever"> and adjust top and left to go where you want

**FutileSoul** · 02-15-2006, 04:49 PM

just curious, what does "z-index" do?
ill check and see if i can get it to work now

**FutileSoul** · 02-15-2006, 04:57 PM

im lost, i have the following code and it dont work.

Code:

body
{ background-color: #000000; padding: 0; margin: 0 auto; color: #ffffff; }

#content {
	position:absolute;
	left:50%;
	width:760px;
	margin-top:0px;
	margin-left:-380px;
	padding:15px;
	border:none;
	background-color:#000000;
	}


#mainbanner { width: 750px; height: 375px; position: absolute; top: 0px; left: 5px; margin: 0px;  background-repeat: no-repeat; }

#textads { width: 160px; height: 315px; position: absolute; top: 60px; left: 595px; margin: 0px;   }

.left { z-index: 1; position: absolute; top:0px; left: 0px; }

.right { z-index: 1; position: absolute; top:0px; left: 755px; }

#menu { width: 200px; height: 100%; position: absolute; top: 375px; left: 5px; margin: 0px;  background-repeat: repeat; background-color:#000000;}

#main { width: 550px; position: absolute; top: 375px; left: 205px; margin: 0px 0px 0px 0px; background-repeat: repeat; background-color:#000000; padding: 0px 0px 0px 0px;}

a:link, a:visited { color: #e4e100; text-decoration: none; font-weight: bold; border-bottom: 0px solid #ffffff;}
a:hover { color: #ffffff; border-bottom: 0px solid #ffffff; font-weight: bold;}

</style>
</head>
<body>





<div id="content">
<div class="left">
<div class="right">



<div id="mainbanner">
<TABLE WIDTH=750 BORDER=0 CELLPADDING=0 CELLSPACING=0>
	<TR>
		<TD COLSPAN=2>
			<A HREF="http://futilesoul.com">
				<IMG SRC="images/fs.gif" WIDTH=282 HEIGHT=60 BORDER=0 ALT=""></A></TD>
		<TD COLSPAN=3>
			<A HREF="http://futilesoul.com/?page_id=30">
				<IMG SRC="images/bannerad.gif" WIDTH=468 HEIGHT=60 BORDER=0 ALT=""></A></TD>
	</TR>
	<TR>
		<TD COLSPAN=2>
			<IMG SRC="images/main1.gif" WIDTH=282 HEIGHT=257 ALT=""></TD>
		<TD COLSPAN=2>
			<IMG SRC="images/main2.gif" WIDTH=308 HEIGHT=257 ALT=""></TD>
		<TD ROWSPAN=2>
			<IMG SRC="images/textads.gif" WIDTH=160 HEIGHT=315 ALT=""></TD>
	</TR>
	<TR>
		<TD>
			<A HREF="http://futilesoul.com">
				<IMG SRC="images/home.gif" WIDTH=167 HEIGHT=58 BORDER=0 ALT=""></A></TD>
		<TD COLSPAN=2>
			<A HREF="http://futilesoul.com/?page_id=33">
				<IMG SRC="images/portfolio.gif" WIDTH=226 HEIGHT=58 BORDER=0 ALT=""></A></TD>
		<TD>
			<A HREF="http://futilesoul.com/?page_id=32">
				<IMG SRC="images/contact.gif" WIDTH=197 HEIGHT=58 BORDER=0 ALT=""></A></TD>
	</TR>
	<TR>
		<TD>
			<IMG SRC="images/spacer.gif" WIDTH=167 HEIGHT=1 ALT=""></TD>
		<TD>
			<IMG SRC="images/spacer.gif" WIDTH=115 HEIGHT=1 ALT=""></TD>
		<TD>
			<IMG SRC="images/spacer.gif" WIDTH=111 HEIGHT=1 ALT=""></TD>
		<TD>
			<IMG SRC="images/spacer.gif" WIDTH=197 HEIGHT=1 ALT=""></TD>
		<TD>
			<IMG SRC="images/spacer.gif" WIDTH=160 HEIGHT=1 ALT=""></TD>
	</TR>
</TABLE>
</div>

<div id="bannerad">
</div>

<div id="textads">
<div class="textads">
<center><strong><font color="#cccccc"><small>Advertisements</small></font></strong></cemter><br>
<a href="http://twistedtopics.com"><small>Twisted Topics *nfsw*</small></a><br>
<a href="http://theprojectgeek.com/"><small>The Project Geek</small></a><br>
<a href="http://www.freeminimacs.com/?r=15577121"><small>Free MiniMac</small></a><br>
<a href="http://www.freegamingsystems.com/?r=17970243"><small>Free Gaming Systems</small></a><br>
<br><br><br><br>
<a href="http://www.freepsps.com/?r=17970258"><img src="http://i48.photobucket.com/albums/f242/FutileSoul/psp.gif" border="0"></a><br>
<br><br><a href="http://futilesoul.com/?page_id=30"><small>Advertise</small></a>
</div>
</div>

<div id="main">
<!--  S T A R T   M A I N   C O N T E N T  -->
    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
   <table><tr><td width="550" bgcolor="#252525"> <center><font size="4"> <?php the_date('','<h2>','</h2>'); ?> </font></center></td></tr></table>
    <div class="post">
      <h3 class="storytitle" id="post-<?php the_ID(); ?>"><a href="<?php the_permalink() ?>" rel="bookmark">
        <font size="4"><?php the_title(); ?></font>
        </a></h3>
           <div class="storycontent">
        <?php the_content(__('Read More >>')); ?>
      </div>
 <center><div class="meta">
        <?php _e("Filed under:"); ?>
        <?php the_category(',') ?> — <?php the_author() ?>  <?php the_time() ?>
        <?php edit_post_link(__('Edit')); ?>
      </div> </center>


      <div class="feedback" align="right">
        <?php wp_link_pages(); ?>
        <?php comments_popup_link(__('Comments (0)'), __('Comments (1)'), __('Comments (%)')); ?>
      </div>
      <!--  <?php // trackback_rdf(); ?>  -->
    </div>

		<!--   E N D   O F   P O S T  -->

		<!--   E N D   O F   P O S T  -->

    <?php comments_template(); // Get wp-comments.php template ?>
    <?php endwhile; else: ?>
    <p>
      <?php _e('Sorry, no posts matched your criteria.'); ?>
    </p>
    <?php endif; ?>
    <?php posts_nav_link(' — ', __('&laquo; Previous Page'), __('Next Page &raquo;')); ?>
  <!--  E N D   M A I N   C O N T E N T  -->
</div>

<div id="menu">
<table>

<tr><td width="200" bgcolor="#252525">
<center><h1>Navigation</h1><center></td></tr>
<tr>
<td>
<a href="http://futilesoul.com">Home</a><br>
<a href="http://futilesoul.com/?page_id=33">WebDesign</a><br>
<a href="http://futilesoul.com/?page_id=33">Portfolio</a><br>
<a href="http://futilesoul.com/?page_id=32">Submit Stuff</a><br>
<a href="http://futilesoul.com/?page_id=32">Contact</a><br>
</td></tr>

<tr><td width="200" bgcolor="#252525">
<center><h1>Links</h1><center></td></tr>
<tr>
<td>
<a href="http://digitalnotion.co.uk/phpbb2">DigitalNotion Forums</a><br>
<a href="http://torrancemusic.com">Torrance</a><br>
<a href="http://theclassicstruggle.com">The Classic Struggle</a><br>
<a href="http://burn-the-priest.com/phpBB2">Lamb of God Forums</a><br>
<a href="http://chimaira.com">Chimaira</a><br>
</td></tr>

<tr><td width="200" bgcolor="#252525">
<center><h1>BlogRoll</h1><center></td></tr>
<tr>
<td>
<script language="javascript" type="text/javascript" src="http://rpc.blogrolling.com/display.php?r=b3b8a68befa33467e7242b704752b4a7"></script>

</td></tr>

<tr><td width="200" bgcolor="#252525">
<center><h1>Blog of the Week</h1><center></td></tr>
<tr>
<td><center>
<!-- Start of BlogExplosion Rent code -->
<script type="text/javascript" language="javascript">
var rent_siteid="58474";
</script>
<script type="text/javascript" language="javascript" src="http://rentblog.blogexplosion.com/rentblog.js"></script>
<!-- End of BlogExplosion Rent code --></center>
</td></tr>

<tr><td width="200" bgcolor="#252525">
<center><h1>Meta</h1><center></td></tr>
<tr>
<td>

<?php wp_loginout(); ?>

</td></tr>

<tr><td>
<A HREF="http://blogclicker.com/?username=spud_8350" TARGET="_blank"><IMG SRC="http://blogclicker.com/banners/bc80x15gold.gif" BORDER=0></A>
<br>
<a href="http://lush.solais.net/in.php?id=872" target="_blank">
<img src="http://lush.solais.net/button.php?id=872" border="0" alt="Lush Topsites">
</a>
<br>
<a href="http://www.blogtop100.com/in.php?id=223">
<img src="http://www.blogtop100.com/button.php?id=223" border="0"><br>
<a href="http://www.blogadvance.com/topblogs/">
<img src="http://www.blogadvance.com/topblogs/button.php?u=futilesoul" alt="BlogAdvance Top Blogs" border="0" width="88" height="31" />
</a>
</td></tr>
</table>
</div>


</div>
</div>
</div>
</div>
</div>

**mrksoliz** · 02-15-2006, 05:17 PM

Quote:

Dont use div tags for this put class="left" and class="right" and in your img tag example

<img class="left" height="100% width="" src="">
<img class="right" height="100% width="" src"">

replace the div tags with the img tags. if you just want to use div tags you will need to surround the img tag like this

<div class="left">
<img src="" height="100%>
</div>

you always have to close div tags

**mrksoliz** · 02-15-2006, 05:19 PM

the z index is the layer the grater the number the closer to the screen. so zidex: 1 would be on bottom compared to zindex: 4, 4 would be on top

**FutileSoul** · 02-15-2006, 05:28 PM

i did what i think you are telling me to do, but if you look at http://futilesoul.com it only displays the image at the very top, and only the height of the image.

Code:

<!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">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<title>
<?php bloginfo('name'); ?>
<?php if ( is_single() ) { ?>
&raquo;Blog Archive
<?php } ?>
<?php wp_title(); ?>
</title>
<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" />
<!-- leave this for stats -->
<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 wp_head(); ?>
<style type="text/css" media="screen">


body
{ background-color: #000000; padding: 0; margin: 0 auto; color: #ffffff; }

#content {
	position:absolute;
	left:50%;
	width:760px;
	margin-top:0px;
	margin-left:-380px;
	padding:15px;
	border:none;
	background-color:#000000;
	}



#mainbanner { width: 750px; height: 375px; position: absolute; top: 0px; left: 5px; margin: 0px;  background-repeat: no-repeat; }

#textads { width: 160px; height: 315px; position: absolute; top: 60px; left: 595px; margin: 0px;   }


.left { z-index: 1; position: absolute; top:0px; left: 0px; }
.right { z-index: 1; position: absolute; top:0px; left: 755px; }

#menu { width: 200px; height: 100%; position: absolute; top: 375px; left: 5px; margin: 0px;  background-repeat: repeat; background-color:#000000;}

#main { width: 550px; position: absolute; top: 375px; left: 205px; margin: 0px 0px 0px 0px; background-repeat: repeat; background-color:#000000; padding: 0px 0px 0px 0px;}

a:link, a:visited { color: #e4e100; text-decoration: none; font-weight: bold; border-bottom: 0px solid #ffffff;}
a:hover { color: #ffffff; border-bottom: 0px solid #ffffff; font-weight: bold;}

</style>
</head>
<body>




<div id="content">

<img class="left" height="100%" width="5px" src="images/left.gif">
<img class="right" height="100%" width="5px" src="images/right.gif">


<div id="mainbanner">
<TABLE WIDTH=750 BORDER=0 CELLPADDING=0 CELLSPACING=0>
	<TR>
		<TD COLSPAN=2>
			<A HREF="http://futilesoul.com">
				<IMG SRC="images/fs.gif" WIDTH=282 HEIGHT=60 BORDER=0 ALT=""></A></TD>
		<TD COLSPAN=3>
			<A HREF="http://futilesoul.com/?page_id=30">
				<IMG SRC="images/bannerad.gif" WIDTH=468 HEIGHT=60 BORDER=0 ALT=""></A></TD>
	</TR>
	<TR>
		<TD COLSPAN=2>
			<IMG SRC="images/main1.gif" WIDTH=282 HEIGHT=257 ALT=""></TD>
		<TD COLSPAN=2>
			<IMG SRC="images/main2.gif" WIDTH=308 HEIGHT=257 ALT=""></TD>
		<TD ROWSPAN=2>
			<IMG SRC="images/textads.gif" WIDTH=160 HEIGHT=315 ALT=""></TD>
	</TR>
	<TR>
		<TD>
			<A HREF="http://futilesoul.com">
				<IMG SRC="images/home.gif" WIDTH=167 HEIGHT=58 BORDER=0 ALT=""></A></TD>
		<TD COLSPAN=2>
			<A HREF="http://futilesoul.com/?page_id=33">
				<IMG SRC="images/portfolio.gif" WIDTH=226 HEIGHT=58 BORDER=0 ALT=""></A></TD>
		<TD>
			<A HREF="http://futilesoul.com/?page_id=32">
				<IMG SRC="images/contact.gif" WIDTH=197 HEIGHT=58 BORDER=0 ALT=""></A></TD>
	</TR>
	<TR>
		<TD>
			<IMG SRC="images/spacer.gif" WIDTH=167 HEIGHT=1 ALT=""></TD>
		<TD>
			<IMG SRC="images/spacer.gif" WIDTH=115 HEIGHT=1 ALT=""></TD>
		<TD>
			<IMG SRC="images/spacer.gif" WIDTH=111 HEIGHT=1 ALT=""></TD>
		<TD>
			<IMG SRC="images/spacer.gif" WIDTH=197 HEIGHT=1 ALT=""></TD>
		<TD>
			<IMG SRC="images/spacer.gif" WIDTH=160 HEIGHT=1 ALT=""></TD>
	</TR>
</TABLE>
</div>

<div id="bannerad">
</div>

<div id="textads">
<div class="textads">
<center><strong><font color="#cccccc"><small>Advertisements</small></font></strong></cemter><br>
<a href="http://twistedtopics.com"><small>Twisted Topics *nfsw*</small></a><br>
<a href="http://theprojectgeek.com/"><small>The Project Geek</small></a><br>
<a href="http://www.freeminimacs.com/?r=15577121"><small>Free MiniMac</small></a><br>
<a href="http://www.freegamingsystems.com/?r=17970243"><small>Free Gaming Systems</small></a><br>
<br><br><br><br>
<a href="http://www.freepsps.com/?r=17970258"><img src="http://i48.photobucket.com/albums/f242/FutileSoul/psp.gif" border="0"></a><br>
<br><br><a href="http://futilesoul.com/?page_id=30"><small>Advertise</small></a>
</div>
</div>

<div id="main">
<!--  S T A R T   M A I N   C O N T E N T  -->
    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
   <table><tr><td width="550" bgcolor="#252525"> <center><font size="4"> <?php the_date('','<h2>','</h2>'); ?> </font></center></td></tr></table>
    <div class="post">
      <h3 class="storytitle" id="post-<?php the_ID(); ?>"><a href="<?php the_permalink() ?>" rel="bookmark">
        <font size="4"><?php the_title(); ?></font>
        </a></h3>
           <div class="storycontent">
        <?php the_content(__('Read More >>')); ?>
      </div>
 <center><div class="meta">
        <?php _e("Filed under:"); ?>
        <?php the_category(',') ?> — <?php the_author() ?>  <?php the_time() ?>
        <?php edit_post_link(__('Edit')); ?>
      </div> </center>


      <div class="feedback" align="right">
        <?php wp_link_pages(); ?>
        <?php comments_popup_link(__('Comments (0)'), __('Comments (1)'), __('Comments (%)')); ?>
      </div>
      <!--  <?php // trackback_rdf(); ?>  -->
    </div>

		<!--   E N D   O F   P O S T  -->

		<!--   E N D   O F   P O S T  -->

    <?php comments_template(); // Get wp-comments.php template ?>
    <?php endwhile; else: ?>
    <p>
      <?php _e('Sorry, no posts matched your criteria.'); ?>
    </p>
    <?php endif; ?>
    <?php posts_nav_link(' — ', __('&laquo; Previous Page'), __('Next Page &raquo;')); ?>
  <!--  E N D   M A I N   C O N T E N T  -->
</div>

<div id="menu">
<table>

<tr><td width="200" bgcolor="#252525">
<center><h1>Navigation</h1><center></td></tr>
<tr>
<td>
<a href="http://futilesoul.com">Home</a><br>
<a href="http://futilesoul.com/?page_id=33">WebDesign</a><br>
<a href="http://futilesoul.com/?page_id=33">Portfolio</a><br>
<a href="http://futilesoul.com/?page_id=32">Submit Stuff</a><br>
<a href="http://futilesoul.com/?page_id=32">Contact</a><br>
</td></tr>

<tr><td width="200" bgcolor="#252525">
<center><h1>Links</h1><center></td></tr>
<tr>
<td>
<a href="http://digitalnotion.co.uk/phpbb2">DigitalNotion Forums</a><br>
<a href="http://torrancemusic.com">Torrance</a><br>
<a href="http://theclassicstruggle.com">The Classic Struggle</a><br>
<a href="http://burn-the-priest.com/phpBB2">Lamb of God Forums</a><br>
<a href="http://chimaira.com">Chimaira</a><br>
</td></tr>

<tr><td width="200" bgcolor="#252525">
<center><h1>BlogRoll</h1><center></td></tr>
<tr>
<td>
<script language="javascript" type="text/javascript" src="http://rpc.blogrolling.com/display.php?r=b3b8a68befa33467e7242b704752b4a7"></script>

</td></tr>

<tr><td width="200" bgcolor="#252525">
<center><h1>Blog of the Week</h1><center></td></tr>
<tr>
<td><center>
<!-- Start of BlogExplosion Rent code -->
<script type="text/javascript" language="javascript">
var rent_siteid="58474";
</script>
<script type="text/javascript" language="javascript" src="http://rentblog.blogexplosion.com/rentblog.js"></script>
<!-- End of BlogExplosion Rent code --></center>
</td></tr>

<tr><td width="200" bgcolor="#252525">
<center><h1>Meta</h1><center></td></tr>
<tr>
<td>

<?php wp_loginout(); ?>

</td></tr>

<tr><td>
<A HREF="http://blogclicker.com/?username=spud_8350" TARGET="_blank"><IMG SRC="http://blogclicker.com/banners/bc80x15gold.gif" BORDER=0></A>
<br>
<a href="http://lush.solais.net/in.php?id=872" target="_blank">
<img src="http://lush.solais.net/button.php?id=872" border="0" alt="Lush Topsites">
</a>
<br>
<a href="http://www.blogtop100.com/in.php?id=223">
<img src="http://www.blogtop100.com/button.php?id=223" border="0"><br>
<a href="http://www.blogadvance.com/topblogs/">
<img src="http://www.blogadvance.com/topblogs/button.php?u=futilesoul" alt="BlogAdvance Top Blogs" border="0" width="88" height="31" />
</a>
</td></tr>
</table>
</div>


</div>
</div>
</div>
</div>
</div>



</body>
</html>

**FutileSoul** · 02-15-2006, 05:30 PM

how would you get the image class to go around all of the content.

**mrksoliz** · 02-15-2006, 05:38 PM

If the gifs or the actual height they might be to small if you have paint shop or somthing like that try to resize the gif to make it larger but dont change your code only make the gif larger the browser will render the gif to the size of the code

**FutileSoul** · 02-15-2006, 05:40 PM

if i make the gif larger, that should only make the sidebars displayed the same height as the gif, not the height of the content.

**mrksoliz** · 02-15-2006, 05:40 PM

Quote:

how would you get the image class to go around all of the content

.??
I dont understand what you mean

**mrksoliz** · 02-15-2006, 05:44 PM

but its possible to streach the gif if you have height set at 100% in the img tag because that tells the browser to show the image all the way down the page. not 100% of the image

**FutileSoul** · 02-15-2006, 05:45 PM

like my <div id="content">, it goes around all of the content on my page, if the images go around all of the content like the content div then it should stretch the image the entire height of the content.

**mrksoliz** · 02-15-2006, 05:49 PM

img is a single container tag there is no closing tag because it calls for an image not content thats why you have the option to set the image in pixels or percent