Grow your CSS skills. Land your dream job.

Layout

  • # 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!

    http://www.finning.ca/Products/Equipment/New_Equipment/Default.aspx

    # 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

    @schill
    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
    Edit:
    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




    Description



    # 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.

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