image and caption problem

[Ant]

I'm trying to sort out all my image styles with classes.

 

I would like to have an image style that contains a caption. However I GUESS I cant do this WITHOUT the image being in it's OWN div.

 

So I cant just use a class by itself, which is how I have been handling my images up to now. Some with a border, some floated left, some not.

 

Here's how I assume it's done:

 

.photo_with_caption {

border: 1px solid #000000;

width: auto;

float: left;

padding: 10px;

margin-bottom: 15px;

margin-left: 5px;

 

 

.caption_style {

font-family: Arial, Helvetica, sans-serif;

font-size: 14px;

color: #333333;

text-align: center;

padding-top: 10px;

 

 

 

 

 

<div class="photo_with_caption"><img src="images/harry_salmon.jpg"/>

<span class="caption_style">caption here</span></div>

 

</div>

 

 

However I cant get the div to have a width of auto and snap to the width of the image. What it's doing ( I THINK) is expanding to the container it's in (which happens to be floated left and a width of 660px)

 

What can i do to tell my div to have a width of auto when it's inside a div that is floated left and has a defined width of 660px?

 

NOTE: I just tried making the div 100% width and that didn't work. I tried removing the width of the parent div and left it blank, that didn't work. I tried auto width on the div(.photo_with_caption above) and that didn't work. I need the photo_with_caption class to resize to whatever the image is i put in it. All it does is resize to the parent element.

 

 

I think I run into most of my problems (in css/etc) when I have objects within other objects and there becomes a complicated mess of how each one effects the other. So when I think (X) should happen it doesn't because it's being controlled by 3 other things. Then I have to go back and figure out which element is controlling which.

 

 

thanks

Ant

Edited August 3, 2010 by Ant

[Ant]

Well somehow I have got the image to work properly. I think I removed the width:auto. I'm not sure now.

 

BUT when I place the caption underneath, the text determines the width of the div now.

 

So now I have to figure out how I tell the caption to not exceed the width of the photo.

Edited August 3, 2010 by Ant

[PicnicTutorials]

Hi, default is auto. By default, the div is block and it will expand to the edges of its container. There are three ways to make the div go to the image width. Float the div, or AP it, or give it a width.

 

Just float the div, give it text-align center, and give the img display block. The html is div img text /div. Done.

Edited August 3, 2010 by Eric

[Ant]

Eric, thanks once again for your help.

 

I did everything you mentioned, however my caption still determines the width of the div. So if the caption FOR SOME ODD REASON happened to be very long, it extends the div and 1px border, thus making the div larger than the image bounds.

 

Here's the css that is applied to the div and to my caption text(not sure i need the caption text styling):

 

.photo_with_caption {

border: 1px solid #000000;

padding: 10px;

margin-left: 5px;

margin-bottom: 15px;

float: left;

text-align: center;

display: block;

}

 

.caption_style {

font-family: Arial, Helvetica, sans-serif;

font-size: 14px;

color: #333333;

text-align: center;

padding: 5px;

margin: 5px;

}

 

 

HTML:

 

<div class="photo_with_caption"> <img src="images/harry_salmon.jpg" width="539" height="411" />

<div class="caption_style">harry salmon </div>

[newseed]

You will need to apply a fixed width to the .photo_with_caption class or else it will just keeps expanding. You would then add a clear:both to your .caption_style class so that the line will drop down underneath the image.

[Ant]

News, the images I place are not always the same dimensions, so what are my other options ?

[PicnicTutorials]

Try this... Wrap the caption in a p tag. Give the p text align center. And give the p a max width equal to your least widest image and margin auto. That should always center the caption under the image.

 

div p {...}

 

Alternatively, google "image captions with inline-block"

Edited August 4, 2010 by Eric

[newseed]

Keep in mind that even if you set the max-width, it will expand to that width based on how much caption text you have. For example, even if your image is a just 100px wide and your max-width setting is 200px, any long caption will expand to the max-width.

 

Here's what I have:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>caption here</title>
<style type="text/css">
.photo_with_caption {
border: 1px solid #000000;
padding: 10px;
margin-left: 5px;
margin-bottom: 15px;
float: left;
text-align: center;
display: inline-block;
}

.caption_style {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #333333;
text-align: center;
padding: 5px;
margin: 5px;
clear: both;
max-width: 250px;
min-width:150px;
}

</style>
</head>

<body>
<div class="photo_with_caption"><img src="images/logo.png">
<p class="caption_style">caption here lots of all kind of caption all over the place</p></div>
<div class="photo_with_caption"><img src="images/logo.png">
<p class="caption_style">caption here</p></div>
<div class="photo_with_caption"><img src="images/logo.png">
<p class="caption_style">caption here lots of all kind of caption all over the place</p></div>

</body>

</html>

 

When you have a width that is unknown you may have to use a bit of scripting to tell it how wide the div should be based on the image size that it's going contain.

 

Of course there is also a height issue to contend with.

[PicnicTutorials]

If those don't work your needs go here http://www.pmob.co.uk/ and scroll down to Various Captions and Paul has 12 dif versions.

[Ant]

Do you guys find it "tiring" that the simplest of things takes an act of god to accomplish when building websites?

 

Or is it something you just accept and continue on.

 

 

BTW, how do new things, elements etc get created and are then usable by web builders.

 

For instance how did DIVS get made and become part of HTML.

 

Thanks

Ant

[newseed]

In a nutshell, something that get's created is dependent on the browser that renders. Like right now HTML 5 and CSS 3 is not fully supported although Google Chrome is close. IE8 and earlier are not going to be able to comply because the older browsers was not made for HTML 5 and CSS 3.

[Ant]

Thanks for all the replies.

 

News, thanks for the explanation.

 

It looks like I will just babysit my captions and make sure they never exceed the width of the photo.

If they do i will just have to manually add a break to the line or something like that.

 

Ant

[newseed]

It looks like I will just babysit my captions and make sure they never exceed the width of the photo.

If they do i will just have to manually add a break to the line or something like that.

If you gave a div a fixed with let's say 200px and you find that an image is larger than that let's say 300px, you can control the size of that image by using some css. The drawback are images that are smaller than div's width of 200px.

 

Just in case you want to try this, just apply the following:

 

.photo_with_caption img {width: 200px; height: auto;}

 

height: auto is not required but you should not use a fix height or else it will not size down proportionately. However, you can use a fixed height so long as width is set to auto. You can set one or the other but not both.

 

Please note that if your image has dimensions set inline within the img tag it will override the above css I gave you.

Edited August 4, 2010 by newseed