CODEWITHSUNDEEP
csshtml
Aasim Azam
Aasim Azam

Reputation: 508

How to make text on the same line different font without using extra divs?

I have an overlayed bar on an image and have text inside it, 

aasimAZAM

I want the aasim to be a thin font and the AZAM to be a bolder font.

My CSS is

h4 {position:relative; top:-60px; left: 0px; width: 100%; font-family:"Futura Bk BT"; color:#F00;}
h4 span { color: white; font: 12/24px Helvetica, Sans-Serif; letter-spacing: -1px; background: rgb(0, 0, 0); /* fallback color */ background: rgba(0, 0, 0, 0.7); padding: 8px;}
h5 {position:relative; top:-60px; left: 0px; width: 100%; font-family:"Futura Std ExtraBold";color:#F00;}
h5 span { color: white; font: 12/24px Helvetica, Sans-Serif; letter-spacing: -1px; background: rgb(0, 0, 0); /* fallback color */ background: rgba(0, 0, 0, 0.7); padding: 8px;

and the HTML is 

<div class="picturebox"><img src="images/001.jpg" width="192" height="192" alt="001" /><h4><span>aasim</span></h4><h5><span>AZAM</span></h5></div>

the problem is that the span is on two different lines?

how do I either fix this code so that the text is on the same line and span and have the different fonts? Or is there another way to do this?

Upvotes: 1

Views: 2360

Answers (3)

Sarath
Sarath

Reputation: 608

Didn't get why you are using position:relative; for the h4 and h5 tags

Anyway try the following css, code hope it useful for you 

h5 {
        color: #FF0000;
        float: left;
        font-family: "Futura Std ExtraBold";    
        padding: 8px;    
        width: auto;
    }


    h4 {
        color: #FF0000;
        float: left;
        font-family: "Futura Bk BT";    
        padding: 8px;   
        width: auto;
    }

Upvotes: 0

RealDeepak
RealDeepak

Reputation: 863

try this:

h4 { width: 100%; font-family:"Futura Bk BT"; color:#F00; display:inline; color: #dadada; font: 12/24px Helvetica, Sans-Serif; letter-spacing: -1px; background: rgb(0, 0, 0);  background: rgba(0, 0, 0, 0.7); padding: 8px; font-weight:normal}

h5 {width: 100%; font-family:"Futura Std ExtraBold";color:#F00; display:inline; color: #dadada; font: 12/24px Helvetica, Sans-Serif; letter-spacing: -1px; background: rgb(0, 0, 0);  background: rgba(0, 0, 0, 0.7); padding: 8px; font-weight:bold;}

And html should be:

<div class="picturebox"><img src="images/001.jpg" width="192" height="192" alt="001" /><h4>aasim</h4><h5>AZAM</h5></div>

Upvotes: 0

Flynn1179
Flynn1179

Reputation: 12075

It's nothing to do with the spans, <h4> and <h5> are already considered headers, which are always put on a new line.

If you don't intend on these being headers (which it doesn't like you do), don't use h<n> tags. If you have to, put display: inline; in the css for your <h4> and <h5> styles.

Upvotes: 2

Related Questions