Support » Fixing WordPress » Horizontal Images in a Post

  • Altstatten

    (@altstatten)


    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?

Viewing 15 replies - 1 through 15 (of 24 total)
  • kristarella

    (@kristarella)

    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.

    Altstatten

    (@altstatten)

    <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!

    moshu

    (@moshu)

    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

    Altstatten

    (@altstatten)

    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

    moshu

    (@moshu)

    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.

    Altstatten

    (@altstatten)

    moshu

    (@moshu)

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

    moshu

    (@moshu)

    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

    Altstatten

    (@altstatten)

    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.

    moshu

    (@moshu)

    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

    Altstatten

    (@altstatten)

    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?

    moshu

    (@moshu)

    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.

    Altstatten

    (@altstatten)

    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?

    moshu

    (@moshu)

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

    Altstatten

    (@altstatten)

    Is there a delete button in the house?

Viewing 15 replies - 1 through 15 (of 24 total)
  • The topic ‘Horizontal Images in a Post’ is closed to new replies.