Jump to content

list-style-image


frankieJr
 Share

Recommended Posts

hey all , i'd like some help here since i spent more than 4 hours trying to figure how to align the text in <li> to match the marker next to it ..here is the code ... <ul> <li style="margin: 1em 1em ; list-style-image: url(pic1.gif)"> some text <br />more text ! </ul>the gif pic takes about 3 lines .. and the first text line is equal to the bottom of the pic , like this********* some text more text !any idea ?

Link to comment
Share on other sites

You could try the vertical-align property.

<head><style type="text/css">p {vertical-align:text-bottom}</style></head><body><p><img src"#">~Text!!!~</p></body></html>

If not, revise with the w3schools vertical-align try it editor.Thanks for reading.

Link to comment
Share on other sites

thx for that .. but i tried alot of things .. its either not working or working in a way i dont want it to be ... the best thing i came up with is this:<html><head><style type="text/css">img { position:absolute; top:10px ; margin-left: -60px }p { margin-left: 70px } </style></head><body><img src="pic.gif"><p>text <br />more text</p></body></html>but if u understand wat i was tryin to do .. is i want to make a list so when the user hover with the mouse over that area the background color changes ... with the code above i can only have an anchor to the text alone or both the pic and the text and even that way when the user hover with the mouse in between or around them .. background wont change .

Link to comment
Share on other sites

yea the second code was right ... i dint include a list in it cuz i wasnt able to align the text exactly infront of the pic .. but now its working ... i didnt use a list-style-image i just added an img to the <li> and put align="left" next to it ...<ul> <li > <img border="0" src="pic.gif" width="35" height="46" alt="" align="left" style="margin-top: 4px; margin-left: 6px; margin-right: 5px"><strong>text</strong><br> <span >more text</span> </li></ul>lol i think i would have saved much time doing that , thank u all

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...