drastic reshaping of pages - I need help

[rstevenson]

Hi folk,

In the stock layout of Zen Cart, navColumnOne is inside of contentMainWrapper. I'd like to separate them. That is, I'd like navColumnOne to be outside of contentMainWrapper. (I'm not using the right column.) And I want headerWrapper to be above contentMainWrapper, and the same width, rather than stretching over both the left column and the body.

Basically, I'd like to turn the whole thing into 2 columns beside each other rather than the current 3 columns under a header. I can force the header over via styles, but to get the left column to move up, it has to be taken out of the contentMainWrapper. I think.

I don't think I can do all of this via the stylesheet alone; I'll need to rearrange some things in the code.

Can someone knowledgeable in these matters point me in the right direction please?

TIA

Rob

[barco57]

I did this once......trying to remember how.......margins on the header don't work.....if I remember right I used absolute positioning to move the headerWrapper over far enough that the left column will automatically move up to fill the space....I'd have to try it again to see if this was all I did or not, but it will get you closer.

[Kim]

You can do anything you want to with your tpl_main_page.php. Remove the table, rearrange the table, rearrange the elements in the table. Get creative. :)

[rstevenson]

Hey guys, it's Friday night. What are you doing answering questions so quickly? ;-)

Thanks. I'll have a boo, as we say here, at tpl_main_page.php (it means have a look, for reasons that escape me. Maybe derived from peek-a-boo?)

I already have tpl_main_page.php in my custom folder, having made a few small changes. I guess I'll have to get out the ginsu knives and hack away at it. Note to self: make backups as you go!!!

Rob

[barco57]

I tried my method using just the css RELATIVE positioning of the header wrapper moves it over.....but then you have to use some absolute positioning on columnLeft.....kinda like .columnLeft {position: absolute; top: 0px;} to move the entire left column up and to hold the headerWrapper in place for when people change the size browser window.....takes a little teaking to get everyone to line up correctly

[rstevenson]

Yeah, that should be worth a shot. I was poking away at something like that, but I'm not too familiar with CSS positioning, so I didn't get it. Your hint should set me in the right direction.

I think, considering the simplicity of what I'm aiming for, I may need to slice and dice the stylesheets to get rid of any inadvertant coagulants, to coin a term. I've often thought of starting with a bare bones one and building up. Now might be the time to try it.

[barco57]

When I did it before I was converting a site that was "2" columns....actually it was two frames and I wanted the left column to start at the top of the page...the processes was made simpler by the fact the site I was converting was all white background and no borders any where so to get some alignment stuff to work I just used strange but different background colors on each element til I got em where I wanted and then changed everyone back to white....the only thing that was a pain was the footer.....everything in the footer centered to the page so I had to fix its width and shove it over under the center column so that centered elements looked consistent from top to bottom on the page.
I had never thought about Kims idea but I think I might set up a test cart and give that a go to see what I come up with.