SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2009
    Location
    A small village called Aunsby,Lincolnshire,U K
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Captioning Images

    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

  2. #2
    SitePoint Member sagar2121's Avatar
    Join Date
    Jul 2009
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  3. #3
    SitePoint Guru james_littler's Avatar
    Join Date
    May 2007
    Location
    Portsmouth, UK
    Posts
    775
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    what are you trying to achieve?

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

  4. #4
    SitePoint Evangelist rhysboy84's Avatar
    Join Date
    May 2007
    Location
    Colwyn Bay, North Wales, UK
    Posts
    438
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    I'm Rhys Wynne & I blog at Winwar Media
    WP Email Capture: Free Email/Ebook Marketing Wordpress Plugin
    UK Based SEO? Tweet Your Location to #ukseohere!
    | My Brand New Brand | Twitter |

  5. #5
    SitePoint Enthusiast
    Join Date
    Jun 2009
    Location
    A small village called Aunsby,Lincolnshire,U K
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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 ?

  6. #6
    SitePoint Guru james_littler's Avatar
    Join Date
    May 2007
    Location
    Portsmouth, UK
    Posts
    775
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  7. #7
    SitePoint Evangelist rhysboy84's Avatar
    Join Date
    May 2007
    Location
    Colwyn Bay, North Wales, UK
    Posts
    438
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Next question, do you have examples? I.e. the page you are working on?
    I'm Rhys Wynne & I blog at Winwar Media
    WP Email Capture: Free Email/Ebook Marketing Wordpress Plugin
    UK Based SEO? Tweet Your Location to #ukseohere!
    | My Brand New Brand | Twitter |

  8. #8
    SitePoint Enthusiast
    Join Date
    Jun 2009
    Location
    A small village called Aunsby,Lincolnshire,U K
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    <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

  9. #9
    SitePoint Enthusiast
    Join Date
    Jun 2009
    Location
    A small village called Aunsby,Lincolnshire,U K
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  10. #10
    SitePoint Guru james_littler's Avatar
    Join Date
    May 2007
    Location
    Portsmouth, UK
    Posts
    775
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Is this live anywhere?

  11. #11
    SitePoint Enthusiast
    Join Date
    Jun 2009
    Location
    A small village called Aunsby,Lincolnshire,U K
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    no

  12. #12
    SitePoint Member
    Join Date
    Jul 2009
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    why not?

  13. #13
    SitePoint Member
    Join Date
    Jul 2009
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  14. #14
    SitePoint Wizard
    Join Date
    Jul 2003
    Location
    Kent
    Posts
    1,921
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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?


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •