help with container

Orionsbelter · December 21, 2008

ok so here is the code

    <style>
	#wrapper {
	position:relative;
	width:974px;
	height:685px;
	overflow:visible;
	text-align:left;
	zborder: 1px solid red;
}
#ifwrapper {
	position:relative;
	left:5px;
	top:0px;
	width:956px;
	height:635px;
	overflow:visible;
	text-align:left;
}
#content_body {
	/*border: 1px solid red;*/
	position:absolute;
	top:103px;
	left:161px;
	width:616px;
	height:376px;
	overflow:hidden;
}
.private-map,
.private-map-10{
	position:relative;
	margin:0;
	padding:0;
	width:614px;
	height:374px;
	background:transparent url('map/map.gif') 0 -2px no-repeat;
	/*background:transparent url('map/map_winter.gif') 0 -2px no-repeat;*/
	border:1px solid #666;
	z-index:1
	}
.private-map-10 {
	background:transparent url('map/supermap_28_terrain.gif') 0 -2px no-repeat;
	}
</style>
<body><center> 
<div id='wrapper'>
<div id='ifwrapper'>
<div id='content_body'>
<div class='private-map' id='map'>

</div>        
</div>	
</div> 
</div>

right this make a small sqaure with a background map/map.gif, however i now what to put images over this background so i want item1.gif to be over the image at a certain part of the image, as i want to have many images on this map/map.gif to make a small town, therefore it needs to kinda float on top of this image

help me how would i do this?

Mikedean · December 23, 2008

By the sounds of it, I would place DIVs inside the container div, set position: relative and align them using 'top' + 'left'.


<style>
.item1
{
position: relative;
left: 10px;
top: 10px;
height: 20px;
width: 20px;
background-color: #000;
}
</style>

<div class='private-map' id='map'>
<div class='item1'>

</div>
</div>

This should set the 'item1' div 10px from the top and left.

Sign In

help with container

Recommended Posts

Orionsbelter

Link to comment

Share on other sites

Mikedean

Link to comment

Share on other sites

Archived

Browse

Activity

Important Information