Multiple line, image bulleted list issue

Im making some adjustments on a page and want to make a ul, that has multiple line list with different image for each li item.

the code is:
    <ul>
            <li class="punta">Punta del Este<br />Maldonado</li>

            <li class="bsur">Barrio Sur<br />Montevideo</li>

            <li class="tsolis">Teatro Solis<br />Montevide</li>
     </ul>

and the css is:

#uruguay li{font-family:Arial, Helvetica, sans-serif;
color:black;
font-size:11px;
list-style:none;
margin-left:-35px;
margin-top:20px;
font-weight:bold;
text-indent:110px;
height:75px;
background-repeat:no-repeat;
}

li.punta {
background-image: url(../images/uruguay/pic1.jpg);
}

li.bsur {
background-image: url(../images/uruguay/pic2.jpg);
}

li.tsolis {
background-image: url(../images/uruguay/pic3.jpg);

}

While #uruguay is the div id that contains the ul.
I decided to have all lists under #uruguay with the same format, but change the bkg image on each li i tell the class.
The problem is that text indent just applies to the first line. I want to have the multiple line text aligned.

thanks
ChangOcc23Asked:
Who is Participating?

[Webinar] Streamline your web hosting managementRegister Today

x
 
mreuringConnect With a Mentor Commented:
Well, the trick is simply to use padding-right on the list-item instead of text-indent, other than that there's nothing wrong with your idea :) I do it all the time...


#uruguay li{
font-family:Arial, Helvetica, sans-serif;
color:black;
font-size:11px;
list-style:none;
margin-left:-35px;
margin-top:20px;
font-weight:bold;
padding-right:110px;
height:75px;
background-repeat:no-repeat;
}

Open in new window

0
 
ChangOcc23Author Commented:
the address is wrong sorry, and i cant upload the address right now. so I explain further: The idea is the following: I want to have a multiple item list, with different "bullet" for each li item, and also with lultiple line text for each item.
thanks
0
All Courses

From novice to tech pro — start learning today.