Need help combining SuckerTree with columns!

[phydeux]

I'm trying to develop a template page for my company's intranet to replace an old style page and would like to do a combination of the fixed/fixed/fluid 3-column CSS layout with the SuckerTree menu in the first column, the page content in the center column, and the third would just be filler space.

I'm using FrontPage 2003 on an IIS server and all our users will be IE6 users, so I have a very strict base to work with.

My problem so far is that the menu doesn't seem to like to stay to the left edge of the column unless I nest it into another DIV and play with the right border of that div.

The "folder" links that expand into submenus end up being transparent in their default state.

And the submenus slide out UNDER the center column rather than over it.

I'd very much appreciate it if someone could help me with getting this right. I'm new to using CSS, and while I understand the basics fairly well, it gets a lot more complicated when you're dealing with such a combination of factors.

Thanks in advance for any help!

[Spiritvn]

Can you upload a test page and give the link? -.- Imaging ur problems is rather hard.

[phydeux]

Sure, here's a test version where I've simply combined the two features together. www.phydeux.com/test/columns.htm

I'm using IE6 and the folder sections show up as transparent, and the sub-items slip under the center white column.

My eventual intent is to possibly have the center column contain an iframe and have all the menu links put their targets into that iframe making the homepage pretty much a document viewer. This will simplify our intranet by making it so I don't have to worrying about design on every page and just have standardized content pages that load into the iframe.

[Spiritvn]

So now i think the main problem's the submenu transparent and over the center page? right?

if right i think you are misunderstand the iframe -.- you must know you set a fixed width, height and position for the iframe. So if a submenu's overflow, it will be hidden, and if you don't let it do that, the iframe will resize the width to fix it and i don't think it have any nice thing there. That mean you can make transparent menu but can't make it overflow the iframe and over the center page.

it's the reason why a page such as W3C have a iframe menu without submenu overflow -.-, you can try a drop-down definition list menu such as this:

<style type="text/css">
/* ================================================================ 
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/drop_definition.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the assocaited (x)html may be modified in any 
way to fit your requirements.
=================================================================== */
#dlmenu {height:10em;}
#menu {list-style-type:none; margin:0 0 10px; padding:0; position:absolute; width:15em; background:#fff; z-index:100;}
#menu li {display:block; padding:0; margin:0; position:relative; z-index:100;}
#menu li a, #menu li a:visited {display:block; text-decoration:none;}
#menu li dd {display:none;}
#menu li:hover, #menu li a:hover {border:0;}
#menu li:hover dt a , #menu li a:hover dt a {background:#d4d8bd url(top_grad_2.gif) center center; color:#ff0; }
#menu li:hover dd, #menu li a:hover dd {display:block;}
#menu li:hover dl, #menu li a:hover dl {height:20em; background:#b4be9c url(sub_grad.gif);}
#menu table {border-collapse:collapse; padding:0; margin:-4px; font-size:1em;}
#menu dl {width: 15em; margin: 0; background: #6f9c6f; cursor:pointer;}
#menu dt {margin:0; padding: 0; font-size: 1.1em; border-top:1px solid #cce;}
#menu dd {margin:0; padding:0; font-size: 1em; text-align:left; }
.gallery dt a, .gallery dt a:visited {display:block; color:#fff; padding:5px 5px 5px 10px; background:#949e7c url(top_grad.gif) center center;}
.gallery dd a, .gallery dd a:visited {color:#000; min-height:1em; text-decoration:none; display:block; padding:4px 5px 4px 20px; background:#b4be9c url(sub_grad.gif);}
* html .gallery dd a, * html .gallery dd a:visited {height:1em;}
.gallery dd a:hover {background:#7aa; color:#ff0;}

</style>
<style type="text/css">
/* ================================================================ 
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/drop_definition.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the assocaited (x)html may be modified in any 
way to fit your requirements.
=================================================================== */
#dlmenu {height:10em;}
#menu {list-style-type:none; margin:0 0 10px; padding:0; position:absolute; width:15em; background:#fff; z-index:100;}
#menu li {display:block; padding:0; margin:0; position:relative; z-index:100;}
#menu li a, #menu li a:visited {display:block; text-decoration:none;}
#menu li dd {display:none;}
#menu li:hover, #menu li a:hover {border:0;}
#menu li:hover dt a , #menu li a:hover dt a {background:#d4d8bd url(top_grad_2.gif) center center; color:#ff0; }
#menu li:hover dd, #menu li a:hover dd {display:block;}
#menu li:hover dl, #menu li a:hover dl {height:20em; background:#b4be9c url(sub_grad.gif);}
#menu table {border-collapse:collapse; padding:0; margin:-4px; font-size:1em;}
#menu dl {width: 15em; margin: 0; background: #6f9c6f; cursor:pointer;}
#menu dt {margin:0; padding: 0; font-size: 1.1em; border-top:1px solid #cce;}
#menu dd {margin:0; padding:0; font-size: 1em; text-align:left; }
.gallery dt a, .gallery dt a:visited {display:block; color:#fff; padding:5px 5px 5px 10px; background:#949e7c url(top_grad.gif) center center;}
.gallery dd a, .gallery dd a:visited {color:#000; min-height:1em; text-decoration:none; display:block; padding:4px 5px 4px 20px; background:#b4be9c url(sub_grad.gif);}
* html .gallery dd a, * html .gallery dd a:visited {height:1em;}
.gallery dd a:hover {background:#7aa; color:#ff0;}

</style>

html:

<div id="dlmenu">
<ul id="menu">
<li>
<!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
<dl class="gallery">

	<dt><a href="../menu/index.html">DEMOS</a></dt>
	<dd><a href="../menu/zero_dollars.html" title="The zero dollar ads page">zero dollars</a></dd>
	<dd><a href="../menu/embed.html" title="Wrapping text around images">wrapping text</a></dd>
	<dd><a href="../menu/form.html" title="Styling forms">styled form</a></dd>
	<dd><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></dd>
	<dd><a href="../menu/shadow_boxing.html" title="Multi-position drop shadow">shadow boxing</a></dd>

	<dd><a href="../menu/old_master.html" title="Image Map for detailed information">image map</a></dd>
	<dd><a href="../menu/bodies.html" title="fun with background images">fun with backgrounds</a></dd>
	<dd><a href="../menu/fade_scroll.html" title="fade-out scrolling">fade scrolling</a></dd>
	<dd><a href="../menu/em_images.html" title="em size images compared">em sized images</a></dd>
</dl>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li>
<!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->

<dl class="gallery">
	<dt><a href="index.html">MENUS</a></dt>
	<dd><a href="spies.html" title="a coded list of spies">spies menu</a></dd>
	<dd><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></dd>
	<dd><a href="expand.html" title="an enlarging unordered list">enlarging list</a></dd>
	<dd><a href="enlarge.html" title="an unordered list with link images">link images</a></dd>
	<dd><a href="cross.html" title="non-rectangular links">non-rectangular links</a></dd>

	<dd><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></dd>
	<dd><a href="circles.html" title="circular links">circular links</a></dd>
</dl>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li>
<!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
<dl class="gallery">
	<dt><a href="../layouts/index.html">LAYOUTS</a></dt>
	<dd><a href="../layouts/bodyfix.html" title="Cross browser fixed layout">Fixed 1</a></dd>

	<dd><a href="../layouts/body2.html" title="Cross browser fixed layout">Fixed 2</a></dd>
	<dd><a href="../layouts/body4.html" title="Cross browser fixed layout">Fixed 3</a></dd>
	<dd><a href="../layouts/body5.html" title="Cross browser fixed layout">Fixed 4</a></dd>
	<dd><a href="../layouts/minimum.html" title="A simple minimum width layout">minimum width for Internet Explorer</a></dd>
</dl>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li>
<!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->

<dl class="gallery">
	<dt><a href="../mozilla/index.html">MOZILLA</a></dt>
	<dd><a href="../mozilla/dropdown.html" title="A drop down menu">drop down menu</a></dd>
	<dd><a href="../mozilla/cascade.html" title="A cascading menu">cascading menu</a></dd>
	<dd><a href="../mozilla/content.html" title="Using content:">content:</a></dd>
	<dd><a href="../mozilla/moxbox.html" title=":hover applied to a div">mozzie box</a></dd>
	<dd><a href="../mozilla/rainbow.html" title="I can build a rainbow">rainbow box</a></dd>

	<dd><a href="../mozilla/snooker.html" title="Snooker cue">snooker cue made using border art</a></dd>
	<dd><a href="../mozilla/target.html" title="Target Practise">target practise</a></dd>
</dl>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
</div>

[phydeux]

No, I think you misunderstand. I have not gotten as far as adding the iframe yet. Only what you see in the sample page. The center white column is just as CSS frame. The problem is that the menu items with submenus are transparent, and the submenus end up behind the white center column.

[Spiritvn]

maybe, becoz the sample page u give me is left & right column iframe.

And as i know, if you want to make the submenu overflow and over the center page (if not iframe) you just need to use the z-index property.

Specifies the order of relative or absolutely positioned boxes in the z-axis. The higher the number, the higher that box will be in the stack.

div { position: absolute; }

#kidkoala { z-index: 2 }

#mrscruff { z-index: 1 }

It's an example for using the z-index.

about the trainsparent, just use the background property with value transparent for the submenu.

-.- i don't know if i understand ur problem exactly sry

[phydeux]

None of those columns are iframes, they're CSS columns. The iframe will go in LATER once I've resolved this issue.

I've tried mucking about with the z-indexes, but so far was unable to get it right. Even giving the sub-menus a z-index greater than the rest of the page still results in the sub-menus being under the center column.

As for the transparency, I don't WANT the two that are transparent to show up that way. I want them to be white like the others around them. Its something about the sub-menu system that makes it go transparent though.

[Spiritvn]

You must format position before add an z-index -.- read more:

http://www.w3.org/TR/REC-CSS2/visuren.html#z-index

[phydeux]

Actually, I've fixed the positioning by taking the menu DIV outside the frame divs and floating it over them with an absolute position. So now the sub-menus aren't hiding. Yay!

The question now is how to get the background of the foldered items and some of the sub-menus to show up rather than be transparent.

[phydeux]

Never mind. I've fixed the coloring too by adding a background color to those components. Looks like it just took a little persistence and thinking outside the box to get it done.