The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> Style Error
Zouheir
post Apr 21 2016, 11:11 PM
Post #1





Group: Members
Posts: 7
Joined: 21-April 16
Member No.: 24,183
Hi there,

Oki, basically I am beginner trying to learn html css online. and I would really appreciate pros/expert to help me solve the below issue.

Error: Non-space characters found without seeing a doctype first. Expected <!DOCTYPE html>.
From line 1, column 1; to line 1, column 6
body {↩ fon

and this is how it is. saved as utf-8

I am totally lost I am just getting to understand the codes and how does it work. if you also give explaining for the resolve would be so thankful.

body {
font-family:Arial,helvettica,sans-serif;
background-color:#333333;
}
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Apr 22 2016, 04:43 AM
Post #2


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9
Are you aware of the structure of an HTML page?
See http://htmlhelp.com/reference/html40/structure.html and read http://diveinto.html5doctor.com .

The snippet you posted is CSS, that can be linked or embedded in several ways. See http://htmlhelp.com/reference/css/style-html.html .

Since you are a beginner, you might not understand what's written in the links I posted. If that's the case, just ask. And show us the entire page you are creating, so we might help you from there.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Apr 22 2016, 05:10 AM
Post #3


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
There are different validators for HMTL and CSS. If you are trying to validate a style sheet, i.e. a CSS file, here's the one you should use.

https://jigsaw.w3.org/css-validator/
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Zouheir
post Apr 22 2016, 11:49 AM
Post #4





Group: Members
Posts: 7
Joined: 21-April 16
Member No.: 24,183
QUOTE(Frederiek @ Apr 22 2016, 04:43 AM) *

Are you aware of the structure of an HTML page?
See http://htmlhelp.com/reference/html40/structure.html and read http://diveinto.html5doctor.com .

The snippet you posted is CSS, that can be linked or embedded in several ways. See http://htmlhelp.com/reference/css/style-html.html .

Since you are a beginner, you might not understand what's written in the links I posted. If that's the case, just ask. And show us the entire page you are creating, so we might help you from there.




thanks for your reply appreciate your time and effort.

I am totally beginner I know nothing about how to write codes and stuff. just started yesterday learning online. so for me to understand the link you sent me probably could happy but resolving issue way hard for a starter.

now on the video he opened a new notepad for linking a stylesheet. I did the same no damn mistake.

I am pretty sure the codes is totally right and nothing wrong about it now still doesnt show any background color.

the style.css file below

body {
font-family:Arial,helvettica,sans-serif;
background-color:#333333;
}

header {
width:80%;
background-color:black;
color:white;
margin-right:auto;
margin-left:auto;
}

section {

}

footer {

}

the html file below

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML5 and CSS3 Fundamentals</title>
<link rel="stylesheet" type="text/css" href="styles.css" media="screen">
</head>
<body>

<header>

<hgroup>
<h1>Channel9</h1>
<h2>HTML5 and CSS3 Fundamentals</h2>
</hgroup>

<nav>
<ul>
<li><a href="#">home</a></li>
<li><a href="#">about</a></li>
<li><a href="#">contact</a></li>
</ul>
</nav>

</header>

<section>

now both been validated as confirmed with no errors.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Zouheir
post Apr 22 2016, 11:51 AM
Post #5





Group: Members
Posts: 7
Joined: 21-April 16
Member No.: 24,183
QUOTE(pandy @ Apr 22 2016, 05:10 AM) *

There are different validators for HMTL and CSS. If you are trying to validate a style sheet, i.e. a CSS file, here's the one you should use.

https://jigsaw.w3.org/css-validator/



thanks pandy for your help appreciate it.

based on the link you gave me for validation. it shows no errors. but still doesnt do any background color which means its not being linked to the html file!!!!!!!!!!!!!!! drives me crazy.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Apr 22 2016, 04:25 PM
Post #6


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
Could you link to the page? If it isn't online, please attach both the HTML and CSS to your post or paste it all in if it's short. But if you can, please link.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Apr 22 2016, 04:52 PM
Post #7


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9
Well, I think that's all the OP has for the moment; nothing online. Apart from the missing closing tags to end the file, everything is there.

So I closed the necessary tags, pasted in the CSS and tested. I get a dark grey page with a black header, as intended so far I suppose.

Validating the HTML returned an error on the obsolete HGROUP element (just delete it) and one on the missing heading in the SECTION element. But since the rest of the page has not been written yet, that heading will come later upon continuing.

The CSS so far validates.

Since you use HTML5, it's a good idea to bookmark http://html5doctor.com as a reference to understand the elements of HTML5.

And reading the articles by Mark Pelgrim at http://diveinto.html5doctor.com will help you to learn too.

So, all in all, you're doing fine so far.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Apr 22 2016, 05:37 PM
Post #8


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
Sorry, missed the post with the markup and CSS. blush.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Zouheir
post Apr 22 2016, 07:53 PM
Post #9





Group: Members
Posts: 7
Joined: 21-April 16
Member No.: 24,183
Hey Freddie, Thanks for your help. Again, Would you tell me how you closed tags in the CSS file?

as for the html I deleted the hgroup. still it didnt work for me. its driving me crazy!

bear with me as I stated previously I just started so my first couple of help could look dumb just untill I discover how things goes!!!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Zouheir
post Apr 22 2016, 08:11 PM
Post #10





Group: Members
Posts: 7
Joined: 21-April 16
Member No.: 24,183
Oki Oki, I got it fixed,

so bassically the problem wasnt from the code at all and the problem was it didnt work on web explorer 9.0 but it worked now finally on google chrome.

appreciate it if you could explain to me why ?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Apr 22 2016, 09:32 PM
Post #11


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
I think Frederiek meant the closing tags for SECTION, BODY and HTML in your markup. You probably have them and just left them out when you pasted it here.

Does it still not work in IE9? I don't see why it wouldn't, but I don't have that version of IE so I can't try.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Apr 23 2016, 05:00 AM
Post #12


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9
Indeed, that's what I meant.
I don't have IE either, as that is no longer available on Mac.

Wow, you just started out and already stumbled upon browser inconsistencies.

It doesn't work in IE9 as it doesn't seem to support all HTML5 tags. See http://caniuse.com/#feat=html5semantic .

That probably means that unknown elements (or tags) need to be set to display: block;.
I suggest you use Eric Meyer's reset css for this. You can get that here: http://meyerweb.com/eric/tools/css/reset/ .

It will reset several browser default stylings, e.g. getting rid of margin/padding. You can then set these settings back in elements where you need them.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Zouheir
post Apr 24 2016, 04:59 PM
Post #13





Group: Members
Posts: 7
Joined: 21-April 16
Member No.: 24,183
thanks guys for your help.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Apr 25 2016, 08:28 AM
Post #14


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9
[Actually, only women have replied to you here.]

You're welcome.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Zouheir
post Apr 27 2016, 11:11 AM
Post #15





Group: Members
Posts: 7
Joined: 21-April 16
Member No.: 24,183
thanks ladies for your help.

hehehe sorry about that I didnt know both were women. now I know why it was a smooth sweety help.

This post has been edited by Zouheir: Apr 27 2016, 11:11 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Apr 27 2016, 04:25 PM
Post #16


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9
That's ok. You couldn't guess by a name that looked so male. I'm used to that [unfortunately] happy.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Apr 27 2016, 04:27 PM
Post #17


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
And a woman can be a guy too. tongue.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Apr 28 2016, 03:09 AM
Post #18


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9
These days, true laugh.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Apr 28 2016, 06:01 AM
Post #19


.
********

Group: WDG Moderators
Posts: 9,656
Joined: 10-August 06
Member No.: 7
On the web all women are men, and all men are 14 year old boys. unsure.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Apr 28 2016, 01:38 PM
Post #20


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
So now we know what kind of chat rooms you frequent. rolleyes.gif laugh.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Cascading Style Sheets · Next Newest »
 

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 24th April 2024 - 03:49 PM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC