Site Ratings & Reviews - Different size text on one line?

Author

Different size text on one line?

Macie

2004-08-17, 12:17 pm

Apologies if this is not the correct qroup in which to ask this
question, but here goes.....

On a page I had two words on one line of text that displayed as
different sizes, thus:

<div id="heading">
<h1 align="left">WORDONE<font color="#000000"><em><font
size="3">....WORDTWO</font></em></font></font></h1>
</div>

and the css was:

#heading {
LEFT: 0px; POSITION: relative; TOP: 0px
}
#heading H1 {
PADDING-RIGHT: 10px; BORDER-TOP: #006 2px solid; PADDING-LEFT:
10px; FONT-SIZE: 30px; BACKGROUND: #cc99ff; PADDING-BOTTOM: 5px;
MARGIN: 25px 0px; COLOR: #000000; PADDING-TOP: 5px; BORDER-BOTTOM:
#006 2px solid

This would not validate under 4.01 strict due to the use of 'color'
and 'size'.

It's now tidied up and validates, but I can't figure a way to get the
two words to display as different sizes without using the unsupported
elements.

Would creating a new new div [#heading2] and positioning that relative
to #heading be the way to go?

Cheers

--

Macie

Neal

2004-08-17, 7:17 pm

On Tue, 17 Aug 2004 16:12:51 +0100, Macie <me@privacy.net> wrote:

> Apologies if this is not the correct qroup in which to ask this
> question, but here goes.....
>
> On a page I had two words on one line of text that displayed as
> different sizes, thus:
>
> <div id="heading">
> <h1 align="left">WORDONE<font color="#000000"><em><font
> size="3">....WORDTWO</font></em></font></font></h1>
> </div>
>
> and the css was:

If you're using CSS, why bother with the font element? And why have you
opened 2 font elements but closed three?

Anyway...

> #heading {
> LEFT: 0px; POSITION: relative; TOP: 0px
> }
> #heading H1 {
> PADDING-RIGHT: 10px; BORDER-TOP: #006 2px solid; PADDING-LEFT:
> 10px; FONT-SIZE: 30px; BACKGROUND: #cc99ff; PADDING-BOTTOM: 5px;
> MARGIN: 25px 0px; COLOR: #000000; PADDING-TOP: 5px; BORDER-BOTTOM:
> #006 2px solid

I assume the closing } was inadvertently omitted. One good reasonm to post
a demonstrative URL instead of snips of code.

A few tips - 0px can be just 0, no unit is required with 0. And in fact,
position: relative; has 0 offset as default, so the #heading style can be
simplified to {position: relative;}.

Your CSS is all mixed up on the second one (h1). Let's comb the fur. Note
the shorthand I used on padding for example.

#heading h1 {
font-size: 30px;
color: #000000;
background: #cc99ff;
padding: 5px 10px;
margin: 25px 0;
border-bottom: 2px solid #006
}

First, you set the font size in px. This may be larger or smaller than the
default rendered size of h1 in the user's browser. IE cannot resize px
text easily. Advise not using absolute units for WWW fonts. Stick to % or
em.

> This would not validate under 4.01 strict due to the use of 'color'
> and 'size'.

More exactly, because of font.

> It's now tidied up and validates, but I can't figure a way to get the
> two words to display as different sizes without using the unsupported
> elements.

Assuming it is an h1:

<h1>Word one<span>Word two</span></h1>

With this CSS:

h1 {font-size: 200%;}
h1 span {font-size: 150%}

> Would creating a new new div [#heading2] and positioning that relative
> to #heading be the way to go?

Why would positioning at all affect font size? I don't understand why you
need that here.

Macie

2004-08-17, 7:17 pm

On Tue, 17 Aug 2004 11:49:17 -0400, Neal <neal413@yahoo.com> wrote:

>If you're using CSS, why bother with the font element?

Because I don't know what I'm doing! Still very much as the 'working
through a css book' stage, and whilst bits in isolation make some
sense, the whole picture is very fuzzy.

>
>Assuming it is an h1:
>
><h1>Word one<span>Word two</span></h1>
>
>With this CSS:
>
>h1 {font-size: 200%;}
>h1 span {font-size: 150%}

Excellent. Thanks for that [although it didn't work at first because I
put the css inside the existing heading div.]

>Why would positioning at all affect font size? I don't understand why you
>need that here.

See para.1.

Cheers

--

Macie

Neal

2004-08-17, 7:17 pm

On Tue, 17 Aug 2004 17:38:35 +0100, Macie <me@privacy.net> wrote:

> On Tue, 17 Aug 2004 11:49:17 -0400, Neal <neal413@yahoo.com> wrote:
>
>
>
> Because I don't know what I'm doing! Still very much as the 'working
> through a css book' stage, and whilst bits in isolation make some
> sense, the whole picture is very fuzzy.
>

Check out http://www.w3schools.com - some good HTML and CSS tutorials
there.

I think what you should concentrate on at first is thinking of HTML as a
semantic markup language, meaning that the markup denotes what the role of
that content is on a page. In other words, h1 is used only for a primary
heading, p is used only for an actual paragraph, lists are marked up with
list markup, etc.

Once you have a largely non-presentation-oriented semantic understanding
of the HTML 4.01 Strict elements, then begin affecting the presentation
with CSS only. Search this ng for websites done by the regulars - many
good examples of this.

To explain one thing I did in my reply: the span element is useful for
marking up an inline bit of content for styling which doesn't have a
corresponding element that fits better. Its companion, div, is a block
element (in simple terms, block elements like p and h1 have line breaks
before and after) which is useful for marking up something which really
doesn't fit the description of anything we have an element for. For
example, if you wanted a special border around the h1 and its following p
element, you can put both in one div and give a border to the div.

Read up, feel free to ask questions over at alt.html if you're stuck.