homepage Welcome to WebmasterWorld Guest from 54.234.217.88
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
want 3 images across, each with caption below
mucm




msg:4565019
 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




msg:4565026
 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




msg:4565058
 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>

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved