SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    American't awestmoreland's Avatar
    Join Date
    Sep 2002
    Location
    Grand Rapids, MI
    Posts
    1,168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Text with multiple height and vertical alignment on one line

    I've been asked by a customer to recreate as closely as possibe the following as text with CSS applied:


    Now to my knowledge there is no way of giving a colored border to each character, so I've accepted that without the use of graphics they're never going to achieve the green-yellow outline.


    My problem lies with the vertical alignment of each part of the line(s). Perhaps I'm applying the CSS to the wrong element, but the vertical-align: text-top appears to be having zero effect on the way the text is displayed.


    Here's what I currently have:
    Code:
    <html>
     <head>
      <style type="text/css">
       body{
    	text-align: right;
       }
    Code:
    .setPrice{ background-color: #CCCC33; vertical-align: text-top; font-size: 16px; line-height: 22px; } .setPrice .dollar{ font-size: 13px; vertical-align: text-top; } .setPrice .dollars{ font-size: 22px; font-weight: bold; }
    .setSavings{ font-size: 16px; xx_line-height: 18px; } .setSavings .dollar{ font-size: 11px; vertical-align: text-top; } .setSavings .dollars{ font-size: 18px; } </style> </head> <body> <div class="setPrice"><span class="dollar">$</span><span class="dollars">99</span>.95</div> <div class="setSavings">Save Over <span class="dollar">$</span><span class="dollars">99</span></div> </body> </html>


    Any ideas?



    Thanks,


    Andy
    From the English nation to a US location.

  2. #2
    Winemaster bronze trophy BonRouge's Avatar
    Join Date
    Oct 2004
    Location
    Sendai, Japan
    Posts
    2,417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think this is the best I can come up with :
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " http://www.w3.org/TR/html4/strict.dtd ">
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <style type="text/css">
    body {
    background-color:white;
    text-align: right;
    }
    .setPrice{ 
    background-color: #CCCC33; 
    font-size:1.5em; 
    line-height:0.9em;
    font-weight:bold;
    } 
    .dollar, .cents {
    vertical-align:30%;
    font-size:60%;
    }
    .setSavings{
    font-size: 1em;
    } 
    </style>
    </head>
    <body>
    <div class="setPrice"><span class="dollar">$</span>99<span class="cents">.95</span></div>
    <div class="setSavings">Save Over <span class="dollar">$</span>99</div>
    </body>
    </html>

  3. #3
    American't awestmoreland's Avatar
    Join Date
    Sep 2002
    Location
    Grand Rapids, MI
    Posts
    1,168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That works! I've changed the ems to pxs because it suits my design better, but otherwise it's ideal.


    Thanks very much for your help,

    Andy
    From the English nation to a US location.


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
  •