0

I'm putting together a family tree website where each page will have an organizational flow chart for one family surrounded by pictures of the family members.

I'm using style='position:absolute' with left and top coordinates to position the pictures on the page. Now I'm trying to add a caption to the bottom of each picture which will stay with the picture as I position it where I want it.

I tried different codes and methods, and found this code that works, but only if I delete the positioning code in the HTML. Once I include the positioning, the box with the caption just goes back to the upper left corner. The pictures are going to be strategically placed the page, so I need to positioning code.

Here's the code I found (courtesy of jsFiddle), which places a box around the picture and the caption below it:

CSS: 

.image {
  display: inline-block;

  margin: 10px;
  padding: 5px;

  border: 10px solid white;

  -moz-box-shadow: 0 0 5px #888;
  -webkit-box-shadow: 0 0 5px#888;
  box-shadow: 0 0 5px #888;
}

.image img, .image span {
  display: block;
}

.image span {
  text-align: center;
  margin-top: 8px;
  font-size: 12px;
  font-family: arial;

HTML:

<div class="image">

<a href="Family tree_files/DSRM 2011.jpg">
<img alt="dsrm2011" src="Family tree_files/DSRM 2011.jpg" 
style= "position: absolute; left:100px; top:85px;" width="208" height="461" /></a>'<span class=caption">Doug 2011</span>

Can someone help me code this so that the picture stays in the box with the caption where ever I position it?

j08691
  • 204,283
  • 31
  • 260
  • 272
Doug M
  • 1

1 Answers1

0

It seems like you are ownly moving the image coordinates. Try making a with an ID and instead assagn the position to the div, put the image and caption inside the div and theyll move together in harmony, comment if you need a code example!

Thomas Wagenaar
  • 6,489
  • 5
  • 30
  • 73
  • Thanks. That worked, and I like the way it looks, but then every picture in a different position would need its own div? 50 divs for 50 pics? (Unless I settle on a standard layout for all of the pages.) Any other ideas? – Doug M Feb 24 '15 at 02:51
  • No you dont have to make a lot of divs, you could give all the divs the same ID, just make sure you set the position of the divs to relative then. If you have margins set up correct theyll come out nice next to each other. – Thomas Wagenaar Feb 24 '15 at 02:56
  • That lines them up in a tidy little row, which I can probably use in some instances. But most of the pictures, of various sizes, are scattered around the page like a photo album. What I really need is a way to position each one individually. – Doug M Feb 24 '15 at 20:28
  • Both of your suggestions were useful. Thanks. – Doug M Feb 24 '15 at 22:00