Results 1 to 4 of 4
  1. #1
    Newbie
    Join Date
    May 12th, 2007
    Posts
    4
    using a variably resizing cell with rowspan?
    I'm building a site with two columns, each that variably expands/collapses. The left column is a sidebar with collapsible sections. The right section is the main content section that grows/shrinks with the content on each page. That part was easy enough.

    Then we decided that, because on most pages the sidebar was short and the content long, that it made sense to "dock" part of our L-shaped footer under the sidebar. Like this (very draft) site: http://www.hbr.morebutter.net/joomla/rowspan.html

    The current right column is just a testing ground. I added temporary +/- sections to allow simulating the variously sized content on different pages.

    Because of the L-shaped footer, the image under the sidebar (the circle with the tree) needs to remain docked at the bottom of that column (while the sidebar content remains docked at the top). I accomplished that using rowspan and v-align for the two sub-cells in the left column.

    All is working well -- with one annoying exception. When the left bar is longer than the right, the bottom-left image properly moves down and stays bottom-docked, but the left border above it gets lost and replaced with empty space.

    I thought I could remedy that by using a middle cell that variously expands in hands. Something like a height=100% command. No luck.

    If anyone has any suggestions, I'd really appreciate it!

    Thanks.

  2. #2
    Newbie
    Join Date
    November 8th, 2006
    Location
    Indiana
    Posts
    38
    Hello gromf

    First let me welcome you to ABW. I'm sure you'll find a vast amount of information floating around that can help you with whatever you need. BTW, you should introduce yourself in the Introduce Yourself forum.

    About your question:
    Are you doing your styling with CSS or old skool HTML1.0 tags?

    If CSS, a couple things to try:
    Ensure that both your left and right margins are set to the correct amount in the main section of your page.

    Try using a background image (versus just a color) for your columns. It doesn't have to be anything fancy just a 1px high by whatever your column width is. Than make sure that that it is positioned and repeats correctly such as:
    Code:
    background: url(your-image.jpg) repeat-y top;
    Also, if you want your footer to clear both columns, don't forget your clear: both; code in your CSS sheet

  3. #3
    Newbie
    Join Date
    May 12th, 2007
    Posts
    4
    Are you doing your styling with CSS or old skool HTML1.0 tags?

    If possible, I'd prefer to do this with HTML.
    I understand that CSS may accomplish the same -- and more easily -- but I'm a CSS layout novice, and the learning curve is a little daunting. In other words, if there's a way to do this with HTML, I'm happy to use brute force and have a complicated code for the layout. (For now.) If it just can't be done, I'll invest the time to learn CSS layouts.

    Having gotten this close with HTML tables, I'd sort of like to finish the project that way.....

    Try using a background image (versus just a color) for your columns.
    Thanks for the tip. I most certainly will!

    you should introduce yourself in the Introduce Yourself forum.
    Doing it now. Thanks again!

  4. #4
    Newbie
    Join Date
    May 12th, 2007
    Posts
    4
    Fixed
    Well, score another for tenacity. I got the tabling fixed and it now does what I need. I thought I ought to post the fixed version (http://www.hbr.morebutter.net/joomla/rowspan-fixed.html) and offer a bit of advice I wish I took earlier.

    SOLUTION: The problem was that the bottom left cell (with the image) was the cell that was expanding/shrinking. Since that cell did not have a border element (except for the one embedded in the image), when the cell would grow, the border would appear to disappear. By holding the size of that cell constant (setting the height to match the image height), it forced the middle cell to expand/contract, as I wanted.

    TIP: I discovered the problem by assigning a color to the background of each cell. That helped me understand the complicated table structure and to debug. Once I assigned the colors, the problem surfaced, and the solution took 30 seconds. Next time I setup complicated tables I'm always going to start with a colored template like this one (http://www.hbr.morebutter.net/joomla/simplified.html).

  5. Newsletter Signup

+ Reply to Thread

Similar Threads

  1. Resizing a Video
    By mailman in forum ShareASale - SAS
    Replies: 1
    Last Post: February 18th, 2009, 01:31 PM
  2. Need help resizing cj link image
    By echi in forum Commission Junction - CJ
    Replies: 13
    Last Post: February 13th, 2008, 02:08 AM
  3. Image resizing
    By burnden in forum WebMerge (Fourthworld.com)
    Replies: 1
    Last Post: December 31st, 2006, 10:56 PM
  4. Hotlinked Image Resizing
    By TK in forum Programming / Datafeeds / Tools
    Replies: 4
    Last Post: January 4th, 2006, 03:30 PM
  5. Resizing an image with WM-ImagePath tag
    By billbam in forum WebMerge (Fourthworld.com)
    Replies: 1
    Last Post: June 11th, 2004, 08:26 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •