1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Please help a beginner on CSS

Discussion in 'CSS' started by chaoscreater, Apr 8, 2009.

0
  1. #1
    Hi guys i'm learning HTML and CSS, in fact i've got an assignment that's due 2morro and i can't solve my problem. I have to compile an HTML script that is XHTML strict, and i keep getting 4 errors when i validate at www.validator.w3.org


    Please help me check what's wrong in my code please, thanks.


    <?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!-- The following <html> tag is necessary for the W3 Validator:
     An ordinary <html> tag will cause an error -->

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">


<head>
<style type="text/css">
body{background-color:silver;}</style>

<title>Computer Graphics</title></head>
<body>
<h1><style type="text/css">
h1{background-color:black;
font-family:sans-serif;
color:white;
text-align:center;}
</style>
Types of computer graphics</h1> <br />

<p>Digital images can be stored in many different formats. The formats can be broken down into two groups, namely:</p>

<ul>
<li>Vector Graphics </li>
<li>Bitmap (or Raster) Graphics</li>
</ul>

<h2><style type="text/css">
h2{background-color:gray;
border-bottom: medium solid</style>
Vector Graphics</h2>

<p>Vector Graphics are defined by mathematical formulae. They consist of primitive objects such as points, lines, and curves. This means they can be infinitely zoomed in without any loss of clarity. An example of the difference between vector graphics and bitmap graphics is given in the image below.</p>

<div>
<img src="vector_bitmap_example.png" alt="vector_bitmap_example"/>
</div>

<p>Note that in the zoomed part the vector version is clear, while the bitmap version appears "blocky". Vector graphics tend to use much less memory than bitmap graphics.</p>


<h2>Bitmap Graphics</h2>
<p>Images stored using a bitmap format are stored as a rectangular grid of dots (or pixels). Each pixel is assigned a colour to produce a picture. An example of this is given below:</p>

<div id="content" style="text-align:center">
<img src="face.png" alt="face"/>
<img src="face_grid.png" alt="face_grid"/>
</div>

<p>Note that this is the same image, but with the grid hidden, then shown.</p>

<h3><style type="text/css">
h3{background-color: white; border-bottom: medium solid</style>
Recommended Reading</h3>

<p>The main entries in Wikipedia for <a href="http://en.wikipedia.org/wiki/Vector_graphics">vector graphics </a> and for <a href="http://en.wikipedia.org/wiki/Raster_graphics">bitmap graphics</a></p>
</body>
</html>
    Code (markup):

    and these are the error codes:


    Validation Output: 4 Errors 
    Line 18, Column 27: document type does not allow element "style" here 
<h1><style type="text/css">

✉ 

The element named above was found in a context where it is not allowed. This could mean that you have incorrectly nested elements -- such as a "style" element in the "body" section instead of inside "head" -- or two elements that overlap (which is not allowed). 

One common cause for this error is the use of XHTML syntax in HTML documents. Due to HTML's rules of implicitly closed elements, this error can create cascading effects. For instance, using XHTML's "self-closing" tags for "meta" and "link" in the "head" section of a HTML document may cause the parser to infer the end of the "head" section and the beginning of the "body" section (where "link" and "meta" are not allowed; hence the reported error). 
 Line 24, Column 38: document type does not allow element "br" here; missing one of "p", "h1", "h2", "h3", "h4", "h5", "h6", "div", "pre", "address", "fieldset", "ins", "del" start-tag 
Types of computer graphics</h1> <br />

✉ 

The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element. 

One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>"). 
 Line 33, Column 27: document type does not allow element "style" here 
<h2><style type="text/css">

✉ 

The element named above was found in a context where it is not allowed. This could mean that you have incorrectly nested elements -- such as a "style" element in the "body" section instead of inside "head" -- or two elements that overlap (which is not allowed). 

One common cause for this error is the use of XHTML syntax in HTML documents. Due to HTML's rules of implicitly closed elements, this error can create cascading effects. For instance, using XHTML's "self-closing" tags for "meta" and "link" in the "head" section of a HTML document may cause the parser to infer the end of the "head" section and the beginning of the "body" section (where "link" and "meta" are not allowed; hence the reported error). 
 Line 57, Column 27: document type does not allow element "style" here 
<h3><style type="text/css">

✉ 

The element named above was found in a context where it is not allowed. This could mean that you have incorrectly nested elements -- such as a "style" element in the "body" section instead of inside "head" -- or two elements that overlap (which is not allowed). 

One common cause for this error is the use of XHTML syntax in HTML documents. Due to HTML's rules of implicitly closed elements, this error can create cascading effects. For instance, using XHTML's "self-closing" tags for "meta" and "link" in the "head" section of a HTML document may cause the parser to infer the end of the "head" section and the beginning of the "body" section (where "link" and "meta" are not allowed; hence the reported error).
    Code (markup):
     
    chaoscreater, Apr 8, 2009 IP
  2. My220x

    My220x Member

    Messages:
    624
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    35
    #2
    You can't use embedded CSS like that! It has to go inbetween the <head></head> tags, if you still want to do it similar to that use inline css so:

    <h1 style="background-color:black; font-family:sans-serif; color:white; text-align:center;">Hi</h1>
     
    My220x, Apr 8, 2009 IP
  3. chaoscreater

    chaoscreater Peon

    Messages:
    5
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    could you show me what you mean by in between the <head></head> tags? So like this?

    <head>
    <style type="text/css">
    body{background-color:silver;}</style>
    h1{background-color:black; font-family:sans-serif; color:white; text-align:center;}
    </head>

    because that doesn't work.......and i also tried using the inline CSS, it works but now i get 8 errors when i validate it.....here's what i have:


    <head>
    <style type="text/css">
    body{background-color:silver;}</style>
    </head>

    <title>Computer Graphics</title>
    <body>
    <h1 style="background-color:black; font-family:sans-serif; color:white; text-align:center;">Types of computer graphics</h1>
    </style>



    I was hoping if someone can fix my whole thing, like point out which parts are wrong and fix it for me so i can see the difference.

    I forgot to mention, it's actually an assignment i have that's due 2morro......lol >_< so plz hurry anyone coz i read the books, did Google and couldn't fix it.
     
    chaoscreater, Apr 8, 2009 IP
  4. qazu

    qazu Well-Known Member

    Messages:
    1,834
    Likes Received:
    62
    Best Answers:
    0
    Trophy Points:
    165
    #4
    You've still got a </style> tag after your <h1>

    <head>
    <style type="text/css">
    body{background-color:silver;}</style>
    </head>

    <title>Computer Graphics</title>
    <body>
    <h1 style="background-color:black; font-family:sans-serif; color:white; text-align:center;">Types of computer graphics</h1>
    </style>

    remove it

    Your title should also be in you <head> tag
     
    qazu, Apr 8, 2009 IP
  5. qazu

    qazu Well-Known Member

    Messages:
    1,834
    Likes Received:
    62
    Best Answers:
    0
    Trophy Points:
    165
    #5
    By the way, if you use

    <head>
<style type="text/css">
body{background-color:silver;}</style>
h1{background-color:black; font-family:sans-serif; color:white; text-align:center;}
<title>Computer Graphics</title>
</head>
    Code (markup):
    Then you wouldn't use inline styles in h1 it would just be
    <head>
<style type="text/css">
body{background-color:silver;}</style>
h1{background-color:black; font-family:sans-serif; color:white; text-align:center;}
<title>Computer Graphics</title>
</head>
<body>
<h1>Types of computer graphics</h1>

etc
    Code (markup):
    You also need to add the css for h2, h3 and h4
     
    qazu, Apr 8, 2009 IP
  6. chaoscreater

    chaoscreater Peon

    Messages:
    5
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Edit:

    Ok now i only have 2 errors, i fixed all the h1, h2 and h3 CSS but don't know what else to fix, here's what i have:

    <?xml version="1.0" encoding="utf-8"?>
    <!DOCTYPE html PUBLIC
    "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    <!-- The following <html> tag is necessary for the W3 Validator:
    An ordinary <html> tag will cause an error -->

    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">


    <head>
    <style type="text/css">
    body{background-color:silver;}
    h1{background-color:black; font-family:sans-serif; color:white; text-align:center;}
    h2{background-color:gray; border-bottom: medium solid}
    h3{background-color: white; border-bottom: medium solid}
    <title>Computer Graphics</title></style>
    </head>

    <body>
    <h1>Types of Computer graphics</h1>
    <p>Digital images can be stored in many different formats. The formats can be broken down into two groups, namely:</p>

    <ul>
    <li>Vector Graphics </li>
    <li>Bitmap (or Raster) Graphics</li>
    </ul>

    <h2>Vector Graphics</h2>

    <p>Vector Graphics are defined by mathematical formulae. They consist of primitive objects such as points, lines, and curves. This means they can be

    infinitely zoomed in without any loss of clarity. An example of the difference between vector graphics and bitmap graphics is given in the image below.</p>

    <div>
    <img src="vector_bitmap_example.png" alt="vector_bitmap_example"/>
    </div>

    <p>Note that in the zoomed part the vector version is clear, while the bitmap version appears "blocky". Vector graphics tend to use much less memory than

    bitmap graphics.</p>


    <h2>Bitmap Graphics</h2>
    <p>Images stored using a bitmap format are stored as a rectangular grid of dots (or pixels). Each pixel is assigned a colour to produce a picture. An example

    of this is given below:</p>

    <div id="content" style="text-align:center">
    <img src="face.png" alt="face"/>
    <img src="face_grid.png" alt="face_grid"/>
    </div>

    <p>Note that this is the same image, but with the grid hidden, then shown.</p>

    <h3>Recommended Reading</h3>

    <p>The main entries in Wikipedia for <a href="http://en.wikipedia.org/wiki/Vector_graphics">vector graphics </a> and for <a

    href="http://en.wikipedia.org/wiki/Raster_graphics">bitmap graphics</a></p>
    </body>
    </html>
     
    chaoscreater, Apr 8, 2009 IP
  7. qazu

    qazu Well-Known Member

    Messages:
    1,834
    Likes Received:
    62
    Best Answers:
    0
    Trophy Points:
    165
    #7
    The only thing I can see wrong there is that you've moved your <title> into your <style>.
    <head>
    <style type="text/css">
    body{background-color:silver;}
    h1{background-color:black; font-family:sans-serif; color:white; text-align:center;}
    h2{background-color:gray; border-bottom: medium solid}
    h3{background-color: white; border-bottom: medium solid}
    <title>Computer Graphics</title></style>
    </head>

    You need to watch your structure. Try this with the title outside the style tag but still in hte <head>
    <head>
<style type="text/css">
body{background-color:silver;}
h1{background-color:black; font-family:sans-serif; color:white; text-align:center;}
h2{background-color:gray; border-bottom: medium solid}
h3{background-color: white; border-bottom: medium solid}
</style>
<title>Computer Graphics</title>
</head>
    Code (markup):
     
    qazu, Apr 8, 2009 IP
  8. chaoscreater

    chaoscreater Peon

    Messages:
    5
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #8
    ahh silly me, sweet no more errors now!! Thanks everyone this site has great and fast responses!!

    I just wish the W3 Validator can be more precise because be4 i came here for help, i was moving arond some tags because i didn't know what to really do since the W3 validation gave me errors all the time.......

    now i just need help with external style sheets, i'll post back if i have any problems.


    edit:

    oh btw why can't i use the break tag?

    <br />

    e.g.

    <body>
    <h1>Types of Computer graphics</h1>
    <br />
    <p>Digital images can be stored in many different formats. The formats can be broken down into two groups, namely:</p>


    i mean can't use it as in i get an error with the W3 validator but it does work when i view my page.
     
    chaoscreater, Apr 8, 2009 IP
  9. chaoscreater

    chaoscreater Peon

    Messages:
    5
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #9
    Great i just made my external style sheet and made another html page with no errors, but i just wanna know about my last question regarding the line break? Can someone explain?
     
    chaoscreater, Apr 8, 2009 IP
  10. ExtremeData

    ExtremeData Well-Known Member

    Messages:
    450
    Likes Received:
    21
    Best Answers:
    0
    Trophy Points:
    125
    #10
    You can use br tag but you must use it correctly.
    You use XHTML 1.0 STRICT doctype and an inline element can't be used directly into <body>.
    So that's incorrect :

    
<body>
<br />
    <p>
        bla bla
    </p>
</body>
    Code (markup):
    And that's correct :

    
<body>
    <p>
        <br />
        bla bla
    </p>
</body>
    Code (markup):
    The idea is that you can't use br tag directly into <body>..you must use it into a <p> tag or <div> etc..
    Hope I explained well and you understand now why you "can't" use the br tag :)
     
    ExtremeData, Apr 8, 2009 IP
    qazu likes this.
  11. qazu

    qazu Well-Known Member

    Messages:
    1,834
    Likes Received:
    62
    Best Answers:
    0
    Trophy Points:
    165
    #11
    Ah, well done :) ExtemeData's spot on with the <br /> tag. It's a "line break" and you use it inside a selector like <p><br /> ... </p> or <h1><br /> ... </h1> or <div><br />...</div> but not directly in the <body>.
     
    qazu, Apr 8, 2009 IP