XHTML/CSS - Stretching my interface with content.

Is it possible?

[fungku]

I can't seem to get it to work for me, I also didn't know if this post should be here or in HTML, especially since I do not know in which way the solution can or should be achieved.

I am working on a new design for my website, and decided to go at it without tables, and using XHTML 1.0 Strict and CSS.

I made a new interface and sliced it up and put it together, but now I can't figure out how to make it stretch with the content.

I have marked the area with text ("no stretch?") that I would like to stretch, the background-image is menu_stretch.gif:

<snip>

<snip>

So, does anyone know how this could be done?

Thanks,

-fungku-

I was told that it is unliked here to put in urls, but I didn't know how else to show my problem.

[edited by: engine at 8:01 am (utc) on Aug. 17, 2003]
[edit reason] No urls, thanks. See TOS [webmasterworld.com] [/edit]

[MonkeeSage]

Hi again fungku:

I'm not sure if that is possible or not with just CSS, especially uncertain with a fixed layout like that (doesn't mean it's not posible, mabye SuzyUK or one of the other CSS pros knows how to do it?)...possibly with JavaScript or some server side.

But What may work for you (doesn't hurt to try anyway) is to set an

overflow: auto;

rule on your content div. This won't grow the interface, but it will give your content scrollbars when it gets too big for it's britches.

Jordan

[fungku]

Well, that's a great temporary solution, thank you (again) =)

I hope I can get this figured out though... two scrollbars is too many =P

(maybe I should have stuck with tables, thogu hI don't want to go back)

[MonkeeSage]

fungku:

I was playing around with setting the content div height fluidly using percentages, and got it to work, but now the content just goes underneath the images and sticks out the bottom, heh. Not pretty.

I'm not sure exactly how you would go about getting the whole thing to grow, or determining how much it needs to grow by, &c., so I think my tiny brain has done all it can. Sorry I couldn't be of more help. Hope someone with a better brain can help you more!

Ps. Deleted all downloaded files from your site.

Jordan

[fungku]

No problem, don't worry about it.

I appreciate your effort none-the-less ^.^

[fungku]

Actually I have been working on this a lot, and almost have it figured out.

I just need to make the height of my content-spacer DIV to be the same height as the containing block.

I have the height set to 100%, but that doesn't seem to work.

I think it's because the height gets set to the same height as the containing block's, but then the content stretches that, so that block is now taller, but teh content-spacer stays at that same height.

Is there any way to make this work? :(

(code posted in next post)

[edited by: fungku at 4:50 pm (utc) on Aug. 18, 2003]

[fungku]

HTML:

 <!-- Big Block Start -->
 <div id="big-block"> 
 <!--Containing Block for Content -->
  <div id="content-block"> 
  <div id="content-spacer"> </div>
 <!-- Content Stuff Start -->
    <div id="content-bg"> 
    <div id="content"> 
     <div id="contentarea"> 
     <div class="contentarea-top"><img src="./slice_images/contentarea_top.gif" width="380" height="34" alt="" /></div>
     <div class="contentarea-text"> 
     <p>Lots of text here to stretch everything.
     </p>
     </div>
     <div class="contentarea-bottom"> <img src="./slice_images/contentarea_bottom.gif" width="380" height="41" alt="" />
     </div>
    </div>
    <div id="content-sidebar"><span class="title-text">Latest Topcs</span><br />
     <?php include('path-to-my-forum');?>
     <br />
     <br />
     <span class="title-text">Who's Online</span><br />
     <?php include('path-to-my-forum');?>
    </div>
   </div>
   </div>
 <!-- Content Stuff End -->
 </div>
 <!-- Bottom-block Start -->
 <div id="bottom-block"> 
  <div id="stretch-bottom"> <img src="./slice_images/stretch_bottom.gif" width="141" height="47" alt="" /></div>
  <div id="footer-corner"> <img src="./slice_images/footer_corner.jpg" width="141" height="88" alt="" /> 
  </div>
  <div id="footer"> <img src="./slice_images/footer.gif" width="643" height="88" alt="" /></div>
  </div>
 <!-- Bottom-block End -->
 </div>
 <!-- Big Block End -->

CSS:

#big-block {
  position: absolute;
  left: 0px;
  top: 336px;
}
#content-block {
  width: 784px;
}
#content-spacer {
  float: left;
  width: 141px;
  min-height: 592px;
  height: 100%;
  background-color: #f00;
  background-image: url("../slice_images/menu_stretch.gif");
  background-repeat: repeat-y;
}
#content-bg {
  float: left;
  width:643px;
  min-height: 592px;
  background-image: url("../slice_images/content_stretch.gif");
  background-repeat: repeat-y;
}
#content {
  width:600px;
  height: auto;
}
#contentarea {
  float: left;
  width:380px;
}
#content-sidebar {
  float: left;
  width: 192px;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 9px;
}
#bottom-block {
  width: 784px;
  height: 135px;
}
#stretch-bottom {
  position:absolute;
  left:0px;
  top:881px;
  width:141px;
  height:47px;
}
#footer-corner {
  position:absolute;
  left:0px;
  top:928px;
  width:141px;
  height:88px;
}
#footer {
  position:absolute;
  left:141px;
  top:928px;
  width:643px;
  height:88px;
}

[fungku]

Well, no ideas eh? =(

Does anyone know if z-indexing is compatible in most browsers?

I might be able to play around with it that way :-/

[MonkeeSage]

fungku:

I would have thought that more people would have had experience with what you are trying to do and would have been able to help...mabye they all 'cheated' and just used tables instead. ;)

AFAIK, the z-index attribute is supported in all the gen4 browsers (IE6 / NN6 / Opera6, &c.), just don't use negative values and I think it will work fine. Mozilla and Opera don't like z-indexes with negative values for some reason.

Jordan

[fungku]

I kind of have it working on my main page, but not the way I initially planned.

Oh well....