[Solved]Need image in the column at the bottom of column

[karin42]

Hi!

My client would like to use an image that he designed on his website. It's not exactly a space saving image. He wants the trees to go up the sides of the page with the products inbetween.

I cut up the orginial and I have the left-side image in there now, as a background image and set it go to the bottom left. But it goes to the bottom of the lower module, not to the end of the column. The DIV is expanding according to the contents of the column rather than all the way down to the edge of the middle column.

Can anyone checkout what I'm talking about? I want the trees to come down and meet the footer. And for it to be flexible and always come down correctly.

http://www.wildeyedloon.com/liveedge/category.php?id_category=5

Any help would be very much appreciated.

-Karin

[Static]

Hard to tell without playing with the full theme

Maybe have it as "one" image set as a background in the #page div positioned bottom center
then make the module blocks transparent or semi-transparent

Static

[karin42]

yes, that might work if the whole page is static but it isn't. There's also the requirement to be able to have 16 products listed on the page. that would make the footer go down even further. I haven't really made any changes as to how the sections themselves work. It's just the right/left column div that don't go all the way down.

thanks for the suggestion, I think I'm going to have to do something different. Please let me know if you think of anything else. Anyone else?

[Paul C]

Hmm that's a classic problem with dynamic sites.

I don't have a complete answer for you, but some ideas to get you going.

Firstly. I think you need the three columns (left, middle and right) to always be the same size (height). Currently the left column stops at the end of the categories box and the right column stops at the end of the wishlist block. Have a read of this article for information on how to "fix" this:

http://www.search-this.com/2007/02/26/how-to-make-equal-columns-in-css/

Once you have full-length left and right columns you'll need to slice your graphics so that you have a repeatable-y image that you can use as the background which should mean the graphics magically "grows" as the center column gets longer. Well that's the theory anyway!

Hope this helps/inspires :-)

Paul

[Paul C]

Actually I've thought of another, maybe easier way.

Here's the "container" markup (this is off the top of my head, so expect mistakes):

   <-- prestashop header -->


   <!-- prestashop main content -->


   <!-- prestashop footer>

[karin42]

Thank you Paul! You inspired me!

It was even easier than that! I just modified the background url of the page div.

#page {
...
background-color:black;
background-image: url('../img/footer.jpg');
background-repeat: no-repeat;
background-position: bottom left;
}

And then added a width property to the footer to make sure it gets shown appropriately for both short and long pages.

#footer {
...
height: 130px;
}

It works perfectly! yea! Thank you very much! My client will be so happy.

-Karin

[Paul C]

Cool!

Although I thought you needed the trees to grow from the footer the the header! That's why I went into all the detail about the side columns....

Sorted anyway, so Yaay!

Paul