WordPress.org

Ready to get started?Download WordPress

Forums

Displaying Images Without Tables - how? (9 posts)

  1. Thea
    Member
    Posted 1 year ago #

    I want to display four images side-by-side on one of my pages. I used a table but can't get it to centre nicely. On researching how to fix it, I learned that using tables to display images is old hat.

    So I know I need to use code, but I can't find out how. Can someone point me in the right direction?

    I only want to have these four images side-by-side, it's not something I need to do anywhere else on the site.

    http://bellydanceoz.com

  2. vtxyzzy
    Member
    Posted 1 year ago #

    Here is an article with sample code that shows how to display posts in a row. You will need to adapt the code to your theme.
    http://wordpress.mcdspot.com/2010/11/28/align-posts-in-a-row/

  3. Thea
    Member
    Posted 1 year ago #

    Thanks vtxyzzy, but they're not posts. They are images.

  4. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    The CSS code would be the same concept -- you'd just be using images rather than divs for the posts. This reference page explains the CSS:

    http://www.w3schools.com/css/css_float.asp

  5. Krishna
    Volunteer Moderator
    Posted 1 year ago #

    If you want to use tables, try this:
    http://www.w3schools.com/tags/tag_table.asp

  6. Thea
    Member
    Posted 1 year ago #

    Thanks yogi. I can see what that's doing, but have no idea how to apply it to my page. I'm a total dunce at CSS I'm afraid, I'm not even sure where to paste it. Maybe I'll just live with it as is, thanks for trying to help!

  7. Thea
    Member
    Posted 1 year ago #

    Krishna, I have used a table, but I'm told that's not a good idea.

  8. Good Guy
    Member
    Posted 1 year ago #

    Perhaps you can do something like this:

    1) Setup your HTML like this:

    <div class="image-wrapper">
    <img class="special" alt="picture01" src="http://bellydanceoz.com/wp-content/uploads/bellydanceclass3.jpg">
    <img class="special" alt="picture01" src="http://bellydanceoz.com/wp-content/uploads/find-a-belly-dancer2.jpg">
    <img class="special" alt="picture01" src="http://bellydanceoz.com/wp-content/uploads/blog.jpg">
    <img class="last" alt="picture01" src="http://bellydanceoz.com/wp-content/uploads/dreamstime_xs_15712507.jpg">
    </div>

    Now setup your css like this:

    .image-wrapper {
    	text-align: left;
    }
    img.special {
    	float: left;
    	margin-right: 10px;
    	width: auto;
    	height: auto;
    	border: 2px blue solid;
    	padding: 2px;
    }
    img.last {
    	float: left;
    	width: auto;
    	height: auto;
    	border: 2px blue solid;
    	padding: 2px;
    }

    That is all there is to it.

    If you want to have text below or above the picture then you can put each individual image into its own DIV and have a P tag to add your text.

    Good luck.

  9. vtxyzzy
    Member
    Posted 1 year ago #

    @Thea, the code would be nearly identical. The only difference would be that you would display the image instead of the post content.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags