WordPress.org

1. Altstatten
   Member
   Posted 2 years ago #

   Multiple images in a post currently display vertically and I would like them to go horizontal.

   This is probably a CSS thing but I only need it for a single page. How might I accomplish that?

2. kristarella
   Member
   Posted 2 years ago #

   I thought they would do that anyway if you haven't put any breaks in between them. Check your css to see if it has existing directions for images.
   You can float them left to get them to float next to each other. If for only a single page you can give them a special class in your css e.g.
   <img class="left" src="...
   then in css
   .left { float:left; margin: 2px; }
   forget the margin if you want them right next to each other. You can also do that where you're writing the post or page by doing
   <img style="float:left; margin: 2px;" src="...
   so you don't need the class or to edit your css file.

3. Altstatten
   Member
   Posted 2 years ago #

   <img style="float:left; margin: 2px;"

   I used this in the page and got the three pics to line up horizontally. How do I insert a "break" in the page to get the 4th pic to begin a new row of pics?

   I appreciate the help. And please SHOW me the text I need to use. Thanks!

4. moshu
   Member
   Posted 2 years ago #

   Put in your stylesheet this:
   

   .clearer {
   clear: both;
   }

   Then in your code after the third pic put this:
   <br class="clearer" />
   and start here the code for the forth pic

5. Altstatten
   Member
   Posted 2 years ago #

   Oh, you are a steeley-eyed missile man!! That worked perfectly. Nothing like clear instructions to get the job done.

   I'm inserting these pics via wp and inserting the "title" using that insertion option. If you could tell me how to get the title to line up underneat each pic I'd be beside myself with happiness! (Thanks again for the previous fix.)

   Picture Picture Picture
   Title Title Title

6. moshu
   Member
   Posted 2 years ago #

   Hmmm... I am not sure I understand this "title" thing. Are you using some kind of image plugin? Or is this some feature in the wysiwyg (visual) editor, which I never use?
   Show me an example, if you can.

7. Altstatten
   Member
   Posted 2 years ago #

   See if this helps.

8. moshu
   Member
   Posted 2 years ago #

   Sorry, but you are looking for something that isn't here.

9. moshu
   Member
   Posted 2 years ago #

   Aha, you corrected the URL :)
   Well, that won't happen (what you asked in the pic's text).
   Those "titles" are NOT for 'captions'. They are used to create the alt text for when hovering on an image.

   If I understand well what you wnat: http://codex.wordpress.org/Wrapping_Text_Around_Images#Captioning_The_Image

10. Altstatten
    Member
    Posted 2 years ago #

    Yeah I've read the ink right off that page but it's not very clear unless you already know what to do! It doesn't tell you whether the suggested code goes in the css or the post/page or ???

    All I want is a pic with a name under it.

    What goes in the css?

    What goes in the page?

    Thanks again.

11. moshu
    Member
    Posted 2 years ago #

    If it says: "So create a caption style ..." - obviously that goes in the css (cascading STYLE sheet)

    If it looks like html...
    <div class="whatever><img src="blah blah.../> </div>
    then it goes into your post.

    Depending on what you put in the stlesheet, the result might look like this

12. Altstatten
    Member
    Posted 2 years ago #

    If it looks like html...
    <div class="whatever><img src="blah blah.../> </div>
    then it goes into your post.

    I guess this is the part that's giving me trouble. Remember I'm trying to do two things; line up pics horizontally and put a caption under each one.

    <div class="whatever"><img style="float:left; margin: 2px;"img src="blah blah.../> </div>

    Correct or no?

13. moshu
    Member
    Posted 2 years ago #

    Correct if you put the CAPTION in:
    

    <div class="whatever"><img style="float:left; margin: 2px;"img src="blah blah.../>
    CAPTION HERE
     </div>

    Line breaks are important!
    And of course, replace the "whatever" with the things in the Codex.

14. Altstatten
    Member
    Posted 2 years ago #

    OK, I'm lost. I'm trying to communicate that I want pictures in a horzontal mode with a caption under each picture.

    If I place </div> at the end does the line not break?? How do I cachieve what you're telling me to do if the line breaks?

    Something like this:

    .caption { margin: 5px; padding: 5px; border: solid 1px #E5E5FF; background: #E5F2FF; font-size:90%; color: black }
    ...goes in my css file. Anything else go in the css file?

    Then this goes in my page file:
    <div class=".caption"><img src="http://sirspeedyaddison.com/wp-content/uploads/2007/06/peen-ceem-thumb.thumbnail.gif" alt="Peen Ceem" title="Peen Ceem">Peen Ceem</div>

    When I do exactly that, the pictures do some wacky things. What am I missing?

15. moshu
    Member
    Posted 2 years ago #

    <div class=".caption"> - wrong
    <div class="caption"> - correct (no need for the [.])

16. Altstatten
    Member
    Posted 2 years ago #

    Is there a delete button in the house?

17. Altstatten
    Member
    Posted 2 years ago #

    It wasn't me! See post three doors down.

18. Altstatten
    Member
    Posted 2 years ago #

    Exsqueezee me. See post two down.

19. Altstatten
    Member
    Posted 2 years ago #

    Sorry. You'd think I was new here...

20. Altstatten
    Member
    Posted 2 years ago #

    Okay, "uncle". Almost. I've tried to follow the directions above but I think there's some "assumed" knowledge in there somewhere and I don't know what it is. All I'm after is horizontally lined pictures EACH with a caption underneath.

    This is the only thing in my css that has to do with images.

    This is what the page contains.

    If someone could shed some detailed light on what I'm doing wrong I would be most greatful. Please don't make any assumptions about what I do and don't know about css. "Splain it to me! Please.

21. Sivar
    Member
    Posted 2 years ago #

    You should remove that "float:left" from the img-tag in your page code, and put it to .caption in your css.

22. Sivar
    Member
    Posted 2 years ago #

    Oh sorry, and maybe a <br/> here... ;)

    <div class="caption"><img src="http://sirspeedyaddison.com/wp-content/uploads/2007/06/preston-crum-thumb.thumbnail.gif" alt="Preston Crum" title="Preston Crum"><br/>Preston Crum</div>

23. Altstatten
    Member
    Posted 2 years ago #

    Okay. That helped but now I have pictures. It's time to get serious!!

    This is my css.

    This is the code in the page.

    This is the result.

    Again I'm after horizontal pics with the sales rep's name under the picture. What am I doing wrong?

24. Altstatten
    Member
    Posted 2 years ago #

    Just saw your post Sivar. That worked perfectly. Thanks a bunch. Been almost two weeks trying to get a good answer to that. Nothing like clear, unassuming instructions. Now go to bed. :)

25. jalker
    Member
    Posted 2 years ago #

    Hi, I tried all this, but my pictures are next to each other, but the second left is some pixels below the first one... and the text right to the second picture again is some picels below the second image. How can I resolve this?

Topic Closed

This topic has been closed to new replies.