Results 1 to 5 of 5
Dec 26, 2011, 19:46 #1
- Join Date
- May 2010
- Okemos, Michigan, USA
- 1 Post(s)
- 0 Thread(s)
Aligning the elements in a vertical-list
I wrote a vertical list in html who's first <li> contains an image and I was wondering how to align that <li> and the other <li>'s so that the the bottom of the image is in-line with where would be if the other elements in the vertical list, which are just text, were written on a line.
Here is the html:
<ul> <li><a href="#"><img src="home.gif" /></a></li> <li><a href="#">List item</a></li> <li><a href="#">List item</a></li> <li><a href="#">List item</a></li> <li><a href="#">List item</a></li> <li><a href="#">List item</a></li> <li><a href="#">List item</a></li> </ul>
So I want the bottoms of each of the items inside the anchors to be aligned. What i mean above by if the text were written on a line was like so. "g", "p", "y", etc have tails or parts of the letter that are underneath the line that letter like "o", "a", "G", "P, "Y", "e", etc are just on top of.
I am trying to align the bottom on the image in the first <li> with that line that the letters in the other <li>'s are written on. And I was wondering if someone could help me accomplish this with css.
I think a great example of this is the directory / forums-navigation below on this page or any page in the sitepoint-forumsó disregarding the arrows, VNd3J.png is essentially exactly what i am trying to accomplish.
How the bottom of the home-icon and the line, the text would be on, are inline.
I hope someone can help me with this or at least some ideas on how to approach this.
Thanks in Advance & Kind Regards,