categories sidebox in the header?

The site is at;
http://dragonmother.com/wandworks/index.php
The look is steampunk/scrapbook :smile:
I want her logo, as you can see, to be taller than usual and to the right. I want the categories box to share that space, on the left-- and match it in height. there won't be many categories, so I'm not too worried about it filling up.

At the moment, I've shoved the left column up to the top of the main area, but that is not working! I want the rest of the sidebar down under the header area, as it would normally be.

Also, the breadcrumbs ought to be under the logo... And they just don't want to go there:huh:

Any suggestions?

Dang, I'm hoping someone, somewhere, has tried this successfully. In my searches, I've found several people who wanted to-- but the threads peter out before the answers come up...:blink:

Where i would like to put my categories box, is in the left-hand side of my header.
Right now, my code looks like this;

<!--bof-branding display-->
<div id="logoWrapper">

    <div id="logo"><?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">' . zen_image($template->get_template_dir(HEADER_LOGO_IMAGE, DIR_WS_TEMPLATE, $current_page_base,'images'). '/' . HEADER_LOGO_IMAGE, HEADER_ALT_TEXT) . '</a>'; ?></div>

I changed the logo id in css to float to the right, and my logo image is exactly where i want it tobe.

Now, I want to drop my categories sidebox into the left side of the header.
To do that, I have tried; ```php

However, when I save my file to the server, everything disappears beyond the eof navigation display notation in tpl_header.php

I really don't see why it should break the file like this... It's a copy of this line;

<div id="navMainSearch"><?php require(DIR_WS_MODULES . 'sideboxes/search_header.php'); ?></div>
``` which comes just at the end of the navigation section, and that certainly doesn't break anything!:blush: 

So... what am I missing?

You're going to need to do some of this in the stylesheet, perhaps making one or more elements absolutely positioned and applying various positive or negative margins to other elements to push them around. Getting the php code where you want it is a good start, but the rest has to be done in the stylesheet I think.

On both my sites (links below) I wanted the logo top-left and had to position it absolutely to get it there. Then I applied margin-left to parts of the header to push them over out of the way, and a margin-top to the first sidebox to get it to slide down below my logo.

Takes a little experimentation, but it should work.

Rob

Right now, my problem is getting categories to show up at all!

I want it to be independent of the rest of the left column... I think.

Thanks for showing me your sites, they are gorgeous and helpful while I figure this out.

CSS definitely allows you to position an element above its normal container with
margin-top: -123px; or whatever, but IE6 (at least) doesn't respect this and will cut off anything outside the container.

Absolute positioning will make the categories sidebox independent of the rest of the sidebar, and will leave no gaps in the column. It may work if you make #mainWrapper the positioning container (with position: relative;) and do not have anything in between that and the sidebox with position: relative.

Since your categories box is not showing, I tested with your More Information box. In your stylesheet, find/*wrappers - page or section containers*/ #mainWrapper { background-color: #ffffff; background-image: url(../images/parchment02.jpg); text-align: left; width: 800px; border: 2px solid #7F7F67; }and add to get```
/wrappers - page or section containers/
#mainWrapper {
background-color: #ffffff;
background-image: url(../images/parchment02.jpg);
text-align: left;
width: 800px;
border: 2px solid #7F7F67;
position: relative;
}
#moreinformation {
position: absolute;
top: 42px;
}

Whee, that worked-- in firefox, at least. I haven't checked it in IE yet.

Now, if i can override the background info etc.

It is working in IE6 right now. Actually, it is working better in IE than in FF, because of IE's tendency to try to compensate for user errors by guessing at what the user meant. You have an extra comma in this declaration: ```
.leftBoxHeading, {
margin: 0em;
background-color:transparent;
background-image: url(../images/sidebartop.jpg);
padding: 0.5em 0.2em;
}

.leftBoxHeading  {

You are not getting the bottom image in either browser because you have left out a . in front of leftBoxbottom

leftBoxbottom, .rightBoxbottom {
background-color:transparent;
background-image: url(../images/sidebarbottom.jpg);
margin: 0 ;
}

 .leftBoxbottom

sheepish laugh

I'm still not used to CSS...

Looking at my layout right now, it would be nice to have the categories box be a lot wider-- right over that empty frame thingie that I worked on so hard...

I'd like to separate it out, visually, from the default sideboxes. Can I make a separate template for it?

Another element is overriding the #categories width setting. If you add !important to the width, it will do as you want:

width: 260px !important;

yeah, the #sidebox is overriding... I can't get my alternate background image to replace teh default or anything yet. How do I move the categories box away from the sidebox altogether???

(And, by the way, thank you so much for helping me with this puzzle, I luff you! ;)

Your sidebox bottoms are not showing because the custom code for the box bottom does not match the name you use in the stylesheet.

.leftBoxbottom {
background-color:transparent;
height: 37px;
background-image: url(../images/sidebarbottom.jpg);
margin: 0 ;
}

Capitalization must match exactly.

You actually do not need the custom div at all. You can put the
background-image: url(../images/sidebar.jpg);
in .leftBoxContainer, and
background-image: url(../images/sidebarbottom.jpg);
in .sideBoxContent:```
.leftBoxHeading {
margin: 0em;
background: url(../images/sidebartop.jpg) no-repeat;
padding: 0.5em 0.2em;
}

.leftBoxContainer {
background: url(../images/sidebar.jpg) repeat-y;
margin: 0;
}

.sideBoxContent {
background: url(../images/sidebarbottom.jpg) bottom center no-repeat;
padding: 0.4em;
padding-bottom: 41px;
}

The admin-set column width and column box width will override stylesheet settings unless you add !important in the stylesheet.

Putting the categories box in the right column just introduces more issues, like the blank space on the right of the center column. You will be better off moving it back where it was, and using the CSS selectors to single out #categories elements from regular sideboxes.

It may also help to move the categories declarations down from the #mainWrapper area to just below the rest of the sidebox declarations.
For declarations with otherwise equal priority, the last one will govern, so putting special cases after general cases is a good idea.

Thank you!

I've hacked a solution to my box-in-header; I took the right column out of the main page template and placed it in the header template.--now, to fix the css with your suggestions...