Center And Window Resize

[Caitlin-havener]

I have used absolute positioning to place images on the page. How do I center and resize all of these images according to the viewers browser window while keeping the original css positioning relative? Example: chavener.com - I want the treasure chest to stay where it is in relation to the picture in it's background but I want everything to center and resize to browser.

[Synook]

Don't use absolute positioning I couldn't get your page to load, but you should be able to achieve the desired positioning effect just using margins.Absolute positioning in general is not such a good idea, one of the reasons being, as you have found out, you can't attempt any sort of fluidity.However, if you really do need to use AP, try placing the element within a centered container with relative positioning.

[Caitlin-havener]

Don't use absolute positioning I couldn't get your page to load, but you should be able to achieve the desired positioning effect just using margins.Absolute positioning in general is not such a good idea, one of the reasons being, as you have found out, you can't attempt any sort of fluidity.However, if you really do need to use AP, try placing the element within a centered container with relative positioning.

Can you layer without using AP?

[thescientist]

you could use z-indexing with relatively positioned elements.

[Caitlin-havener]

Don't use absolute positioning I couldn't get your page to load, but you should be able to achieve the desired positioning effect just using margins.Absolute positioning in general is not such a good idea, one of the reasons being, as you have found out, you can't attempt any sort of fluidity.However, if you really do need to use AP, try placing the element within a centered container with relative positioning.

Container element like <div>? Its only repositioning the first image. Heres the code:<img id="indexpic" src="images/index.jpg" alt="You cannot see image!"><span style="cursor:progress"><a href="http://www.chavener.com/portfolio"><img id="tchest" src="images/chest1.gif" onmouseover="mouseOver('tchest')" onmouseout="mouseOut('tchest','chest1')" alt="portfolio"></a></span><span style="cursor:progress"><a href="http://www.chavener.com/resume"><img id="fishanim" src="images/fish.gif" onmouseover="mouseOver('fishanim')" onmouseout="mouseOut('fishanim','fish')" alt="resume"></a></span>And the CSS...<style type="text/css"> #tchest{ position:absolute; left:450px; top:675px; width:200px; height:200px; z-index:1; /* for IE */ filter:alpha(opacity=90); /* CSS3 standard */ opacity:0.9; } #indexpic{ position:absolute; z-index:-1; width:700px; height:884px; } #fishanim{ position:absolute; left:300px; top:200px; z-index:1; /* for IE */ filter:alpha(opacity=90); /* CSS3 standard */ opacity:0.9; } </style>

[Caitlin-havener]

you could use z-indexing with relatively positioned elements.

Ahhh I see. Got it... so how do you resize and recenter relative to the size of the browser?

[thescientist]

look up creating fluid layouts, using css. Usually with margins and paddings, percentages, and the fact that div's will automatically size up to flll their available content area. Typical google results for fluid two-column layouts provide pretty useful information to creating a fluid layout, and then you can incorporate your z-indexing into that.