CODEWITHSUNDEEP
css
Jonathan
Jonathan

Reputation: 3534

CSS to style one line of text

I have a single line of text that looks like this:

GIVE US A CALL AT ###.###.###

I want the phone number to be significantly bigger than the text and I want it all bottom aligned within the div.

I can't seem to get this to work... what I am missing?

Current HTML:

<div class="accessSlogan">
   <div class="access-slogan-text">GIVE US A CALL AT </div>
   <div class="access-slogan-number">###.###.###</div>
</div>

Current CSS:

.accessSlogan{
    position: relative;
    float: right;
    display: inline;
}

.access-slogan-text {
    display:inline;
    font-size: 1.2em;
    line-height: 2em;
    padding-right: 6px;
    vertical-align: text-bottom;
}

.access-slogan-number{
    position: relative;
    float: right;
    display:inline;
    font-size: 1.8em;
    line-height: 2em;
    vertical-align: text-bottom;
}

Upvotes: 0

Views: 10273

Answers (4)

GlennG
GlennG

Reputation: 3000

Use the <strong> tag and style accordingly.

<div class="accessSlogan">
   GIVE US A CALL AT <strong>###.###.###</strong>
</div>

CSS:

.accessSlogan{
   float: right;
}

.accessSlogan strong {
    font-size: 1.8em;
    position:relative;
    bottom:0.4em;
}

The point is to use the existing "semantic" HTML to work with you and avoiding over-complicating things. The <strong> tag is what you mean, so use it:-)

The relative position of the strong text will need to be adjusted to align perfectly. 0.4em is a starting point (half of the extra height), but it depends upon the size of the accessSlogan text.

Upvotes: 1

roryf
roryf

Reputation: 30160

Both your markup and CSS seem over-complicated, although without knowing where this is to be positioned on a page it's hard to know if that's necessary or not.

At it's simplest this will achieve it:

.access-slogan {
    float: right;
    text-transform: uppercase;
}
.access-slogan .access-slogan-number {
    font-size: 1.8em;
}

<p class="access-slogan">Give us a call at <span class="access-slogan-number>###.###.###</span></p>

Note that you can't apply float and display:inline to an element since float applies display:block along with it's own document flow rules. You'll also note I've uppercased the text in CSS rather than in the source HTML, since this is a display artefact.

Upvotes: 1

Bonshington
Bonshington

Reputation: 4032

use <span> instead of <div>. It will solve your problem

<div>
 call me at <span>0000-000</span>
</div>

or

<div>
 <span>call me at</span><span>0000-000</span>
</div>

Upvotes: 0

andyb
andyb

Reputation: 43823

I think there is a much more minimal set of CSS you can use for this. Is this demo here what you were after?

Upvotes: 0

Related Questions