Help! I need a generic sidebox to place my image-based menu in

I'm trying to use the same effect for the left sidebox that I saw used in several templates, including "mistik" (where the templates are listed when you look at the mistik template from the templates page.) I downloaded the template to see how the sidebox image was sliced and where the slices where placed in the various files and I put my slices in the same places. After uploading to my site, nothing was showing up and I had made the following changes to try and get this to work:- I changed the stylesheet.css

• I copied the column_left.php file to my custom template folder in /includes/modules/
• I copied the tpl_box_default_left.php file to /includes/templates/CUSTOM/Common/I knew that I had to turn "ON" one of the various boxes in the "layout boxes controller" in the admin but I wasn't sure exactly which one since each of the boxes has a specific name (ex: who's online) linked to a specific .php file (ex: tpl_whos_online.php) and for the look that I'm interested in for my sidebox (which you can see in the link below) I don't need any .php files. In the end, I turned on the "categories" box but I don't want any of the words that are placed in the categories sidebox to be there (including the word "categories" at the top). I'd appreciate any help.

http://www.zen-cart.com/forum/showpost.php?p=371453&postcount=16

Thanks in advance,

Rochel

http://www.oneposhshop.com/Shop

You can "hardcode" the navigation, but what happens when you add a new category? what are you going to do with sub categories?

Hi Kim,

Actually, I wasn't planning on using subcategories, it's a smallish store that deals with unique fashion so we don't have tons and tons of products which are annoying to scroll through.
So when someone clicks on "Skirts" they will see the page of 20 images and there won't be an option to sort them in terms of length or style or whatever other subcategories.
In the event that I would want to add a category, I would add another shopping bag image.

Given that, how would I go about doing your suggestion: > You can "hardcode" the navigation

Thanks

Under those circumstances, I would put my linked images directly in the tpl_main_page.php in the <td> that makes the left column. You can use simple HTML

Thanks Kim,

So you're saying that I should place the different "shopping bag" category images into the tpl_main_page.php file. But what about the 3 slices of the image that make up my "sidebox" background for the menu, do those go in the tpl_main_page.php file as well or should I leave them in the stylesheet.css file under the sidebox part of the code?

Also where exactly in this code from tpl_main_page.php do I stick the images?

 <td id="navColumnOne" class="columnLeft" style="width: <?php echo COLUMN_WIDTH_LEFT; ?>"> 
        <?php
 /**
  * prepares and displays left column sideboxes
  *
  */
?>
        <div id="navColumnOneWrapper" style="width: <?php echo BOX_WIDTH_LEFT; ?>">
          <?php require(DIR_WS_MODULES . zen_get_module_directory('column_left.php')); ?>
        </div></td>

Can anyone clarify this for me? Where in the tpl_main_page.php file would I put the images that I've sliced and are currently in my sidebox?

I would say to put your HTML with individual shopping bag image links right after the

line.
You will then want to set (in admin) appropriate widths for the left column and left column sideboxes.
You should probably put your image slices back together and use them as one background-image in #navColumnOne, although it's hard to be certain when we can't see exactly how you intend this to be laid out.

Thanks Glenn,

That almost worked perfectly. Only problem is that for some reason it's cutting off the bottom half of of the background image everytime I put the table with the shopping bag images on top.

Here's a copy of the css that I'm working with:

#navColumnOne {
    background:  url('http://oneposhshop.com/Shop/includes/templates/Posh_by_Trois_Soeurs/Images/menu_background_switched_skinny.gif');
    background-repeat: no-repeat;
    height: 1200;
    padding-top: 68px; /*controls how high the menu content is*/
    padding-left: 16px;
    left: 5px;
    top: 220px; /*controls how high the menu background image is*/
    position: absolute;
    z-index: 1;
    }
```I tried messing with the "red part" and when I set the padding to something like 880px the entire image showed but as I decreased the padding to bring the table up to where it belongs I seem to have lost the bottom part of the image.

<http://oneposhshop.com/Shop>
Any ideas?

Thanks

Absolute positioning has its downside: absolutely positioned elements can't help determine the size of their containers.

You have set .roundcont at 1000px height, which is not enough to fit the full set of shopping bag images and round bottom. Increase that to say 1050px.

#navColumnOne is given its height by the shopping bags + padding-top, but needs padding-bottom to expand it down so the round-bottom background image is fully visible.

#navColumnOne {
	background:  url('http://oneposhshop.com/Shop/includes/templates/Posh_by_Trois_Soeurs/Images/menu_background_switched_skinny.gif');
	background-repeat: no-repeat;
	
	padding-top: 68px; /*controls how high the menu content is*/
	padding-left: 16px;
        padding-bottom: 44px; ?*gives space below bag images*/
	left: 5px;
	top: 220px; /*controls how high the menu background image is*/
	position: absolute;
	z-index: 1;
	}

Actually, why does #navColumnOne need to be absolutely positioned? It would normally sit at the top left of #contentMainWrapper; giving it margin-left and margin-top instead of position: absolute would let it hold its place and keep .roundcont open without specifying a height.

They are absolutely positioned because I wanted to give it a z-index so that the menu with the shopping bags would overlap the logo box because otherwise it makes the page above the fold mostly logo. I'm going to try your solution and hopefully that will work.

You can use z-index on anything other than static, so position: relative; with no adjustments would still qualify, and still be able to use margins and hold space.

gjh42:

You can use z-index on anything other than static, so position: relative; with no adjustments would still qualify, and still be able to use margins and hold space.

First of all, really? That's great! the only reason that I made them absolute was because I had read it on http://www.w3schools.com/css/pr_pos_z-index.asp

Definition

Note: Z-index only works on elements that have been positioned (eg position:absolute;)!Actually now that I'm re-reading it (and keeping what you said in mind) I see that it just has to be some kind of positioning. Glad to hear this, I will fix the various places and hopefully the layout will work out.

On another note, what does this mean? > with no adjustmentsThanks for all of your help.

No adjustments = position: relative; without specifying a changed position. It acts just like a static element in its location.

gjh42:

No adjustments = position: relative; without specifying a changed position.

Pardon my ignorance, does this mean that I can't have the red part of the code?

{
position:relative;
left:20px
}
```Thanks for your patience:blush:

You can, but you don't need to.
position: relative doesn't requre changing the position.

If you do change the position this way, the element's space will be held as if it was still unmoved. This could cause strange results, or it might be exactly what is needed for a given situation.

I went through and changed all the absolute postitioning to relative and it totally ignored the adjustments and now the page looks all messed up. I tried changing the positioning adjustments to margins but it ognored that as well. Is there anyway that I can use the z-index have the positioning set to relative and still have the layout give the same effect that it did with absolute positioning? :cry:

Changing everything from absolute to relative wasn't such a good idea. Absolute is good for things like your round header corners overlapping with the logo.
You might best put things back the way they were and alter one at a time to see the effect. You seem to have several kinds of layout specifications which interlock in subtle ways. As it was, it worked mostly, but change one part and the house comes tumbling down. If you can get it back as it was, you might best gently make #navColumnOne and a few others relative and leave alone what you can.

If that doesn't work, the really best way would be to rework the way your page is structured. I can change bits of your display in Edit CSS or Edit HTML and advise you on what works, but changing all at once is too complicated with the tools I have to use.