Need code for relative positioning

liunx

Guest
I have a main image that I need to put other images on. THis image has to be in the middle of the page so I have used a table to put it there. I have played around with relative positioning to get the images to stay with the main image when the page is resized and so on, but am presently unsuccessful. Can someone please help with some code? Thanks<!--content-->umm, do you mean 'Apsolute Positioning'? Relitive pos doesn't require code...<!--content-->Allow me to explain. When you use '<img>' w/o any styling or additional properties, its going to display relitively ( arond everything else ) this is why I am a bit confused by your request, as there is no code for relitive positioning b/c it is default. :)<!--content-->Maybe I'm barking up the wrong tree. What I'm trying to accomplish is to have an image that will stay in the middle of the screen regardless to screen resolution or browser size, and I need to position images on top of it that will stay with that image as it moves due to different screen resolutions or browser sizes. I tried absolute positioning, but that could only fix the image in the middle of the screen for one, specific screen resolution.<!--content-->Ok, I see what your saying now :) Basically, you need divs. One to center the container, One to contain all of the images, and another to center the main image.<br />
<br />
Here's the code:<br />
<br />
<div align="center"><br />
<div><br />
<img src=http://www.webdeveloper.com/forum/archive/index.php/"whatever"><br />
<img src=http://www.webdeveloper.com/forum/archive/index.php/"whatever"><br />
<img src=http://www.webdeveloper.com/forum/archive/index.php/"whatever"><br />
<div align="center"><br />
<img src=http://www.webdeveloper.com/forum/archive/index.php/"whatever"><br />
</div><br />
</div><br />
</div><br />
<br />
<br />
That'll do what you want. Look into CSS, it's an extremely powerful tool when it comes to presentational markup :)<!--content-->#container {<br />
position:absolute;<br />
left:50%;<br />
top:50%;<br />
left-margin:-100px; // (replace 100 with half the picture size)<br />
}<br />
</style><br />
</head><br />
<body><br />
<br />
<div id="container"><br />
<img src=http://www.webdeveloper.com/forum/archive/index.php/"blah.jpg" alt="blah"><br />
</div><!--content-->
 
Back
Top