Solved

Dynamic images with filename as caption displayed inline

Posted on 2013-01-01
7
521 Views
Last Modified: 2013-01-02
This will hopefully be easy for someone who knows CSS better than I do.

I'm loading all of the pictures in a folder to an update panel dynamically.
I want to add the name of the image directly below the image.
These should display inline.

When the image/filenames exceed the width available, I want them to wrap and create a new row of image/filenames.

In other words, display the image as it would typically display, but put the corresponding filename under each image.

I thought this would be as easy as:

.div1 {
display:inline;
}

.div2{
text-align:center;
width:80;
}

<div1>
<div2>(pic) <br/> (name)</div> <div2>(pic) <br/> (name)</div>...etc
</div>

but that isn't working.

CSS is my ultimate time killer. Can anyone tell me what I'm doing wrong?

This is for an intranet application where users will be on IE 7 (I know), but i'm interested in cross browser friendly solutions.

Thanks everyone... I'm two days in and running out of ways to Google my problem.
0
Comment
Question by:Jared_S
  • 2
  • 2
  • 2
  • +1
7 Comments
 
LVL 25

Accepted Solution

by:
Kyle Hamilton earned 400 total points
ID: 38734924
html:
<div class="imagesContainer">
<div class="image"><img src="image.png"/><br/>image name</div>
<div class="image"><img src="image.png"/><br/>image name</div>
<div class="image"><img src="image.png"/><br/>image name</div>
...etc..
</div>

Open in new window


css:
.imagesContainer{
   overflow:hidden;
}
.image{
   float:left;
}

Open in new window


that's the layout part of it. after that,you can style it any way you like...
0
 
LVL 52

Assisted Solution

by:Scott Fell, EE MVE
Scott Fell,  EE MVE earned 100 total points
ID: 38734989
I would add to @kozaiwaniec and instead of the br tags use a span for text and update a little style
.imagesContainer{
   overflow:hidden;
   padding:10px;
}
.image{
   float:left;
   margin-right:5px;
   margin-left:5px;
   margin-bottom:10px;
}

.image img{
   text-align:center;
   width:100px;
}

.image span{
   display:block;
   text-align:center;
   padding:10px;
}

Open in new window


But I would also check out the masonry project https://github.com/desandro/masonry it  will give you the "pintrest" look with a little javascript.  The key is the margins on left and right can always be equal.   Using above code you if you knew the image width and hight are always going to be the same specific sizes, and you only allowed the container to be a specific size, you can get the similar effect without javascript.  I have used masonry and it is very easy.
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 38735144
It is unfortunate that you are committed to obsolete browsers and can't use the very straight forward and simple solution of the new html5 tags.

If you ever decide to move to modern development, these captioning techniques become available.

Cd&
0
Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 38735320
I don't particularly like <div class="image"><img src="image.png"/><br/>image name</div>  because of the br tag and prefer <div class="image"><img src="image.png"/><span>image name</span></div>.   This works perfectly fine in all browsers.  Cd brings up a good point about remembering to use html5.  While you personally may prefer "modern" browsers, there are probably still 15% to 20% or more of your viewers on  ie8 and below where this may not work without using a fall back or add on.

I saw Cd's sample but would suggest using css rather then inline css
css
figure {
  float:left;
  text-align: center;
  width:130px;
  background-color:#423189;
  padding-top:10px;
  margin:15px;
}
img{
  display: inline;
 
  background-color:#fff;
  
}
figcaption {
  text-align:center;
  font-weight:bold;
  font-style:oblique;
  
}

Open in new window

 <figure>
  
   <img src="image.png" width="100px" height="100px"/>
    <figcaption>
    This is a caption
   </figcaption>
</figure>
  
   <figure>
  
   <img src="image.png" width="100px" height="100px"/>
    <figcaption>
    This is a caption
   </figcaption>
</figure>
  
   <figure>
  
   <img src="image.png" width="100px" height="100px"/>
    <figcaption>
    This is a caption
   </figcaption>
</figure>
  
   <figure>
  
   <img src="image.png" width="100px" height="100px"/>
    <figcaption>
    This is a caption
   </figcaption>
</figure>
  
   <figure>
  
   <img src="image.png" width="100px" height="100px"/>
    <figcaption>
    This is a caption
   </figcaption>
</figure>

Open in new window


I left out the code I would have used that goes with my original css post.  Very similar to the html5 version and very valid.

<div class="imagesContainer">
<div class="image"><img src="image.png"/><span>image name</span></div>
<div class="image"><img src="image.png"/><span>image name</span></div>
<div class="image"><img src="image.png"/><span>image name</span></div>
<div class="image"><img src="image.png"/><span>image name</span></div>

</div>

Open in new window

0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38735366
Like I said in my original post, you can style this layout to your heart's content, whether you use spans, divs, figures, or the "cat in the hat" ('cause you can do that in html5).

But the layout remains.
0
 
LVL 12

Author Closing Comment

by:Jared_S
ID: 38736493
I learned something from all of the posts, but utilized these the most.
Thanks everyone.
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 38737836
but would suggest using css rather then inline css

Agree! With snippets I sometimes put the code inline to make it easier to follow.

Cd&
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

PaperPort 14.5 Patch 1 update is often not detected or downloaded automatically. This article provides direct download links to solve the problem for retail (non-bundled) versions of the Standard and Professional editions, as well as the Professiona…
It was really hard time for me to get the understanding of Delegates in C#. I went through many websites and articles but I found them very clumsy. After going through those sites, I noted down the points in a easy way so here I am sharing that unde…
The goal of the tutorial is to teach the user what exposure is and how to use the exposure slider. Analyze the photo that you want to edit, then adjust the exposure slider to your liking.
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

860 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question