• Resolved flush

    (@flush)


    What’s the syntax to have 2 images display alongside each other, not one above the other?
    //a href=”imagepath” rel=”lightbox” title=”title”>
    img src=”imagepath” width=”150″ height=”120″ alt=”caption” //a href=”secondimagepath” rel=”lightbox” title=”title”
    img src=”secondimagepath” width=”150″ height=”136″ alt=”caption”

    And while I’m at it, how do you show code in the forum…?

Viewing 14 replies - 1 through 14 (of 14 total)
  • You can float an image to the right and float an image to the left. so something like
    <img src="blah.jpg" style="float:left;" /><img src="blah2.jpg" style="float:right;" />

    You probably want to assign classes to them in your stylesheet. Just make sure that the images can fit within the width of the container. Also, you can either use the backticks or wrap the word code in brackets [].

    Thread Starter flush

    (@flush)

    The style=float displays all messed up. Isn’t there a <span thing possible here?
    What do backticks do?

    Read the text under the ‘Send Post>>’ button below.

    What you’re trying to do is controlled by css. If the floats don’t work, it’s because of your css. Find out what’s currently defined for displaying images in (*drumroll*) your css.

    The backticks allow you to show code. I said that the images would screw up if they didn’t fit within your container.

    Thread Starter flush

    (@flush)

    Well both images put side by side are smaller than the width of the column, if that’s what you mean.
    <a href="https://raphaella.co.kr/blog/photo/goldvishtel.jpg" rel="lightbox" title="The Goldvish Phones">
    <img src="https://raphaella.co.kr/blog/photo/goldvishtel.jpg" width="150" height="120" alt="The Goldvish Phones" /></a><a href="https://raphaella.co.kr/blog/photo/goldvishill.jpg" rel="lightbox" title="The Goldvish Phones">
    <img src="https://raphaella.co.kr/blog/photo/goldvishill.jpg" width="150" height="136" alt="The Goldvish Phones" /></a>

    And what is their margin and padding set to? Are they set to display inline or block?

    Once again: css.

    Thread Starter flush

    (@flush)

    I’ve just read about display inline on another site. It seems to be what I am looking for, however putting <p display: inline;> is incorrect so I’m searching the proper syntax.
    As for the margin and padding, if I wish them to be 0 do I still need to specify them?

    Thread Starter flush

    (@flush)

    Ok, I’ve made some progress, the images are now inline, but so is the “comments” and “edit” texts which should be at the end of the post, as if everything was now inline…
    Can someone just give me a hint? How do I tell it to stop putting things inline after the second image, is closing the tag
    not enough?
    <p style="display: inline;"><a href="https://raphaella.co.kr/blog/photo/goldvishtel.jpg" rel="lightbox"><img title="

    The Goldvish Phones" style="padding-right: 5px; padding-left: 5px; float: left; padding-bottom: 5px; margin-

    right: 5px; padding-top: 5px; border-color: grey" height="120" alt="The Goldvish Phones" src="https://raphaella.

    co.kr/blog/photo/goldvishtel.jpg" width="150" height="120" alt="The Goldvish Phones" border="0" /></a><a href

    ="https://raphaella.co.kr/blog/photo/goldvishill.jpg&quot; rel="lightbox"><img title="The Goldvish Phones" style="

    padding-right: 5px; padding-left: 5px; float: left; padding-bottom: 5px; margin-right: 5px; padding-top: 5px;

    border-color: grey" height="120" alt="The Goldvish Phones" src="https://raphaella.co.kr/blog/photo/goldvishill.

    jpg" width="150" height="136" alt="The Goldvish Phones" border="0" /></a></p>

    Thread Starter flush

    (@flush)

    I can’t find out how to stop the effect after the second image, does anyone know?

    Thread Starter flush

    (@flush)

    Please?

    You have your P set to inline. That means anythign after it will be displayed next to it. If your *images* are meant to be inline, then you need to put it in the image tags, NOT the P tag.

    By the way, it’d be a lot better for your code if you put the stuff in your CSS, instead of right there in the tags. That’s the point of CSS – to separate style from content.

    Thread Starter flush

    (@flush)

    Thank you very much.
    I thought maybe I should try and make a class, so that I may call it whenever I have an image I wish to display inline.
    Does that make sense?

    That would be an excellent idea. That exactly what classes are for ??

Viewing 14 replies - 1 through 14 (of 14 total)
  • The topic ‘display 2 images horizontally in a post’ is closed to new replies.