Need Help With Doctype!

**Deunan** · 05-24-2008, 01:38 AM

Hello.

Ok, the problem is this: At first I didn't know what a doctype was, or why to use it. So, I understand it's like a set of coding laws, and you can use certain doctypes to validate your site. OK. That being said and done, no matter what doctype I set into my HTML coding, it would mess it ALL up. I finally inserted this doctype:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

This worked and did not mess up my layout. (I have not yet put the layout on the web. It is my first created one.)

So, I took it, and uploaded to to the W3C Validator, and it told me it did not pass validation, and had the following errors, which I did not understand.

No Character Encoding Found! Falling back to UTF-8.
None of the standards sources gave any information on the character encoding labeling for this document. Without encoding information it is impossible to reliably validate the document. As a fallback solution, the "UTF-8" encoding was used to read the content and attempt to perform the validation, but this is likely to fail for all non-trivial documents.

Error:
document type does not allow element "BODY" here.
<body bgcolor="#F7F7EB">... And document type does not allow element "BODY" here.<body>--------------------------------------------------------------------
My html looks like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>

<LINK href="style.css" rel="stylesheet" type="text/css">
<title>Serious Blush</title>
</head>
<body style="overflow: hidden">
<body bgcolor="#F7F7EB">
<body>

<div style="position=absolute; top:0; left:100; width:200; height:300; border:#000000 1px dotted; background-color:#A7A9AC;">
<p>
Hello!<br>
This is my first layout. The girl is Maki Goto. I was so confused I left it a minimal layout. For that reason, you can have permission to change it a little, but please keep the credits, and rightful links. And contact me to let me see it! ^^ As for the credits and thanks, the site from which obtained the Maki picture is no longer up, and I was unable to find it, which is why it is not listed. The name of it was Jiban. </p>
</div>

<div style="position=absolute; bottom:0; left:100; width:200; height:290; background-color:##F7F7EB;">
<p>Credits and Thanks:<br>
<a href="

**cbeaudin** · 03:00 AM

The charset is defined in the head tag so that the browser knows what laguage and what type of character you are using in your HTML. If your website is in plain english and you dont have special characters on your page your most likely using UTF-8.
http://www.w3.org/TR/REC-html40/charset.html

Add this in between your head /head tags:
<meta http-equiv='Content-Type' content='text/html; charset=utf-8;'>

As you said, with a doctype you must follow sets of rules to make sure that you are writing proper HTML. There are many rules you can learn all of them probably by searching google.

The body error is because you have three beginning body tags. Instead of this:

HTML Code:

<body style="overflow: hidden">
<body bgcolor="#F7F7EB">
<body>

Use this:

HTML Code:

<body style="overflow: hidden;background-color:#F7F7EB">

And you have to make sure that your HTML has the coresponding </body> tag at the end of your HTML before the </html> tag.

Also read this:
http://www.webmaster-talk.com/html-f...-should-i.html

**Deunan** · 05-24-2008, 03:08 AM

Ah., OK. I've done what you said and everything is ok. I actuallyl ended up fixing that <body> error by simply putting it in my CSS.

But, now I have a new question. What do you mean by corresponding script?
I fixed the autoflow by putting it into the CSS, which worked. I don't understand the use of the Javascript or how it must correspond with the <body...> tag.

**wayfarer07** · 05-24-2008, 09:21 AM

If you want some advice, I would pretty much not worry about Javascript much, until you have a good handle on HTML and CSS. You can put together complete webpages without Javascript anyway, so it won't slow down your learning to ignore it for now.

The association between the <body> tag and Javascript is usually with the onload="" event, although there are cleaner and better ways of doing this, such as using the window.onload="" between <script> tags in the <header>...

**LadynRed** · 05-24-2008, 11:43 AM

You also need to get rid of all that position:absolute. It can and will cause you problems and it's a very bad habit to get into. Learn to use the normal document flow for your layout, along with floats, and you'll be on a better track.

**Deunan** · 05-24-2008, 01:57 PM

Hm, unfortunetly, I've gotten into the habit of using absolute, so I guess I'll have to break it. When yoiu say normal flow of your document, what do you mean? Do you mean I should start using the floats which are placed in the html and css like div id=apples (html) with #apples (css) ?

**Gilligan** · 05-24-2008, 05:59 PM

Basically, position absolute can be replaced with floats and positioned correctly with widths, paddings, margins etc. This way not only does it look the same (or better), it also agrees with the correct document flow

**Deunan** · 05-24-2008, 11:34 PM

Well, I though I might try uploading the layout onto Geocities or Bravenet, but you can't see it correctly on either one of those.

I had a similar conversation on here before about floats. I still can't seem to grasp it, or the fact it seems you can only position them to the left or right...I'm simply have the damnest time trying to understand. I've read pages on how to use them as well...

So, absolute positioning needs to be changed. The alternative seems to relative positioning.

*sigh*

**Deunan** · 05-25-2008, 12:30 AM

OK, so I decided that obviously I need to learn how to use floats and get away from absolute positining. I'm a still not sure about the latter, but I wanted to focus on the Floats since I figured that might cover the Absolute. So with the layout, I copied it all, but wiped out the content to see if I could start over using the floats.

I first decided, "Well, I'd like to use the whole body as my big box, since I feel the need to make a container box.

As of right now, my html looks like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<LINK href="style.css" rel="stylesheet" type="text/css">
<title>Serious Blush</title>
</head>
<body>
<div id="container">

</div>

</body>
</html>

(I was going to makr the "container" which I simply wanted the body to be the container).

The CSS looks like this:

body
{
background: #F7F7EB;
font-family: verdana;
color:#000000;
font-size: 7pt;
overflow: hidden;
}

div#container { width:0px; height:0px; margin:0px; background-color:#000000; }

Even though I want my bg color to be what's under BODY I put 000000 to see if it was taking effect. Since I wanted the body to be my container, I set all the attributes to 0, thinking that would do the trick. I didn't.

**Deunan** · 05-25-2008, 01:20 AM

Ok, I've start from scratch and uploaded this:

http://www.geocities.com/tatlntokyo/

I haven't gotten to floating anything. Want I wanted to gain was control of the div through the CSS first. The goal I wanted, was instead of having that space between the block and the page, I wanted it right up agaisn't the top, since that was how I wanted the original layout to be.

However, I couldn't seem to get it up agaisn't the top, and I didn't want to use the Aboslute positioning.

I'm sorry if I seem to be going all over the place. Please bear with me

**Deunan** · 05-25-2008, 01:26 AM

Oh, sorry, my CSS for that last post was this:

#container { position:relative; width: 40px; height: 50px; background-color:FF0033;}

(The Edit button was not working. )

**LadynRed** · 11:14 AM

Quote:

or the fact it seems you can only position them to the left or right...I'm simply have the damnest time trying to understand.

Yes, and no. The normal document flow is top to bottom, and outside-in. So instead of thinking in absolutes, which I think of as nailing bits in place, think top down, outer to inner. So, in a 2 column layout with a header and footer, header comes first, under that your content area, which might be a left column for navigation (floated) and a right column for content, and that section is followed, at the bottom with your footer.

When you use absolutes for everything, you REMOVE everything from the document flow, and that means that none of the positioned elements react anything else.

Here's a step-by-step tutorial on floats:
http://css.maxdesign.com.au/floatutorial/

And an exception resource on CSS layouts of all kinds:
http://css-discuss.incutio.com/?page=CssLayouts

Quote:

I couldn't seem to get it up agaisn't the top, and I didn't want to use the Aboslute positioning.

Always start by ZEROING OUT the default margins and padding, like this:

body, #container, ul, li, #nav, a{margin: 0; padding: 0;}

Add any other elements you're going to use to that comma separated list to clear default margins and padding.
The top:xx you have in your example isn't necessary.

**Deunan** · 05-27-2008, 11:49 PM

Ah, ok, I think I understand the margin now. What I discovered ealier was that I could use a -# to get it closer to the top, and I could have used a left/right: #px; to decide where to put it if I wanted it that close.

But it's just easier to control the margin and use left/right.

Ok, so I've made progress on that.

-Will check back here again soon.

**Deunan** · 05-30-2008, 12:19 AM

OK, I created an extra mini container (container2) to test on the page. Since I set the body and it's margin to zero, when I floated it right, it went all the way to the right. However in the same tag I put margin-bottom: 400px; to test it and it didn't move the container at all.

The css looks like this for it: (The div being focused on is #container2)

body
{
background: #F7F7EB;
font-family: verdana;
color:#000000;
font-size: 7pt;
overflow: hidden;
margin: 0; padding: 0;
}

#container { position: relative; left:100px; width:200px; height:300px; background-color:#A7A9AC; border: 1px dotted; }
#hearts { position: relative; left:100px;top: 2px; width:200px; height: 25px; background-color:#F7F7EB;}
#container2 { width:100px; height: 100px; background-color:#A7A9AC; float:right; margin-bottom: 400px; }

**LadynRed** · 05-30-2008, 12:01 PM

Quote:

when I floated it right, it went all the way to the right.

It did exactly what you told it to do

Quote:

However in the same tag I put margin-bottom: 400px; to test it and it didn't move the container at all.

What makes you think it would ? All that does is add a 400px gap at the bottom.

Why do you have overflow:hidden on the body ?

When you use floats, you must make sure you CLEAR the floats too:
http://css-discuss.incutio.com/?page=ClearingSpace

**Deunan** · 05-31-2008, 01:12 AM

I'm sorry LadynRed. I read that link, which I kjnow you have given me before, and I peered at it so much, but I did not understand. It was very technical to me. In fact, the examples codes they gave I could not understand. Please don't think I've been ignorant of any links you havr given me, I have looked at them all.

However, I added the overflow:hidden; in case I had something go "over the link", so that it would not scroll.

And I though by adding the margin-bottom, it would be pushed UP by 400 px. I found I can only almost completely adjust it's height by adding a margin-top tag.

I am wondering if it may be because I am using the body as a "container" instead of having created a container that "covers" the body.

**LadynRed** · 05-31-2008, 10:01 AM

You don't have a whole lot of control using the body as the 'container', which is why 99% of the CSS-based layouts you'll see use some kind of additional container or 'wrapper' that holds all the rest of their layout.

Can you explain just what it is you're trying to achieve here ? Do you have a particular layout in mind ?

You can't use margins to control the height of an element. You need to start with CSS from the very basics, and one of those basics is understanding the box model.
http://css-discuss.incutio.com/?page=BoxModel
http://css-discuss.incutio.com/?page=ElementWidth

I took what code you have, cleared the float and adjusted the CSS:

Quote:

body
{
background: #F7F7EB;
font-family: verdana;
color: #000000;
font-size: 7pt;
margin: 0;
padding: 0;
}

#container {
position: relative;
margin-left: 100px;
width: 200px;
height: 300px;
background-color: #A7A9AC;
border: 1px dotted red;
}
#hearts {
width: 200px;
height: 25px;
background-color: #b8b960;
}
#container2 {
width: 100px;
height: 100px;
background-color: orange;
float: right;
}
#footer{
height: 25px;
background: #ff69b4;
clear:both;
}
</style>
</head>
<body>

<div id="container">
<div id="hearts">
hearts
</div>
<div id="container2">

container2
</div><

<div id="footer">footer</div>

</div>

The footer has clear:both on it, with will clear the floated container2, and in this case, keeping the footer below the rest of the content.

**Deunan** · 12:42 AM

My original layout was this:

http://smg.photobucket.com/albums/v1...urrent=blu.jpg

The wing, the girl, the text, and a single heart are separate .png images.

And that footer= do I have to have a footer? Is that something that is necessary?