Treehouse: Grow your CSS skills. Land your dream job.


  • # August 12, 2012 at 2:22 pm

    Hello everyone,
    I am looking to get some help on how to do a similar layout as the example below. I really like the layout of equipment. Thanks!

    # August 12, 2012 at 3:20 pm

    However you tackle this, do NOT duplicate their layout method – its horrible!

    I would make it a simple unordered list. I’d make the list items a fixed width and height, float them left and text-align: center. Done.

    # August 12, 2012 at 4:22 pm

    Ok thanks for the heads up. Is there anyway you can show me what you mean in a jfiddle or something?

    # August 12, 2012 at 8:41 pm

    You can also do it this way
    When you’ll use pics and they all going to be same height and width you can remove that class .img-box from CSS and replace it in HTML with picture
    If they not going to be same height you will set the img-box to tallest pic
    Also if there’s going to be more then one line of text you have to handle this accordingly with height of .box1
    By the way. Remove that gray background, it was just for presentation to fake the pics.

    # August 12, 2012 at 9:03 pm

    @jurotek thanks so much! just one last questions. How do I insert my own image like

    # August 12, 2012 at 9:04 pm
    # August 12, 2012 at 9:10 pm

    Remember to set the height and width of image in HTML but don’t use those values to scale the image
    Also you can remove width of class img-box or remove it completely if your pics are same height


    # August 12, 2012 at 10:03 pm

    Forgot to say that the width of the picture should be same as width of the box1 width .

    # August 12, 2012 at 11:07 pm

    jurotek has helped already, but I thought I’d post my example anyway

    # August 13, 2012 at 12:44 am

    @jurotek and @wolfcry911 Both of you, thanks so much for taking the time to teach me your examples. I saved them both for future references and I am very happy how mine looks on the website now.

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

You must be logged in to reply to this topic.