3 replies [Last post]
lamiajoyee
lamiajoyee's picture
Offline
newbie
Last seen: 10 years 14 weeks ago
Timezone: GMT+6
Joined: 2012-10-31
Posts: 2
Points: 3

hello there! I'm trying to make a map where there will be places of interests placed on the map. But i want it to act like this, that wherever i place the map, the locations will remain intact i mean if i put the map in the top of the page, the locations will remain at their respective places and so on. the markup and their styles are given below-

<div id="dhaka">
<div id="shantinagar"></div>
<div id="mirpur"></div>
</div> 
<style>
#dhaka
{
	background-image:url(../img/...);
	background-repeat:no-repeat;
	width:704px;
	height:505px;	
	list-style:none;
	top:100px;
	left:100px;
	}
#shantinagar
	{
	background-image:url(../img/..);
	background-repeat:no-repeat;
	position:absolute;
	width:112px;
	height:21px;
	top:280px;
	left:560px;
	}
	#mirpur
	{
	background-image:url(../img/..);
	background-repeat:no-repeat;
	position:absolute;
	width:112px;
	height:21px;
	top:220px;
	left:310px;
	}
</style>

How can this be established? with my current piece of coding, the places are moving away from the map when i place the map in different positions.

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 1 day ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

Hi lamiajoyee, You need to

Hi lamiajoyee,
You need to position #dhaka relative or absolute then the others will be positioned from it's top left corner.

lamiajoyee
lamiajoyee's picture
Offline
newbie
Last seen: 10 years 14 weeks ago
Timezone: GMT+6
Joined: 2012-10-31
Posts: 2
Points: 3

thank you

thank you

shreya19
shreya19's picture
Offline
newbie
united state
Last seen: 10 years 13 weeks ago
united state
Timezone: GMT+5.5
Joined: 2012-10-19
Posts: 2
Points: 2

There are two models for

There are two models for positioning your content on your Web pages. Both are valid, but when you're going to lay out your Web pages with CSS it's best to choose one of the two models and use that one exclusively for positioning.

float
The float property takes the element out of the normal flow of the Web page and has all other elements flow around it. Using CSS float for layout can seem confusing at first, but once you understand how it works it can be very satisfying. You only need to learn the one CSS property to set the layout for all your pages.