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:
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>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 . . .
Edit: 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)):
Attachment 4191
Putting a wrapper div around the entire body content seems to solve that:
Code:
</head>
<body>
<div style="position:relative; max-width: 1142px; margin: 0 auto;">
<div id="Layer1" style="positio . . .
and at the end:
Code:
<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.
CSS image viewer...
Reply With Quote
Bookmarks