Grow your CSS skills. Land your dream job.

Displaying Horizontal Images

  • Wes
    # September 13, 2009 at 11:08 pm

    I know there is a way to do it but its just not working and I cannot remember it.

    http://melodicexistence.com

    the images in the box below "band spotlight" are not displaying horizontally

    here is the related code

    Code:
    #bandpic { width:350px; height:92px; background:url(/images/bandpicbg.jpg); float:left; margin-top:9px;}
    #bandpic img { width:75px; height:55px; float:right;}
    # September 14, 2009 at 12:49 am

    Since they are being floated right to display them horizontally you need to clear them to the right.. ie img {clear:right}

    # September 14, 2009 at 2:25 am

    I will have a few points to make here!

    1) Never, ever, ever resize images like that (using CSS or HTML). Always, and I mean always, resize your images locally and them upload them to the server. So you’ll probably have multiples of each image, image_one_thumb.jpg & image_one.jpg. Doing it as you’ve done will cause images to look warp and stretched. Gross.

    2) You have line breaks between each image, that will certainly cause some problems. In Firefox, for example, it’s causing the "Step Down" problem.

    3) You don’t need to have those images wrapped in a <p> tag. You’ve already got them wrapped in a div, the <p> tag will only cause editing problems later on. Especially if you’re using that <p> tag for positioning the images.

    Wes
    # September 14, 2009 at 9:41 am

    2 and 3 are defaults caused by WordPress I’ll see if I can edit that, and your 1 issue is for a client, he doesn’t want to resize his images every time he makes a post so I would appreciate it if you didn’t get on my case about it. I don’t know any other way to do it, so maybe I’ll look for a solution

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

You must be logged in to reply to this topic.

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