template help

[niccol]

Well, that's my point. The container divs are just not there at all.

So, we do not exactly know how the bottom corner was intended to be there. It seems like the structure for it is just not there which is a bit mystifying as it comes from a downloaded template. (or maybe not) Perhaps I am missing something....

What I would try is to create a container div to put it in. To go back to where we were:

<div id="centerHeaderBackground"></div>
<?php
 /**
  * prepares and displays center column
  *
  */
 require($body_code); ?>

I would either do what i said and try and use #centerHeaderBackground. The disadvantage of this is that I do not really know for sure that it is doing nothing special. So, instead let's add a new div.

<div id="centerHeaderBackground"></div>
<div id="newDiv">
<?php
 /**
  * prepares and displays center column
  *
  */
 require($body_code); ?>
</div>

The create a css rule that puts the correct image in the bottom left corner of this new div. Something like the rule that is hanging around loose in the css file:

{ background-image: URL(../images/MenuRightFooter.gif);
        background-repeat: no-repeat;
}

So make it:

#newDiv{
background-image: URL(../images/MenuRightFooter.gif);
background-repeat: no-repeat;
background-position: bottom left;
}

You may have issues with padding, margins and borders so that may need to be tweaked.

[niccol]

After a cup of coffee here is an afterthought.

If you do try this then you may have to re-arrange the order in which the images are applied. You are creating nested <div>s. You want the corners to be applied to the innermost <div>s other wise they may not be visible.

[georgiepants]

After a cup of coffee here is an afterthought.

If you do try this then you may have to re-arrange the order in which the images are applied. You are creating nested <div>s. You want the corners to be applied to the innermost <div>s other wise they may not be visible.

Nick,

I used the nested div you suggested...

<div id="centerHeaderBackground">
<div id="newDiv">
<?php
 /**
  * prepares and displays center column
  *
  */
 require($body_code); ?>
</div>
</div>

and tweaked padding in the css as well...

.centerColumn {
	background-image: URL(../images/MenuRightHeader.gif);
	background-repeat: no-repeat;
	padding-top:10px;
        background-position: top left;
}

#centerBackground {
	background-image: URL(../images/MenuRightBackground.gif);
	background-repeat: repeat-y;
        background-position: top left;
}

#newDiv{
background-image: URL(../images/MenuRightFooter.gif);
background-repeat: no-repeat;
background-position: bottom left;
padding-bottom: 100%;
}

and i got this,


which seems ok.

But without the padding the MenuRightFooter.gif is directly under whatever products are in the center.


The new challenge is to find a way to permanently align the MenuRightFooter.gif image to the bottom of the left column, since the center column's length seems to be dictated by how much content is displaying in the LEFT COLUMN.

Now THAT would be perfect!

[niccol]

OK. Well the answer might be to put the bottom left corner into the <td> and the top left corner into the div. So #centerBackground is the one that needs to have the bottom left corner.

Basically, the <td> will be full height but the div inside it might not be.

[gjh42]

Since you have a fixed-width #mainWrapper at 900px wide, you can know exactly how wide the center column will be.
Thus, you can make one bg with the entire top(TL & TR rounded corners) and another with the entire middle and bottom (BL & BR rounded corners). If you want a border, make the second gif taller than you will ever have a page so there will always be side borders.

Assign the bottom gif to the <td>, positioned at the bottom center, and the top gif to the first <div>, positioned at top center. This will always fill the column from top to bottom.

There is an alternate version of this method using three gifs, including one for the middle bg and side borders that repeats vertically so none of the gifs needs to be tall. That would not work so well for the "keep it full height" requirement.

[niccol]

Judging by the the original design there are no TR and BR rounded corners.

[gjh42]

OK, then make those corners of the gifs square:) The principle and the advice remains the same.