If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

Absolute positioning

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.

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

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:

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?

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.