CODEWITHSUNDEEP
htmlcss
Taku_
Taku_

Reputation: 1625

Image and text position in list inline elements

I am trying to design a web-page where I have a list of bands, and every image will be a small set picture of the band logo(or something). I am setting the style inline and I have tried vertical-align and line-height etc and nothing seems to work.

I am pretty sure I could accomplish this with tables but I have been told many times that is not the proper use of the table.

    <div id ="Content">
        <ul>
            <li><img src="IMG_3117.jpg"width="100" height="100"/>band name</li>
            <li><img src="IMG_3117.jpg"width="100" height="100"/>band name</li>
            <li><img src="IMG_3117.jpg"width="100" height="100"/>band name</li>
            <li><img src="IMG_3117.jpg"width="100" height="100"/>band name</li>
            <li><img src="IMG_3117.jpg"width="100" height="100"/>band name</li>

        </ul>
    </div>

Here is the small amount of CSS I have

    #content li{display:inline;}
    img {
    max-height:100px;
    max-width: 100px;
    }

   #content ul{list-style-type: none;
    clear:left;
   }

Any help or tips would be greatly appreciated

Upvotes: 0

Views: 907

Answers (3)

technophobia
technophobia

Reputation: 2629

If I understood what you're trying to do, try this:

#content li {
    display: inline-block;
    background-color: #eaeaea;
    border: 1px solid red;
    text-align: center;
    max-width: 100px;
    white-space: nowrap;
    overflow: hidden;
    margin: 5px;
}

img {
    max-height:100px;
    max-width: 100px;
    display: block;
}

#content ul{
    list-style-type: none;
    clear:left;
}​

Have a look at it here: http://jsfiddle.net/zDhKQ/

Upvotes: 1

PearsonArtPhoto
PearsonArtPhoto

Reputation: 39698

I believe you want the align tag. Something like this:

<li><img src="IMG_3117.jpg" alt="Smiley face" width="42" height="42" align="left">This is some text.
</li>

Will result in something that looks nice.

Upvotes: 0

Tys
Tys

Reputation: 3610

My best guess is that you are looking for this: 

#content ul li {
   float:left; 
}

otherwise you'd have to be a bit more specific on what you are trying to accomplish.

Upvotes: 1

Related Questions