categories sidebox in the header?

[probablepossible]

The site is at;
http://dragonmother.com/wandworks/index.php
The look is steampunk/scrapbook
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

Any suggestions?

[probablepossible]

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...

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;

<!--bof-branding display-->
<div id="logoWrapper">
<div id="catheader"><?php require(DIR_WS_MODULES . 'sideboxes/categories.php'); ?></div>
    <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>

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!

So... what am I missing?

[rstevenson]

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

[probablepossible]

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.

[gjh42]

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.

[gjh42]

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;
	}

It works in Firefox, but I can't look at the effect of my temporary edits in IE. Try it and see how it works.

[probablepossible]

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

Now, if i can override the background info etc.

[gjh42]

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;
	}

It should be just

.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 ;
}

It needs to be
.leftBoxbottom

[probablepossible]

*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?

[gjh42]

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

width: 260px !important;