chibineku Posted May 2, 2009 Share Posted May 2, 2009 Hiya. I am copying Deirdre's Dad and making an image map generating tool, and in order to get the offset properties to work right, I have to put my image holder in a div absolutely positioned. The stuff after sits either over or behind the image, for unknown reasons. Here's the complete code, though much will be irrelevant: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html><head><meta http-equiv="Content-Type"content="text/html;charset=ISO-8859-1" /><title>Image Map Creator v1.0</title><style type="text/css">.cont {height:100px;width:100px;background-image:url("desk1.gif");position:absolute;}.holder {border:0;padding:0;position:absolute;}.rel {clear:both;}</style><script type="text/javascript">var imgHold=document.getElementById("imgHolder")var imgLoc=document.getElementById("imgLocation")function newImg() {imgHold.src=imgLoc.value}var y=new Arrayvar x=new Arrayvar i=0var storePrev="coords:<br />"function getCoords(event) {var store=document.getElementById("coordStore")x[i]=event.clientX-store.offsetLefty[i]=event.clientY-store.offsetTopstorePrev+=x[i]+","+y[i]+"<br />"store.innerHTML=storePrevi++}</script></head><body><h1>Image Map Creation Tool</h1><h2>Enter the image path in the box below and hit the submit button. <br />Choose the image map shape you like, and then follow the instructions to get the code necessary.</h2><input type="text" id="imgLocation" value="Image Path..." /><input type="button" value="submit" onclick="newImg()" /><div class="holder"><img id="imgHolder" src="desk1.gif" onclick="getCoords(event)" /></div><div class="rel"><span id="coordStore">coords:</span><select id="mapShape" name="mapShape"><option value="rect" selected>rect</option><option value="circ">circ</option><option value="poly">poly</option></select><p class="rect">Click on the top left corner, drag and release, to create the desired shape.</p><p class="circ">Please click where you would like the center of the circle to be, drag and release at the some point on the circumference.</p><p class="poly">Please click on each corner, double clicking on the final point.</p></div> I've tried all sorts of things and it won't work, like making the first div float and having the second one clear it, margins, etc. Anyone got any ideas? It's always the wee things that trip you up... Link to comment Share on other sites More sharing options...
jeffman Posted May 2, 2009 Share Posted May 2, 2009 That is the point of absolute positioning. It completely removes an element from the "flow" of the page. Other elements behave as if it were not even there. Elements that come before it in the syntax may find themselves behind it; elements that come after may find themselves in front of it. THAT behavior can be changed by changing the CSS z-index property.But for positioning . . . hmm. Most developers use absolute positioning because they WANT the behavior you describe. To work around it, you may need to play with the other elements' width/height/margins. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.