Log in

View Full Version : CSS image viewer...


rk70526
11-09-2011, 02:49 PM
I am new here.....also new to CSS.....I used the code from the below link to create a image viewer.
http://www.dynamicdrive.com/style/csslibrary/item/css-popup-image-viewer/

But i am facing below problem:
I have designed a webpage shellcraft.html. my webpage is 2 columned. I have designed it such that the thumbnails are on left side and when you hover onto the thumbnails the enlarged image appears on right side. but my problem is that...when you hover on the thumbnail, the enlarges image is blocked by the object(another image) present on right side. I want hovered image to appear over the already present image....the below link has image which precisely explains my difficulty...(JPEG image)

http://www.4shared.com/photo/cka9polw/difficulty.html

I have also uploaded my website folder. the only file of my intrest is shellcraft.hml. The below link has the folder.(1.8 MB RAR folder)

http://www.4shared.com/file/cJYi0pEV/web.html

Please help me to solve this problem....

Thank you in advance :)
jscheuer1
11-09-2011, 06:01 PM
I downloaded your web.rar and opened it up for testing. There isn't an image over to the right as there is in your picture of the problem, so there's nothing to solve. I diagnosed the missing images for the page, perhaps it's one of those:



../../ima/4c8a607673b8510092010.gif
media/tree_thumb.jpg
media/tree.jpg


Oh, never mind, it was the first one, I just stuck a Google logo in there for testing purposes. All you need to do is at the beginning of Shellcraft.html edit the z-index value as shown:


<!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>Shellcraft</title>
<meta name="keywords" content="About Chrome, Web Design, CSS, HTML, free template, templatemo" />
<meta name="description" content="Chrome Company - free website template provided by templatemo.com" />
<link href="templatemo_style.css" rel="stylesheet" type="text/css" />

<style type="text/css">

.thumbnail{
position: relative;
z-index: 0;
}

.thumbnail:hover{
background-color: transperant;
z-index: 200;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: li . . .

There's another problem with the page in general though. If the user's window is wide enough, for some reason the layout gets squished into the center with stuff overlaying other stuff (click for larger view (max 1/3)):

4191

Putting a wrapper div around the entire body content seems to solve that:


</head>
<body>
<div style="position:relative; max-width: 1142px; margin: 0 auto;">

<div id="Layer1" style="positio . . .

and at the end:


<div id="templatemo_footer_wrapper">
<div id="templatemo_footer">
Copyright © 2011 Antarprerna
<div class="cleaner"></div>
</div>
</div>
</div>
</body>
</html>

If you're worried about IE 6 (doesn't support max-width) I can give you a code for it. But the entire layout should perhaps be rethought with an eye to getting rid of absolute positioning except for the enlarged images which require it. Overuse of absolute positioning is what caused the first problem to begin with.
rk70526
11-10-2011, 04:57 AM
sorry sir i forgot to put those images in web.rar.......It is your greatness that you took your precious time to replace those images......

I have successfully implemented the solution that you hav mentioned in above post..... and it works awsome.....:)

Also I was having the second problem....but din't mention it here coz i thought it was negligible....but you gave solution for that also.....thank you very much for helping me...

Thank you very much....