SitePoint Sponsor

User Tag List

Results 1 to 8 of 8

Threaded View

  1. #1
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    390
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Align text to link bottom

    Align text to link bottom

    Hi all

    I'm sure this is simple but I can't work it out.

    http://www.ttmt.org.uk/css/

    I have <a>'s in a list, they have text and an image as a background.

    I want to line the text to the bottom of the image but some of the text is on one line
    and some on two.

    Can I place the text on the bottom of the <a> and then apply padding so they are all level on the bottom.
    So it will look like the attached image.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    
    	<title>untitled</title>
    	<style type="text/css" media="screen">
    	 *{
    	   margin:0;
    	   padding:0;
    	 }
    	 ul{
    	   margin:50px;
    	   list-style:none;
    	 }
    	 ul li{
    	   margin:0 0 2px 0;
    	   
    	 }
    	 ul li a{
    	   background:#aaa url('pic.png') no-repeat 8px 12px;
    	   color:black;
    	   display:block;
    	   font:1em Helvetica, sans-serif;
    	   height:48px;
    	   padding:27px 0 0 70px;
    	   text-decoration:none;
    	   vertical-align:bottom;
    	   width:120px;
    	 }
    	</style>
    </head>
    
    <body>
      
      <ul>
        <li><a href="#">One</a></li>
        <li><a href="#">Two - Second Line of Text</a></li>
        <li><a href="#">Three</a></li>
        <li><a href="#">Four</a></li>
      </ul>
    
    </body>
    </html>
    Attached Images Attached Images


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •