tag with a picture in it, and some other controls scattered around this picture (the placement of the controls is very important).
The only way I could get it to show up right was use relative positioning for all the controls in this div area..i spent lots of time getting it just right, just to find out that when I add more than one of these controls..everything shifts and moves (into the wrong spots)..
How can make a thing stay where I want it...but dynamically? (meaning probably without absolute positioning?
[web] Relative Positioning - Unreliable
Try using absolute percentages.
div#1 {
position:absolute;
margin-left:0%;
width:33%;
}
div#2 {
position:absolute;
margin-left:33%;
width:33%;
}
etc.
Careful going down that road, though, because the more you use percentages, the less you can use pixels. Especially in height measurement, the two aren't interchangeable.
div#1 {
position:absolute;
margin-left:0%;
width:33%;
}
div#2 {
position:absolute;
margin-left:33%;
width:33%;
}
etc.
Careful going down that road, though, because the more you use percentages, the less you can use pixels. Especially in height measurement, the two aren't interchangeable.
I think the reason this is happening is that relative positioning will position an element relative to the last object that was placed. Absolute positioning, on the other hand, positions an element relative to its containing block. You could define a div that holds all the controls, then place each of the controls absolutely within this block. Then, to move it, you'd just move the position of the containing div. Would this do what you want?
Relative positioning works like this:
Of course Internet Explorer has some terrible problems with relative positioning. (All modern browsers can handle it without a problem, so you may want to test first with them.) If the IE bugs crop up, you can make an IE-only hack to fix it. Usually it has to do with the left margin being out of whack, so you can give it a negative one to correct it. Depending on your layout, you may not experience it.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html><body><h1>Header</h1><h2>Section 1</h2><div style="position: relative; margin-left: 100px; width: 300px; height: 300px; border: solid black 1px;"> <span style="position: absolute; top: 0; left: 0;">I'm on the top left of the parent div</span> <span style="position: absolute; right: 0; bottom: 0;">I'm on the bottom right of the parent div</span></div><h2>Section 2</h2></body></html>Of course Internet Explorer has some terrible problems with relative positioning. (All modern browsers can handle it without a problem, so you may want to test first with them.) If the IE bugs crop up, you can make an IE-only hack to fix it. Usually it has to do with the left margin being out of whack, so you can give it a negative one to correct it. Depending on your layout, you may not experience it.
This topic is closed to new replies.
Advertisement
Popular Topics
Advertisement
