Help repositioning left column

[Eizual]

Hello, due to my limited skills in CSS and php in general, I'm having difficulty trying to shift my entire left column to the top.

Here is the link:
www.bettiesgalleria.com/store

What I want to do is to pull the entire category/language column to the top but beneath the "home" and "login" header.

Any help would be much appreciated, thanks!

[kuroi]

The way to do that would be to take your logo out of the tpl_header.php file and place it in the tpl_main_page.php file just above the breadcrumbs.

[gjh42]

Or you can add in your stylesheet

#navColumnOneWrapper {margin-top: -210px;}

right after

#navColumnOneWrapper, #navColumnTwoWrapper, #mainWrapper {
    margin: auto;
} 
#navColumnOneWrapper, #navColumnTwoWrapper {
    margin: 0 0.5em;
}

#navColumnOneWrapper {margin-top: -210px;} 

This alone won't work for everyone, but it will work fine for your particular situation.

[kuroi]

Or you can add in your stylesheet

#navColumnOneWrapper {margin-top: -210px;}

This will probably work in Firefox, but I suspect that it will ride up behind the logoWrapper in Internet Explorer, so you may need to play with z-index values to ensure that it's on top, or reduce it's size and float it right. Not sure what Safari will make of it!

[Eizual]

Wow thanks a lot to both of you. Changing it in the style sheet is definitely easier. But I realize thats a manual way of doing it as my logo doesn't center itself on the remaining space. I'm guessing I'll have to play around with the margins manually.

On a side note, whats z-index value? Sorry I'm a complete noob.

[kuroi]

On a side note, whats z-index value?

A z-index can be used to change the stocking order of web page elements that overlap.

There's not normally much call for them in Zen Cart, but if you move the navColumnOneWrapper to overlap the header, you may need them.

There's a helpful example that you can play with here.

[gjh42]

It does work in Firefox, but I haven't checked other browsers...
In this very minimalist layout, there are no extra backgrounds to interfere with anything.

If you want the logo centered oin the remaining space, giving #logoWrapper a margin-left of 160px and width 100%, and then #logo a margin: auto should do it. I haven't tested those yet on your site.

[gjh42]

On testing, it looks like a simple

#logoWrapper { margin-left: 160px;}

(along with the existing specs) does the whole job of getting the logo centered in the remaining space.

And there is actually a background-color for #logoWrapper, even though it is not needed.