frankieJr Posted March 21, 2007 Share Posted March 21, 2007 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 More sharing options...
S@m Posted March 21, 2007 Share Posted March 21, 2007 http://alistapart.com/articles/taminglists/ Link to comment Share on other sites More sharing options...
Nim199 Posted March 24, 2007 Share Posted March 24, 2007 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 More sharing options...
frankieJr Posted March 24, 2007 Author Share Posted March 24, 2007 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 More sharing options...
jlhaslip Posted March 24, 2007 Share Posted March 24, 2007 There is no List Item on this sample. Did you post the correct code?http://jlhaslip.trap17.com/samples/menus/sidebar_menu.html Link to comment Share on other sites More sharing options...
frankieJr Posted March 25, 2007 Author Share Posted March 25, 2007 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now