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.
Images and PhotosCSSASP.NET
Last Comment
COBOLdinosaur
ASKER CERTIFIED SOLUTION
THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
SOLUTION
THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
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>
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&