css ... Argh Why?

The_KiD · 31 May 2007 at 23:27

Ok on a site I am trying to do this

Fire
Alarms
Emergency
Lighting

by making custom header tags <h4> and <h5>. H4 for the F, A, E, L and h5 for the ire, larms, mergency and ighting.

Except if I do <h4>F</h4><h5>ire</h5> it comes out as

F
ire

on seperate lines.

Regardless of what I put in the css under h4 and h5 they always come on seperate lines.

Why is this?

WotDa · 31 May 2007 at 23:30

Because, H tags are for headers, which normally go on separate lines.

Only suggestion I can offer is the dreaded size tags.

furnace · 31 May 2007 at 23:37

in a CSS file you could;

Code:

h4 {
    display: inline;
    color: #FF0000;
}
h5 {
    display: inline;
    color: #000000;
}

or just stick that in the <h4 style="display: inline; color: #FF0000;">F</h4><h5 style="display:inline; color: #000000;">ire</h5>

But tbh that's not what hX tags should be used for

this would be better:

<h4><span class="firstLetter">F</span>ire</h4>

Code:

h4 {
    /* whatever fonts etc here for the h4 tag */
    color: #000000;
}
h4 .firstLetter {
    font-size: 30px; /*or whatever size & styling you want*/
    color: #FF0000;
}

So it still appears properly to people with CSS turned off for one reason or another, and you're still making proper use of header tags this way (kind of

)

marc2003 · 31 May 2007 at 23:39

because headings are um.... headings and they are supposed to go on separate lines?

use span instead?

Code:

<span style="color: #FF0000">F</span>ire<br>
<span style="color: #FF0000">A</span>larm

edit: oops, too slow...

The_KiD · 1 Jun 2007 at 00:05

furnace said:
But tbh that's not what hX tags should be used for this would be better:

<h4><span class="firstLetter">F</span>ire</h4>

Code:

h4 { /* whatever fonts etc here for the h4 tag */ color: #000000; } h4 .firstLetter { font-size: 30px; /*or whatever size & styling you want*/ color: #FF0000; }

So it still appears properly to people with CSS turned off for one reason or another, and you're still making proper use of header tags this way (kind of )

Sweet thanks dude!

Augmented · 1 Jun 2007 at 06:46

Just use CSS instead of adding crufty <span> elements where they're not needed - there is a :first-letter pseudo-element:

Code:

h4:first-letter { 
color: red;
...and so on...}

Ensure that there's a space after the pseudo-element and before the opening bracket in your CSS, since there's a bug in IE6 that means it will ignore :first-letter if there's no space after it.

furnace · 1 Jun 2007 at 10:50

Use Augmented's idea

Never heard of :first-letter *notes it down*

Augmented · 1 Jun 2007 at 11:09

There's also the :first-line psuedo-element too

.