SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict capescafe's Avatar
    Join Date
    Dec 2004
    Location
    Bellevue, WA
    Posts
    222
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Question text baseline shift

    just wondering is it possible in CSS to adjust the baseline of text...i've been searching online to try to see but can't find anything.

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

    Do you mean vertically aligning text within a single line.

    Heres an example.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Inline layout model</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    <!--
    .test {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
    }
    .test span {
    font-size:12px;
    vertical-align:bottom
    }
    .test em {
    font-size:8px;
    vertical-align:top
    }
    .test strong {
    font-size:10px;
    vertical-align:baseline;
    color:green;
    }
    -->
    </style>
    </head>
    <body>
    <div class="test">
    <p>Hello this is some text <span>This is some more text on the bottom</span><strong> and this is some text on the baseline</strong><em> and some more text at top</em></p>
    </div>
    </body>
    </html>
    Vertical align is a bit tricky at the best of times and only refers to inline elements in a single line (or table cell).

    Browsers do vary also.

    Paul

  3. #3
    SitePoint Addict capescafe's Avatar
    Join Date
    Dec 2004
    Location
    Bellevue, WA
    Posts
    222
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    well not exactly...i've got this image as part of the text line and in the image there's a "y" and the end so the image box goes below the end of the "y". so therefore when in the image i say style="vertical-align:bottom" the text next to the image appears lower, because it's aligning with the bottom of the image.

    i tried using line-height which works as far as the first line appears, but it's too much space between lines i think. i'm not quite sure how to solve the problem.

    i updated my site: here

    thanks so much, Paul, for all your help. i've got lots to learn in CSS.

    carolyn

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,389
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi Carolyn,

    I'd just shift that little bit of text downwards with some styles applied directly to it. You don't want a large line height all the way through that block I wouldn't have thought.

    Code:
    td.maintext {vertical-align: top; padding-top: 0px; margin-top: 0px; padding-left: 10px; padding-right: 10px;}
    td.maintext p {margin:0 0 1em 0;padding:0}
    td.maintext p img{vertical-align:middle}
    td.maintext p span{position:relative;top:5px;}
    Code:
    	  <td width="595" class="maintext"><p><img src="http://www.capeedesign.com/TolCon/images/intro-text.jpg" width="285" height="38" alt="The Northwest Tolkien Society" /> 
    		  <span>is pleased to present TolCon 2005, the second</span> Annual Tolkien Convention, 
    		  a celebration of all things Tolkien!</p></td>

    Hope that helps.

    Paul


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
  •