Newagekat -
I think your positioning issues will be best solved by switching from relative to absolute positioning. The categories box is not holding the space open where it is displaying anyway, so it won't matter that it will become "invisible" as a box.
You need to make the box content position: relative; so it is a good frame of reference, and then position each category group with top: 0; and left: xxem; as appropriate.
Code:
#chcategoriesContent {position: relative;}
ul#catGroup1_15
{
width: 14em;
position: absolute;
left: 0em;
top: 0em;
}
ul#catGroup1_16
{
width: 14em;
position: absolute;
left: 14.0em;
top: 0em;
}
ul#catGroup1_16 li
{
padding-left: 2em;
border-left: 1px dotted #7597A6;
}
Your method of moving the categories over to the right is the cause of #navColumnOne getting so wide. You give the box a huge left margin, but no corresponding negative right margin, so the whole container is stretched. Relative positioning doesn't move the element out of its container, but stretches the container in some fashion to still surround it. I haven't studied this aspect in depth.
Absolute positioning will get the box out of the layout flow. Then the content relative positioning will act as a frame for positioning the categories. I have also deleted a few properties from the code that were not doing anything in the new setup.
Code:
http://commonwealthyarns.com/includes/templates/craftBook/css/c_1.css
#chcategories
{
display: block;
height: 200px;
position: absolute;
left: 52em;
top: 33.5em;
}
.categoryListBoxContents { display: none; }
I am working on the list issue - thought I had it solved, and a new wrinkle cropped up. I think it will be necessary to rework the flow of the base tpl_categories code, first closing the previous <li> as appropriate before or after the <ul> step, then creating the new one but not closing it until the next round. Fun stuff...
Bookmarks