div Placing problem in wide screen and normal screen

[chanchelkumar]

Hi all,

 

Am trying to create page using div..

I am trying to place a div over another.. just like mapping..

This is what am trying to do..

my image

 .image
{
    width:737px;
height:494px;
    background-image:url(../images/map_2.jpg);

}

 

I have a map image and i positioned each point with a div..

.dott_14
{
width:20px;
height:20px;
position:absolute;
left: 190px;
top: 404px; cursor:pointer; cursor:hand;
}
.dott_17
{
width:20px;
height:20px;
position:absolute;
left: 207px;
top: 409px; cursor:pointer; cursor:hand;
}

 

this is good and in position in my normal screen.. but on wide screen the positions are away.. how can i correct this in both wide screen and normal screen..

 

thanks in advance..

[seanlim]

Are the points moving away or the background-image moving? How are they moving away? Try resizing the screen, does it affect the positions? Is it possible to provide an example? Your description is quite vague..

 

Maybe you can try adding overflow:auto on your main DIV... :S

[chanchelkumar]

Thanks seanlim..

 

yes it all happens...

 

i tried resizing the screen.. the bg image gets bigger.. but the points are in the same position..

 

tried overflow:auto .. nothing happens..

[seanlim]

Just to clarify: the background image gets bigger as you expand the window?

 

To my knowledge, background images don't stretch to fill the available size, only tile. Maybe providing an example or your HTML/CSS code will help...

[chanchelkumar]

thanks seanlim ..

 

i tried to zoom in my screen.. at that time my bg image get bigger..

 

<div class="image">
	  <div class="dott_14" ><a  onclick="balloon.showTooltip(event,'<span class=\'shopping\'>To North Sound/Leverick Bay</span>  ',0)" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image2','','MAP/blue_second.gif',1)"><img src="MAP/blue_first.png" alt="" name="Image2" width="20" height="20" border="0" id="Image2" style="border:none;" /></a>
	  </div>
	  <div class="dott_17" ><a  onclick="balloon.showTooltip(event,'<span class=\'shopping\'>To North Sound/Leverick Bay</span>  ',0)" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image2','','MAP/blue_second.gif',1)"><img src="MAP/blue_first.png" alt="" name="Image2" width="20" height="20" border="0" id="Image2" style="border:none;" /></a>
	  </div>
	  </div>

 

this is the code...

 

Code for css...

 

.image
{
    width:737px;
   height:494px;
    background-image:url(../images/map_2.jpg);
      
}
.dott_14
{
   width:20px;
   height:20px;
   position:absolute;
   left: 190px;
   top: 404px; cursor:pointer; cursor:hand;
}
.dott_17
{
   width:20px;
   height:20px;
   position:absolute;
   left: 207px;
   top: 409px; cursor:pointer; cursor:hand;
}

[seanlim]

There.. resizing the screen and changing the zoom is quite different! I have never tried solving this problem before, though I have wondered how to

 

The em units probably will resize together with the page, even if the zoom is done by the browser. On the other hand, I think the pixel unit will remain unchanged/un-zoomed, as a pixel is still a pixel, whether zoomed or not.

 

This may wreck all your positionings but I would suggest giving the em units a shot.

[haku]

Your problem is that you are using absolute positioning for your divs. This creates inflexible layouts. Spend some time reading about floats, then learn how to build a float based layout.