Overlaying Divs (3)

[GE2009]

Alright - I'm trying to stack divs with the relative position attribute directly on top of each other for the purpose of creating a circulating image to appear at the top of my page; using a series of circles with Js scripted into them to fade between the pages when clicked.They're all attributed with the same class with the display set to "none" and for some maddening reason, I cannot get them to actually appear on top of each other. As a matter of fact, I can't get them to appear at all save the fact that they'll still take up "space" on the page; but none of the content is visible. I've set the z-indices appropriately ranging from 0-4 (0 being the containing wrapper and 4 being the navigation images to remain on top) and I still cannot get this to work...here's the code: <div id="slideNav_ServicesWrap"> <div class="slideNav_category" id="web"></div><!-- end c-slideNav_sect --> <div class="slideNav_category" id="grphc"></div><!-- end c-slideNav_sect --> <div class="slideNav_category" id="smlBus"></div><!-- end c-slideNav_sect --> <img src="images/NS_images/emco_img_CircleNav.png" width="21" height="21" border="0" class="slideNav_circ" id="CircNav_web" /> <img src="images/NS_images/emco_img_CircleNav.png" width="21" height="21" border="0" class="slideNav_circ" id="CircNav_grphc" /> <img src="images/NS_images/emco_img_CircleNav.png" width="21" height="21" border="0" class="slideNav_circ" id="CircNav_smlBusn" /> </div><!--end slideNav_Services-->and the CSS:#slideNav_ServicesWrap { height: 250px; margin: 0px auto 0px auto; width: 850px; padding: 0px; z-index: 0; background-color: #CCC;}.slideNav_circ { height: 20px; width: 20px; margin: 0px 3px 0px 0px; position: relative; top: 225px; left: 771px; cursor: pointer; cursor:hand; z-index: 4; }.slideNav_category { padding: 0px; height: 250px; width: 850px; position: relative; top: 0px; left: 0px; display: none; }.slideNav_category #web { background-color: #036; z-index: 1;}.slideNav_category #grphc { background-color: #9CF; z-index: 2;}.slideNav_category #smlBus { background-color: #9FF; z-index: 3;}I thought I had a prettyl clear approach to this; but it's now confusing as all ######. Any help in this quandry would be great - thanks in advance!

[Ingolme]

I'm not exactly sure what you're attempting to do, but I can tell you that these selectors aren't going to work because the images aren't inside the div elements:.slideNav_category #web.slideNav_category #grphc.slideNav_category #smlBus

[GE2009]

I'm not exactly sure what you're attempting to do, but I can tell you that these selectors aren't going to work because the images aren't inside the div elements:.slideNav_category #web.slideNav_category #grphc.slideNav_category #smlBus

right now I'm just testing the functionality of the div and it's navigational pieces. This is why the bkgs are assigned a color value instead of the actual image. I just want to see the fade feature work then I'll plug in the images themselves.

[Ingolme]

If you want all the divs to be in the same position, add "position: relative" to the parent, and then put "position: absolute" on the divs.

[GE2009]

If you want all the divs to be in the same position, add "position: relative" to the parent, and then put "position: absolute" on the divs.

and keep the top: 0;left: 0;for the divs respectively, correct??

[GE2009]

and keep the top: 0;left: 0;for the divs respectively, correct??

Scratch that, I just set the attributes to "inherit" which worked fine but now it looks the way it's supposed to in Moz - but IE the margin is completely ignored and snugs up underneath the top div now. When did IE become so annoying???

[Ingolme]

Setting top and left to 0 should have it working fine.

[dsonesuk]

you will find that IE and that includes IE8 in most cases, does not support inherit as a value for a property.

When did IE become so annoying???

When MS thought it was going to be the one and only browser that everyone would use, and decided it would follow its own set of rules instead of W3C (MS is all powerful, and W3C who!), and after many years of dragging their feet, with versions IE8, IE9 they finally started to come round to W3C standards, But! still not quite there.

[GE2009]

you will find that IE and that includes IE8 in most cases, does not support inherit as a value for a property.When MS thought it was going to be the one and only browser that everyone would use, and decided it would follow its own set of rules instead of W3C (MS is all powerful, and W3C who!), and after many years of dragging their feet, with versions IE8, IE9 they finally started to come round to W3C standards, But! still not quite there.

#^%!@!!! I just need a simple image swap feature that would occur when you roll over or click the images in the nav section. This now seems like this is going to be the most complicated bloomin' thing yet. Does anyone have a simple script for this?? Or at least a template I can use. I hate javascript - I can't figure out which end to even start on with the stupid thing. (laughs).

[dsonesuk]

Not quite sure if this is what are looking for? but it is important make sure id of div id="smlBusn" matches end text value of image id ref id="CircNav_smlBusn" (which, originally did not)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><script type="text/javascript">/*<![CDATA[*//*---->*/function showhide(thiselements){parent_container = document.getElementById("slideNav_ServicesWrap");child_img = parent_container.getElementsByTagName("img");for(i=0; i<child_img.length; i++){child_img[i].style.display="none"; //hide all images}//show onmouseover imgcurrentelement=document.getElementById("CircNav_"+thiselements.id); //use prefix of image id ref, and use selected id refererence of div to get full id ref of image to targetcurrentelement.style.display="block";}/*--*//*]]>*/</script><style type="text/css">.slideNav_category{ background-color:#0099CC; float:left;}.slideNav_circ {display:none;}</style></head><body><div id="slideNav_ServicesWrap"><div class="slideNav_category" id="web" onmouseover="showhide(this)">Web</div><!-- end c-slideNav_sect --><div class="slideNav_category" id="grphc" onmouseover="showhide(this)">Graphic</div><!-- end c-slideNav_sect --><div class="slideNav_category" id="smlBusn" onmouseover="showhide(this)">WhatEver</div><!-- end c-slideNav_sect --><img src="../images/alien/1cha_imgbrett.jpg" width="21" height="21" border="0" class="slideNav_circ" id="CircNav_web" /><img src="../images/alien/1cha_imgash.jpg" width="21" height="21" border="0" class="slideNav_circ" id="CircNav_grphc" /><img src="../images/alien/1cha_imgdallas.jpg" width="21" height="21" border="0" class="slideNav_circ" id="CircNav_smlBusn" /></div><!--end slideNav_Services--></body></html>

[dsonesuk]

Looking at your post again, you are probably looking for something similar to below

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><script type="text/javascript">/*<![CDATA[*//*---->*/window.onload=function()	{	js_mess=document.getElementById("js_message");	js_mess.style.display="none";	parent_container = document.getElementById("slideNav_ServicesWrap");	child_div = parent_container.getElementsByTagName("div"); //find all divs	child_img = parent_container.getElementsByTagName("img"); // find all imgs		for(i=0; i<child_div.length; i++)		{		if(child_div[i].className=="slideNav_category") //target divs with specific class name			{			child_div[i].style.display="none"; //hide all div			}		if(child_img[i].className=="slideNav_circ") //target imgages with specific class name			{			child_img[i].onmouseover=function(){showhide(this)}; //add onmouseover event to img			child_img[i].onmouseout=function(){showhide(this)}; //add onmouseout event to img			}			}			}function showhide(thiselements)	{	thisvalue= thiselements.id.substr(8, thiselements.id.length)	currentelement=document.getElementById(thisvalue); 	currentelement.style.display=="none" ? currentelement.style.display="block" : currentelement.style.display="none";	}/*--*//*]]>*/</script><style type="text/css">#slideNav_ServicesWrap {position:relative;height: 250px;margin: 0px auto 0px auto;width: 850px;padding: 0px;z-index: 0;background-color: #CCC;}.slideNav_category {padding: 0px;height: 250px;width: 850px;position: absolute;top: 0px;left: 0px;display:none;}.slideNav_circ {height: 20px;width: 20px;margin: 0px 3px 0px 0px;position: relative;top: 225px;left: 771px;cursor: pointer;}#web {background-color: #036;color:#FFFFFF;}#grphc {background-color: #9CF;color:#000;}#smlBus {background-color: #9FF;color:#000;}#js_message{position:absolute; top:50%; left:50%; z-index:99;}</style></head><body><div id="slideNav_ServicesWrap"><span id="js_message">Javascript Must be Enabled</span><div class="slideNav_category" id="web">Web</div><!-- end c-slideNav_sect --><div class="slideNav_category" id="grphc">Graphic</div><!-- end c-slideNav_sect --><div class="slideNav_category" id="smlBus">WhatEver</div><!-- end c-slideNav_sect --><img src="../images/alien/1cha_imgbrett.jpg" width="21" height="21" border="0" class="slideNav_circ" id="CircNav_web" /><img src="../images/alien/1cha_imgash.jpg" width="21" height="21" border="0" class="slideNav_circ" id="CircNav_grphc" /><img src="../images/alien/1cha_imgdallas.jpg" width="21" height="21" border="0" class="slideNav_circ" id="CircNav_smlBus" /></div><!--end slideNav_Services--></body></html>

[GE2009]

Looking at your post again, you are probably looking for something similar to below

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><script type="text/javascript">/*<![CDATA[*//*---->*/window.onload=function()	{	js_mess=document.getElementById("js_message");	js_mess.style.display="none";	parent_container = document.getElementById("slideNav_ServicesWrap");	child_div = parent_container.getElementsByTagName("div"); //find all divs	child_img = parent_container.getElementsByTagName("img"); // find all imgs		for(i=0; i<child_div.length; i++)		{		if(child_div[i].className=="slideNav_category") //target divs with specific class name			{			child_div[i].style.display="none"; //hide all div			}		if(child_img[i].className=="slideNav_circ") //target imgages with specific class name			{			child_img[i].onmouseover=function(){showhide(this)}; //add onmouseover event to img			child_img[i].onmouseout=function(){showhide(this)}; //add onmouseout event to img			}			}			}function showhide(thiselements)	{	thisvalue= thiselements.id.substr(8, thiselements.id.length)	currentelement=document.getElementById(thisvalue); 	currentelement.style.display=="none" ? currentelement.style.display="block" : currentelement.style.display="none";	}/*--*//*]]>*/</script><style type="text/css">#slideNav_ServicesWrap {position:relative;height: 250px;margin: 0px auto 0px auto;width: 850px;padding: 0px;z-index: 0;background-color: #CCC;}.slideNav_category {padding: 0px;height: 250px;width: 850px;position: absolute;top: 0px;left: 0px;display:none;}.slideNav_circ {height: 20px;width: 20px;margin: 0px 3px 0px 0px;position: relative;top: 225px;left: 771px;cursor: pointer;}#web {background-color: #036;color:#FFFFFF;}#grphc {background-color: #9CF;color:#000;}#smlBus {background-color: #9FF;color:#000;}#js_message{position:absolute; top:50%; left:50%; z-index:99;}</style></head><body><div id="slideNav_ServicesWrap"><span id="js_message">Javascript Must be Enabled</span><div class="slideNav_category" id="web">Web</div><!-- end c-slideNav_sect --><div class="slideNav_category" id="grphc">Graphic</div><!-- end c-slideNav_sect --><div class="slideNav_category" id="smlBus">WhatEver</div><!-- end c-slideNav_sect --><img src="../images/alien/1cha_imgbrett.jpg" width="21" height="21" border="0" class="slideNav_circ" id="CircNav_web" /><img src="../images/alien/1cha_imgash.jpg" width="21" height="21" border="0" class="slideNav_circ" id="CircNav_grphc" /><img src="../images/alien/1cha_imgdallas.jpg" width="21" height="21" border="0" class="slideNav_circ" id="CircNav_smlBus" /></div><!--end slideNav_Services--></body></html>

Fantastic - I'll make the adjustments and let you know how this worked. Thanks a ton for the help dsonesuk

[GE2009]

Fantastic - I'll make the adjustments and let you know how this worked. Thanks a ton for the help dsonesuk

function showhide(thiselements) { thisvalue= thiselements.id.substr(8, thiselements.id.length) currentelement=document.getElementById(thisvalue); currentelement.style.display=="none" ? currentelement.style.display="block" : currentelement.style.display="none"; }I'm assuming that I am going to replace "thisvalue" with the actual element ID correct? And lastly - where would I annotate the pictures that I would be using to "swap out" for the rollover function?

[thescientist]

function showhide(thiselements) { thisvalue= thiselements.id.substr(8, thiselements.id.length) currentelement=document.getElementById(thisvalue); currentelement.style.display=="none" ? currentelement.style.display="block" : currentelement.style.display="none"; }I'm assuming that I am going to replace "thisvalue" with the actual element ID correct? And lastly - where would I annotate the pictures that I would be using to "swap out" for the rollover function?

no. If you look at this part of the code he wrote,

if(child_img[i].className=="slideNav_circ") //target imgages with specific class name{  child_img[i].onmouseover=function(){showhide(this)}; //add onmouseover event to img  child_img[i].onmouseout=function(){showhide(this)}; //add onmouseout event to img};

when the window object loads, it will bind onmouseover/onmouseout event handlers to images with the class name of slideNav_circ which passes this to the showhide function. this is a direct reference to the element calling the function. The show_hide function uses this reference to act upon whatever element calls it, by using the paramter thiselements to access it. You shouldn't have to change anything about that function, unless you want to change the names of the variables to something more meaningful/else.

[dsonesuk]

onmouserover of '<img src="../images/alien/1cha_imgbrett.jpg" width="21" height="21" border="0" class="slideNav_circ" id="CircNav_web" />' the showhide(this) function is called with ref 'this' which identifies which element triggered the function.function showhide(thiselements) : thiselements = thisthiselements.id : gives the id reference of element mouseover 'CircNav_web'thiselements.id.substr(8, thiselements.id.length) : will retrieve all the characters beyond the eigth character, to the total length id reference name(thiselements.id.length) i.e 'web' from 'CircNav_web'.thisvalue= thiselements.id.substr(8, thiselements.id.length): this value is passed to variable 'thisvalue'currentelement=document.getElementById(thisvalue): currentelement is used as an reference to the element id you which display on the mouseover of small image i.e '<div class="slideNav_category" id="web">Web</div>'Now the onmouseover and onmouse out use the same function, the difference is that depending on the display style current used, it will change to the opposite.currentelement.style.display=="none" ? currentelement.style.display="block" : currentelement.style.display="none";if display = none, change to display block, else display none.So everything done automatically, you just add extra images, and related element to reference.All you have to do is make small image id reference end characters match the related element id ref you wish to display<div class="slideNav_category" id="web">Web</div><div class="slideNav_category" id="grphc">Graphic</div><div class="slideNav_category" id="smlBusn">WhatEver</div><img src="../images/alien/1cha_imgbrett.jpg" width="21" height="21" border="0" class="slideNav_circ" id="CircNav_web" /><img src="../images/alien/1cha_imgash.jpg" width="21" height="21" border="0" class="slideNav_circ" id="CircNav_grphc" /><img src="../images/alien/1cha_imgdallas.jpg" width="21" height="21" border="0" class="slideNav_circ" id="CircNav_smlBusn" />

where would I annotate the pictures that I would be using to "swap out" for the rollover function

not quite sure what you mean by this to show large img, just insert image in display element<div class="slideNav_category" id="web"><img src="/images/largewebrelatedimage.jpg" /><p>Web</p></div> to create rolover image for small images use css to accomplish this instead (look into using sprite images normal image with hover image combined into one image)

[GE2009]

Awesome; I'll give it a stab and let you know how it goes. I can't tell ya how much I appreciate your help Ds