Getting random jumps when using <div> tags (and some other help)

[sir whoopsalot]

I'm currently working on an assignment using HTML and CSS. Part of it requires removing all the layout stuff in HTML and converting it to CSS. I've just started and I'm already running into a snag.
I have some bold text alongside normal text in my paragraph. I'm putting the bold text in <div> tags, name them and edit them in my stylesheet.
However, when saving them and previewing them, every <div> section gets its own line in the website as well for some reason. It basically makes it look like this.
[quote]Brazilië ligt in
Zuid-Amerika, net onder Amerika.
Het werd ontdekt in 1500 door de Portugese ontdekkingsreiziger
Pedro Alvares Cabral.[/quote]
The second and 4th line are meant to be bolded. Here's my stylesheet (said bits of text are labeled 'bold1' and 'ontdekkerlink' respectively):

#hoofdtitel{
    text-align:center;
    font-size:250%;
}

#vlag{
    text-align:center;
}
#h1{
    text-align:center;
}
#bold1{
    font-weight:bold;
}
#ontdekkerlink{
    font-weight:bold;    
}

And, as you may have noticed, you may not be able to tell what the first word says. It's meant to say 'brazilië'. I tried editing it in Expression Web 4 (what I use) and Notepad++ but it still shows up like that.

Who can help me with these problems?

[Ddrl46]

Try using a <span>.

[X'Trapolis]

div's are block level elements by default.

What you'll want to do is use span, as ddrl46 suggested, apply the display:inline style to them, or perhaps use a more suitable tag in the first place?

[BrettJay]

What X'Trapolis and ddrl46 said. Divs are [b]logical divisions[/b] on a page (block level elements, which is why they display like that), so if you wanted to apply an ID or class, you'd want to use a span, which is inline by default.

Although in the case of formatting text bold, there's no need to an ID for that; wrap the desired text in a <strong> tag. If you happen to be using a CSS reset, just add a style declaration strong { font-weight: bold; } to your css, otherwise modern browsers by default should add a bold formatting to strong tags.

[url="http://www.tyssendesign.com.au/articles/faqs/what-is-divitis/"]Try to use <divs> and <spans> only where necessary[/url].

[sir whoopsalot]

[QUOTE=BrettJay;25396813]What X'Trapolis and ddrl46 said.

Although in the case of formatting text bold, there's no need to create a class or ID for that; wrap the desired text in a <strong> tag. If you happen to be using a CSS reset, just add a style declaration strong { font-weight: bold; } to your css, otherwise modern browsers by default should add a bold formatting to strong tags.

Try to use <divs> and <spans> only where necessary.[/QUOTE]
Perhaps I should've said that we need to convert ALL layout/formatting tags to CSS. That includes bolding text.

Can anyone tell me if CSS has a <tt> tag of sorts and how I set the background color of the page in CSS?

[X'Trapolis]

I give up :smith:

[sir whoopsalot]

[QUOTE=X'Trapolis;25397065]I give up :smith:[/QUOTE]

Why so glum chum?

Well, got all the CSS sorted out, pretty much. Just need to know if somebody has a solution to my font problem.

[Skorpy]

[QUOTE=Sir Whoopsalot;25396828]Perhaps I should've said that we need to convert ALL layout/formatting tags to CSS. That includes bolding text.

Can anyone tell me if CSS has a <tt> tag of sorts and how I set the background color of the page in CSS?[/QUOTE]

For bolding text you really should use <strong> because it's the right way to do it.

Page background color is set with

body {
    background-color: #000000; /* or any color */
}

For <tt> I don't know. Just make a class, put it for a span and change the font in it or something.

Just tried <tt> for first time and it looks horrible)

Edit:

Oh, and the brazilië -> BraziliÃ&#402;Æ&#8217;Ã&#8218;« is an encoding problem.

[mindexplosion]

Wait using <dev> in ticker actually does something, you know that?

[BrettJay]

[QUOTE=Sir Whoopsalot;25396828]Perhaps I should've said that we need to convert ALL layout/formatting tags to CSS. That includes bolding text.

Can anyone tell me if CSS has a <tt> tag of sorts and how I set the background color of the page in CSS?[/QUOTE]

That's not the point of CSS. CSS goes hand-in-hand with HTML elements. There's no need to reinvent the wheel per-se by manipulating divs and spans to replicate functionality already provided by HTML tags. Where possible, you should always use appropriate, existing html tags, and style them in CSS accordingly.

I'm confused when you say "we need to convert ALL layout/formatting tags to CSS". Layout should remain in HTML using HTML tags; HTML is the markup - the layout of a website and the way information is presented. While CSS should handle all styles and aesthetics that aren't related to the information presented on the page.

There's a difference between separating structure (HTML) from style (CSS) while still using appropriate HTML tags, and styling things in HTML using deprecated font tags or else slicing images into tables (which would be bad practice).

By the way, replace the ë with this in your markup:

ë

[torekk]

Depends if he's using ISO-8859-1 or UTF-8. In general you should declare the character encoding with:

<meta content="text/html; charset=ISO-8859-1" http-equiv="Content-Type" />