SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    369
    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

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    HI,

    You can do it like this for all browsers but you need an extra element.
    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;
    	padding:0;
    	list-style:none;
    }
    ul li {
    	margin:0 0 2px 0;
    	height:78px;
    	background:#aaa;
    	width:190px;
    }
    ul li a {
    	background:#aaa url('pic.png') no-repeat 8px 12px;
    	color:black;
    	display:inline-block;
    	font:1em/1.2 Helvetica, sans-serif;
    	padding:0 0 0 70px;
    	text-decoration:none;
    	vertical-align:bottom;
    }
    ul li b{
    	display:inline-block;
    	vertical-align:bottom;
    	height:100%;
    	margin-right:-5px;
    	width:1px;
    	overflow:hidden;
    }
    </style>
    </head>
    
    <body>
    <ul>
    		<li><a href="#">One</a><b></b></li>
    		<li><a href="#">Two - Second Line of Text</a><b></b></li>
    		<li><a href="#">Three</a><b></b></li>
    		<li><a href="#">Four</a><b></b></li>
    </ul>
    </body>
    </html>

    For ie8+ you could just use the display table and table-cell properties with vertical-align:bottom.

  3. #3
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    369
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul O'B Thanks for your reply - your code gives me this.

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

    I've been trying to do it myself and came up with this.

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

    It's probably completely wrong but this is how I wanted it to look.

    Also I wanted to change the image on hover. With my idea I would have to use jQuery, surely this can't be that hard.


    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{
    	   position:relative;
    	   padding:5px;
    	   background:#aaa;
    	   color:black;
    	   display:block;
    	   font:1em Helvetica, sans-serif;
    	   text-decoration:none;
    	   width:170px;
    	 }
    	 ul li a img{
    	   margin:5px 0 0 5px;
    	 }
    	 ul li a span{
    	   display:block;
    	   position:absolute;
    	   left:70px;
    	   bottom:10px;
     	   width:100px;
     	 }
    	</style>
    </head>
    
    <body>
      
      <ul>
        <li><a href="#"><img src="pic.png" /><span>One</span></a></li>
        <li><a href="#"><img src="pic.png" /><span>Two - Second Line of Text</span></a></li>
        <li><a href="#"><img src="pic.png" /><span>Three</span></a></li>
        <li><a href="#"><img src="pic.png" /><span>Four</span></a></li>
      </ul>
    
    </body>
    </html>

  4. #4
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    369
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok so I've got it working with <span>, <em> tags and position:absolute.

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

    Will this code cause me any problems? Does it look like a hack?

    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{
    	   position:relative;
    	   padding:5px;
    	   background:#aaa;
    	   color:black;
    	   display:block;
    	   font:1em Helvetica, sans-serif;
    	   text-decoration:none;
    	   width:170px;
    	 }
    	 ul li a span{
    	   background:url('pic.png') no-repeat top left;
    	   display:block;
    	   margin:5px 0 5px 5px;
    	   width:50px;
    	   height:50px;
    	 }
    	 ul li a:hover span{
     	   background:url('test.gif') no-repeat top left;
     	 }
    	 ul li a em{
    	   display:block;
    	   position:absolute;
    	   left:70px;
    	   bottom:7px;
     	   width:100px;
     	   font-style:normal;
     	 }
    	</style>
    </head>
    
    <body>
      
      <ul>
        <li><a href="#"><span></span><em>One</em></a></li>
        <li><a href="#"><span></span><em>Two - Second Line of Text</em></a></li>
        <li><a href="#"><span></span><em>Three</em></a></li>
        <li><a href="#"><span></span><em>Four</em></a></li>
      </ul>
    
    </body>
    </html>

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    That's ok but would suffer if the user resizes the text or if you have more lines of text and then it will overflow.

    I would reverse it and absolutely place the image so that text resize isn't an issue and then use the method I gave to align the text but use a minimum height.

    e.g.
    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;
    	padding:0;
    	list-style:none;
    }
    ul li {
    	margin:0 0 2px 0;
    	padding:10px 0;
    	min-height:50px;
    	background:#aaa;
    	width:190px;
    	position:relative;
    }
    * html ul li { height:50px }
    ul li a {
    	color:black;
    	display:inline-block;
    	font:1em/1.2 Helvetica, sans-serif;
    	padding:0 0 0 70px;
    	text-decoration:none;
    	vertical-align:bottom;
    }
    ul li b {
    	display:inline-block;
    	vertical-align:bottom;
    	height:50px;
    	margin-right:-5px;
    	width:1px;
    	overflow:hidden;
    }
    ul li span {
    	position:absolute;
    	left:10px;
    	top:10px;
    	width:50px;
    	height:50px;
    	background:green;
    }
    </style>
    </head>
    
    <body>
    <ul>
    		<li><a href="#"><span></span>One</a><b></b></li>
    		<li><a href="#"><span></span>Two - Second Line of Text </a><b></b></li>
    		<li><a href="#"><span></span>Three</a><b></b></li>
    		<li><a href="#"><span></span>Four</a><b></b></li>
    </ul>
    </body>
    </html>

  6. #6
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,801
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    remember that along with Paul's methods, you can always use the :after pseudo element , if you don't want to muck up your HTML.
    Code:
    ul li:after, ul li span.after{ 
           content:""; 
    	display:inline-block;
    	vertical-align:bottom;
    	height:100%;
    	margin-right:-5px;
    	width:1px;
    	overflow:hidden;
    
    }
    ul li {	zoom:expression(
      		runtimeStyle.zoom=1,
      		insertAdjacentHTML('beforeEnd','<span class="after"></span>')
      	);}

  7. #7
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    369
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul O'B

    I need to have the image as a background so I can change it with hover

    I can change your code to include the image and change it with hover but with your code only the text is in the <a> and not the whole button.

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

    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;
    	padding:0;
    	list-style:none;
    }
    ul li {
    	margin:0 0 2px 0;
    	padding:10px 0;
    	min-height:50px;
    	background:#aaa;
    	width:190px;
    	position:relative;
    }
    * html ul li { height:50px }
    ul li a {
      border: 1px solid red;
    	color:black;
    	display:inline-block;
    	font:1em/1.2 Helvetica, sans-serif;
    	padding:0 0 0 70px;
    	text-decoration:none;
    	vertical-align:bottom;
    }
    ul li b {
    	display:inline-block;
    	vertical-align:bottom;
    	height:50px;
    	margin-right:-5px;
    	width:1px;
    	overflow:hidden;
    }
    ul li span {
      background:url('pic.png') no-repeat top left;
    	position:absolute;
    	left:10px;
    	top:10px;
    	width:50px;
    	height:50px;
    }
    ul li a:hover span {
      background:url('test.gif') no-repeat top left;
    }
    </style>
    </head>
    
    <body>
    <ul>
    		<li><a href="#"><span></span>One</a><b></b></li>
    		<li><a href="#"><span></span>Two - Second Line of Text </a><b></b></li>
    		<li><a href="#"><span></span>Three</a><b></b></li>
    		<li><a href="#"><span></span>Four</a><b></b></li>
    </ul>
    </body>
    </html>

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    I suppose I should have asked at the start but it looks like you want the whole gray block to be active and if so you can do it like this:

    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;
    	padding:0;
    	list-style:none;
    }
    ul li {
    	margin:0 0 2px 0;
    	min-height:50px;
    	background:#aaa;
    	width:190px;
    	position:relative;
    }
    * html ul li,* html ul li a { height:50px }
    ul li a {
    	border: 1px solid red;
    	color:black;
    	display:block;
    	font:1em/1.2 Helvetica, sans-serif;
    	padding:10px 0 10px 70px;
    	text-decoration:none;
    	min-height:50px;
    }
    ul li span {
    	display:inline-block;
    	vertical-align:bottom;
    }
    ul li b {
    	display:inline-block;
    	vertical-align:bottom;
    	height:50px;
    	margin-right:-5px;
    	width:1px;
    	overflow:hidden;
    }
    ul li em {
    	background:url('http://www.ttmt.org.uk/css4/pic.png') no-repeat top left;
    	position:absolute;
    	left:10px;
    	top:10px;
    	width:50px;
    	height:50px;
    }
    ul li a:hover{visibility:visible}/* ie6 fix */
    ul li a:hover em { background:url('http://www.ttmt.org.uk/css4/test.gif') no-repeat top left; }
    </style>
    </head>
    
    <body>
    <ul>
    		<li><a href="#"><span><em></em>One</span><b></b></a></li>
    		<li><a href="#"><span><em></em>Two - Second Line of Text </span><b></b></a></li>
    		<li><a href="#"><span><em></em>Three</span><b></b></a></li>
    		<li><a href="#"><span><em></em>Four</span><b></b></a></li>
    </ul>
    </body>
    </html>
    (You can use more semantic elements or spans with classes if you want).

    Works all the way back to ie6.


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
  •