Images in Worpress posts

Discussion in 'CSS' started by sharkyx, Jun 5, 2007.

  1. #1
    I need help. I want to insert images in CSS div, in a wordpres post so i may put a description of the image ( like :"Photo taken by John") under the picture. I've already experimented with some divs like:

    <div style="float: left; display: block; ">
    <!--image here-->
    description here
    </div>

    But it doesn't it doesn't work well if i have a description longer then the picture's width. Also if i set a width to the div my CSS goes berserk. If someone knows how to implement something like this i would be very grateful. Thanks.
     
    sharkyx, Jun 5, 2007 IP
  2. yogesh sarkar

    yogesh sarkar Well-Known Member

    Messages:
    1,740
    Likes Received:
    75
    Best Answers:
    0
    Trophy Points:
    140
    #2
    If you are adding almost the same width images then you can put the CSS code for the image div in the main CSS file of your template.
     
    yogesh sarkar, Jun 5, 2007 IP
  3. sharkyx

    sharkyx Peon

    Messages:
    809
    Likes Received:
    37
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Yes but the text doesn't rap arround the width. If i enter a desctiption longer then the width i have to manually hit enter and go the next line. I'm looking for some wordrap parameters. I'm not very good with CSS, sadly.
     
    sharkyx, Jun 5, 2007 IP
  4. Katy

    Katy Moderator Staff

    Messages:
    3,490
    Likes Received:
    513
    Best Answers:
    7
    Trophy Points:
    355
    #4
    So, do you want the description to wrap around the picture or to appear under it?

    If you want it to wrap, simply do it like this:

    <img src="image.jpg" align="left">
    Text text

    If you want it to appear under the picture:

    <img src="image.jpg">
    <p style="clear: both;">Text text</p>

    Hope this helps! :)
     
    Katy, Jun 6, 2007 IP
  5. sharkyx

    sharkyx Peon

    Messages:
    809
    Likes Received:
    37
    Best Answers:
    0
    Trophy Points:
    0
    #5
    I want the description to apear under the picture, and wrap around the picture width. Text will apear on the picture's right or left. I know how to do that, but i don't know how to make a nice looking description under the picture with out damaging the theme.
     
    sharkyx, Jun 6, 2007 IP
  6. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Since it appears the image you are using is structural in nature, I'd go with the IMG element as previously stated. Then set the image to display: block; so the text sits underneath it. Also be sure to set a width on the DIV container to hold the image and the text.
     
    Dan Schulz, Jun 6, 2007 IP