Wed, 2012-10-31 13:30
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.
Wed, 2012-10-31 19:42
#1
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.
Wed, 2012-10-31 20:05
#2
thank you
thank you
Wed, 2012-11-07 03:45
#3
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.