want 3 images across, each with caption below

Forum Moderators: not2easy

Message Too Old, No Replies

want 3 images across, each with caption below

mucm

7:48 pm on Apr 15, 2013 (gmt 0)

I've tried this eight ways to Sunday and can't seem to get it (without resorting to tables which I don't want to do).

my latest is


<div class="row">
 <div class="thm">
  <img class="thm" alt="A map" src="A.png" />
  <span class="thmcap">A map</span>
 </div>
 <div class="thm">
  <img class="thm" alt="B map" src="B.png" />
  <span class="thmcap">B map</span>
 </div>
 <div class="thm">
  <img class="thm" alt="C map" src="C.png" />
  <span class="thmcap">C map</span>
 </div>
</div>

with stylesheet contents of


div.row div.thm {
 display: inline-block;
 float: left;
}        
img.thm {        
 width: 30%;       
 display: block;     
}            
span.thmcap {      
 display: block;     
}

The idea is that each image has a caption below it, but the image+caption are treated as inline so they run one after the other from left to right. I've also tried with the "float: left" in various places but can't get it to behave as desired either. Any suggestions appreciated.

lucy24

8:44 pm on Apr 15, 2013 (gmt 0)

The overarching problem is that "width: 30%" applied to an image doesn't mean 30% of the page width. It means 30% of the available horizontal space and/or 30% of the image's intrinsic width. (Someone else probably remembers which factor applies when.) You need to shift this number to div.thm to get the effect you want. Yes, it's correct and appropriate to have numbers that add up to a little less than 100%, so keep that. You have to allow for margins and borders and padding and gremlins and so on.

While you're at it, why don't you dump all that extraneous "display: block" stuff-- which is just asking for trouble in an element that isn't inherently block-level --and instead set div.thm to "text-align: center" and put in a hard line break? Or, as an alternative, shove each piece-- image and caption-- into a paragraph of its own.

"float" and "inline-block" don't belong in the same style declaration. One or the other. Here you want "inline-block" only.

Do you have some other div.thm elsewhere that isn't inside a div.row and therefore behaves differently? Or, in the alternative, do you have some other css for "div.row div" that needs to be overridden? If not, the css is over-constrained and the user's browser has to do more work to end up in the same place.

You may find it useful to attach different colored borders to each of your elements. Then you can more easily see what's happening where.

It works fine for me in webkit and mozilla, even with all the extraneous stuff. Except of course that the image I used was out of proportion until I ditched the misplaced "30%". Now, if you're in MSIE < 8 (or, for some purposes, < 11 ;) ) ...

rainborick

11:20 pm on Apr 15, 2013 (gmt 0)

This might help you get started:


<!DOCTYPE html>
<html>
<head>
<title>Rows of Images with Captions</title>
<style>

.row { width:80%; margin:0 auto; }
.row:after { /* clearfix */
 content:'';
 display:block;
 height:0;
 clear:both;
}

.thm {
float:left;
width: 30%;
margin-left:.5%;
display: block;
}
.thm img { width:100%; display:block; }

.thmcap { text-align:center; background-color:#eee; }

</style>
</head>
<body>
<br />
<p>Some content...</p>
<br />
<div class="row">
<div class="thm">
<img alt="A map" src="A.png" />
<div class="thmcap">A map</div>
</div>
<div class="thm">
<img alt="B map" src="B.png" />
<div class="thmcap">B map</div>
</div>
<div class="thm">
<img alt="C map" src="C.png" />
<div class="thmcap">C map</div>
</div>
</div><!-- end .row -->
<br />
<p>Additional content....</p>
<br />
<div class="row">
<div class="thm">
<img alt="C map" src="C.png" />
<div class="thmcap">C map</div>
</div>
<div class="thm">
<img alt="B map" src="B.png" />
<div class="thmcap">B map</div>
</div>
<div class="thm">
<img alt="A map" src="A.png" />
<div class="thmcap">A map</div>
</div>
</div><!-- end .row -->
<br />
<p>Additional content....</p>
<br />
</body>
</html>