Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

I am trying to layout a list vertically that has a checkbox, image and description....

see here for an example...

http://www.sk8loc8.com/deposit/list.jpg

As you can see the images look a bit too high and i would like them to 'sink' a little to line up with the text and checkbox.

i put them in a table to get around the issue, but it acts just the same as an unordered list and the image sits higher.

i tried using valign=top for the text and checkbox but this doesnt seem to work, neither does adding a bottom-margin to the text, or adding a top-margin to the image.

does anyone have any advice?

here is the markup...

<table id="mapLegend" class="mapLegendTable" border="1" cellpadding="5px">
        <tr title="A skatepark we know exists">
            <td valign="top"><input type="checkbox" /></td>
            <td><img src="assets/images/gIconRedDot.png" alt="Skatepark" /></td>
            <td valign="top">Park</td>
        </tr>
         <tr title="A skatepark we strongly recommend">
            <td valign="top"><input type="checkbox" /></td>
            <td><img src="assets/images/gIconYellowStar.png" alt="Recommended Skatepark" /></td>
            <td valign="top">Recommended Park</td>
        </tr>
         <tr title="A Skater Owned Shop">
            <td valign="top"><input type="checkbox" /></td>
            <td><img src="assets/images/gIconSkateshop.png" alt="Skate Shop" /></td>
            <td valign="top">Skate Shop</td>
        </tr>
         <tr title="A skatepark we do not know anything about. It MAY exist but we do not know for sure">
            <td valign="top"><input type="checkbox" /></td>
            <td><img src="assets/images/gIconUnconfirmedSpot.png" alt="Unconfirmed Skatepark" /></td>
            <td valign="top">Unconfirmed Park</td>
        </tr>
    </table>

and the old code, as an unordered list...

<ul id="mapLegend">
                <li id="parkIcon" title="A skatepark we know exists">
                    <img src="assets/images/gIconRedDot.png" alt="Skatepark" /><span>Park</span></li>
                <li id="recommendedParkIcon" title="A skatepark we recommend">
                    <img src="assets/images/gIconYellowStar.png" alt="Skatepark" />Recommended Park</li>
                <li id="shopIcon" title="A Skater Owned Shop">
                    <img src="assets/images/gIconSkateshop.png" alt="Skatepark" />Skate Shop</li>
                <li id="unconfirmedParkIcon" title="A skatepark we do not know anything about. It MAY exist but we do not know for sure">
                    <img src="assets/images/gIconUnconfirmedSpot.png" alt="Skatepark" />Unconfirmed
                    Park</li>
            </ul>
share|improve this question
add comment

closed as off topic by Su', paulmorriss Feb 1 '13 at 10:50

Questions on Webmasters Stack Exchange are expected to relate to webmastering within the scope defined by the community. Consider editing the question or leaving comments for improvement if you believe the question can be reworded to fit within the scope. Read more about reopening questions here.If this question can be reworded to fit the rules in the help center, please edit the question.

1 Answer

up vote 1 down vote accepted

The list will do. You need to apply the 'vertical-align:top' style to the images. I usually use 'middle' for this which looks a little better for one-liners.

This can be done in your image direction, as in:

<img src="assets/images/gIconRedDot.png" alt="Skatepark" style="vertical-align:top"/>

Or by CSS:

#mapLegend li img {
vertical-align:top;
}
share|improve this answer
    
that worked perfectly, thanks –  Baldy Apr 10 '11 at 15:58
add comment

Not the answer you're looking for? Browse other questions tagged or ask your own question.