Jump to content

Captions: how to vary width


SteveHoffmanUK

Recommended Posts

I have defined a caption class in my CSS file thus:

.caption{font-size: 11px;font-family: verdana, arial, helvetica, sans-serif; color: #000000;font-style: italic;}

I want to use this style for all the captions of photos and drawings on my website but I need to vary the width depending on the width of the photo.For example, right now a have a page of old photos at:Bell Street (1)You can see that the captions run the full width of the "container" in which the column of photos and captions sit. They don't look right for the narrower photographs.In my HTML file, the code for the first photo is:

<img src="archivesimages/bellstreet1a.jpg" width="600" height="346" border="0" alt=Bell Street at the Square></a><div class="caption">Bell Street begins at The Square and heads north-west towards Andover. On the left above is Long's shop selling a wide range of food and provisions. This building is the one that burnt down in 1895, so we know that this photo is at more than 100 years old.</div>

How do I vary the coding for each photo so that the captions are the same width as the photos?

Link to comment
Share on other sites

you could leave the class there but just add the width of each div in the html e.g.

<div class="caption" style="width: 600px;">

altough there could be a better solution by the way if you want someone to touch up those first 2 photos for you i can

Link to comment
Share on other sites

you could leave the class there but just add the width of each div in the html e.g.
<div class="caption" style="width: 600px;">

although there could be a better solution

Thanks. Did it - as you can see, it works fine. There may be better solutions, but I'm happy with this one because it works and is easy! I'll do something about the vertical spacing so I get a bit of white between the photos and then everything will look fine.
by the way if you want someone to touch up those first 2 photos for you i can
Thanks - that would be great if you could. I used some WYSIWYG web page authoring program that "improves" pix; it often does, but sometimes it goes overboard and you get this kind of crap. I'll PM you with my email address.
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...