CODEWITHSUNDEEP
css
alrightgame
alrightgame

Reputation: 391

horizontal list with image and text

For each list item, I want an image with text below the image. I read on this technique, but it is not supported in IE. Instead, I'm floating the list items to the left. It does the trick except the content below the list wraps to the right. How do I prevent the content from wrapping this way? Here is my code: 

<style>
    .horizlist{
        list-style:none;
        text-align:center;      
    }
    #menulist ul{
        width:360px;
    }
    #menulist li{
        float:left;
        padding-right:50px;
    }
    #menulist li img{
        display:block;
    }
</style>
<div id="container" style="">
    <div id="top">
        <img src="joblove.jpg" style="float:right;">
        <div id="title" style="width:500px;text-align:center;">
        <h1>"THE TOUGHEST JOB YOU'LL EVER LOVE:"</h1>
        <p style="font-size: 1.6em;">A RESOURCE FOR THOSE THINKING ABOUT A CAREER IN DIRECT CARE</p>
        </div>
    </div>
    <div id="menulist">
        <ul class="horizlist" >
            <li>
                <a href="home"><img src="images/purplestyle_11_home.png"></img><span>Home</span></a>
            </li>
            <li>
                <a href="brochure"><img src="images/purplestyle_01_heart.png"><span>Brochure</span></a>
            </li>
            <li>
                <a href="video"><img src="images/purplestyle_05_cut.png"><span>Video</span></a>
            </li>
            <li>
                <a href="personality"><img src="images/purplestyle_15_buddies.png"><span>Personality</span></a>
            </li>
            <li>
                <a href="resources"><img src="images/purplestyle_03_folder.png"><span>Resources</span></a>
            </li>
            <li>
                <a href="FAQ"><img src="images/purplestyle_02_talk.png"><span>FAQ</span></a>
            </li>
        </ul>
    </div>
    <img src="phone.jpg">
    <ul class="horizlist">
        <li><button type="button">Click </li>
        <li></li>
    </ul>

</div>

Upvotes: 1

Views: 5751

Answers (2)

Corinne Kubler
Corinne Kubler

Reputation: 2092

Add an height to #menulist in css :

 #menulist ul{
    width:360px;
    height:100px;
 }

Upvotes: 1

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114347

Use CSS backgrounds. They give you more control over image positioning and require less mark-up.

HTML:

<a class="home" href="home">Home</a>

CSS:

.horizlist a {
   display:block;
   background-repeat:no-repeat;
   padding-top: 20px;
   padding-left: 20px
   background-position: 10px 10px;

a.home {
   background-image:url(/images/purplestyle_11_home.png);
}

Can can adjust the padding and background-position values to suit. Repeat as needed.

Upvotes: 0

Related Questions