Zen Cart Logo
Forums / Basic Configuration / Left and Right sides boxes are centering... help

Left and Right sides boxes are centering... help

Locked

Views: 1,515

Results 1 to 7 of 7
This thread is locked. New replies are disabled.
19 May 2007, 6:02 AM
#1
foilman avatar

foilman

New Zenner

Join Date:
May 2006
Posts:
51
Plugin Contributions:
0

Left and Right sides boxes are centering... help

I have no idea what I did but I am getting ready to go live with my site this weekend, or so I hope! It seems my left and right side boxes are centering vertically on my pages. I want it to stop! :censored: I have spent the last 3 hours searching the forum and searching the faq's and I can not seem to find it. Can someone plese help me?? My site is https://www.foilman.com/store

Please help me save my Sunday deadline and still get this site up! :)

Thanks,
Rich F
Foilman.com

19 May 2007, 8:38 AM
#2
gjh42 avatar

gjh42

Black Belt

Join Date:
Jul 2005
Location:
Upstate NY
Posts:
21,876
Plugin Contributions:
8

Re: Left and Right sides boxes are centering... help

I've never really used tables, so it took a guess after searching the relevant parts of view source, but here it is: you are missing

valign="top"

in navColumnOne and navColumnTwo. This is an HTML table tag that needs to be in <td> here:```php

<table width="100%" border="0" cellspacing="0" cellpadding="0" id="contentMainWrapper"> <tr> <td id="navColumnOne" class="columnLeft" style="width: 150px"> ``` just like it is here```php <td valign="top"> <!-- bof breadcrumb --> <div id="navBreadCrumb">Home </div> ``` Apparently table contents default to centered vertically instead of top/left like divs.
19 May 2007, 8:43 AM
#3
sketchy avatar

sketchy

Totally Zenned

Join Date:
Aug 2006
Location:
Canada
Posts:
940
Plugin Contributions:
2

Re: Left and Right sides boxes are centering... help

Whoah.. code offender!! :wink:

In your current template's "stylesheet.css":

//*#navColumnOne {
        background-color: #CC0000;

        }

#navColumnTwo {
        background-color: #CC0000;
        }   *//

Your customized Comment-Out tags are naughty. Remove the extra back slashes(in red).

/please use this/

19 May 2007, 8:15 PM
#4
foilman avatar

foilman

New Zenner

Join Date:
May 2006
Posts:
51
Plugin Contributions:
0

Re: Left and Right sides boxes are centering... help

Thank you, I think I got it... now to figure out (on the same site https://www.foilman.com/store) how to get it even with the top header logo. Any ideas anyone??

Thanks,
Rich

19 May 2007, 9:26 PM
#5
gjh42 avatar

gjh42

Black Belt

Join Date:
Jul 2005
Location:
Upstate NY
Posts:
21,876
Plugin Contributions:
8

Re: Left and Right sides boxes are centering... help

You don't mean even with the top of the header/logo, do you? That would involve yanking big chunks of code out of tpl_header.php and putting the code in another file for the center column.
Or you might be able to do it with some advanced CSS absolute positioning techniques.

If you are just talking about the unevenness between the Categories, breadcrumb and Visit Our Sponsor headers, you can remove the border around the categories box, and fiddle with padding-bottom on one or more of #categoriesHeader, #navBreadCrumb or whatever the right box header div is named.

19 May 2007, 9:31 PM
#6
foilman avatar

foilman

New Zenner

Join Date:
May 2006
Posts:
51
Plugin Contributions:
0

Re: Left and Right sides boxes are centering... help

Glenn,
Well yeah that is was I had meant, well until you just scared me! I will settle with taking out the border for now and maybe play with it another time I guess. Sure would love to know what to do for the future if you do know how to do it?

Thanks,
Rich

19 May 2007, 11:16 PM
#7
gjh42 avatar

gjh42

Black Belt

Join Date:
Jul 2005
Location:
Upstate NY
Posts:
21,876
Plugin Contributions:
8

Re: Left and Right sides boxes are centering... help

Do you realize that in a 1024x768 monitor, your logo won't fit between the sidebars? I'm not sure if that's the majority of existing computers, but if you do what you suggest, you will make it impossible for a vast number of people to see your site properly/comfortably.

Anyway, assuming you work around that problem, the basic situation is that tpl_header.php needs to run first to output message alerts above the top of the regular page, so it can't just be moved into the table structure as is. All of the header output code could be moved to another (center column) file, and display between the sidebars, while the header div would disappear from above the sidebars.

The gentler way to do it, without getting into detailed specs, is to make #headerWrapper absolutely positioned, with 100% width, left padding = left sidebar and right padding = right sidebar. Absolutely positioned elements take up no space in the page layout, so the header area would shrink to nothing and the rest of the page would move up to the top. Give the center column a margin-top = header height, and it will drop down below where the header is sitting.

There may be other complications in getting it perfect, but I believe this plan will do the job.