Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!
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.
Do more with
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
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...
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&
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>
Premium Content
You need an Expert Office subscription to comment.Start Free Trial