Jared_S
asked on
Dynamic images with filename as caption displayed inline
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.
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.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
I don't particularly like <div class="image"><img src="image.png"/><br/>imag e name</div> because of the br tag and prefer <div class="image"><img src="image.png"/><span>ima ge 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
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.
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;
}
<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>
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>
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.
But the layout remains.
ASKER
I learned something from all of the posts, but utilized these the most.
Thanks everyone.
Thanks everyone.
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&
If you ever decide to move to modern development, these captioning techniques become available.
Cd&