Photo "Collage" via absolute positioning. Centered???

[Greg G]

We have a band web site. Here's the site now:

http://www.risky-biz.com

The home page has a "collage" of photos of the members of the band.
The collage is actually one .gif image that I put together. But now
we've added a ninth band member so I have to change it completely. On
top of that, some of the guys have wanted their photos changed in the
past.

I'd like to use CSS to position 9 separate photos when I redo it. This
will allow me to change it a lot more easily in the future. I'm pretty
sure I can figure out how to do it, by creating 9 separate IDs to
place the photos. In the present home page, there are "shadows" behind
the pictures, which I like. I imagine that even that is possible,
using images that are just shadows set to a lower z-index.

But how can I center the whole collage in the browser window? If I use
percentages, I can center it, but the arrangement changes with the
browser width. If I use pixel positioning, I can get the collage the
way I want it, but it will be some fixed distance from the left edge,
rather than centered.

I figure that I can encase the whole thing in a table and center that.
Is there another way?

Greg Guarino

[Chris Leipold]

Put your collage in a div and position the images in a div and center
the div. But be careful, you can't position the images absolute if the
div isn't. you'll have to use negative margins i think.

Maybe this is also interesting for you:
http://webfx.eae.net/dhtml/pngbehavior/pngbehavior.html

Chris

Greg G wrote:

We have a band web site. Here's the site now:

http://www.risky-biz.com

The home page has a "collage" of photos of the members of the band.
The collage is actually one .gif image that I put together. But now
we've added a ninth band member so I have to change it completely. On
top of that, some of the guys have wanted their photos changed in the
past.

I'd like to use CSS to position 9 separate photos when I redo it. This
will allow me to change it a lot more easily in the future. I'm pretty
sure I can figure out how to do it, by creating 9 separate IDs to
place the photos. In the present home page, there are "shadows" behind
the pictures, which I like. I imagine that even that is possible,
using images that are just shadows set to a lower z-index.

But how can I center the whole collage in the browser window? If I use
percentages, I can center it, but the arrangement changes with the
browser width. If I use pixel positioning, I can get the collage the
way I want it, but it will be some fixed distance from the left edge,
rather than centered.

I figure that I can encase the whole thing in a table and center that.
Is there another way?

Greg Guarino

[Ali Babba]

Greg G wrote:

We have a band web site. Here's the site now:

http://www.risky-biz.com

The home page has a "collage" of photos of the members of the band.
The collage is actually one .gif image that I put together. But now
we've added a ninth band member so I have to change it completely. On
top of that, some of the guys have wanted their photos changed in the
past.

I'd like to use CSS to position 9 separate photos when I redo it. This
will allow me to change it a lot more easily in the future. I'm pretty
sure I can figure out how to do it, by creating 9 separate IDs to
place the photos. In the present home page, there are "shadows" behind
the pictures, which I like. I imagine that even that is possible,
using images that are just shadows set to a lower z-index.

But how can I center the whole collage in the browser window? If I use
percentages, I can center it, but the arrangement changes with the
browser width. If I use pixel positioning, I can get the collage the
way I want it, but it will be some fixed distance from the left edge,
rather than centered.

I figure that I can encase the whole thing in a table and center that.
Is there another way?

Greg Guarino

1st: use .jpg for fotos.
2nd: you would save yourself lots of headaches when you would stick to
the complete-collage.jpg idea. there are many graphical prgrams nowadays
that come for little or no money which allow you to store a collection
of pictures and filters as 1 file (that you can edit, change whenever
you like, and export as 1 jpg. (try Paint.NET = free, simple, very good)

sorry for the discouraging story, but i think your plan is just not the
best approach.

gl
martin

[phil_gg04]

<div style="margin-left: auto; margin-right: auto;
width: 350px; height: 265px;
position: relative;">
<img src="p1.jpeg" style="position : absolute; left=32px; top=64px;">
<img src="p2.jpeg" style="position : absolute; left=99px; top=21px;">
</div>
margin-left and right auto on the div does the centering.
Putting position: relative on the div makes the absolutely-positioned
imgs relative to it, not to the document.

--Phil.