Captioning Images

[montagueward]

Hi I'm in trouble again.

My problem is captioning two (or more) images on the same page. This is the coding I am using:-

<div class="webphoto"><img src="URL"class="image" size etc/><p> caption</p></div>

In CSS :- .webphoto p { font,position etc. }

That's OK for the first image but obviously the CSS can't apply to subsequent images I guess.

Any suggestions please. Regards Monty

[sagar2121]

yes u cant use same position attribute for two different things

r u trying to put two images at same position ?

your CSS seems to be like that

[james_littler]

what are you trying to achieve?

If you float your images then you can use the same class on all of your images.

[rhysboy84]

Sagar's right, the position attribute really shouldn't be used for positioning multiple images.

An easy way to do it is with the float tag. I'm assuming the image is embedded within the content (similar to BBC articles?). Have a read about it and let us know if that's what you want to achieve.

http://www.w3schools.com/css/pr_class_float.asp

[montagueward]

Hi

I guess I wasn't very clear about what I'm trying to do. In fact I am trying to position two different images on different areas on one web page.
If I used float, wouldn't I have the same problem in that the CSS would control the attributes for both images ?

[james_littler]

if you need to target them directly give each image a different class, then target the image via the class rather than via the element

[rhysboy84]

Next question, do you have examples? I.e. the page you are working on?

[montagueward]

<div class="webphoto"> <img src="web\snow\images\dscf0301.jpg"class="image" width="300" height="250"alt= "snow"/><p> Snow Scene</p></div>

<div class="webphoto"> <img src="web\waterway\images\dscf0450.jpg"class="photo" width="300" height="250"alt="water"/><p> Waterway</p></div>


.image {border: 2px solid green;}
.webphoto p{font- size:small;width: 600px; margin-left:450px; color: black;}

.photo {float: right;border: 2px solid green;}

rhysboy84
As requested, relevant markup, HTML and CSS - hope you can understand
Regards Monty

[montagueward]

rhysboy84

Sorry, I should also have said that the markup I have sent you places the second image low down with some text wrapped round it. Iam trying to place the image further up the page away from the text. Also the caption for this image is to the left hand side of the page, away from the image, not underneath it. Hope you understand

Regards Monty

[james_littler]

Is this live anywhere?

[montagueward]

no

[Markymark09]

why not?

[funstuff20]

Just find a page that's doing what you want to do, look at their html code and their css stylesheet, see how they do it, and copy/modify their code.

[Dr John]

If you must use this positioning instead of floats, then remove the positioning data from the webphoto declaration, and add it to a series of separate declarations, as follows

.pos1 {postion...}
.pos2 {position...}
.pos3 {position... }
etc

then style your images thus

<div class="webphoto pos1" ......>
<div class="webphoto pos2".....>

etc

Using two classes to mix styles saves you having a large number of very similar styles with one value different, and keeps the css file smaller.

And you can reuse the pos1 etc for other elements of your design that you think need the positioning controlled this way (assuming there isn't an image using that position of course.)
eg <h2 class="pos2">.....

An id of pos2 rather than a class might be more semantically correct, but does that matter?