cant get text to sit next to each other

my text sits below down a line..

[ezyid]

hello there im new to css annd i like it.
but im having two issues with it.

first:
i make a new line in my text and i end up with a huge gap i.e.

down here..

how can i fix this? i have tryed line spacing but it wont work.. i think its cause im using the shorthand to css. i understand the order goes font: <font-style> <font-variant> <font-weight>
<font-size> <line-height> <font-family> but when put in the line height it hates me...

next issue: whenever i place some code i.e. <h1>blah</h1>
<h2>yes</h2>
it always makes the new line of thext go down a line..

and i wand it to read "blah yes"

but i get

"blah

yes"

any help would be great.
thankyou very much!

steve.

[valder]

try "h1, h2, h3 {display:inline;}"

I think that'll work.

[ezyid]

mate,
YOU ARE THE MAN!
thankyou soo much!

now to the line spacing you have any ideas for that?

Thankyou soo much again.
steve.

[ezyid]

actually im unsure if is does lol
im habing issues with .. why does it go all wrong with i change the h1, h2, h3 to some more like h4, h5, h6?

thanx again.
steve.

[valder]

Are you sure it's not a syntax error?

Do you have commas between each entry?
And semi-colons after each line?
Correct spelling?
Proper closed html tags?

Anyway, I guess it should be something like this:

h1, h2, h3, h4, h5, h6 {display:inline;}

If that's not it, I guess it may be a browser error.
It's working for me anyway, I'm using firefox 1.0.

[valder]

About the line spacing; I guess margin is the property you seek.

Go here to learn about it;
[w3schools.com...]

You should also go through their tutorials while you're there. W3schools is a good place to start learning.

[edited by: SuzyUK at 10:15 am (utc) on Dec. 18, 2004]
[edit reason] link correction [/edit]

[ezyid]

thankyou guys ill try some of those tricks!

[ezyid]

also do you feel that i should be using class or is it acceptible to just use h1, h2 e.t.c?
thanx again.

[SuzyUK]

ezyid

next issue: whenever i place some code i.e. <h1>blah</h1>
<h2>yes</h2>
it always makes the new line of thext go down a line..

it will.. <h1> thru <h6> are heading elements which follow the block formatting context [w3.org]. The "semantic nature" of a heading suggests it should be in its own block at the top of a set of paragraphs, lists.. etc.. Like a newspaper headline

A flow element which follows the block formatting context will always create it's own 100% wide block by default, thus giving you a line break between each one.. examples of elements which do this: <h1-6>, <p>, <div>, <blockquote>, <form> etc..

All of the above elements also generally have default margins which is what creates the vertical gap when they are stacked vertically, because generally you would want gaps between your paragraphs or a gap between a heading and a paragraph.

If the gap you are getting is too big/small you can override the defaults by setting your own e.g. h1 {margin: 0;} which will set all four (top right bottom left) margins to zero, or h1 {margin: 1em 0 0.5em 0;} sets top margin to 1em and bottom margin to 0.5em. (see the link already provided for more on margin property)

As suggested by valder, you can, by changing the display type of the element to display:inline; (which is overriding the natural "display: block;" behaviour) force them to display side by side (inline). But you must change the display properties of both block elements involved.. so if you wanted your <h1> element to display inline with a paragraph you need to change the default display setting on both the <h1> and the <p>...

If you are using your <h1> and <h2> elements like this to control visual formatting (the size of the text?) then I would suggest that it's not necessary.. it could instead be done something like this:
<h1>Large text part of heading ~ <span>then make this bit smaller</span></h1>

which keeps all the text in the context of a <h1> heading but allows you to visually format the text inside the <span> element differently from the rest of the <h1>

example CSS:
h1 {
font-size: 20px;
color: #000;
margin: 0.5em;
}

h1 span {
font-size: 14px;
color: #f00;
font-weight: normal;
}

If you genuinely have two different level headings ie. Heading and sub-heading, which you just want to "run together" then display inline would be the way to go..

example:
HTML:
<h1>First level heading</h1><h2>second level heading</h2>

CSS:
h1 {
font-size: 20px;
color: #000;
margin: 0.5em;
display: inline;
}

h2 {
font-size: 14px;
color: #f00;
font-weight: normal;
display: inline;
}

use of classes may or may not be necessary it depends on if you have other <h1>, <h2>'s on the page which need to do something different?

Suzy

and :: Welcome to WebmasterWorld valder! ::

[ezyid]

wow i think i have it all wrong then..
cos what i have is 1 main heading and all my body text is the same font.. and what i have basically done is make all my body text in heading tags h1, h2 e.t.c
for my main text should i really be using span and class?
i understand what h tags do and they pretty much control the text how i want but really.. do i need to use class paragraph and dir tags when the h tags do basically the same job?

all i want to do is save my kb's and make it look the best and easily control all of my sites text in one foul swoop..
any ideas?

thankyou VERY MUCH again.
steve.