|
CSS - Photo Gallery Hovering Problem (z-index?)
I am having a minor problem with a photo gallery on a site that I am working on. Here is a link: http://fieldspianos.com/new/store/p...em_number=14275
In all browsers except IE6, when a thumbnail is hovered over, the image is displayed larger in the preview box. In IE6, however, this occurs properly, but once you roll over an image more than once it will not display anymore. For example, if I roll over the 1st thumbnail, the image displays, then I roll over the 2nd thumbnail, the image displays, but if I roll over the 1st thumbnail again, nothing happens. Included below is my css and html. This was made without javascript and I would like to keep it that way if at all possible. HTML Code:
<div id="sitebody">
<div id="tabsheader">
<ul id="primary">
<li><?php print "<a href=\"information.php?item_number=" . $item_number . "\">"; ?>Information</a></li>
<li><?php print "<a href=\"description.php?item_number=" . $item_number . "\">"; ?>Description</a></li>
<li><span>Photo Gallery</span></li>
<li><?php print "<a href=\"video.php?item_number=" . $item_number . "\">"; ?>Video</a></li>
<li><?php print "<a href=\"moreinfo.php?item_number=" . $item_number . "\">"; ?>More Info...</a></li>
</ul>
</div>
<div id="main">
<div id="contents">
<h2>Photo Gallery</h2>
<p class="note">Hover over the photos below to see larger images.</p>
<br />
<div id="photogallery">
<div id="thumbnails">
<ul class="hoverbox">
<li>
<a href="#"><img src="images/<?php print $item_number; ?>_img1.jpg" alt="description" /><img src="images/<?php print $item_number; ?>_img1.jpg" alt="description" class="preview" /></a></li>
<li>
<a href="#"><img src="images/<?php print $item_number; ?>_img2.jpg" alt="description" /><img src="images/<?php print $item_number; ?>_img2.jpg" alt="description" class="preview" /></a></li>
<li>
<a href="#"><img src="images/<?php print $item_number; ?>_img3.jpg" alt="description" /><img src="images/<?php print $item_number; ?>_img3.jpg" alt="description" class="preview" /></a></li>
<li>
<a href="#"><img src="images/<?php print $item_number; ?>_img4.jpg" alt="description" /><img src="images/<?php print $item_number; ?>_img4.jpg" alt="description" class="preview" /></a></li>
<li>
<a href="#"><img src="images/<?php print $item_number; ?>_img5.jpg" alt="description" /><img src="images/<?php print $item_number; ?>_img5.jpg" alt="description" class="preview" /></a></li>
<li>
<a href="#"><img src="images/<?php print $item_number; ?>_img6.jpg" alt="description" /><img src="images/<?php print $item_number; ?>_img6.jpg" alt="description" class="preview" /></a></li>
<li>
<a href="#"><img src="images/<?php print $item_number; ?>_img7.jpg" alt="description" /><img src="images/<?php print $item_number; ?>_img7.jpg" alt="description" class="preview" /></a></li>
<li>
<a href="#"><img src="images/<?php print $item_number; ?>_img8.jpg" alt="description" /><img src="images/<?php print $item_number; ?>_img8.jpg" alt="description" class="preview" /></a></li>
<li>
<a href="#"><img src="images/<?php print $item_number; ?>_img9.jpg" alt="description" /><img src="images/<?php print $item_number; ?>_img9.jpg" alt="description" class="preview" /></a></li>
<li>
<a href="#"><img src="images/<?php print $item_number; ?>_img10.jpg" alt="description" /><img src="images/<?php print $item_number; ?>_img10.jpg" alt="description" class="preview" /></a></li>
<li>
<a href="#"><img src="images/<?php print $item_number; ?>_img11.jpg" alt="description" /><img src="images/<?php print $item_number; ?>_img11.jpg" alt="description" class="preview" /></a></li>
<li>
<a href="#"><img src="images/<?php print $item_number; ?>_img12.jpg" alt="description" /><img src="images/<?php print $item_number; ?>_img12.jpg" alt="description" class="preview" /></a></li>
<li>
<a href="#"><img src="images/<?php print $item_number; ?>_img13.jpg" alt="description" /><img src="images/<?php print $item_number; ?>_img13.jpg" alt="description" class="preview" /></a></li>
<li>
<a href="#"><img src="images/<?php print $item_number; ?>_img14.jpg" alt="description" /><img src="images/<?php print $item_number; ?>_img14.jpg" alt="description" class="preview" /></a></li>
<li>
<a href="#"><img src="images/<?php print $item_number; ?>_img15.jpg" alt="description" /><img src="images/<?php print $item_number; ?>_img15.jpg" alt="description" class="preview" /></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
CSS Code:
/*Photo Gallery*/
div#photogallery {
position: relative;
width: 662px;
border: 1px solid #000;
padding: 1px;
padding-bottom: 2px;
height: 404px;
}
div#thumbnails {
width: 243px;
}
div#thumbnails ul {
margin-left: 0px;
padding-left: 0px;
}
.hoverbox
{
cursor: default;
list-style: none;
}
.hoverbox a
{
cursor: default;
}
.hoverbox a .preview
{
display: none;
}
.hoverbox a:hover .preview
{
display: block;
position: absolute;
top: 2px;
left: 247px;
z-index: 1;
}
.hoverbox img
{
background-color: #FFFFFF;
border-color: #000;
border-style: solid;
border-width: 1px;
color: inherit;
padding: 1px;
vertical-align: top;
width: 75px;
height: 75px;
}
.hoverbox img:hover
{
background-color: #000000;
border-color: #000;
border-style: solid;
border-width: 1px;
color: inherit;
vertical-align: top;
width: 75px;
height: 75px;
}
.hoverbox li
{
display: inline;
float: left;
margin: 1px;
}
.hoverbox .preview
{
border-color: #000;
width: 409px;
height: 399px;
}
Similar TutorialsHello everyone. You see, I wanted to use the close look up for images in gallery, something like sucker fish gallery have. On hover, image changes size and pop up bigger. I've used overflow, because not every image in gallery after resizing by server to 200px width will have 150px height. There is example image to illustrate that. And now... open it using IE, this is something to do with z-index I think. I really don't how to code it for IE. On Opera and FF it is probably looking as it should. Could anyone suggest something to solve this please ? I would be grateful. http://members.lycos.co.uk/milosz/www/new/ Code: <!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>
<title>Test page</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
ul { width: 400px; }
li { margin: 10px; position: relative; float: left; width: 100px; height: 75px; }
li a { border: 1px solid #3A3A3A; text-decoration: none; color: #EFEFEF; width: 100px; height: 75px; overflow: hidden; background: #3A3A3A; position: absolute; }
li a img { border: 0; }
li:hover a { position: absolute; width: 200px; height: 150px; left: -51px; top: -39px; border: 1px solid #3A3A3A; overflow: hidden; z-index: 2; }
li a:hover { z-index: 1; }
</style>
<!--[if lt IE 7]>
<style type="text/css">
/* Hovers everything now */
body { behavior:url("csshover.htc"); }
</style>
<![endif]-->
</head>
<body>
<br />
<br />
<br />
<ul>
<li><a href="#" target="_blank"><img src="1.png" alt="1.jpg" /></a></li>
<li><a href="#" target="_blank"><img src="2.jpg" alt="2.jpg" /></a></li>
<li><a href="#" target="_blank"><img src="1.jpg" alt="1.jpg" /></a></li>
<li><a href="#" target="_blank"><img src="2.jpg" alt="2.jpg" /></a></li>
<li><a href="#" target="_blank"><img src="1.jpg" alt="1.jpg" /></a></li>
<li><a href="#" target="_blank"><img src="2.jpg" alt="2.jpg" /></a></li>
<li><a href="#" target="_blank"><img src="1.jpg" alt="1.jpg" /></a></li>
</ul>
</body>
</html>
Excuse me my poor English. edit: I've changed link, and move files to safe server. They will stay there longer I think, and maybe somehow help others like me. I am wanting to do a photo gallery section like http://www.passionforpaintings.com/...rtists/overview. The problem is it is in html and I been looking for css gallery tutorials and can not find anything like this. Could anyone give me some help or point me in the right direction please? Many thanks in advance. I've got a photo gallery loaded and working well but I would like to load the first photo of the gallery without the user having to click the thumbnail. Right now the photo holder is blank until the user clicks the first one. Any help is greatly appreciated. Steve a.gallery, a.gallery:visited { display:block; display:inline-block; color:#000; text-decoration:none; border:1px solid #000; width:75px; height:47px; float:left; margin:4px; } a.slidea {background:url(../img/index/tlc1.jpg);} a.slideb {background:url(../img/index/tlc2.jpg);} a.slidec {background:url(../img/index/tlc3.jpg);} a.slided {background:url(../img/index/lc4.jpg);} a.slidee {background:url(../img/index/lc5.jpg);} a.slidef {background:url(../img/index/lc6.jpg);} a.slideg {background:url(../img/index/lc7.jpg);} a.slideh {background:url(../img/index/lc8.jpg);} a.slidei {background:url(../img/index/lc9.jpg);} a.slidej {background:url(../img/index/lc10.jpg);} a.gallery em, a.gallery span {display:none;} a.gallery:hover {border:1px solid #fff;} a.slidea em {background:url(../img/index/lc1.gif) 5px 5px no-repeat;} a.slideb em {background:url(../img/index/lc2.gif) 5px 5px no-repeat;} a.slidec em {background:url(../img/index/lc3.jpg) 5px 5px no-repeat;} a.slided em {background:url(../img/index/lc4.jpg) 5px 5px no-repeat;} a.slidee em {background:url(../img/index/lc5.jpg) 5px 5px no-repeat;} a.slidef em {background:url(../img/index/lc6.jpg) 5px 5px no-repeat;} a.slideg em {background:url(../img/index/lc7.jpg) 5px 5px no-repeat;} a.slideh em {background:url(../img/index/lc8.jpg) 5px 5px no-repeat;} a.slidei em {background:url(../img/index/lc9.jpg) 5px 5px no-repeat;} a.slidej em {background:url(../img/index/lc10.jpg) 5px 5px no-repeat;} /* styling for gallery */ #container_right { float:left; width:100%; height:300px; position:relative; background-color:#839BAE; background-image: } #container_right img { border:0; } #container_right .thumbs { width:170px; position:absolute; right:32px; top:6px; } #container_right a.gallery:hover span { display:block; position:absolute; width:402px; height:50px; top:260px; left:-520px; padding:5px; font-style:italic; color:#fff; z-index:100; } #container_right a.gallery:hover span:first-line { font-style:normal; font-weight:bold; font-size:1.1em; color:#CCCCCC; } #container_right a.gallery:active, #container_right a.gallery:focus { border:1px solid #000; } #container_right a.gallery:active em, #container_right a.gallery:focus em { display:block; position:absolute; width:510px; height:275px; top:1px; left:-525px; padding:5px; color:#000; z-index:50; } Hi, I am currently learning CSS and javascript and I'm trying to make a simple photogallery box containing photo's(horizontally). Here is my code: Code:
<script language="JavaScript" src="person.js" type='text/javascript'></script>
<style type="text/css">
body {background-color:#900;}
.box {position:relative;
top:200px;
left:200px;
width:500px;
border:2px;
border-color:green;
background-color:blue;
overflow:hidden;
}
.photo{
margin-top:5%;
margin-left:10%;
margin-right:10%;
}
img{
width:100px;
height:100px;
}
</style>
</head>
<body>
<div class="box">
<div class="photo">
<img src="1.jpg" />
<img src="2.jpg" />
<img src="3.jpg" />
<img src="4.jpg" />
</div>
</div>
</body>
Here are my problems: below the box i am trying to get a little box with buttons to the left and right. In the box the photo's must go horizontally next to each other and if there is no spice it must dissapear at the side box so i can press the buttons left or right to get the photo's in the middle. But now the 3 photo's are horizontally and the next is on a new line instead of in going away at the side of the box. Can anyone give me some advice and tips please thnx! I have a problem with a site, first mistake i made was i built it to firefox, without testing along the way (please dont hurt me im new to web design) so i found a lot of problems in ie. So i fixed for ie7,8,9 but in 6 i get some two divs from the content area stacked one on the other at the top of the screen but when a link inside the problem div(s) is hovered they go to where they should be. any ideas about that? I'm working on the navigation the navigation for an image gallery I'm working on, but have run into some problems. It works fine in Firefox and Safari, but doesn't work in IE6, IE7, and Opera, and I can't for the life of me figure out why. The previous link and next link appears when they hover over the right and left side of the picture. I think it might be a problem with z-index, and the two link pictures getting stuck under the image in the image gallery, but I'm not sure. Any and all help is appreciated. This is the code for the gallery, minus the two navigation pictures and the image for the gallery. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Example</title>
<style type="text/css" media="screen">
#test {
margin:0;
padding:0;
position:relative;
top:0;
left:0;
width:800px;
height:640px;
background-color: #000;
}
#nav{
position:absolute;
left:0;
top:0;
z-index:999;
width:100%;
height:100%;
}
#Next,#Prev{
position:absolute;
display:block;
width:50%;
height:100%;
outline:none;
top:0;
}
#Next{right:0;}
#Prev{left:0}
#Next:hover{
background:transparent url(next.gif) no-repeat 100% 30%;
}
#Prev:hover{
background:transparent url(prev.gif) no-repeat 0% 30%;
}
#image{
display:block;
}
</style>
</head>
<body>
<div id="test">
<div id="nav">
<a href="#" id="Prev"></a>
<a href="#" id="Next"></a>
</div>
<img id="image" src="grass.jpg" alt="image" />
</div>
</body>
</html>
hi there, i am new to css and creating a gallery. What i want to do is create a medium size pop up when you rollover the thumbnail and have a full size image displayed when the thumbnail is clicked. I have to use lightbox javascript to display full size images, which works ok, but the problem has come trying to get both this and the roll over to work. At the moment i have both elements working, although it produces two thumbnail images. How can i use this code whilst making only one thumbnail appear? <a href="images/cramps/full size/c1.jpg" rel="lightbox" title="Here is the image caption"> <img src="images/cramps/thumbnails/ct1.jpg" border="0" /> </a> <a class="thumbnail" href="#thumb"> <img src="images/cramps/thumbnails/ct1.jpg" border="0" /> <span><img src="images/cramps/medium size/cm1.jpg" /><br /> </span></a> sorry if this is vague, i will answer any questions the best i can, all help appreciated! I have an image gallery. Code for the whole thing I've set below.The main image display window is set w/ a fixed position w/ this CSS code: Quote: #jgal li img { position: absolute; top: 20px; left: 220px; display: none; } I want to use it on dynamic php pages that have constantly changing content. I cannot w/ the fixed position. I need it to float correctly to the right of the thumb sidebar images. I've set it into my .tpl pages & it works well w/ no apparant css conflicts. But the main window is still fixed while the thumbs show wherever I place their code. Any ideas how I can float it all as a unit? Thanks, Gene PLEASE HELP ME I have an inline css tester that I built w/ help from W3Schools.com's CSS examples. > http://www.easysavannah.com/pmdinlinecsslinks.html Maybe this will help someone here. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Lightweight Image Gallery</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta http-equiv="imagetoolbar" content="false"> <meta name="description" content=""> <meta name="keywords" content=""> <style media="screen,projection" type="text/css"> /* general styling for this example */ * { margin: 0; padding: 0; } body { padding: 20px; } /* begin gallery styling */ #jgal { list-style: none; width: 200px; } #jgal li { opacity: .5; float: left; display: block; width: 60px; height: 60px; background-position: 50% 50%; cursor: pointer; border: 3px solid #fff; outline: 1px solid #ddd; margin-right: 14px; margin-bottom: 14px; } #jgal li img { position: absolute; top: 20px; left: 220px; display: none; } #jgal li.active img { display: block; } #jgal li.active, #jgal li:hover { outline-color: #bbb; opacity: .99 /* safari bug */ } /* styling without javascript */ #gallery { list-style: none; display: block; } #gallery li { float: left; margin: 0 10px 10px 0; } </style> <!--[if lt IE 8]> <style media="screen,projection" type="text/css"> #jgal li { filter: alpha(opacity=50); } #jgal li.active, #jgal li:hover { filter: alpha(opacity=100); } </style> <![endif]--> <script type="text/javascript">document.write("<style type='text/css'> #gallery { display: none; } </style>");</script> <!--[if lt IE 6]><style media="screen,projection" type="text/css">#gallery { display: block; }</style><![endif]--> <script type="text/javascript"> var gal = { init : function() { if (!document.getElementById || !document.createElement || !document.appendChild) return false; if (document.getElementById('gallery')) document.getElementById('gallery').id = 'jgal'; var li = document.getElementById('jgal').getElementsByTagName('li'); li[0].className = 'active'; for (i=0; i<li.length; i++) { li[i].style.backgroundImage = 'url(' + li[i].getElementsByTagName('img')[0].src + ')'; li[i].style.backgroundRepeat = 'no-repeat'; li[i].title = li[i].getElementsByTagName('img')[0].alt; gal.addEvent(li[i],'click',function() { var im = document.getElementById('jgal').getElementsByTagName('li'); for (j=0; j<im.length; j++) { im[j].className = ''; } this.className = 'active'; }); } }, addEvent : function(obj, type, fn) { if (obj.addEventListener) { obj.addEventListener(type, fn, false); } else if (obj.attachEvent) { obj["e"+type+fn] = fn; obj[type+fn] = function() { obj["e"+type+fn]( window.event ); } obj.attachEvent("on"+type, obj[type+fn]); } } } gal.addEvent(window,'load', function() { gal.init(); }); </script> </head> <body> <ul id="gallery"> <li><img src="http://monc.se/kitchen/stew/gallery/images/je_1.jpg" alt="Josef & Erika 1"></li> <li><img src="http://monc.se/kitchen/stew/gallery/images/roland_ads_2.jpg" alt="Roland Ads"></li> <li><img src="http://monc.se/kitchen/stew/gallery/images/cd_2.jpg" alt="CD Cover 2"></li> <li><img src="http://monc.se/kitchen/stew/gallery/images/cd_1.jpg" alt="CD Cover 1"></li> <li><img src="http://monc.se/kitchen/stew/gallery/images/je_3.jpg" alt="Josef & Erika 3"></li> <li><img src="http://monc.se/kitchen/stew/gallery/images/je_2.jpg" alt="Josef & Erika 2"></li> <li><img src="http://monc.se/kitchen/stew/gallery/images/lktrd_poster1.jpg" alt="LKTRD Poster"></li> <li><img src="http://monc.se/kitchen/stew/gallery/images/je_4.jpg" alt="Josef & Erika 4"></li> <li><img src="http://monc.se/kitchen/stew/gallery/images/inside_1.jpg" alt="Inside Magazine"></li> <li><img src="http://monc.se/kitchen/stew/gallery/images/oceanen_4.jpg" alt="Oceanen"></li> </ul> <p style="clear: both; padding-top: 2em;">Link back to article: <a href="/kitchen/80/lightweight-image-gallery-with-thumbnails">Lightweight Image Gallery with Thumbnails</a>.</p> </body> </html>
I am using an image in the FOREground as a border and I can't get the DIV boxes to drop behind the image. Here's the CSS Code: body {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
font-family: verdana, arial, helvetica, sans-serif;
color: #000000;
background-color: #FFFFFF;
}
#maincontainer {
position:absolute;
top:0px;
left:0px;
z-index:200;
color:#f00;
background:transparent;
}
#header {
position:absolute;
top:22px;
left:22px;
color:#000;
border:1px
solid #000;
padding-top:5px;
padding-left:5px;
padding-right:5px;
width:745px;
height:73px;
background:#FFFFCC;
overflow: hidden;
}
#leftcontent {
}
#rightcontent {
}
#centercontent {
Here's the HTML Code: <html> <head> <link rel="stylesheet" type="text/css" href="newstyles.css" > </head> <body> <div id="maincontainer"> <img src="mainborder.gif" height="600" width="800" alt=""></img> <div id="header"> eat at joes </div> <div id="leftcontent"> eat at joes </div> <div id="rightcontent"> eat at joes </div> <div id="centercontent"> eat at joes </div> </div> </body> <html> I'm desperate for help. In the below code the select lists cover the menu items when the user hovers over the menu. The text fields seem to be fine.Why is this happening. Please help. Tracy Code: <STYLE>
#mainContainer{
width:700px;
margin:0 auto;
text-align:left;
background-color: #FFFFFF;
padding-left:0px;
padding-right:0px;
padding-bottom:15px;
}
#dhtmlgoodies_menu img{
border:0px;
}
/* End general styles for this example page */
/* General configuration CSS */
#dhtmlgoodies_menu ul li ul{
display:none; /* Needed to display ok in Opera */
}
#dhtmlgoodies_menu{
visibility:hidden;
}
#dhtmlgoodies_menu ul{
margin:0px; /* No indent */
padding:0px; /* No indent */
}
#dhtmlgoodies_menu li{
list-style-type:none; /* No bullets */
}
#dhtmlgoodies_menu a{
z-index:100;
margin:0px;
padding:0px;
}
/* End general configuration CSS */
/* Cosmetic */
/***********************************************************************
CSS - MENU BLOCKS
General rules for all menu blocks (group of sub items)
***********************************************************************/
#dhtmlgoodies_menu ul{
border:1px solid #000;
background-color:#FFF;
padding:1px;
}
#dhtmlgoodies_menu ul.menuBlock1{ /* Menu bar - main menu items */
border:0px;
padding:1px;
border:0px solid #606060;
background-color:#FFFFFF;
overflow:visible;
}
#dhtmlgoodies_menu ul.menuBlock2{ /* Menu bar - main menu items */
border:0px;
padding:1px;
border:1px solid #555;
}
/***********************************************************************
CSS - MENU ITEMS
Here, you could assign rules to the menu items at different depths.
***********************************************************************/
/* General rules for all menu items */
#dhtmlgoodies_menu a{
color: #000;
text-decoration:none;
padding-left:2px;
padding-right:2px;
z-index:100;
}
/*
Main menu items
*/
#dhtmlgoodies_menu .currentDepth1{
padding-left:5px;
padding-right:5px;
border:0px solid #FFFFFF;
}
#dhtmlgoodies_menu .currentDepth1over{
padding-left:5px;
padding-right:5px;
background-color:#FFFFFF;
border:0px solid #000;
}
#dhtmlgoodies_menu .currentDepth1 a{
font-weight:bold;
}
#dhtmlgoodies_menu .currentDepth1over a{ /* Text rules */
color:BLACK;
font-weight:bold;
}
/* Sub menu depth 1 */
#dhtmlgoodies_menu .currentDepth2{
padding-right:2px;
border:1px solid #FFF;
}
#dhtmlgoodies_menu .currentDepth2over{
padding-right:2px;
background-color:#E2EBED;
border:1px solid #000;
}
#dhtmlgoodies_menu .currentDepth2over a{ /* Text rules */
color:#000;
}
/* Sub menu depth 2 */
#dhtmlgoodies_menu .currentDepth3{
padding-right:2px;
border:1px solid #FFF;
}
#dhtmlgoodies_menu .currentDepth3over{
padding-right:2px;
background-color:#EDE3EB;
border:1px solid #000;
}
/* Sub menu depth 3 */
#dhtmlgoodies_menu .currentDepth4{
padding-right:2px;
border:1px solid #FFF;
}
#dhtmlgoodies_menu .currentDepth4over{
padding-right:2px;
background-color:#EBEDE3;
border:1px solid #000;
}
</STYLE>
<SCRIPT>
var dhtmlgoodies_menuObj; // Reference to the menu div
var currentZIndex = 1000;
var liIndex = 0;
var visibleMenus = new Array();
var activeMenuItem = false;
var timeBeforeAutoHide = 1200; // Microseconds from mouse leaves menu to auto hide.
var dhtmlgoodies_menu_arrow = 'images/arrow.gif';
var MSIE = navigator.userAgent.indexOf('MSIE')>=0?true:false;
var navigatorVersion = navigator.appVersion.replace(/.*?MSIE ([0-9]\.[0-9]).*/g,'$1')/1;
var menuBlockArray = new Array();
var menuParentOffsetLeft = false;
function getTopPos(inputObj)
{
var returnValue = inputObj.offsetTop;
if(inputObj.tagName=='LI' && inputObj.parentNode.className=='menuBlock1'){
var aTag = inputObj.getElementsByTagName('A')[0];
if(aTag)returnValue += aTag.parentNode.offsetHeight;
}
while((inputObj = inputObj.offsetParent) != null)returnValue += inputObj.offsetTop;
return returnValue;
}
function getLeftPos(inputObj)
{
var returnValue = inputObj.offsetLeft;
while((inputObj = inputObj.offsetParent) != null)returnValue += inputObj.offsetLeft;
return returnValue;
}
function showHideSub()
{
var attr = this.parentNode.getAttribute('currentDepth');
if(navigator.userAgent.indexOf('Opera')>=0){
attr = this.parentNode.currentDepth;
}
this.className = 'currentDepth' + attr + 'over';
if(activeMenuItem && activeMenuItem!=this){
activeMenuItem.className=activeMenuItem.className.replace(/over/,'');
}
activeMenuItem = this;
var numericIdThis = this.id.replace(/[^0-9]/g,'');
var exceptionArray = new Array();
// Showing sub item of this LI
var sub = document.getElementById('subOf' + numericIdThis);
if(sub){
visibleMenus.push(sub);
sub.style.display='';
sub.parentNode.className = sub.parentNode.className + 'over';
exceptionArray[sub.id] = true;
}
// Showing parent items of this one
var parent = this.parentNode;
while(parent && parent.id && parent.tagName=='UL'){
visibleMenus.push(parent);
exceptionArray[parent.id] = true;
parent.style.display='';
var li = document.getElementById('dhtmlgoodies_listItem' + parent.id.replace(/[^0-9]/g,''));
if(li.className.indexOf('over')<0)li.className = li.className + 'over';
parent = li.parentNode;
}
hideMenuItems(exceptionArray);
}
function hideMenuItems(exceptionArray)
{
/*
Hiding visible menu items
*/
var newVisibleMenuArray = new Array();
for(var no=0;no<visibleMenus.length;no++){
if(visibleMenus[no].className!='menuBlock1' && visibleMenus[no].id){
if(!exceptionArray[visibleMenus[no].id]){
var el = visibleMenus[no].getElementsByTagName('A')[0];
visibleMenus[no].style.display = 'none';
var li = document.getElementById('dhtmlgoodies_listItem' + visibleMenus[no].id.replace(/[^0-9]/g,''));
if(li.className.indexOf('over')>0)li.className = li.className.replace(/over/,'');
}else{
newVisibleMenuArray.push(visibleMenus[no]);
}
}
}
visibleMenus = newVisibleMenuArray;
}
var menuActive = true;
var hideTimer = 0;
function mouseOverMenu()
{
menuActive = true;
}
function mouseOutMenu()
{
menuActive = false;
timerAutoHide();
}
function timerAutoHide()
{
if(menuActive){
hideTimer = 0;
return;
}
if(hideTimer<timeBeforeAutoHide){
hideTimer+=100;
setTimeout('timerAutoHide()',99);
}else{
hideTimer = 0;
autohideMenuItems();
}
}
function autohideMenuItems()
{
if(!menuActive){
hideMenuItems(new Array());
if(activeMenuItem)activeMenuItem.className=activeMenuItem.className.replace(/over/,'');
}
}
function initSubMenus(inputObj,initOffsetLeft,currentDepth)
{
var subUl = inputObj.getElementsByTagName('UL');
if(subUl.length>0){
var ul = subUl[0];
ul.id = 'subOf' + inputObj.id.replace(/[^0-9]/g,'');
ul.setAttribute('currentDepth' ,currentDepth);
ul.currentDepth = currentDepth;
ul.className='menuBlock' + currentDepth;
ul.onmouseover = mouseOverMenu;
ul.onmouseout = mouseOutMenu;
currentZIndex+=1;
ul.style.zIndex = currentZIndex;
menuBlockArray.push(ul);
var topPos = getTopPos(inputObj);
var leftPos = getLeftPos(inputObj)/1 + initOffsetLeft/1;
ul = dhtmlgoodies_menuObj.appendChild(ul);
ul.style.position = 'absolute';
ul.style.left = leftPos + 'px';
ul.style.top = topPos + 'px';
var li = ul.getElementsByTagName('LI')[0];
while(li){
if(li.tagName=='LI'){
li.className='currentDepth' + currentDepth;
li.id = 'dhtmlgoodies_listItem' + liIndex;
liIndex++;
var uls = li.getElementsByTagName('UL');
li.onmouseover = showHideSub;
if(uls.length>0){
var offsetToFunction = li.getElementsByTagName('A')[0].offsetWidth+2;
if(navigatorVersion<6 && MSIE)offsetToFunction+=15; // MSIE 5.x fix
initSubMenus(li,offsetToFunction,(currentDepth+1));
}
if(MSIE){
var a = li.getElementsByTagName('A')[0];
a.style.width=li.offsetWidth+'px';
a.style.display='block';
}
}
li = li.nextSibling;
}
ul.style.display = 'none';
if(!document.all){
//dhtmlgoodies_menuObj.appendChild(ul);
}
}
}
function resizeMenu()
{
var offsetParent = getLeftPos(dhtmlgoodies_menuObj);
for(var no=0;no<menuBlockArray.length;no++){
var leftPos = menuBlockArray[no].style.left.replace('px','')/1;
menuBlockArray[no].style.left = leftPos + offsetParent - menuParentOffsetLeft + 'px';
}
menuParentOffsetLeft = offsetParent;
}
/*
Initializing menu
*/
function initDhtmlGoodiesMenu()
{
dhtmlgoodies_menuObj = document.getElementById('dhtmlgoodies_menu');
var aTags = dhtmlgoodies_menuObj.getElementsByTagName('A');
for(var no=0;no<aTags.length;no++){
var subUl = aTags[no].parentNode.getElementsByTagName('UL');
if(subUl.length>0 && aTags[no].parentNode.parentNode.parentNode.id != 'dhtmlgoodies_menu'){
var img = document.createElement('IMG');
img.src = dhtmlgoodies_menu_arrow;
aTags[no].appendChild(img);
}
}
var mainMenu = dhtmlgoodies_menuObj.getElementsByTagName('UL')[0];
mainMenu.className='menuBlock1';
mainMenu.style.zIndex = currentZIndex;
mainMenu.setAttribute('currentDepth' ,1);
mainMenu.currentDepth = '1';
mainMenu.onmouseover = mouseOverMenu;
mainMenu.onmouseout = mouseOutMenu;
var mainMenuItemsArray = new Array();
var mainMenuItem = mainMenu.getElementsByTagName('LI')[0];
mainMenu.style.height = mainMenuItem.offsetHeight + 2 + 'px';
while(mainMenuItem){
mainMenuItem.className='currentDepth1';
mainMenuItem.id = 'dhtmlgoodies_listItem' + liIndex;
mainMenuItem.onmouseover = showHideSub;
liIndex++;
if(mainMenuItem.tagName=='LI'){
mainMenuItem.style.cssText = 'float:left;';
mainMenuItem.style.styleFloat = 'left';
mainMenuItemsArray[mainMenuItemsArray.length] = mainMenuItem;
initSubMenus(mainMenuItem,0,2);
}
mainMenuItem = mainMenuItem.nextSibling;
}
for(var no=0;no<mainMenuItemsArray.length;no++){
initSubMenus(mainMenuItemsArray[no],0,2);
}
menuParentOffsetLeft = getLeftPos(dhtmlgoodies_menuObj);
window.onresize = resizeMenu;
dhtmlgoodies_menuObj.style.visibility = 'visible';
}
window.onload = initDhtmlGoodiesMenu;
</SCRIPT>
<div class="noPrint">
<div id="mainContainer">
<div id="dhtmlgoodies_menu">
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="functions.php">Functions</a>
<ul>
<li><a href="#">Repair Parts</a>
<ul>
<li><a href="#">Create Ticket</a></li>
<li><a href="#">Sub Function</a></li>
<li><a href="#">Sub Function</a></li>
<li><a href="#">Sub Function</a></li>
</ul>
</li>
<li><a href="#">Cars</a>
<ul>
<li><a href="#">Check In</a></li>
<li><a href="#">Sub Function</a></li>
<li><a href="#">Sub Function</a></li>
<li><a href="#">Sub Function</a></li>
</ul>
</li>
<li><a href="#">Sub Function</a>
<ul>
<li><a href="#">Sub Function</a></li>
<li><a href="#">Sub Function</a></li>
<li><a href="#">Sub Function</a></li>
<li><a href="#">Sub Function</a></li>
</ul>
</li>
<li><a href="#">Sub Function</a></li>
<li><a href="#">Sub Function</a></li>
<li><a href="#">Sub Function</a></li>
</ul>
</li>
<li><a href="#">Reports</a>
<ul> <li><a href="#">Sub Function</a></li>
<li><a href="#">Sub Function</a></li>
<li><a href="#">Sub Function</a></li>
<li><a href="#">Trucks</a>
<ul>
<li><a href="#">Year 2007</a>
<ul>
<li><a href="#">Approved</a></li>
<li><a href="#">Pending</a></li>
<li><a href="#">Declined</a></li>
</ul>
</li>
<li><a href="#">Year 2008</a>
<ul>
<li><a href="#">Approved</a></li>
<li><a href="#">Pending</a></li>
<li><a href="#">Declined</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Administration</a>
<ul>
<li><a href="#">Sub Function</a></li>
<li><a href="#">Sub Function</a></li>
<li><a href="#">Sub Function</a></li>
<li><a href="#">Sub Function</a></li>
</ul>
</li>
<li><a href="#" onclick="allPrint()";>Print</a></li>
<li><a href="/logout.php">Exit</a></li>
</ul>
</div>
</div>
</div>
<form method="POST" action="--WEBBOT-SELF--">
<input type="text" name="T1" size="20" value="THIS IS A TEST"><select size="1" name="D2">
<option>this is a test</option>
</select><select size="1" name="D3">
<option>THIS IS A TEST</option>
</select></p>
<p> </p>
<p><input type="reset" value="Reset" name="B2"><input type="submit" value="Submit" name="B1"></p>
</form>
Heya people, i got this z-index problem thats driving me nuts! Am hopeing someone can help I first got this working in IE7, then the client came back say wtf beacuse hes running IE6 ... I have a basic html page that has a drop down Nav (positioned absolutly, which drops down over the content area...) i have used the; <!--[if IE]> <link rel="stylesheet" type="text/css" href="css/IE7.css" /> <![endif]--> Fix to fix the problems between IE7 and Firefox... The z-index of the drop down is 20... and the z-index of the content is 10 (for firefox...) For the IE7 Style sheet linked, the dropdown z-index is 20 and the content z-index is -1 ... (this seems to be the only way IE7 will register the conent area to actualy be under the dropdown nav, but this will cause the content area to not show in firefox, hence the ifIE statement.) It seems though that IE6 is reacting to the (i know illegal character) z-index:-1; and not displaying the content. Is there a way i can filter a css sheet so it is only read by IE6, still having IE7 reading the IE7.css ? I know this is probably a terrible way of doing it also... any suggestions on a better way please shoot! Thanks heaps for taking the time to read my "way to long post" Cheers ubila Hi, I'm currently having this problem. What i want is i want the box 3 to overlay on top of box 1 and box 2. The real challenge is i cannot touch the css nor add for box 1 and box 2. Also, I can not modify any html code outside of the box 3 block. In other words, i can only add mark up within the box 3 div tag. I've exhausted my options in solving this but can not find a solution. Can anyone share some light? Thank in advanced Here is the code: Code:
<!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>
</head>
<body>
<style type="text/css">
/** Preset Start **/
#box1{width:200px;height:200px;background-color:#0f0;position:relative;z-index:1}
#box2{width:200px;height:200px;background-color:#f0f;position:relative;z-index:2}
/** Preset End **/
#box3{width:100px;height:200px;background-color:#000;position:absolute;z-index:10;top:30px;}
</style>
<div id="box1">
<div id="box3"></div>
</div>
<div id="box2"></div>
</body>
</html>
i really need some help!!! i can work out how to solve this problem. I know z-index only works with absolute positioned elements. however i need it to work a relative element. so i decided to make that element absolute and then put it inside a relative <div> wrapper. problem that came about: 1, the z-index still doesnt work. that element doesnt show up over lower values of z-index which are on the page. these other elements are not in the div wrapper. 2, the div wrapper does not wrap around an absolute position element. it just shrinks down. any help>> Hi there, For some reason, my z-index is not working properly in IE. I want a layer to appear above the rest. It works fine in FF, but not IE. This is my code: Code: width:200px; position: absolute; left: 750px; top: 50px; z-index: 1000; background-color: #ffffff; border: 3px solid #f6f6f6; font-family: verdana; Arial, Helvetica, sans-serif; font-size: 12px; color: #ffffff; padding: 10px 10px 10px 15px; line-height: 20px; I seem to be having problems with a drop-down menu being overlayed with a flash movie in IE 7. Now I understand there's a z-index bug with IE7 and a position attribute needs to added to the relevant container element. eg. position: relative; But even though I do this I still seem to get the same problem in IE7. Are there any suggestions? For some reason, a layer that is marked z-index:0 is coming up above a layer I have marked z-index:100. The problem is only occurring in IE (works fine in Firefox, etc.). I've dumbed the code down to get to the bare bones of it. The sample is he http://www.davidaskitchenandtiles.com/test.php You can see the code via view source or below. Note that the text "Z-index 0 (or not defined)" is on the z-index:0 layer, so it should be under the white layer, which is z-index:100. This is the case in Firefox, but the text runs over it in IE. Thanks so much if you can let me know why this is. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <body> <table cellpadding="0" cellspacing="0" border="0" width="300"> <tr> <td width="300" height="200" bgcolor="blue"> <div style="position:relative"> <div style="position:absolute; background-color:#ffffff; top:50px; left:15px; width:200px; height:300px; display:block; z-index:100;border:2px solid green; overflow:hidden"> z-index 100 </div> </div> </td> </tr> <tr> <td width="300" height="200" bgcolor="red"> <div style="position:relative; z-index:0"> Z-index 0<br>(or not defined) </div> </td> </tr> </table> </body> </html> basically I'd like to build a four layer div element, the layer order by z-index should be interface layer, number presentation layer, background border layer and background layer here is my html code PHP Code: <style> .bg{background:url(images/bg.gif) no-repeat 0 0;} .borderLayer{background:url(images/border.gif) no-repeat 0 0;} .interfaceLayer a{display:block;height:50px;width:50px;padding:4px 0 0 0;cursor:pointer} .interfaceLayer a:hover{background:url(images/broder1.gif) no-repeat 0 0;} </style> <table> <tr> <td style="padding:10px;"> <div style="z-index:9999;position:relative;"> <div class="interfaceLayer" style="top:-2px;left:-2px;position:absolute;"><a><img width="50px" height="50px" src="images/pixel.gif"/></a></div> </div> <div style="z-index:99;position:relative;"> <div class="numLayer" style="left:28px;top:33px;position:absolute;z-index:100;"><span style="color:white;">100</span></div> </div> <div style="z-index:50;position:relative;"> <div class="borderLayer" style="top:-2px;left:-2px;position:absolute;width:56px;height:54px;"/> </div> <div style="position:relative;"> <div class="bg" style="width:43px;height:45px"/> </div> </td> </tr> </table> also js action will taken when interface Layer get onclick event which reset border layer and background image the code problem is when onclick action taken the z-index it seems doesn't follow, my numberLayer get screw by my broder layer image. more to mention the initial z-index appear to be in the right order I'm experimenting with some pure CSS menus and I'm trying to use an icon with them. see http://www.fogcat.co.uk/css/test.html css is http://www.fogcat.co.uk/css/test3.css But the icons are appearing behind other menu items - even though I have the z-index set to 100. What am I not doing? It works fine in Firefox but not IE6. The HTML is Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<LINK REL="stylesheet" TYPE="text/css" HREF="./test3.css" TITLE="bw">
</head>
<body>
<div id="container">
<p>just some text</p>
<div id="menudiv">
<ul>
<li><a href="#" title="Link1"><img src="item.gif" >Home <span class="line1"></span></a></li>
<li><a href="#" title="Link2"><img src="item2.gif">Menu Two <span class="line2"></span></a></li>
<li><a href="#" title="Link3"><img src="item.gif" >Menu Three<span class="line3"></span></a></li>
<li><a href="#" title="Link4"><img src="item2.gif">Menu Four <span class="line4"></span></a></li>
<li><a href="#" title="Link5"><img src="item.gif" >Menu Five <span class="line5"></span></a></li>
<li><a href="#" title="Link6"><img src="item2.gif">Menu Six <span class="line6"></span></a></li>
<li><a href="#" title="Link7"><img src="item.gif" >Menu Seven<span class="line7"></span></a></li>
<li><a href="#" title="Link8"><img src="item2.gif">Menu Eight<span class="line8"></span></a></li>
<li><a href="#" title="Link9"><img src="item.gif" >Menu Nine <span class="line9"></span></a></li>
</ul>
</div>
</div>
</body>
</html>
the CSS is Code: BODY
{
background-color: #F0F0F0;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #000000;
}
#container
{
border: 1px solid green;
padding: 20px;
background-color: #FFFFFF;
top: 20px;
left: 20px;
}
#menudiv {
width: 240px;
}
#menudiv ul
{
margin: 0;
padding: 0; /*removes indent IE and Opera*/
list-style-type: none; /*removes indent Mozilla and NN7*/
font-family: Arial, Helvetica, sans-serif; /*turns off display of bullet*/
font-size: 14px;
}
#menudiv li
{
margin: 0px 0px 15px 0px;
background-color: White;
text-align: center;
}
div#menudiv li a
{
display: block;
position: relative;
text-decoration: none;
padding: 5px 0px 5px 0px;
width: 100%;
background-color: #DDDDDD;
color: Black;
}
#menudiv li a:hover
{
background-color: #6B6B6B;
color: White;
}
div#menudiv li a span
{
display:block;
position: relative;
margin: 0px;
padding: 0px;
border-bottom: 3px solid silver;
/* position shouild be border width + gap + padding in <a>*/
top: 9px;
}
div#menudiv li a img
{
position: absolute;
left: 0;
top: 0;
padding: 0;
margin: 0;
border-width: 0;
width: 0;
height: 0;
z-index: 100;
}
div#menudiv li a:hover img
{
width: 60px;
height: 60px;
top: -10px;
left: -12px;
}
div#menudiv li a:hover span.line1 {border-bottom-color:red;}
div#menudiv li a:hover span.line2 {border-bottom-color:orange}
div#menudiv li a:hover span.line3 {border-bottom-color:yellow}
div#menudiv li a:hover span.line4 {border-bottom-color:green}
div#menudiv li a:hover span.line5 {border-bottom-color:blue}
div#menudiv li a:hover span.line6 {border-bottom-color:magenta}
div#menudiv li a:hover span.line7 {border-bottom-color:teal}
div#menudiv li a:hover span.line8 {border-bottom-color:darkgreen}
div#menudiv li a:hover span.line9 {border-bottom-color:cyan}
Hi guys, Maybe some of you could shed some light on this little problem. I'm currently working on a site redesign, the page in question can be found HERE. When hovering over the ZOOM button in Opera the mouseover image is partially hidden, and in one particular case (2nd ZOOM button down) after rolling off the image the mouseover image partially remains. Works fine in Firefox and Safari (been unable to test in IE yet) I'm guessing the problem comes down to z-index but my understanding of it is pretty poor. Any insight would be much appreciated (yes the coding's messy... it's a work in progress ) Thanks! |
|||||||