html - About replicating/generating a lot of div css -


for project need as efficiently possible make world map out of little square divs of approximately 20x20px.

however because need div sizes scale browser using div's width of 1% , height of 2%, on 16:10 screen looks square.

i have div called "world" filled lots of little divs like:

<div id="world1" onclick="">&nbsp;</div> 

each of these divs paired css follows:

#world1 {     background: url(/images/1.png) 0 0 no-repeat;     float: left;     width: 1%;     height: 2%;     position: absolute;     top: 79%;     left: 91%;     z-index: -1;     margin-top: -10px;     margin-left: -10px; }  #world1:hover {     background-position: 0 -20px;     cursor: pointer; } 

i figured easiest way make map generate code divs , corresponding css divs names "world1" through "world20000" placed @ positions ranging

top:1%; left: 1%; 

to

top:100%; left: 100%; 

and go through hand , delete divs covering oceans on map create world map.

how can generate code, or better still there easier way this, because solution not elegant or efficient.

also have more elegant solution keeping div's square in browser sizes , scaling squares browser window?

a few lines in perl dirty job you.

i figured easiest way make map generate code divs , corresponding css divs names "world1" through "world20000" placed @ positions ranging from...

it easier if not place in absolute positions, used float:left, added many squares want fill entire row, , later use clear:left jump row. not more 20 line in perl.


Comments

Popular posts from this blog

linux - Using a Cron Job to check if my mod_wsgi / apache server is running and restart -

actionscript 3 - TweenLite does not work with object -

jQuery Ajax Render Fragments OR Whole Page -