Creating a collage of photos on the frontpage....

  • Thread starter Thread starter Guest
  • Start date Start date
G

Guest

It seems that the only thing you can do is tile photos. Is there a way to get
some to stack photos on top of others?
 
Additonal tips: Use divs as containers for your images. By creating a CSS
style sheet for divs that are part of your collage, you can apply the same
style to all of them. Then you can modify the CSS style attribute of each
div with an image in it to fit the dimensions of the image and the position
in the page. Example:

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title>Untitled 1</title>
<style type="text/css">
div.collage {
padding: 0px;
margin: 0px;
border-style: none;
border-width: 0px;
z-index: auto;
position: absolute;
}
</style>
</head>

<body>

<div style="width: 255px; left: 95px; top: 86px" class="collage">
<img src="images/chutney(large).gif" width="256" height="260"
alt="Chutney" /></div>
<div style="width: 255px; left: 278px; top: 50px" class="collage">
<img src="images/chutney(large).gif" width="256" height="260"
alt="Chutney" /></div>
<div style="left: 40px; top: 36px" class="collage">
<img src="images/Uncle-Chutney(glasses).gif" width="128" height="128"
alt="Chutney (glasses)" /></div>

</body>

</html>

Note that, as Steve pointed out, you can manually set the CSS z-index style
for each div, rather than using a global setting of "auto" if you want more
control. The "auto" setting places each successive one above the one
previous to it physically in the HTML. Instead, you could set the z-index
for each div individually:

<div style="width: 255px; left: 278px; top: 50px; z-index:2"
class="collage">
<img src="images/chutney(large).gif" width="256" height="260"
alt="Chutney" /></div>

--
HTH,

Kevin Spencer
Microsoft MVP
Short Order Coder
http://unclechutney.blogspot.com

The devil is in the yada yada yada
 
Back
Top