transparent image shows a shaded boxes within divs

No replies

Fri, 2009-08-07 15:56

smyl13

Offline

newbie

Last seen: 12 years 15 weeks ago

Timezone: GMT-4

Joined: 2009-08-07

Posts: 2

Points: 2

To show the images hierarchically, I tried to cheat the code by using transparent images so that I show the parent child relationship.

I have attached a screen shot of the page that I am having an issue. The page has photo images in hierarchy and when user moves the mouse over the image it glows (opacity changes). To show proper branches I used the transparent photo image to fill the blanks. But unfortunately it is appearing as black shaded boxes. Can someone suggest me how to get rid of those? I tried changing the stylesheet classes but nothing worked. This template is a free template so Ii am not sure how they have made the css. moreover i am new to css.

html 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">
<head>
<title>Free Flash Templates</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<link href="style.css" rel="stylesheet" type="text/css" />
<link href="js/galleria.css" rel="stylesheet" type="text/css" />
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery_002.js"></script>
<script type="text/javascript">
jQuery(function(<img src="https://csscreator.com/sites/all/modules/smileys/packs/Roving/cash.png" title="Cash" alt="Cash" class="smiley-content" /> {
 
		$('.gallery_demo_unstyled').addClass('gallery_demo');
 
		$('ul.gallery_demo').galleria({
			history   : true, 
			clickNext : true, 
			insert    : '#main_image', 
			onImage   : function(image,caption,thumb) { 
 
 
				if(! ($.browser.mozilla && navigator.appVersion.indexOf("Win")!=-1) ) { 
					image.css('display','none').fadeIn(1000);
				}
				caption.css('display','none').fadeIn(1000);
 
				var _li = thumb.parents('li');
 
				_li.siblings().children('img.selected').fadeTo(500,0.3);
 
				thumb.fadeTo('fast',1).addClass('selected');
 
				image.attr('title','Next image >>');
			},
			onThumb : function(thumb) { 
 
				var _li = thumb.parents('li');
 
				var _fadeTo = _li.is('.active') ? '1' : '0.3';
 
				thumb.css({display:'none',opacity:_fadeTo}).fadeIn(1500);
 
				thumb.hover(
					function() { thumb.fadeTo('fast',1); },
					function() { _li.not('.active').children('img').fadeTo('fast',0.3); }				)
			}
		});
	});
 
	</script>
</head>
<body>
<div id="site">
<div id="subpageheader">
<h1 id="sitename"><span><img src="images/logo.gif" width="185" height="36" border="1" /></span></h1>
</div>
 
<div id="menu">
<ul>
  <li><a href="index.html">HOME</a></li>
  <li><a href="index-roots.html" class="active">ROOTS</a></li>
  <li><a href="index-friends.html">FRIENDS</a></li>
  <li><a href="index-travelogy.html">TRAVELOGY</a></li>
  <li><a href="contact.html">CONTACT</a></li>
</ul>
</div>
 
<div id="content">
<h3 id="welcome">Family!</h3><p>
	<div id="rootleftpan">
    	<div id="content_img4">
			<ul class="gallery_demo_unstyled gallery_roots galleria">
    			<li class=""><img rel="img-roots/nophoto.gif" class="thumb selected" style="width: 91px; height: 80px; margin-left: 0px; opacity: 0.3;" src="js/nophoto.gif" alt="Amma"></li>
                <li class=""><img rel="img-roots/nophoto.gif" class="thumb selected" style="width: 91px; height: 80px; margin-left: 0px; opacity: 0.3;" src="js/nophoto.gif" alt="Nana"></li>
            </ul>
        </div>
        <div id="content_img4">
			<ul class="gallery_demo_unstyled gallery_roots galleria">
    			<li class=""><img rel="img-roots/nophoto.gif" class="thumb selected" style="width: 91px; height: 80px; margin-left: 0px; opacity: 0.3;" src="js/nophoto.gif" alt="Amma"></li>
                <li class=""><img rel="img-roots/nophoto.gif" class="thumb selected" style="width: 91px; height: 80px; margin-left: 0px; opacity: 0.3;" src="js/nophoto.gif" alt="Nana"></li>
                <li class=""><img rel="img-roots/nophoto.gif" class="thumb selected" style="width: 91px; height: 80px; margin-left: 0px; opacity: 0.3;" src="js/nophoto.gif" alt="Nana"></li>
            </ul>
        </div>
        <div id="content_img4">
			<ul class="gallery_demo_unstyled gallery_roots galleria">
    			<li class=""><img rel="img-roots/clear.gif" class="thumb selected" style="width: 91px; height: 80px; margin-left: 0px; opacity: 0.3;" src="js/clear.gif" alt="Amma"></li>
                <li class=""><img rel="img-roots/nophoto.gif" class="thumb selected" style="width: 91px; height: 80px; margin-left: 0px; opacity: 0.3;" src="js/nophoto.gif" alt="Nana"></li>
                <li class=""><img rel="img-roots/clear.gif" class="thumb selected" style="width: 91px; height: 80px; margin-left: 0px; opacity: 0.3;" src="js/clear.gif" alt="Amma"></li>
            </ul>
        </div>
	</div>
<br />
</p>
</div>
  <div id="footer">
  <p class="class1">Copyright © 2008.
  </p>
  </div>
</div>
</body>
</html>

stylesheet.css

*{margin:0;padding:0}
body{ 
	background:#484439;
	margin:auto;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#000000;
}
img{
	border:none;
}
a{
	color: #174f7b;
	font-size:12px;
 
}
a:hover{
	color: #000000;
	text-decoration:none;
}
br{
	clear:both;
}	
 
#site{
	width:900px;
	margin:auto;
}
 
#header{
	background: url(images/header.jpg) no-repeat;
	height: 453px;
	width: 900px;
}
 
#subpageheader{
	background: url(images/subpageheader.jpg) no-repeat;
	height: 226px;
	width: 900px;
}
 
#sitename {
	padding-top: 50px;
	padding-left: 560px;
}
 
#sitename span {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 36px;
	color: #322d21;
	text-decoration: none;
	padding-left: 5px;
}
 
#sitename a {
	display: block;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #322d21;
	text-decoration: none;
	padding-left:7px;
}
 
#sitename a:visited,active {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #322d21;
	text-decoration: none;
}
 
#sitename a:hover {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #322d21;
	text-decoration: underline;
}
 
#menu{
	height: 45px;
	background: #7e7564;
}
 
#menu ul{
	display:block;
	margin: 0px;
	padding-top: 9px;
	height:45px;
}
 
#menu ul li{
	display:inline;
}
 
#menu ul li a{
	font-family:Arial, Helvetica, sans-serif;
	font-size: 24px;
	color: #ffffff;
	font-weight:normal;
	text-decoration:none;
	padding-left: 12px;
	padding-right:12px;
	padding-top: 9px;
	padding-bottom: 9px;
}
 
.active {
	background: #FF4F4F;
}
 
#menu ul li a:hover{
	background: #322d21;
}
 
#content{
	width: 654px;
	margin:auto;
}
 
#welcome{
	font-family:Arial, Helvetica, sans-serif;
	font-size:18px;
	font-weight:bold;
	color: #cfe30f;
}
 
#content p{
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	color: #c0bbad;
	font-weight:normal;
}
 
#content span{
	color:#fc0e00;
}
 
#rootleftpan{
	width:320px; 
	padding-top: 7px;
	padding-bottom: 17px;
	height:auto;
	float:left;
	margin:auto; 
	border:1px solid blue;
}
 
#rootrightpan{
	width:320px; 
	padding-top: 7px;
	padding-bottom: 17px;
	height:auto;
	float:right;
	margin:auto; 
	border:1px solid green;
}
 
#nextpage {
	color: yellow;
	text-decoration:none;
	font-family: Arial, Helvetica, sans-serif;
}
 
#footer{
	background: #7e7564;
	text-align:center;
	padding-top: 19px;
	padding-bottom: 29px;
}
 
p{
	color: #484439;
	font-family: Arial, Helvetica, sans-serif;
}
 
#footer a{
	color: #484439;
	text-decoration:underline;
	font-family: Arial, Helvetica, sans-serif;
}
 
.class1{
	font-size:12px;
}
 
.class2{
	font-size:10px;
}
 
#footer a:hover{
	color:#635d4f;
	text-decoration:underline;
	font-family: Arial, Helvetica, sans-serif;
}
#content_img{
	padding-top: 17px;
	padding-bottom:17px;
	width: 900px;
	background: url(images/bg.jpg) repeat-x top;
	text-align:center;
}
#content_img h1,h2{font:bold 80% 'helvetica neue',sans-serif;letter-spacing:3px;text-transform:uppercase;}
#content_img a{color:#348;text-decoration:none;outline:none;}
#content_img a:hover{color:#67a;}
.caption{font-style:italic;color:#887;}
.demo{position:relative;margin-top:2em;}
.gallery_demo{width:702px;margin:0 auto;}
.gallery_demo li{width:98px;height:66px;margin: 0px;background:#000;}
.gallery_demo li div{left:240px}
.gallery_demo li div .caption{font:italic 0.7em/1.4 georgia,serif;}
 
.gallery_roots{width:315px;margin:0 auto;}
.gallery_roots li{width:60px;height:60px;margin: 0px;background:#000;}
 
#content_img2{
	padding-top: 2px;
	padding-bottom:2px;
	width: 900px;
	height:auto;
	text-align:center;
	border:1px solid red;
}
#content_img2 h1,h2{font:bold 80% 'helvetica neue',sans-serif;letter-spacing:3px;text-transform:uppercase;}
#content_img2 a{color:#348;text-decoration:none;outline:none;}
#content_img2 a:hover{color:#67a;}
 
#content_img3{
	padding-top: 4px;
	padding-bottom:4px;
	width: 900px;
	height: 65px;
	text-align:center;
	border:0px solid red;
}
#content_img4{
	padding-top: 4px;
	padding-bottom:4px;
	width: 315px;
	text-align:left;
	overflow:auto;
	border:1px solid red;
}
 
#main_image{margin:0 auto 60px auto;height:438px;width:700px;background:black;}
#main_image img{margin-bottom:10px;}
 
.info{text-align:left;width:700px;margin:30px auto;border-top:1px dotted #221;padding-top:30px;}
.info p{margin-top:1.6em;}

galleria.css

.galleria{list-style:none;width:200px}
.galleria li{display:block;width:auto;height:auto;overflow:hidden;float:right;margin:0 10px 10px 0}
.galleria li a{display:none}
.galleria li div{position:absolute;display:none;top:0;left:180px}
.galleria li div img{cursor:pointer}
.galleria li.active div img,.galleria li.active div{display:block}
.galleria li img.thumb{cursor:pointer;top:auto;left:auto;display:block;width:auto;height:auto}
.galleria li .caption{display:block;padding-top:.5em}
* html .galleria li div span{width:400px} /* MSIE bug */

Attachment	Size
webpage.GIF	17.72 KB

Tags:

Beginners CSS Questions

transparent image shows a shaded boxes within divs

User login

Navigation