Need your support on Z-index and overlapping. [Archive]

Click to See Complete Forum and Search --> : Need your support on Z-index and overlapping.

janmejay

04-14-2008, 04:12 PM

I have a menu with 2 rows. 8 cells in top row and 8 cells in bottom row. When sub-menu of a cell in top row flies out, it gets hidden behind the bottom row of menu. These cells are arranged in <div> <ul id=1> <li> </li> </ul> </div> followed by <div><ul id=2><li> </li> </ul></div> fashion.

Portion of my CSS looks like this -

++++++++++++++++++++++++

<style type="text/css">

/* Add a margin - for this demo only - and a relative position with a high z-index to make it appear over any element below */
#.suckertreemenu {position:relative; z-index:100; margin:50px 0 150px 0;}
#.suckertreemenu h2 {font-family: "trebuchet ms", arial, sans-serif; font-weight:normal; color:#090;}
#.suckertreemenu h3 {font-family: "trebuchet ms", arial, sans-serif; font-weight:normal;}

.suckertreemenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}

/*Top level list items*/
.suckertreemenu ul li{
position: relative;
display: inline;
float: right;
background-color: #3B5E2B; /*overall menu background color*/
cell-color: red;
}

/*Top level menu link items style*/
.suckertreemenu ul li a{
margin: 0;
display: block;
width: 92pt; /*Width of top level menu link items*/
padding: 1pt 8pt;
font: 0.7em/1.7em sans-serif;
border width: 1pt solid #FFFFFF;
border-left-width: -3;
text-decoration: none;
color: white;
}

/*1st sub level menu*/
.suckertreemenu ul li ul{

position: absolute;
top: 1em; /* no need to change, as true value set by script */
display: block;
visibility: hidden;
}

/*Sub level menu list items (undo style from Top level List Items)*/
.suckertreemenu ul li ul li{
left: 0;
display: list-item;
float: none;
}

..
++++++++++++++++++++++++++

How can I adjust my Z-index here? so that it won't get hidden?

I tried giving different Z-indexes to different div, then increasing for one and decreasing for another but nothing worked so far?

Please let me know if you want me to post html code with <div></div> or an entire part of css ?

Thanks for your time and help.
janmejay

WebJoel

04-14-2008, 04:41 PM

IDs cannot begin with a "number", -only a alphabeic letter, so id="1" and id="2" are probably only going to work in IE (incorrectly so), and this: /*Top level list items*/
.suckertreemenu ul li{
position: relative;
display: inline;
float: right;
background-color: #3B5E2B; /*overall menu background color*/
cell-color: red;
}

/*Top level menu link items style*/
.suckertreemenu ul li a{
margin: 0;
display: block;
width: 92pt; /*Width of top level menu link items*/
padding: 1pt 8pt;
font: 0.7em/1.7em sans-serif;
border width: 1pt solid #FFFFFF;
border-left-width: -3;
text-decoration: none;
color: white;
} I'm not familiar with "cell-color;" as a Selector... -is this right(??), Not seeing your entire code or URL, -cannot be sure but are are using a TABLE for this?
"border width" is meaningless: you mean to state "border:value" ( or border-width:value; ) as "1pt" is the "width" ..and:

"border-left-width" ..not sure if you can have a negative-width border though...

-and the "-3 " is what, -minus 3 inches?, minus 3 feet?, -cm?, etc etc... You should state whatever unit-of-measure (although "px" is probably assumed, if you do not mean "pixels", your layout will suffer greatly)..

janmejay

04-14-2008, 05:16 PM

Hello here is my COMPLETE code and css - everything is working fine except top level row's menu items gets hidden by low level menu cell.

++++++++++++++++++++++++++++++++++
html code

HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">

<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="menu.css">
<link rel="stylesheet" type="text/x-component" href="menuhover.htc">

<script type="text/javascript">

//SuckerTree Horizontal Menu (Sept 14th, 06)
//By Dynamic Drive: http://www.dynamicdrive.com/style/

var menuids=["treemenu1","treemenu2"] //Enter id(s) of SuckerTree UL menus, separated by commas

function buildsubmenus_horizontal(){
for (var i=0; i<menuids.length; i++){
var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
for (var t=0; t<ultags.length; t++){
if (ultags[t].parentNode.parentNode.id==menuids[i]){ //if this is a first level submenu
ultags[t].style.top=ultags[t].parentNode.offsetHeight+"px" //dynamically position first level submenus to be height of main menu item
ultags[t].parentNode.getElementsByTagName("a")[0].className="mainfoldericon"
}
else{ //else if this is a sub level menu (ul)
ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px" //position menu to the right of menu item that activated it
ultags[t].parentNode.getElementsByTagName("a")[0].className="subfoldericon"
}
ultags[t].parentNode.onmouseover=function(){
this.getElementsByTagName("ul")[0].style.visibility="visible"
}
ultags[t].parentNode.onmouseout=function(){
this.getElementsByTagName("ul")[0].style.visibility="hidden"
}
}
}
}

if (window.addEventListener)
window.addEventListener("load", buildsubmenus_horizontal, false)
else if (window.attachEvent)
window.attachEvent("onload", buildsubmenus_horizontal)
</script>
</HEAD>

<body marginwidth="0" marginheight="0" topmargin="3" leftmargin="3" rightmargin="3" bottommargin="0">

<div class="suckertreemenu"><ul id="treemenu1">
<li><a href="#" style="border-left: 1px solid black">Home</a></li>
<li><a href="#">Item1</a></li>
<li><a href="#">Item2</a>
<ul>
<li><a href="#">Sub Item 1.1</a></li>
<li><a href="#">Sub Item 1.2</a></li>
<li><a href="#">Sub Item 1.3</a></li>
<li><a href="#">Sub Item 1.4</a></li>
<li><a href="#">Sub Item 1.5</a></li>
<li><a href="#">Sub Item 1.6</a></li>
</ul>
</li>
<li><a href="#">Item3</a></li>
<li><a href="#">Item4</a>
<ul>
<li><a href="#">Sub Item 2.1</a></li>
<li><a href="#">Folder 2.1</a>
<ul>
<li><a href="#">Sub Item 2.1.1</a></li>
<li><a href="#">Sub Item 2.1.2</a></li>
<li><a href="#">Sub Item 2.1.3</a></li>
<li><a href="#">Sub Item 2.1.4</a></li>
</ul>
</li>
</ul>
</a>
</li>
<li><a href="#">Item5</a></li>
<li><a href="#">Item6</a></li>
<li><a href="#">Item7</a></li>

</ul>
</div>

<table>
<tr>
<td width="9%" valign="middle" align="left">
</td>
<td width="1%" valign="middle" align="left">
<p class="tnbb"><img src="dipa.gif" width="30" height="30" border="0" />
</td>
<td width="12%" valign="middle" align="left">
<p class="tnbb"><img src="dipa1_.gif" width="30" height="30" border="0" />
</td>

<td width="2%">
<p class="tnbb"><img src="lamp.gif" width="70" height="70" border="0" />

</tr>

</table>

<div class="suckertreemenu">
<ul id="treemenu2"> <li><a href="#" style="border-left: 1px solid black">Home</a></li>
<li><a href="#">Item1</a></li>
<li><a href="#">Item2</a>
<ul>
<li><a href="#">Sub Item 1.1</a></li>
<li><a href="#">Sub Item 1.2</a></li>
<li><a href="#">Sub Item 1.3</a></li>
<li><a href="#">Sub Item 1.4</a></li>
<li><a href="#">Sub Item 1.5</a></li>
<li><a href="#">Sub Item 1.6</a></li>
</ul>
</li>
<li><a href="#">Item3</a></li>
<li><a href="#">Item4</a>
<ul>
<li><a href="#">Sub Item 2.1</a></li>
<li><a href="#">Folder 2.1</a>
<ul>
<li><a href="#">Sub Item 2.1.1</a></li>
<li><a href="#">Sub Item 2.1.2</a></li>
<li><a href="#">Sub Item 2.1.3</a></li>
<li><a href="#">Sub Item 2.1.4</a></li>
</ul>
</li>
</ul>
</a>
</li>
<li><a href="#">Item5</a></li>
<li><a href="#">Item6</a></li>
<li><a href="#">Item7</a></li>

</ul>
</div>
</BODY>
</HTML>
+++++++++++++++++++++++++++++++++++++++++++++++

Here is my css - menu.css

<style type="text/css">

/* Add a margin - for this demo only - and a relative position with a high z-index to make it appear over any element below */
#.suckertreemenu {position:relative; z-index:100; margin:50px 0 150px 0;}
#.suckertreemenu h2 {font-family: "trebuchet ms", arial, sans-serif; font-weight:normal; color:#090;}
#.suckertreemenu h3 {font-family: "trebuchet ms", arial, sans-serif; font-weight:normal;}

.suckertreemenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}

/*Top level list items*/
.suckertreemenu ul li{
position: relative;
display: inline;
float: right;
background-color: #3B5E2B; /*overall menu background color*/
cell-color: red;
}

/*Top level menu link items style*/
.suckertreemenu ul li a{
margin: 0;
display: block;
width: 92pt; /*Width of top level menu link items*/
padding: 1pt 8pt;
font: 0.7em/1.7em sans-serif;
border width: 1pt solid #FFFFFF;
border-left-width: -3;
text-decoration: none;
color: white;
}

/*1st sub level menu*/
.suckertreemenu ul li ul{

position: absolute;
top: 1em; /* no need to change, as true value set by script */
display: block;
visibility: hidden;
}

/*Sub level menu list items (undo style from Top level List Items)*/
.suckertreemenu ul li ul li{
left: 0;
display: list-item;
float: none;
}

/*All subsequent sub menu levels offset after 1st level sub menu */
.suckertreemenu ul li ul li ul{
left: 156px; /* no need to change, as true value set by script */
top: 0;
}

/* Sub level menu links style */
.suckertreemenu ul li ul li a{
display: block;
width: 240px; /*width of sub menu levels*/
color: white;
text-decoration: none;
padding: 1px 5px;
border: 1px solid #ccc;
}

.suckertreemenu ul li a:hover{
background-color: 990000;
color: white;
}

/*Background image for top level menu list links */
.suckertreemenu .mainfoldericon{
background: #3B5E2B url(darrow.gif) no-repeat center right;
}

/*Background image for subsequent level menu list links */
.suckertreemenu .subfoldericon{
background: #3B5E2B url(rarrow.gif) no-repeat center right;
}

/* html p#iepara{ /*For a paragraph (if any) that immediately follows suckertree menu, add 1em top spacing between the two in IE*/
padding-top: 1em;
}

/* Holly Hack for IE \*/
* html .suckertreemenu ul li { float: left; height: 1%; }
* html .suckertreemenu ul li a { height: 1%; }
/* End */

</style>
++++++++++++++++++++++++++++++++++++++++++++++

What is happening is items in <div><ul id =treemenu1> ....</ul></div> have sub-level items. When they fly out, they get hidden by the cells under <div><ul id=treemenu2>.....</ul></div>

How can I arrange my Z-index here so that sub-level menu's will take upper layer when they fly out?

There is a table in <div> </div> <table> ... </table> <div> .. </div> to separate those two div's in above html code. I have highlighted these different pieces in code just for ease of reading here.

Thanks for your time and support,
janmejay

WebJoel

04-14-2008, 06:36 PM

A missing !doctype, -having that would be helpful. And this "IE conditional" appears to be open-ended... there is no 'closure' for it and thus, this entire pages is treated 'condtionally'...

....

 (assuming that both links are conditional for less-than IE7

Centauri

04-14-2008, 06:37 PM

I would remove the relative positioning and z-index from .suckertreemenu div and apply the high z-index to .suckertreemenu ul li ul instead.

janmejay

04-14-2008, 08:27 PM

Thank you, WebJoel and Centauri for your suggestions.

I didn't realize its a total conditional statement. I'll add <endif> and also missing !doctype..

Centauri - When you say, "I would remove the relative positioning and z-index from .suckertreemenu div and apply the high z-index to .suckertreemenu ul li ul instead." - do you mean to remove it from the below line in CSS ?

#.suckertreemenu {position:relative; z-index:100; margin:50px 0 150px 0;}
and what is the exact syntax with Z-index to add at - .suckertreemenu ul li ul ?

I'll try these out once you let me know exact syntax and will report the results.

Thanks again for your time and support on this.
I have few more questions regarding the same css and html code, we'll ask once this gets fixed. Looking forward for your reply and suggestions.

janmejay

Centauri

04-14-2008, 09:07 PM

First off, the css for the menu container div shouldn't have the preceeding "#" character - that denotes an id. The css for the div with the position and z-index removed, should be .suckertreemenu {margin:50px 0 150px 0;}whilst adding the z-index to the second level dropdowns would look like /*1st sub level menu*/
.suckertreemenu ul li ul{
position: absolute;
z-index: 100;
top: 1em; /* no need to change, as true value set by script */
display: block;
visibility: hidden;
}

janmejay

04-14-2008, 09:43 PM

Hello Centauri,

Done per your suggestions -

Added below lines in CSS
================================
.suckertreemenu {margin:50px 0 150px 0;}

/*1st sub level menu*/
.suckertreemenu ul li ul{
position: absolute;
z-index: 100;
top: 1em; /* no need to change, as true value set by script */
display: block;
visibility: hidden;
}
================================
Also, and removed these 3 lines in CSS
#nav {position:absolute; z-index:1 margin:50px 0 150px 0;}
#nav h2 {font-family: "trebuchet ms", arial, sans-serif; font-weight:normal; color:#090;}
#nav h3 {font-family: "trebuchet ms", arial, sans-serif; font-weight:normal;}
================================

Still problem persists! Is anything wrong with my CSS or design?

Or is Z-index should be added in <div> tag of html?

In my html, I have two sections of <div> </div> separated by a table. Is it that by default that bottom <div> </div> section takes precedence and does not allow the sub-level menu items from top to show in front?

Need your help. Thanks again

janmejay

04-14-2008, 09:47 PM

Thanks WebJoel for your suggestion.

Enclosing with <--endif> is very correct. I did add that.

However, when I add a !doctype, it totally messes up my menu. I tried adding all different types of syntaxes for html, XHTML separately. As soon as you add !doctype section at the top of html page, it wraps up all menu items, removes the background (separators between two cells) and messes up everything!

What might be going wrong here? Actually, adding a document definition is a right thing to do, correct? I am not able to figure out what's going wrong here?

Your thoughts, thnx again.

Centauri

04-14-2008, 10:40 PM

I set this up locally (with a html 4.01 strict doctype) and the css changes I detailed above seems to work fine. However, the menu did look strange as it was stretched wider than my screen (and wrapped) due to the wide pt widths assigned to the <a> elements. You have probably been playing with widths whilst in quirks mode without a doctype, and the addition of the doctype is displaying it as written.

Do you have a picture of what you want it to display like?

WebJoel

04-15-2008, 07:22 AM

Thanks .. for your suggestion.

Enclosing with <--endif> is very correct. I did add that..... No, the correct syntax for closing a IE-conditional is<![endif]--> not "<!--endif>". It is important, -note the LACK of hyphens after the "!" and the " -- " at the end just before the closing " > ". What you have is the proper-closing of a "!comment", not a proper closure of an IE-conditional.
However, when I add a !doctype, it totally messes up my menu. ... -I was afraid that it might. :o I know that it sounds counter-productive, but "!doctype" is very useful and it will ensure or at least assist, that your document is correct to W3C Standards and will resolve correctly upon not only your computer & platform, but mine as well (be it Konqueror on Linux, Safari, Avant, Moz., Fx, etc etc).
What Centauri said regarding the matter..

I never begin buildinig a page without using a valid !doctype and these issues for the greater part don't come up later on :o (and for that matter, I seldom -almost never- need to use IE-conditionals, probably for this and a few other reasons due to my use of standardized elements).

WebJoel

04-15-2008, 07:25 AM

... menu container div shouldn't have the preceeding "#" character - that denotes an id. .. d-OH! -I didn't even notice that one! :cool:

janmejay

04-15-2008, 10:07 AM

Hello Centauri,

Thanks for your suggestions - I don't know how you get menu wrapped. I do get it correctly. For me, it got wrapped when I added !doctype statment.

Please attached herewith two images. 1.jpg (this shows how menu looks on my local machine) and 2.jpg (this shows how sub-levels are getting hidden behind second row).

Your thoughts on this?
thnx again for your time & support on this.

janmejay

04-15-2008, 10:11 AM

Hello WebJoel,

Thnx for your reply. Would you pls let me know where exactly is # there in code. I looked at it again and again but could not notice. Pls. highlight it.
===========================
menu container div shouldn't have the preceeding "#" character - that denotes an id. ..
===========================

Also, yes, I used correct syntax <![endif]--> as you have mentioned, thnx.

By the way, I agree with you, html should have appropriate !doctype and I do want to add a one definitely. Could you pls tell me right syntax and way around getting this done when as soon as I add it, it messes up my menu by wrapping around everything.

Without it, everything looks fine. Pls see the two images I added just now in my last reply.
Thnx for your time & support.

Centauri

04-15-2008, 11:21 AM

Ok, had a play with this. Obviously, you have only been looking at this in Internet Explorer, and have been coding for its numerous quirks mode bugs.

Firstly, there are a few syntax errors in the css, like not preceeding a colour value with the hash (#) to indicate hex and lack of units on a width - important when in standards mode.

Also, setting dimensions in pts is not a good idea - points are a print measure and vary between browsers. I changed these to em values.

IE has a problem with z-index in that it creates a new stacking order when something is positioned relative - this can be useful to overcome some of its other bugs, but is not useful here. This can be overcome by giving the entire first menu <ul> a relative position and z-index to ensure it displays over top of the second menu - note that this is not required in decent browsers.

You also had the <li>s floated right (and over-ridden with an IE6 only float left) which reversed the order of links in FF.

Try this html :<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="menu.css">

<script type="text/javascript">

//SuckerTree Horizontal Menu (Sept 14th, 06)
//By Dynamic Drive: http://www.dynamicdrive.com/style/

var menuids=["treemenu1","treemenu2"] //Enter id(s) of SuckerTree UL menus, separated by commas

function buildsubmenus_horizontal(){
for (var i=0; i<menuids.length; i++){
var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
for (var t=0; t<ultags.length; t++){
if (ultags[t].parentNode.parentNode.id==menuids[i]){ //if this is a first level submenu
ultags[t].style.top=ultags[t].parentNode.offsetHeight+"px" //dynamically position first level submenus to be height of main menu item
ultags[t].parentNode.getElementsByTagName("a")[0].className="mainfoldericon"
}
else{ //else if this is a sub level menu (ul)
ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px" //position menu to the right of menu item that activated it
ultags[t].parentNode.getElementsByTagName("a")[0].className="subfoldericon"
}
ultags[t].parentNode.onmouseover=function(){
this.getElementsByTagName("ul")[0].style.visibility="visible"
}
ultags[t].parentNode.onmouseout=function(){
this.getElementsByTagName("ul")[0].style.visibility="hidden"
}
}
}
}

if (window.addEventListener)
window.addEventListener("load", buildsubmenus_horizontal, false)
else if (window.attachEvent)
window.attachEvent("onload", buildsubmenus_horizontal)
</script>
</HEAD>
<body marginwidth="0" marginheight="0" topmargin="3" leftmargin="3" rightmargin="3" bottommargin="0">
<div class="suckertreemenu">
<ul id="treemenu1">
<li><a href="#" style="border-left: 1px solid black">Home</a></li>
<li><a href="#">Item1</a></li>
<li><a href="#">Item2</a>
<ul>
<li><a href="#">Sub Item 1.1</a></li>
<li><a href="#">Sub Item 1.2</a></li>
<li><a href="#">Sub Item 1.3</a></li>
<li><a href="#">Sub Item 1.4</a></li>
<li><a href="#">Sub Item 1.5</a></li>
<li><a href="#">Sub Item 1.6</a></li>
</ul>
</li>
<li><a href="#">Item3</a></li>
<li><a href="#">Item4</a>
<ul>
<li><a href="#">Sub Item 2.1</a></li>
<li><a href="#">Folder 2.1</a>
<ul>
<li><a href="#">Sub Item 2.1.1</a></li>
<li><a href="#">Sub Item 2.1.2</a></li>
<li><a href="#">Sub Item 2.1.3</a></li>
<li><a href="#">Sub Item 2.1.4</a></li>
</ul>
</li>
</ul>
</a></li>
<li><a href="#">Item5</a></li>
<li><a href="#">Item6</a></li>
<li><a href="#">Item7</a></li>
</ul>
</div>
<table>
<tr>
<td width="9%" valign="middle" align="left"></td>
<td width="1%" valign="middle" align="left"><p class="tnbb"><img src="dipa.gif" width="30" height="30" border="0" /> </td>
<td width="12%" valign="middle" align="left"><p class="tnbb"><img src="dipa1_.gif" width="30" height="30" border="0" /> </td>
<td width="2%"><p class="tnbb"><img src="lamp.gif" width="70" height="70" border="0" />
</tr>
</table>
<div class="suckertreemenu">
<ul id="treemenu2">
<li><a href="#" style="border-left: 1px solid black">Home</a></li>
<li><a href="#">Item1</a></li>
<li><a href="#">Item2</a>
<ul>
<li><a href="#">Sub Item 1.1</a></li>
<li><a href="#">Sub Item 1.2</a></li>
<li><a href="#">Sub Item 1.3</a></li>
<li><a href="#">Sub Item 1.4</a></li>
<li><a href="#">Sub Item 1.5</a></li>
<li><a href="#">Sub Item 1.6</a></li>
</ul>
</li>
<li><a href="#">Item3</a></li>
<li><a href="#">Item4</a>
<ul>
<li><a href="#">Sub Item 2.1</a></li>
<li><a href="#">Folder 2.1</a>
<ul>
<li><a href="#">Sub Item 2.1.1</a></li>
<li><a href="#">Sub Item 2.1.2</a></li>
<li><a href="#">Sub Item 2.1.3</a></li>
<li><a href="#">Sub Item 2.1.4</a></li>
</ul>
</li>
</ul>
</a></li>
<li><a href="#">Item5</a></li>
<li><a href="#">Item6</a></li>
<li><a href="#">Item7</a></li>
</ul>
</div>
</body>
</html>

and css :.suckertreemenu {
margin: 10px 0 10px 0;
}

#treemenu1 {
position: relative;
z-index: 10;
}

.suckertreemenu ul{
margin: 0;
padding: 0;
list-style-type: none;
height: 2em;
}

/*Top level list items*/
.suckertreemenu ul li{
position: relative;
display: inline;
float: left;
background-color: #3B5E2B; /*overall menu background color*/
margin-right: 2px;
}

/*Top level menu link items style*/
.suckertreemenu ul li a{
margin: 0;
display: block;
width: 9.4em; /*Width of top level menu link items*/
padding: 0.15em 1em;
font: 0.7em/1.7em sans-serif;
border width: 1pt solid #FFFFFF;
text-decoration: none;
color: white;
}

/*1st sub level menu*/
.suckertreemenu ul li ul{
position: absolute;
top: 1em; /* no need to change, as true value set by script */
display: block;
visibility: hidden;
z-index: 100;
background-color: #FFFFFF;
}

/*Sub level menu list items (undo style from Top level List Items)*/
.suckertreemenu ul li ul li{
left: 0;
display: list-item;
float: none;
}

/*All subsequent sub menu levels offset after 1st level sub menu */
.suckertreemenu ul li ul li ul{
left: 156px; /* no need to change, as true value set by script */
top: 0;
}

/* Sub level menu links style */
.suckertreemenu ul li ul li a{
display: block;
width: 240px; /*width of sub menu levels*/
color: white;
text-decoration: none;
padding: 1px 5px;
border: 1px solid #ccc;
}

.suckertreemenu ul li a:hover{
background-color: #990000;
color: white;
}

/*Background image for top level menu list links */
.suckertreemenu .mainfoldericon{
background: #3B5E2B url(darrow.gif) no-repeat center right;
}

/*Background image for subsequent level menu list links */
.suckertreemenu .subfoldericon{
background: #3B5E2B url(rarrow.gif) no-repeat center right;
}

* html .suckertreemenu ul li { height: 1%; }

WebJoel

04-15-2008, 12:10 PM

...Thnx for your reply. Would you pls let me know where exactly is # there in code. I looked at it again and again but could not notice. .... From your original post:
Portion of my CSS looks like this -

++++++++++++++++++++++++

<style type="text/css">

/* Add a margin - for this demo only - and a relative position with a high z-index to make it appear over any element below */
#.suckertreemenu {position:relative; z-index:100; margin:50px 0 150px 0;}
#.suckertreemenu h2 {font-family: "trebuchet ms", arial, sans-serif; font-weight:normal; color:#090;}
#.suckertreemenu h3 {font-family: "trebuchet ms", arial, sans-serif; font-weight:normal;}....

janmejay

04-15-2008, 03:27 PM

WebJoel,

Thnx, got those with # and removed from CSS. Also, changed the width (as pointd out by Centauri, it was messed up and became eveident as soon as I added that !doctype), now looking fine.

Actually I implemented code and css corrected by Centauri. Thnx again for your all support and valuable time on this....:)

janmejay

04-15-2008, 03:33 PM

Thank you very much Centauri,

I just tried corrected css and code sent by you and now it works fine. Thanks a lot for your great help on this.

Now, I have one more question for you - Currently, all sub-levels fly-out on right-side, that is OK for all but rightmost item. In the menu, (picture 1.jpg in my earlier post) last item on rightmost side is item 7 - if I have sub-level items for that last one on rightmost and want the sublevel items to fly-out towards left (only for that last one), how can I include this in existing design?

And one more general question to you - do you think this design is an optimum and light weight design? Or can there be even better designs I should go for; given my requirement?

Thanks again... :)

Centauri

04-15-2008, 05:28 PM

The dropdown actions and position with this menu are determined by javascript - no javascript enabled, no dropdown. I prefer the suckerfish method (http://www.htmldog.com/articles/suckerfish/) myself, where the javascript is only a helper for IE6 - very similar, just the drodowns are done directly with the css :hover psuedo class and the positions are set in the css. With this, you could assign a class name to the last dropdown and position it to the left with a negative "left" value. Whilst this could be done with your current menu, modificatons to the javascript would be required.

janmejay

04-15-2008, 07:42 PM

Hello Centauri,

Thanks for your suggestion. I had tried suckerfish sometime back but could not get beyond a certain point and stopped there. But you have a very valid point which I had not thought before - no javascript enabled, no dropdown.

If the same thing that I want to accomplish can be done with suckerfish and as you have said, where a javascript is only a helper to IE6. Given its strong plus point, I would like to implement the same instead of suckertree menu. Could you please give me a css and html which will do the same job in suckerfish method? Thanks again for your insights. I highly appreciate your deeper knowledge of how these things work.

janmejay.

Centauri

04-16-2008, 06:59 AM

The only real difference between the two menus is the method of activation of dropdowns, so very little change is required to the html, and the css needs minor changes plus some additions. All of the javascript originally used can be removed, and the javascript (modified slightly) presented in the article I linked to can be saved as a separate file. The following code can be saved as a file "sfhover.js" to the same folder as the html file :sfHover = function() {
var sfEls = document.getElementById("menu").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);This will be linked via an IE conditional comment as only IE less than version 7 needs to see this. The javascript picks all <li>s within an element with a specific id (in this case "menu") and attaches an event which applies an extra class of "sfhover" to the <li>s on hover (as IE does not support li:hover). As the javascript needs to search within an id name, and the separate divs around each menu are not really needed, we can replace those divs with one that surrounds both menus and has the id of "menu" - the original margins can be applied to the <ul>s themselves.

The html can now be :<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="menu.css">

</head>
<body>
<div id="menu">
<ul id="treemenu1">
<li><a href="#" style="border-left: 1px solid black">Home</a></li>
<li><a href="#">Item1</a></li>
<li><a href="#">Item2</a>
<ul>
<li><a href="#">Sub Item 1.1</a></li>
<li><a href="#">Sub Item 1.2</a></li>
<li><a href="#">Sub Item 1.3</a></li>
<li><a href="#">Sub Item 1.4</a></li>
<li><a href="#">Sub Item 1.5</a></li>
<li><a href="#">Sub Item 1.6</a></li>
</ul>
</li>
<li><a href="#">Item3</a></li>
<li><a href="#">Item4</a>
<ul>
<li><a href="#">Sub Item 2.1</a></li>
<li><a href="#">Folder 2.1</a>
<ul>
<li><a href="#">Sub Item 2.1.1</a></li>
<li><a href="#">Sub Item 2.1.2</a></li>
<li><a href="#">Sub Item 2.1.3</a></li>
<li><a href="#">Sub Item 2.1.4</a></li>
</ul>
</li>
</ul>
</a></li>
<li><a href="#">Item5</a></li>
<li><a href="#">Item6</a></li>
<li><a href="#">Item7</a></li>
</ul>

<table>
<tr>
<td width="9%" valign="middle" align="left"></td>
<td width="1%" valign="middle" align="left"><p class="tnbb"><img src="dipa.gif" width="30" height="30" border="0" /> </td>
<td width="12%" valign="middle" align="left"><p class="tnbb"><img src="dipa1_.gif" width="30" height="30" border="0" /> </td>
<td width="2%"><p class="tnbb"><img src="lamp.gif" width="70" height="70" border="0" />
</tr>
</table>

<ul id="treemenu2">
<li><a href="#" style="border-left: 1px solid black">Home</a></li>
<li><a href="#">Item1</a></li>
<li><a href="#">Item2</a>
<ul>
<li><a href="#">Sub Item 1.1</a></li>
<li><a href="#">Sub Item 1.2</a></li>
<li><a href="#">Sub Item 1.3</a></li>
<li><a href="#">Sub Item 1.4</a></li>
<li><a href="#">Sub Item 1.5</a></li>
<li><a href="#">Sub Item 1.6</a></li>
</ul>
</li>
<li><a href="#">Item3</a></li>
<li><a href="#">Item4</a>
<ul>
<li><a href="#">Sub Item 2.1</a></li>
<li><a href="#">Folder 2.1</a>
<ul class="leftplaced">
<li><a href="#">Sub Item 2.1.1</a></li>
<li><a href="#">Sub Item 2.1.2</a></li>
<li><a href="#">Sub Item 2.1.3</a></li>
<li><a href="#">Sub Item 2.1.4</a></li>
</ul>
</li>
</ul>
</a></li>
<li><a href="#">Item5</a></li>
<li><a href="#">Item6</a></li>
<li><a href="#">Item7</a></li>
</ul>
</div>
</body>
</html>
Apart from the #menu div surrounding both menus, and an extra "leftplaced" class to demonstrate a dropdown to the left, there is no change to the menu structure.

I will continue with the css in the next post to avoid the post being too long.

Centauri

04-16-2008, 07:41 AM

The "menu.css" file can now be :body {
margin: 3px 3px 0;
padding: 0;
}
#treemenu1 {
position: relative;
z-index: 10;
}
#menu ul{
margin: 10px 0 10px 0;
padding: 0;
list-style-type: none;
height: 2em;
font: 0.7em/2em sans-serif;
}

/*Top level list items*/
#menu li{
position: relative;
float: left;
background-color: #3B5E2B;
margin: 0 2px 0 0;
padding: 0;
}

/*Top level menu link items style*/
#menu a{
margin: 0;
width: 9.4em; /*Width of top level menu link items*/
padding: 0 1em;
text-decoration: none;
color: white;
float: left;
height: 2em;
}

/*1st sub level menu*/
#menu ul ul{
position: absolute;
top: 2em;
background-color: #999999;
height: auto;
margin: 0;
width: 240px; /*width of sub menu levels*/
font-size: 1em;
left: -999em;
}

/*Sub level menu list items*/
#menu ul ul li{
width: 100%;
margin: 0;
}

/* Sub level menu links style */
#menu ul ul a{
display: block;
color: white;
text-decoration: none;
padding: 0 5px;
border: 1px solid #ccc;
float: none;
width: auto;
}

#menu li:hover, #menu li.sfhover {
background-color: #990000;
color: white;
}
#menu li:hover ul, #menu li.sfhover ul {
left: 0px;
z-index: 100;
}
#menu li:hover ul ul, #menu li.sfhover ul ul {
left: -999em;
}
#menu li li:hover ul, #menu li li.sfhover ul {
left: 200px;
top: 0px;
}
#menu li li:hover ul.leftplaced, #menu li li.sfhover ul.leftplaced {
left: -235px;
}
/*Background image for top level menu list links */
#menu .mainfoldericon{
background: #3B5E2B url(darrow.gif) no-repeat center right;
}

/*Background image for subsequent level menu list links */
#menu .subfoldericon{
background: #3B5E2B url(rarrow.gif) no-repeat center right;
}

* html #menu ul li { height: 1%; }

The first thing I did here was to apply the body margins via css, as the html attributes you had are not valid under the strict doctype. The #treemenu1 <ul> gets the z-index as before so that it will overlap the second menu.

Next, both menu <ul>s get the top and bottom margins and a height. I applied the font styles here so that em sizes will be consistant throughout the menu. Instead of the small top and bottom padding originally on the <a> elements, I combined this into the line height to get 2ems height of the <a>s and <ul>s - this is important as we need to know how far down the dropdowns need to be placed to appear at the bottom of the first level.

Another change I did was to float both the top level <li>s and <a>s - this method seems to be more reliable cross browser than combinations of block and inline displays with floats. The <a>s are also given the height equal to the line height so that the text is centred vertically.

Now for the fun of the dropdowns. The second level <ul>s are positioned absolutely as before, and the "top" settng of 2ems will place them at the bottom of the top level <ul>. I set the dropdown width here rather than on the <a>s as it is more reliable. Instead of initially hiding the dropdowns using visibility, we shift them way off the left of the screen with the -999em left setting - this ensures that screen readers will still be able to read the second level links. The height is set to auto to over-ride the height set on the top level <ul>s.

The dropdown <li>s will inheret the left float from the top level, and this is allowed here as it fixes gap problems that can occur with IE. The width of the <li>s is made 100% so they fill the width of the dropdown <ul>s. The margin is zeroed to over-ride the margin set on the top level <li>s. The dropdown <a>s have the float removed and block display added so they fill the width of the <li>s.

Next, the magic of the hover. Rather than change the background colour of the <a>s on hover, we change the background of the <li>s - this means the current menu parent remains highlighted as the sub levels are hovered. In addition to this applying to the li:hover, it also applies to li.sfhover - the class dynamically applied to the <li>s on hover by the javascript in IE6.

Next, the <ul>s below the hovered <li> (the first dropdowns when hovering over the top level menu bar) are shifted into view with the left:0 value, and get a high z-index to make sure they appear above any other content.

The next rule ensures that <ul>s below the one which has just been moved into view, remain out of view with the large negative left value.

The next rule says that for <li>s below the top level that are hovered, the next dropown <ul> will be placed at the same level and 200px to the right.

The next rule is the same as the previous except it targets those submenu <ul>s that have the class of "leftplaced", and places them 235px to the left instead of the right.

Have a play wth it and see if that works for what you want. Hopefully the explainations above will allow you to easity adjust things to your liking.

Cheers
Graeme

janmejay

04-16-2008, 04:45 PM

Wow! A HEARTFELT THANKS TO YOU, Graeme, I want to acknowledge your support, time, ideas and expertise in my website 'Acknowledgment' section.

I put all (suckerfish sent by you) these things together and played with it. Attached is a sample of it in the two image files. Everything worked fine except I could not get those small arrows (down arrow and left arrow) that indicates that a cell has sub-level items too in it. Am I missing anything here? Did you see those on your m/c when you tried this sample?

Also I have few more questions regarding css and given your expertise I'll keep asking you. At some places in CSS some elements like width, margins, padding etc are defined in px. Should those be in % so that it will always accomodate in any screen resolution?

For the text of the document where this menu will reside - if I want to manipulate paragraph headings, font, background color by using css - should those be go in same css as an additional piece or should that css be a separate one dedicatedly for those manipulations?

And third question is - if a visitor is viewing a particular link, can that link be kept visible somehow for visitor to know that he/she is inside that link. Keeping a link somehow highligted ? And can that be done through css manipulation or html code?

And when you said in one of your last few posts that generally those (suckertree) bugs won't come in other decent browsers? What browsers would you recommend to test this out so it fits and works fine universally.

Thanks again for your time,
janmejay

janmejay

04-16-2008, 05:27 PM

Hello Centauri,

I worked out that arrow (down arrow, right arrow) problem, its class was not linked in li items. Now it works fine. Your help on my other questions is highly appreciated.
Thnx
janmejay

Centauri

04-16-2008, 05:58 PM

As I did not actually have those images, I did not include them in the html, but it seems as though you worked out the appropriate class just needs to be added to the relavent <li> (or <a> if you remove the background color part in the css class) that you want them displayed in.

Usually in a fluid layout, some things like left and right columns look better being a fixed width while the content width varies - in these cases I just don't specify a width for the content area so that it expands to what is available. Where there are a number of things side by side, a percentage width can be useful, but you need to keep in mind that IE quite often adds up percentages incorrectly so that a total of 100% ends up being 101%. A percentage width can also be very useful on a site wrapper element to maintain a constant side margin ratio.

Multiple css fles can be used, but I find them a bt of a pain to debug, as it can be difficult to see what styles in one sheet might be over-riding those in another - I usually use one stylesheet and try to organise the declaration of styles to match when many of them occur within the html. The organisation of them is whatever you are comfortable with.

Indicating the current page can be done manually or automatically. The manual way involves adding another class to whichever menu item corresponds to the page you are on and applying a dfferent style to that class. This means that the menu will be different for each page as the "current" style will be applied to different menu items on different pages. You can also use an id name for each top level menu item, and put an id on the body element unique to each page - the css can then match body id and menu item id to display a differentmenu item style for that page. This has the advantage of the menu staying the same for each page (and can therefore be inserted as a server-side include), but the css file gets complicated matching the ids.

janmejay

04-16-2008, 07:26 PM

Thank you, Centauri,
Regarding this left arrow - now when sub-menu flys out towards right, I have a menu item name for example - "sub-item 1.1 ->" and then towards the right end of that cell space, right arrow is placed to indicate that this has even more sublevels.

For the rightmost when there are leftplaced they fly out towards left and if I want the subitems to start with arrow first followed by text then how can I achieve that? For example "<- sub-item 1.1.1" so that arrow too points towards left. I do have a mirror image of the right arrow making it left arrow but how can we let css or html to place arrow before the text ?

Thnx
janmejay

Centauri

04-16-2008, 08:27 PM

You could assign a new class name to the left flyout subitems, and assign the left arrow to it like:
#menu .subfoldericonleft{
background: #3B5E2B url(larrow.gif) no-repeat center left;
}
#menu .subfoldericonleft a{
text-indent: 10px;
} The second part of this should space the link text across a bit to allow room for the arrow (vary the indent size to suit).

janmejay

04-16-2008, 10:20 PM

Once again thanx Centauri, I did implement and it does work finely. Following your suggestions, planning to have a single css with decorations details for text, background, font, headings etc. Will play with it first and come back to you if land up with some issues.

Thanks for your support & time,
with warm regards,
janmejay :)

janmejay

04-17-2008, 05:27 PM

Hello Centauri,
In one of your previous posts, while discussing about IE realted bugs, you mentioned that other decent browsers would not need such work-arounds. I would like to test my menu in all browsers other than IE too.

Which ones do you recommend as a good idea to test to ensure that most of the visitors are covered? I can download FF easily but I don't have any idea about MaC and which others should be tested?

Thnx,
janmejay

Centauri

04-17-2008, 05:45 PM

You should always develop a site using a standards compliant browser, and FireFox is probably the best one in this regard, and then adjust for IE's quirks if necessary. I use FireFox as the main browser and test in Opera, IE6 and IE7. You can now get Safari for Windows, but I am not sure how close the Windows version is to the Mac version. As IE6 is still widely used, and it has the most rendering bugs of any of the current common browsers, testing with it is still a must. I have IE6 and IE7 on separate, networked PCs, but it is possible to have them together on the one machine, although somewhat fiddly to do.

janmejay

05-23-2008, 02:58 PM

Hello Centauri,

Per your guidelines and suggestions, I customized menu to my requirements and also tested it in browsers other than IE.

I have uploaded a sample jpg since the time we discussed this and used the same.

There is a row on the top and bottom and I have kept some images in between. Something as below (same thing about menu as we discussed before). The images are in <td></td> tag as written below.

Can I take out this table and instead place these images in another nested <div> and control it from css? If so, how can I do it?

<div id="menu">
<ul id="treemenu1">
<li><a href="#" style="border-left: 1px solid black">Home</a></li>
<li><a href="#">Item1</a></li>
<li><a href="#">Item2</a>
<ul>
<li><a href="#">Sub Item 1.1</a></li>
<li><a href="#">Sub Item 1.2</a></li>
</ul>
</li>
<li><a href="#">Item3</a></li>
<li><a href="#">Item6</a></li>
<li><a href="#">Item7</a></li>
</ul>

<table>
<tr>
<td><img1></td>
<td><img2></td>
<td><img3></td>
</tr>
</table>
<ul id="treemenu2">
<li><a href="#" style="border-left: 1px solid black">Home</a></li>
<li><a href="#">Item1</a></li>
<li><a href="#">Item2</a>
<ul>
<li><a href="#">Sub Item 1.1</a></li>
<li><a href="#">Sub Item 1.2</a></li>
</ul>
</li>
<li><a href="#">Item3</a></li>
<li><a href="#">Item6</a></li>
<li><a href="#">Item7</a></li>
</ul>
</div>

As always thanks for your time & support,
janmejay

Centauri

05-23-2008, 11:47 PM

Interesting to revisit this. Normally, this is quite easy to do except for the existance of IE6 ... :mad: To get the images to display level with the ends of the menu, we need to reference the total menu width. Floating the #menu div left will normally cause it to shrinkwrap the contents, but IE6 has a bug where block elements of undefined width (the <ul>s) will force a floated container to the maximum width instead shrinkwrapping. Therefore, a width needs to be set on #menu. The problem here is that the widths of the top level <a>s is set in ems, and the gap between is set in px (2px). Even if the gap is set as a fractional em value, browser rounding errors still makes setting an overall em width difficult. Looking back through the posts, I originally set the <a> width in ems to change it from the original pt value. As the width of the submenu <ul>s is set in px, doing the same for the top level <a>s will then allow a width to be set on #menu. If #menu also gets a center text-align, then any images within will be naturally centred (the middle image), and a left align can be re-applied to the <ul>s :#menu {
text-align: center;
width: 1033px;
}

#menu ul{
margin: 10px 0 10px 0;
padding: 0;
list-style-type: none;
height: 2em;
font: 0.7em/2em sans-serif;
text-align: left;
}

#menu a{
margin: 0;
width: 103px; /*Width of top level menu link items*/
padding: 0 12px;
text-decoration: none;
color: white;
float: left;
height: 2em;
}

The images can now just be placed between the menus without any extra container, and the outer ones given classes to allow them to be positioned. Note that the outer ones need to be listed in the html first, and the centre image does not need any class as it will naturally sit in the middle (due to the text-align). As the centre image also appears to be the highest, it will also determine the spacing between menus. </ul>

<img src="Image1.jpg" alt="" class="imgleft" />
<img src="Image3.jpg" alt="" class="imgright" />
<img src="Image2.jpg" alt="" />

<ul id="treemenu2">

The styling for these axtra classes is #menu .imgleft {
margin-top: 17px;
float: left;
}
#menu .imgright {
float: right;
margin: 5px 3px 0 114px;
display: inline;
}
The images are floated left and right. I scaled up the images in your example image to derive their sizes, and this may not be accurate - you may have to adjust some of the following margins to suit. As the left image is a lower height, a top margin will space it down to the correct location, as does the top margin (5px) on the right image. The right margin on the right image (3px) is to cancel the effect of the extra gap placed on the right of the top level menu <li>s, and the left margin (114px) is to make the overall width taken up by the right image to be the same as the left image width so that the centre image will actually sit in the centre. The margins highlighted in blue you may have to adjust from these values. The inline display on the right image is to prevent IE6's doubled float margin bug.

janmejay

05-28-2008, 02:21 PM

Hello Centauri,

Just now, I looked at your reply. I'll implement this, customize the size of images as you said and test it now. Will let you know the results. Now, I used the small images of lamp and little bigger of candles around a center image as an example. Let's say, I need to put 5 or 6 different images in this open space - each of same size and equally spaced - and of course the logo on leftmost end and another lamp at rightmost end as they are! What extra change I need to do in CSS and code?

Thanks again for your time, support. I am learning this in a far better way when I read your detailed, step-by-step explanations and answers as to why we do what we do. Thanks again,
janmejay

Centauri

05-28-2008, 07:48 PM

Should be just a matter of dropping all the images in after the left and right ones : </ul>

<img src="Image1.jpg" alt="" class="imgleft" />
<img src="Image3.jpg" alt="" class="imgright" />
<img src="Image2.jpg" alt="" />
<img src="Image4.jpg" alt="" />
<img src="Image5.jpg" alt="" />
<img src="Image6.jpg" alt="" />
<img src="Image7.jpg" alt="" />
<ul id="treemenu2">assuming Image1 and Image3 are still the left and right ones. The other images should just line up in a row in the center. If you need a little gap between each one, that can be provided in the css as long as that is cancelled in the side images css :#menu img {
margin: 0 5px;
}
#menu .imgleft {
margin: 17px 0 0;
float: left;
}
#menu .imgright {
float: right;
margin: 5px 3px 0 114px;
display: inline;
}