Get a free trial // Grow your CSS skills // Land your dream job

what is the best way to do this?

  • # June 1, 2008 at 8:10 pm

    I am trying to create a new page without using tables. If you go to . 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?


    # June 2, 2008 at 1:14 pm

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

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

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed