treehouse : what would you like to learn today?
Web Design Web Development iOS Development

Forums

Illustration by Nick Sirotich

what is the best way to do this?

  • cybershot
    Permalink to comment #
    I am trying to create a new page without using tables. If you go to http://www.photobyiris.com/portfolio.html . you can see what i want to do.

    I just want to re create the page in the middle with the red square and the six images with the text next to them. I have been able to get 3 images into a line by using the <ul> tag. but then when i add the text, everything goes bad. I got one image and text in using float:left on the image and the text, but when i went for number 2. again, everything went bad.

    Any advice?

    thanks
  • laith
    Permalink to comment #
    I think a list will work fine for this. You could define a unique list item class for each image.

    ul.list1, ul.list2 {
    margin: ... ;
    padding: ... ;
    list-style: none;
    }
    ul.list1 li, ul.list2 li { font, padding, margin properties here }
    ul.list1 li.image1 {
    background: url(images/image1.gif) no-repeat 0 30%;
    }
    ul.list1 li.image2 {
    background: url(images/image2.gif) no-repeat 0 30%;
    }
    etc. ...
Add a Comment