Absolute positioning

[blandydoes2009]

Hello fellow designers,

Just a quickie.

Not new to coding but new to absolute positioning. I designed a new site which required me to have rollover image links basically dotted over the page, which meant I could not use my standard way of creating nice neat CSS tables to house the links, I have had to play with absolute positioning each image link on the page.

The code works fine, no problems there, BUT I use a 22 inch wide screen monitor and it sits perfectly in that, because I made sure it was laid out correctly to work. Now when I look at the site in say a smaller browsers, the images get pushed about and sit too far to the right.

You can see it here:

http://www.blandydoes.co.uk/bdprojects/thercshed/

Does anyone have any ideas on how to make sure that no matter what size monitor is being used, they will sit where I want them to in my design?

If you could get back to me with ideas, I would be very grateful. I don't like to ask for help but in this case im under a deadline and I am struggling, as most young designers do when it comes to absolute. lol

Thank you!

[blandydoes2009]

Is there anyway of creating a wrapper to contain the AP Divs, so that no matter what screen size it stays centred to the layout?

Hmm pondering

[jscheuer1]

Well, yes. If you give the wrapper relative position, then it will contain the absolute positioned elements:


<div style="position: relative;">
<div style="position: absolute;">
</div>
</div>

The inner division is absolute, but will be absolute in relation to the relatively positioned container. If you give the container width and height, it will lay out on the page like a static positioned element. If you use a valid URL DOCTYPE, the container (as long as its width is defined) may be centered on the page using:

margin: 0 auto;

[blandydoes2009]

John,

That makes sense, but will the new div sit nicely over the rest of the code already written?

As it is my first time using absolute, I can see what your saying to do but I cant visualise how the code will work.

[blandydoes2009]

John,

I have created a container but now that relative container sits below the rest of my code. How will I position that container over the other div layers so that the absolute images sit in place at the top like before?

Here see:

http://www.blandydoes.co.uk/bdprojects/thercshed/ (http://www.blandydoes.co.uk/bdprojects/thercshed/)

[blandydoes2009]

John,

I have moved the container so that it floats above the rest of the layers and it is now working fine. However I get a z-index bug likely for IE 6 & 7

Any advice on this? I will try to find out some info myself as well..

Check it out now!

http://www.blandydoes.co.uk/bdprojects/thercshed/

[jscheuer1]

Looks good to me in IE 7 and 6. The trick is that anything that you want to 'stack' with z-index in those browsers must have relative or absolute position. Also in IE, if a parent element has a lower stacking order (lower z-index, or not positioned absolute or relative), it will sometimes drag down its child, regardless of the child's z-index. Other browsers allow for much more leeway in this.