Absolute positioning of images

**zephyr_nk** · 09-29-2008, 10:35 AM

I am trying to use image hovers as displayed in - http://www.dynamicdrive.com/style/cs...p-image-viewer.
The only modification is the following implementation:

Code:

<div style="position: absolute; left: 980px; top: 0px;">
            <a class="thumbnail" href="#thumb">
                <img alt="" src="4.jpg" width="20" height="20" /><span><img src="4.jpg" width="200"
                    height="200" /><br />
                    Dynamic Drive</span></a>
        </div>

My outer div is absolutely positioned and I need to keep these like these.

The code is working perfectly with Firefox and Chrome but for IE, the hover image gets hidden behind other images.
I am placing the complete code for my page here:

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>Untitled Page</title>

   <style type="text/css">
        .thumbnail
        {
            position: relative;
           z-index: 0;
        }

		 		 .thumbnail img
		 		 {		 border:0px;}
        
        .thumbnail span
        {
            /*CSS for enlarged image*/
            position: absolute;
            background-color: White;
            padding: 5px;
            left: -1000px;
            border: 1px dashed gray;
            visibility: hidden;
            color: black; /*text-decoration: none;*/
            font-family: Tahoma;
            font-size: 10px;
            text-align: center;
        }
        .thumbnail:hover
        {
            background-color: transparent;
            z-index: 50;
        }

		 		 /**html.thumbnail:hover { z-index:50; }*/
        .thumbnail span img
        {
            /*CSS for enlarged image*/
            border-width: 0;
            padding: 2px;
        }
        .thumbnail:hover span
        {
            /*CSS for enlarged image on hover*/
            visibility: visible;
             z-index: 50;
            top: 0;
            left: 20px; /*position where enlarged image should offset horizontally */
        }
    </style>
</head>
<body>
    <div style="position: absolute; left: 30px; top: 30px; width: 1000px; height: 1000px;
        background-color: Yellow;">
        <div style="position: absolute; left: 0px; top: 0px; ">
            <a class="thumbnail" href="#thumb">
                <img alt="" src="1.jpg" width="10" height="10" />
                <span>
                    <img src="1.jpg" width="200" height="200" /><br />
                    Dynamic Drive<br />
                    <b>I am here.</b><br />
                    where are you?</span> </a>
        </div>
        <div style="position: absolute; left: 0px; top: 10px;">
            <a class="thumbnail" href="#thumb">
                <img alt="" src="2.jpg" width="10" height="10" /><span><img src="2.jpg" width="200"
                    height="200" /><br />
                    Dynamic Drive</span></a>
        </div>
        <div style="position: absolute; left: 0px; top: 20px;">
            <a class="thumbnail" href="#thumb">
                <img alt="" src="3.jpg" width="10" height="10" /><span><img src="3.jpg" width="200"
                    height="200" /><br />
                    Dynamic Drive</span></a>
        </div>
        <div style="position: absolute; left: 0px; top: 30px;">
            <a class="thumbnail" href="#thumb">
                <img alt="" src="4.jpg" width="10" height="10" /><span><img src="4.jpg" width="200"
                    height="200" /><br />
                    Dynamic Drive</span></a>
        </div>
        <div style="position: absolute; left: 0px; top: 40px;">
            <a class="thumbnail" href="#thumb">
                <img alt="" src="1.jpg" width="10" height="10" /><span><img src="1.jpg" width="200"
                    height="200" /><br />
                    Dynamic Drive</span></a>
        </div>
        <div style="position: absolute; left: 10px; top: 0px;">
            <a class="thumbnail" href="#thumb">
                <img alt="" src="2.jpg" width="20" height="20" /><span><img src="2.jpg" width="200"
                    height="200" /><br />
                    Dynamic Drive</span></a>
        </div>
        <div style="position: absolute; left: 30px; top: 0px;">
            <a class="thumbnail" href="#thumb">
                <img alt="" src="3.jpg" width="20" height="20" /><span><img src="3.jpg" width="200"
                    height="200" /><br />
                    Dynamic Drive</span></a>
        </div>
        <div style="position: absolute; left: 10px; top: 20px;">
            <a class="thumbnail" href="#thumb">
                <img alt="" src="4.jpg" width="30" height="30" /><span><img src="4.jpg" width="200"
                    height="200" /><br />
                    Dynamic Drive</span></a>
        </div>
        <div style="position: absolute; left: 40px; top: 20px;">
            <a class="thumbnail" href="#thumb">
                <img alt="" src="1.jpg" width="10" height="10" /><span><img src="1.jpg" width="200"
                    height="200" /><br />
                    Dynamic Drive</span></a>
        </div>
        <div style="position: absolute; left: 40px; top: 30px;">
            <a class="thumbnail" href="#thumb">
                <img alt="" src="2.jpg" width="10" height="10" /><span><img src="2.jpg" width="200"
                    height="200" /><br />
                    Dynamic Drive</span></a>
        </div>
        <div style="position: absolute; left: 50px; top: 0px;">
            <a class="thumbnail" href="#thumb">
                <img alt="" src="3.jpg" width="20" height="20" /><span><img src="3.jpg" width="200"
                    height="200" /><br />
                    Dynamic Drive</span></a>
        </div>
        <div style="position: absolute; left: 980px; top: 0px;">
            <a class="thumbnail" href="#thumb">
                <img alt="" src="4.jpg" width="20" height="20" /><span><img src="4.jpg" width="200"
                    height="200" /><br />
                    Dynamic Drive</span></a>
        </div>
        <div style="position: absolute; left: 50px; top: 20px;">
            <a class="thumbnail" href="#thumb">
                <img alt="" src="4.jpg" width="20" height="20" /><span><img src="4.jpg" width="200"
                    height="200" /><br />
                    Dynamic Drive</span></a>
        </div>
    </div>
</body>
</html>

Any help will be highly appreciated.
Regards.Thanks and Regards,
Neetika Kapoor.

**Medyman** · 09-29-2008, 01:57 PM

Hi Neetika,

I'm not sure if I understand what's going on here. Do you have a link a page where we can see this behavior?

**zephyr_nk** · 10-08-2008, 11:10 AM

This page is not yet published.

Basically, what we are trying to do is... we have a 100x100 block for banners with users buying a minimum of 20x20.

So a 100x100 block may be divided in any fashion depending upon availability of block which is why I am trying to place the outer most div in absolute fashion. Making it in any other way does not let me fully fill the 100x100 block.

The other option was that I create static images and make area maps but could not work with CSS on that one and get a mouse over.

I also tried to use a table, whereby I could divide table in 5 rows and 5 columns and use rowspan and colspan for placing bigger than 20x20 blocks. But despite of giving padding, cellspacing and border as 0, it still does not look clubbed together and there are unwanted spaces.

Any ideas are welcome.

The code above is the entire code I have so far.

Thread: Absolute positioning of images

Thread Tools

Search Thread

Absolute positioning of images

Bookmarks

Bookmarks

Posting Permissions