CODEWITHSUNDEEP
htmlcss
Aijaz
Aijaz

Reputation: 730

How can I get this image done in HTML and CSS?

I have this image that is to be implemented in HTML and CSS.

enter image description here

This is what I have tried.

    <span>$</span><span style="font-size: 50px;">99</span><span style="vertical-align: text-top;">00</span>

But this actually doesn't turn out like I want in the image.

Upvotes: 1

Views: 151

Answers (7)

BastianW
BastianW

Reputation: 270

Another solution:

body {
  font-size: 20px;
}
.div-table {
  display: table;
  border-collapse: collapse;
}
.div-table .div-table-row {
  display: table-row;
}
.div-table .div-table-cell {
  display: table-cell;
  text-align: left;
  vertical-align: top;
}
.big-number {
  font-size: 50px;
}
.padding-top {
  padding-top: 5px;
}
<div class="div-table">
  <div class="div-table-row">
    <div class="div-table-cell padding-top">
      $
    </div>
    <div class="div-table-cell">
      <span class="big-number">99</span>
    </div>
    <div class="div-table-cell padding-top">
      <div>00</div>
      <div>/month</div>
    </div>
  </div>
</div>

http://jsfiddle.net/gbx0ogqm/

Upvotes: 0

maťo
maťo

Reputation: 1302

For example:

.price {
  font-size: 80px;
  color: #f60;
}
.price sup {
  font-size: 38px;
}
.price sub {
  font-size: 28px;
  color: #aaa;
  position: absolute;
  display: inline-block;
  margin: 48px 0 0 -40px;
}
<span class="price"><sup>$</sup>99<sup>00</sup><sub>/month</sub></span>

http://jsfiddle.net/1zjuddj8

Upvotes: 3

MrMike
MrMike

Reputation: 1540

It sounds like the <sup> tag is your friend here. Any text in the <sup> tags will become superscript.

Example

<sup>$</sup>99<sup>00</sup>

Additional Documentation/Reference from w3.org: http://www.w3.org/TR/html-markup/sup.html

Upvotes: 1

Andr&#233;
Andr&#233;

Reputation: 121

To duplicate it with accuracy, your code will have to be more involved than that. I've tried to match it as closely as I could here: http://jsfiddle.net/wvcm92ka/

The code is below:

HTML:

<div class="amount">
    <div class="amount-parts">
        <div class="amount-currency">$</div>
        <div class="amount-whole">99</div>
        <div style="clear: left;"></div>
    </div>
    <div class="amount-parts">
        <div class="amount-decimal">00</div>
        <div class="amount-period">/month</div>
        <div style="clear: left;"></div>
    </div>
    <div style="clear: left;"></div>
</div>

CSS:

.amount-parts{
    font-family: verdana, sans-serif;
    float: left;
}
.amount-currency, .amount-whole, .amount-decimal, .amount-period{
    font-weight: 600;
}
.amount-currency, .amount-whole, .amount-decimal{
    color: #ff0000;
}
.amount-currency{
    float: left;
    font-size: 32pt;
    font-weight: bold;
    margin-top: 5px;
}
.amount-whole{
    font-size: 60pt;
    float: left;
}
.amount-decimal{
    color: #ff0000;
    font-size: 24pt;
    font-weight: bold;
    margin-top: 15px;
}
.amount-period{
    color: #999;
    font-size: 10pt;
    font-weight: bold;
}

Upvotes: 0

Devin
Devin

Reputation: 7720

A solution which requires a bit more fine tuning, but has a lot of control, very useful for front-end layouts:

HTML code

<div class="price_tag">
    <div class="price"><sup>$</sup><span class="bignum">99</span><sup>00</sup>
</div>
    <div class="month">/month</div>
</div>

CSS code

    .price_tag {
    position:relative;
    width:190px;
    height:100px;
    color:#f90;
    font-size:6em;
    font-family:helvetica, arial, sans-serif;
}
.price {
    position:relative;
    width:200px;
    height:100px;
    font-weight:bold;
}
sup {
    position:relative;
    font-size:2.5rem;
    top:1rem
}
.month {
    width:60px;
    height:30px;
    color:#ccc;
    font-size:1rem;
    right:0;
    bottom:0;
    z-index:3;
    position:absolute;
}

fiddle here

Upvotes: 0

i alarmed alien
i alarmed alien

Reputation: 9530

You can use sup to make the text superscript and then set the position of the text using position: relative and top:

HTML:

<h1><sup>$</sup>99<sup>00</sup></h1>

CSS:

h1 { font-size: 50px; }
sup { font-size: 15px; 
   position: relative; 
   line-height: 0;
   vertical-align: baseline;
   top: -23px;
}

JS Fiddle

Upvotes: 0

c24b
c24b

Reputation: 5552

You have a specific tag for make your text appears on the top use <sup></sup> to treat it like an indice and <sub></sub> as a note. To force the alignement you will have to play with vertical-align value in px or in %. `

<sup style="vertical-align: 10;">$</sup><sub style="font-size: 50px;vertical-align:-10">99</sub><sup style="vertical-align: 10;">00</sup>

Upvotes: 0

Related Questions