On my site I have the site name in an H1 tag but I want the domain extension displayed outside the H1.

E.g. <h1>Site</h1>.com

How do I do that so it lines up?

Do I put the .com in a <p> or a <span> or something else?

At the moment the .com is on the next line.

thanks.

Set display: inline; and float: left; on the h1 and set clear: right on the h2

Originally Posted by chrishirst

Set display: inline; and float: left; on the h1 and set clear: right on the h2

sorry I put h2 in there by accident. what should i put around the .com part if it's not h2?

Why does it need to be "outside"?

<h1>hostname<span>.com</span></h1>

then style the span to suit.

h1 span {
     font-size: 0.5em;
}

the rule above will set the text in the span to be half the size of the heading.

Originally Posted by chrishirst

Why does it need to be "outside"?

<h1>hostname<span>.com</span></h1>

then style the span to suit.

h1 span {
     font-size: 0.5em;
}

the rule above will set the text in the span to be half the size of the heading.

It doesn't need to be outside, but I want it a different size and colour. It's also probably better for the just the keyword to be in the h1 tag.


This is what I have done.

#headBanner h1 {font-size: 102px;
font-family: Arial, Helvetica, sans-serif;
color: #056FFF;
font-weight: bold;
}

#headBanner h1 span {font-size: 80px; color: #cccccc;}


<h1>Title<span></h1>.com</span>


I get this as a result.

Title
.com

The span doesn't seem to be working.

<h1>Title<span></h1>.com</span>

Your code is improperly nested, the CORRECT code would be:
<h1>Title.<span>com</span></h1>

Originally Posted by LadynRed

Your code is improperly nested, the CORRECT code would be:
<h1>Title.<span>com</span></h1>

Ooops! thanks, I missed that!