Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.
Course Of The Month
Become a Premium Member and unlock a new, free course in leading technologies each month.
Solved
Dynamic images with filename as caption displayed inline
Posted on 2013-01-01
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.
[X]
Welcome to Experts Exchange
Add your voice to the tech community where 5M+ people just like you are talking about what matters.
- Help others & share knowledge
- Earn cash & points
- Learn & ask questions
2
2
2- +1
7 Comments
Active today
html:
css:
that's the layout part of it. after that,you can style it any way you like...
<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>
css:
.imagesContainer{
overflow:hidden;
}
.image{
float:left;
}
that's the layout part of it. after that,you can style it any way you like...
Active today
I would add to @kozaiwaniec and instead of the br tags use a span for text and update a little style
But I would also check out the masonry project https://github.com/desandr
.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;
}
But I would also check out the masonry project https://github.com/desandr
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&
If you ever decide to move to modern development, these captioning techniques become available.
Cd&
Active today
I don't particularly like <div class="image"><img src="image.png"/><br/>imag
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>
Active today
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.
Featured Post
Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.
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
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…
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
The goal of the tutorial is to teach the user how to add a water mark to there photo.
Once you have a photo you like you have to go into the water mark setting and add a water mark to the image. You can either choose a text watermark or an image…
The goal of this is to tech the user how to export photos out of Lightroom and the different options they have.
Select which photos you want to export : Select where you want to export and with which options : Export :
Suggested Courses
Earn Certification
HTML5 Specialist - Certification
Free withPremium
Course of the Month4 days, 23 hours left to enroll
635 members asked questions and received personalized solutions in the past 7 days.
Join the community of 500,000 technology professionals and ask your questions.