Grow your CSS skills. Land your dream job.

horizontal layout

  • # July 26, 2010 at 3:40 pm

    Hello

    I am developing a wordpress site and my client is asking for a horizontal layout.

    This is basically what they are asking:
    http://www.simontornby.dk/layout.png

    I can’t seem to figure out how to make wp align my images horizontally.

    Any help would be much appreciated.

    Thanks
    Simon

    # July 26, 2010 at 4:56 pm

    You could go .post img { float:left;} but that would line all the images side by side, that wouldnt get them to fit snugly together like you have in your image, at least not the first one. The only what I can think of it working is manually, and thats the opposite of what wordpress is for you know?

    But what I think you can do is create some classes that will arrange the images in the way you want so when you create a post, just click the image, and apply the class you want. If you do it like that you’re gonna need to have a good mental picture of how you want it to turn out.

    I hope that made sense.

    # July 27, 2010 at 3:58 am

    hi

    thanks for the quick reply.

    I am still battling with this though.
    I am actually considering making my client make 1 big image containing the collage of smaller images. I really think that wordpress’ way of handling images is difficult to work with.

    /S

    # July 27, 2010 at 4:34 am

    Actually I can’t seem to make my images to float left.

    I have tried .post img {float:left} but they still align vertically.

    Also i want to seperate my text and images in my content. Is there a default class for paragraph text in wordpress? If i start changing just p, it affects the images as well…

    /Simon

    # July 27, 2010 at 5:48 am

    ok.

    It seems that the "big image" solution is applicable. My client apparently doesn’t mind the extra load time.

    Now the question is more about the relationship between my .post img and .post p

    Here is how the basic layout will be:
    http://www.simontornby.dk/layout2.png

    The big image will vary in width and the p will have a fixed width and will be floating right of the image.

    This is basic html, but I can’t seem to make it work with wp. The post content (img and p) seems unseperable.

    Usually I would clear the floats between the images and the text, but i can’t figure it out with the php…

    Any help with this would be much appreciated.

    Thanks
    Simon

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".