SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 34
  1. #1
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,177
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)

    "Spot the Error" Competition

    Spot the Error!


    Hey folks, we have a fun, quick challenge for you.

    The quoted text below (a mock forum question) has some errors in it. All you have to do is spot as many errors as you can and list them in your reply. They may include such things as grammatical mistakes and/or errors or potential problems in the code.

    There is extra credit for explaining why something is an error. The winner will be the person who spots the most errors, or who gives the best explanation of what the errors are. (So don't be discouraged if someone beats you to it. Just give a better explanation.)

    The prize is a free SitePoint ebook.

    The competition will only be open for about 24 hours, so you need to be quick.

    Note

    By "error" I'm not talking about preferences or stylistic choices. For example, "coler" is a misspelling, while "color" and "colour" are accepted alternatives. Likewise, while it may not be ideal to wrap an <h1> in a <div>, it's not strictly an error. (I've tried not to make too many rules, so just have fun with this, and let's see what happens!)

    Tip

    There are arguably at least 11 errors here.


    I have a problem with the top div, Its supposed to be red, but its bacground color is not showing up. What am I missing.

    html
    Code:
    Code:
    <div class="top">
        <h1>My Site</hl>
    </div>
    css
    Code:
    #top {background: #0000ff;}
    h1 {float: left;}
    Edit:


    OK guys, this competition is now over, though you are welcome to discuss the issues further. The winner is announced in post #27, with some comments on the various issues as well.
    Last edited by ralph.m; May 29, 2012 at 18:02. Reason: winner announced

  2. #2
    SQL Consultant gold trophysilver trophybronze trophy
    r937's Avatar
    Join Date
    Jul 2002
    Location
    Toronto, Canada
    Posts
    39,251
    Mentioned
    59 Post(s)
    Tagged
    3 Thread(s)
    what a fantastic idea for a thread!!!

    okay, i'll get the ball rolling...

    the first error is that there is no SQL involved in the problem

    ha ha, j/k

    here's the first error...

    the div has a class called "top" but the css specifies a style for an id selector called "#top"

    in other words, that css will not apply to the div
    rudy.ca | @rudydotca
    Buy my SitePoint book: Simply SQL
    "giving out my real stuffs"

  3. #3
    SitePoint Member
    Join Date
    Apr 2010
    Location
    Texas
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by r937 View Post
    what a fantastic idea for a thread!!!

    okay, i'll get the ball rolling...

    the first error is that there is no SQL involved in the problem

    ha ha, j/k

    here's the first error...

    the div has a class called "top" but the css specifies a style for an id selector called "#top"

    in other words, that css will not apply to the div
    So we already know that the CSS needs to be a '.' instead of '#'. The difference between a 'class' and a 'id'.

    The reason the color doesn't show is that the 'property' should be 'background-color'.
    The 'hex code' in your example is 'blue'. The 'hex code' for 'red' is #ff0000.

    I also see that your closing tag for the 'h1' is using a lowercase 'L' instead of a '1'.
    It should be <h1>My Site</h1>.

  4. #4
    SitePoint Member
    Join Date
    Jun 2007
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Error 1 -
    CSS has a declaration for an ID selector (#top) - but the div is set to a class of top - so the CSS will not apply to the div
    Error 2 -
    The hex code for the color declared in the CSS is blue - therefore the background color will not show up as red (even when coded correctly)
    Error 3 -
    Its ... should be it's - Improper spelling of a contraction/usage of an apostrophe - it's is the contraction for "it is" - which is the proper usage in this sentence
    Error 4 -
    bacground... spelled incorrectly - the proper spelling of background is "Background" :-)
    Error 5 -
    What am I missing. > Should be ... What am I missing? Improper usage of a period. All questions should end with a question mark.
    Error 6 -
    Its - as used in this sentence it uses improper capitalization. Coming after a comma, it should be a lower case "i".
    Error 7 -
    Improper usage of comma's in the sentence. The commas should wrap a part of a sentence that can be removed without changing the essential meaning of that sentence.
    Error 8 -
    H1 closing tag uses a small L instead of a 1 - this will cause the code to break
    Error 9 -
    This one may be arguable - but the first statement... I have a problem with the top div... should be .... I have a problem with the div with the class of "top".
    Error 10 -
    CSS declaration for background to set the color should be "background-color"

  5. #5
    SitePoint Member
    Join Date
    May 2011
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Spot the Error!


    Hey folks, we have a fun, quick challenge for you.

    The quoted text below (a mock forum question) has some errors in it. All you have to do is spot as many errors as you can and list them in your reply. They may include such things as grammatical mistakes and/or errors or potential problems in the code.

    There is extra credit for explaining why something is an error. The winner will be the person who spots the most errors, or who gives the best explanation of what the errors are. (So don't be discouraged if someone beats you to it. Just give a better explanation.)

    The prize is a free SitePoint ebook.

    The competition will only be open for about 24 hours, so you need to be quick.

    Note

    By "error" I'm not talking about preferences or stylistic choices. For example, "coler" is a misspelling, while "color" and "colour" are accepted alternatives. Likewise, while it may not be ideal to wrap an <h1> in a <div>, it's not strictly an error. (I've tried not to make too many rules, so just have fun with this, and let's see what happens!)

    Tip

    There are arguably at least 11 errors here.
    Hmmm - I managed 9:
    1 - Sentence run on. First sentence should end at "top div".
    2 - Its should be it is or it's
    3 - get rid of the comma after red
    4 - second its is possessive and should have an apostrophe
    5 - background spelled wrong
    6 - Last sentence is a question - should end with a question mark
    7 - CSS code - #top should be .top or the html code should be changed to id
    8 - CSS code - the hex code for red is #ff0000.
    9 - CSS code - the selector is background-color

    Two potential issues but not really:
    1 - it can be argued that HTML and CSS should be in caps
    2 - the theoretical author of the post didn't leave their name.

    Tony

  6. #6
    SitePoint Member
    Join Date
    Feb 2011
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Love it!

    Okay, here's what I can see.

    I have a problem with the top div, Its supposed to be red, but its bacground color is not showing up. What am I missing.
    This should be to me:

    I have a problem with the div classed "top". It's supposed to be red, but its background color is not showing up. What am I missing?

    Problems are:
    - Specifying the div properly (in the event that there were more than one div containers)
    - Full stop after specifying the problem. (1 message, 1 sentence)
    - Its should be It's (It is)
    - background spelt wrong.
    - Last sentence is a question.

    Other problems:
    - #top should be .top as this is a class
    - The h1 tag is not closed properly. It should be </h1> not </hl>
    - Background colour should be red (#ff0000) not blue (#0000ff).
    - Float should be placed in the top class as floating the h1 tag collapses the div. => .top {background: #ff0000; float: left;}

    That's all I got!

  7. #7
    SitePoint Member
    Join Date
    May 2012
    Location
    Brattleboro, Vermont, United States
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Besides the mentioned earlier I swing it this way:

    The html structure is incomplete ie:
    <html>
    <title></title>
    <body>
    <div class="top">
    <h1>My Site</h1>
    </div>
    </body>
    </html>

    For some people, depending on how sophisticated the website is, the CSS should be structure like so to represent the HTML document

    .top {background: #0000ff;}
    .top h1 {float: left;}

    That way the h1 that is being used within that div, represents it properly.

    that case it would be like this with the proper use of background-color property.

    .top {background-color: #0000ff;}
    .top h1 {float: left;}

    If there is 11 I like to know where lol.

  8. #8
    Quake 1 Addict CreedFeed's Avatar
    Join Date
    Feb 2002
    Location
    Milwaukee, WI
    Posts
    296
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    1. The div has a class of "top" but the CSS is defining an id of "top". Based on the CSS defining an id of "top" and there is no id defined in the HTML, no styling will take place.

    2. The div is supposed to be styled with a background color of red, but the only contents of the div is a floating h1. Because of the defined float of the h1, the height of the containing div essentially collapses on itself. To rectify, you'd need to clear the floating h1 or insert something else that is not floating within the div.

    3. The intent of the problem was to make the "top" div have a background color of red, but the CSS defines a background of blue (#0000ff). Red is #ff0000.
    -- Steve Caponetto
    Quake 1 Resurrection :: CreedFeed

  9. #9
    SitePoint Member
    Join Date
    Feb 2007
    Location
    Guayaquil, Ecuador
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    1,2) I have a problem with the top div, Its (this should be "it's", a contraction of "it is," and with lower case given that it continues a sentence)
    3) I have a problem with the top div, it's supposed ... (that comma should be a colon ->
    4) but its
    bacground (this should be "background" or, better, background-color) color is not showing up.
    5) What am I missing. (that should end with a question mark: ?, given that it is a question)
    6) <h1>My Site</hl> (the closing tag should be h1 rather than hl (l as in loud)
    7)
    #top {background: #0000ff;} the correct selector
    is .top, given that the div has a top class assigned to it rather than an id "top"
    8)
    #
    top {background: #0000ff;} the color should be #ff0000 or "red," right now is a blue.
    9) html Code: Code: Repeated "Code:"


  10. #10
    SitePoint Member
    Join Date
    Apr 2010
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well the journalist in me wants to critique the description of the problem:
    1) It is a compound sentence. "I have a problem with the top div." Period.
    3) "it's" not "its"
    4) "background" is spelled wrong
    5) "What am I missing." is a question

    With the code,
    6) #0000ff is blue, the coder wants red, which would be #ff0000
    7) Because the h1 is floated, the div has no depth and thus won't display a background color.
    8) Also, why are we floating the h1 at all?
    9) Looks like the closing h1 is a lower case "L"

    And of course, the previously mentioned; "top" should be a class in the CSS.

  11. #11
    SitePoint Member
    Join Date
    May 2012
    Location
    San José, Costa Rica, Costa Rica
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have a problem with the top div, Its supposed to be red, but its bacground color is not showing up. What am I missing.

    html

    <div class="top">
    <h1>My Site</hl>
    </div>
    css

    #top {background: #0000ff;}
    h1 {float: left;}
    Including misspellings, here's what I've found:

    1. It should be "it's supposed to be red"
    2. Also, it should be "it's" with a lowercase i, since it's located after a comma.
    3. It should say "I have a problem with the top div:" since the explanation of the problem comes after that phrase
    4. "Background" instead of "bacground"
    5. There should be a question mark at the end of the first paragraph.
    6. The <h1> tag is closed using </hl>
    7. The div has a class of "top", but the CSS says "#top", which is why the background color isn't being applied. # is for IDs while . is for Classes.
    8. The background color is supposed to be red, but #0000ff is blue
    9. If the <h1> is being floated, div.top should have an overflow: hidden, or the float: left could be added to div.top instead of the <h1>
    10. Instead of saying "the top div", it should say something like "div.top", so that there's no potential confusion with other divs in case there were others.
    11. The word "Code" is repeated after HTML
    12. HTML and CSS should be in uppercase

  12. #12
    SitePoint Addict michael - ohio's Avatar
    Join Date
    Dec 2004
    Location
    ohio
    Posts
    257
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    1. The first comma ("div,") should be a colon ("div;").
    2."Its" should not be capitalized.
    3. "Its" should be "it is" (or "it's).
    4. "bacground" should be "background".
    5. "missing should be punctuated with a question mark (?), not a period (.).
    6. css code #top shouldn't have a hash.
    7. css code {background: ... } should be {background-color: ...}.
    8. css code #0000ff is a dark blue, not red.
    9. css code h1 {float: left;} won't work - you can't float the h1 tag - you need to float an object, like a div or an image (complete wag on my part - I'm not a coder!).

  13. #13
    SitePoint Member
    Join Date
    Aug 2006
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    1. Typos in question
    "Its" should be "It's". "Its" is the possessive form, used when the object belongs to the subject in some way.
    "bacground" should be "background". No explanation necessary there, presumably. Unless an etymology is required?

    2. Grammatical error in question
    ".. with the top div, Its ..." uses a comma in place of a full stop. Should be ".. with the top div. It's supposed ..."
    "What am I missing." should be "What am I missing?". Needs a question mark to make it a question, rather than a statement.

    3. Grammatical mistakes in titles of code samples
    HTML and CSS should be capitalized, because they are acronyms of HyperText Markup Language and Cascading Style Sheets respectively.

    4. Extraneous text
    Below HTML, "Code:" is extraneous. It is automatically included with a code block.

    5. H1 closing tag is actually HL (using upper case here to allow readers to avoid the ambiguity I'm talking about)
    The font here hides, at first glance, the fact that the close tag for the H1 actually says HL - which is not a tag. The H1 in opening tag and the CSS code do say H1, not HL. It looks like a 1 pixel difference.

    6. Mismatch. Wrong HTML attribute or wrong selector.
    The HTML code specified as a div with a class "top" whilst the CSS specifies an identifier/id by that name. Of course, this will mean the desired background colour attributes won't be applied to the div as hoped. The solution here is to decide whether a class or id is in order. If it class, then the CSS selector should be changed to ".top". If it's an id that's needed, then the HTML attribute "class" should be changed for "id". It's not possible to make that judgement with the information given.

    7. "background" declaration is incomplete, or used erroneously.
    The expected structure of the "background" property is:
    Code:
    background: [color] [image] [repeat] [attachment] [position];
    From the information given, it looks as if the user was actually looking for the "background-color" property. The correct code would be:
    Code:
    background-color: #0000FF;
    #0000FF corresponds to pure blue, which is named "blue" in the CSS named colours table, so correct code could also be:
    Code:
    background-color: blue;
    /* Alternatively using the rgb notation */
    background-color: rgb(0, 0, 255);
    8. Wrong hex code
    The user wants wants a red background. The hex code they use (as I mentioned) corresponds to blue. The correct values code would be "#FF0000", "red" and "rgb(255, 0, 0)".

    ----

    8 out of a disputable 11. I'm happy with that. I couldn't see any more that seemed like they fit within the rules, but I suppose a couple of the ones I pointed out (like spelling errors) might be considered independent by others? I don't know.

  14. #14
    SitePoint Enthusiast
    Join Date
    Oct 2010
    Posts
    60
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    1- you have to use . for class selector not # id selector
    2- your hex color is blue not red the red color hex is #FF0000

  15. #15
    SitePoint Member ChasMan's Avatar
    Join Date
    Sep 2008
    Location
    Charleston, SC
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    1. There should not be a comma after the word “div” in the first sentence as it is a complete statement. A period or semi-colon would be more appropriate.
    2. The first occurrence of the word “Its” should have an apostrophe in it as the word is a contraction of the words “It is”.
    3. There is a letter “k” missing in the misspelled word “bacground”.
    4. The last sentence in the first paragraph poses a question, thus it should end in a question mark.
    5. As it is an acronym, the letters “html” should all be capitalized.
    6. The first occurrence of the word “Code”, along with its accompanying colon, should be on the same line as the acronym “HTML” since both words together describe the code that follows it.
    7. The word “Code” referenced in the previous list item should not be capitalized as it is not part of a (sub-)heading. If it was a heading, there would not be a colon on the same line.
    8. The second occurrence of the word “Code”, along with its accompanying colon, should be deleted as it is a duplication of the line above it (albeit indented).
    9. The class in the HTML’s div should be an id; or, the id reference in the CSS should be a class.
    10. As it is an acronym, the letters “css” should all be capitalized.
    11. The third occurrence of the word “Code”, along with its accompanying colon, should be on the same line as the acronym “CSS” since both words together describe the code that follows it.
    12. The word “Code” referenced in the previous list item should not be capitalized as it is not part of a (sub-)heading. If it was a heading, there would not be a colon on the same line.
    13. The HEX code used in #top would produce a color of blue, not red. If red is the desired result, a HEX code of #ff0000, for example, should be used.
    14. Unless there is some preceding CSS code not listed that would define otherwise, the h1 tag has a default width of 100% and a default alignment of left, thus floating it, be it left or right, would serve no purpose.

  16. #16
    SitePoint Member
    Join Date
    May 2012
    Location
    New Delhi, India, India
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Error
    1. In code "top" is a class. But in Css it is defined with # which is not correct. # is used to define properties of a object defined with id , for class it should be started with a dot. "."

    2. The property of top,Once it is defined as a Class in css with ".", next thing we need to correct is , we must define all properties , when use only background, If just color need to be set then background-color should be use.


    Quote Originally Posted by ralph.m View Post
    Spot the Error!


    Hey folks, we have a fun, quick challenge for you.

    The quoted text below (a mock forum question) has some errors in it. All you have to do is spot as many errors as you can and list them in your reply. They may include such things as grammatical mistakes and/or errors or potential problems in the code.

    There is extra credit for explaining why something is an error. The winner will be the person who spots the most errors, or who gives the best explanation of what the errors are. (So don't be discouraged if someone beats you to it. Just give a better explanation.)

    The prize is a free SitePoint ebook.

    The competition will only be open for about 24 hours, so you need to be quick.

    Note

    By "error" I'm not talking about preferences or stylistic choices. For example, "coler" is a misspelling, while "color" and "colour" are accepted alternatives. Likewise, while it may not be ideal to wrap an <h1> in a <div>, it's not strictly an error. (I've tried not to make too many rules, so just have fun with this, and let's see what happens!)

    Tip

    There are arguably at least 11 errors here.

  17. #17
    SitePoint Member dsimk2002's Avatar
    Join Date
    May 2005
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Spot the Error!


    Hey folks, we have a fun, quick challenge for you.

    The quoted text below (a mock forum question) has some errors in it. All you have to do is spot as many errors as you can and list them in your reply. They may include such things as grammatical mistakes and/or errors or potential problems in the code.

    There is extra credit for explaining why something is an error. The winner will be the person who spots the most errors, or who gives the best explanation of what the errors are. (So don't be discouraged if someone beats you to it. Just give a better explanation.)

    The prize is a free SitePoint ebook.

    The competition will only be open for about 24 hours, so you need to be quick.

    Note

    By "error" I'm not talking about preferences or stylistic choices. For example, "coler" is a misspelling, while "color" and "colour" are accepted alternatives. Likewise, while it may not be ideal to wrap an <h1> in a <div>, it's not strictly an error. (I've tried not to make too many rules, so just have fun with this, and let's see what happens!)

    Tip

    There are arguably at least 11 errors here.
    Here is my answer
    1) First sentence should have a period after div.
    2) Its is supposed to be It's
    3) The comma after red doesn't need to be there
    4) bacground should be background
    5) "What am I missing should have a ? at the end
    6) Closing h1 tag should have the number 1 instead of the letter l
    7) #top should be .top since top is a class and not an id
    8) background should be background-color
    9) #0000ff is blue. It should be #ff0000; to be red
    10) float is used with block level elements. h1 tag is not a block level element.
    11) float should be used in the top class instead of h1. code should read .top {background-color: #ff0000; float: left;}

  18. #18
    SitePoint Member
    Join Date
    May 2012
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Errors #1 and #2: On the initial phrase, where it reads: "Its supposed to be red" it should read "it's supposed to be red". Since it's part of a sentence the capitalization of the "I" is wrong. Also, it refers to a substantive so it should have the apostrophe indicating it.
    Errors #3 and #4: Same as before, the apostrophe is missing from the "its bacground", where it should read "it's". Also, the correct spelling is "background" and not "bacground".
    Error #5: "What am I missing" is a question and therefore it should end with a question mark rather than a dot.
    Error #6: HTML is an acronym (it means "Hyper Text Markup Language"), so all letters should be capitalized.
    Error #7: The closing tag at the second line of the HTML code should be "</h1>". It has a typo, so it reads "</hl>" (slash, lowercase letter H and lowercase letter L).
    Error #8: As in #6, CSS is an acronym (meaning "Cascading Style Sheets"), so all letters should be capitalized.
    Error #9: At the first line of the CSS code, "top" is syntatically indicated as an ID and not a class, so it should begin with a dot (".top", instead of "#top"). The opposite would also be true, so if the OP would like to implement "top" as an ID then he would leave the CSS code as is ("#top") and change the first line of it's HTML code to read: '<div id="top">'.
    Error #10: At the first line of the CSS code, the correct style name for setting a background color would be "background-color" and not "background".
    Error #11: The hexadecimal value of the style "background-color", as coded by the OP represents blue and not red. That is recognizable because the hexadecimal notation for colors in HTML and CSS represents the amount of the three primary colors in this specific order: Red, Green and Blue, being the hexadecimal value "FF" the maximum value and "00" the minumum (meaning the absence of the color). So the correct hexadecimal representation for the red color would be "#ff0000", meaning "maximum amount of red, no green and no blue".

  19. #19
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,177
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Wow, you guys are good! You're picking up the sneaky things I stuck in there to catch you out. Keep the answers coming! You are also seeing things I didn't see.

  20. #20
    SitePoint Member
    Join Date
    Jan 2010
    Location
    Columbia MO USA
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Grammar
    "div," should have a period and not a comma after it because "div" ends the sentence.

    "Its" should have an apostrophe because it represents a contraction.

    "Its supposed" It is not pre-defined in that sentence and would refer to div tag. What is "It's" ? The div tag? The words "My Site" ? Misplaced modifier.

    "bacground" should be spelled background.

    "missing." should be "missing?" - punctuation asking a question

    Code
    "0000ff" is blue and red is not specified in the CSS

    the css shows #top { background: #0000ff; } when the actual solution should be #top { background-color: #0000ff; } if the browser does not support the former. Person does not state what browser this is in.

    red needs to be specified in the H1 or the #top as color: #ff0000;

    Doctype needs to be specified in the html

    html needs to be opened / closed

    language need to be defined

    head needs to be opened / closed

    title is missing

    body needs to be opened / closed

    <!DOCTYPE html>
    <html lang="en-US">
    <head>
    <title>My Site</title>
    </head>
    <body><div class="top">
    <h1>My Site</hl>
    </div>
    </body>
    </html>

  21. #21
    SitePoint Member
    Join Date
    May 2012
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    1- It should be </h1> not </hl>
    2- "top" is a class so style should be .top {background: #0000ff;}
    3- h1 is floating inside div, so you need to place a clearfix element there e.g

    <div class="top">
    <h1>My Site</h1>
    <div style="clear:both;"></div>
    </div>

    4- background color value is not correct, the value for red is #ff0000

    5- I have a problem with the "top" div

    6- but its background - spelling

    7- What am I missing? - should end with question mark

    8- I have a problem with the top div, its supposed - "I" is capital

    9- "Code:" comes twice in "html Code:"

    10- Its supposed to be red, - "Remove comma at the end"

    11- It should be "it's supposed to be" and not "its supposed to be".

    Bingo, I found all the 11

  22. #22
    SitePoint Zealot RyanKing1809's Avatar
    Join Date
    Oct 2011
    Location
    Melbourne, Australia
    Posts
    170
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah, the perfect distraction from study... Please forgive my cabin fever..



    Firstly. You've closed your H1 tag with and HL - Perfectly reasonable mistake considering the keys are relatively close to one another on the keyboard. Do you type with you face?

    Secondly. '#top' would refer to <div id="top">, '.top' would select <div class="top">.

    3. To poorly explain, all colours are written in a hexadecimal format (16 'numbers', 0-F) in a combination of red, blue & green (the colour of the screen pixels). So the format being #RRGGBB - aka #0000FF is blue & #FF0000 is red, but if that makes little to no sense to you just use "background: 'red';" it lacks subtlety but it works. PS. 'Pure' colours are the devil's work, maybe go for a nicer red like #AA1111.

    Finally. You may be noticing that still the background colour still doesn't display. This is because of the float on your H1. Floating creates a css anomaly that rises the element to a new plane above the parent element causing the parent element to collapse in on itself till the point it has no dimensions (much like how dying star becomes a black hole). It is widely unknown why this happens, f
    ortunately there are many solutions to this, whether they're correct or not is questionable:

    1. Remove the float. But maybe you need that.
    2. Add "overflow: auto" to the top class
    3. Give the top class 'height' and 'width' properties.
    4. Set the top class 'display: inline-block'

  23. #23
    SitePoint Member
    Join Date
    May 2012
    Posts
    1
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I count 10. Despite the comments, background: #ff0000; is, in fact, valid CSS code. Background is a shorthand for the other background-* properties, but any of them can be omitted while still maintaining valid code, as long as one is present.

    I have a problem with the top div.1 It'2s supposed to be red, but its back3ground color is not showing up. What am I missing?4

    HTML (needs caps)5
    Code: (extraneous)6
    Code:
    <div id7="top">
        <h1>My Site</hl>
    </div>
    CSS (needs caps)8
    Code:
    #top { background: #ff00009; }
    h1 { float: left; (causes #top to have a height of 0)10 }

  24. #24
    SitePoint Member
    Join Date
    Feb 2012
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    1. Select class rather div

    In this snippet, the div with class is selected with an id selector, i-3
    #top is not correct but .top is;

    2. Secondly the correct hex code for red color is #ff0000

    so replace it with currently blue one (#0000ff);

  25. #25
    SitePoint Member
    Join Date
    May 2012
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    • html needs connection with css:
      o <style type="text/css"> ... </style>
      or link to external file:
      o <link rel="stylesheet" href="mystyle.css">
    • html needs <html>, <head>, <body> .
    • the end tag for H1 is </h1> (h and one, not h and letter)
    • If we use #top in CSS then in html must be used attribute “id” instead of “class” and only one occurrence as # defines a unique element.
    • If we use attribute “class” then in CSS it must be “.top” and it can specify the behavior for a group of different elements. E.g. if we write div.top when the background will be red for every div element with class top. If we write only “.top” when we can use this class with every element in html.
    • The class name for an element in CSS must be with dot - “.top”.
    • To change background color for text you need to use “background-color” or “background” for the H1 element.
    • To change background color for the whole line you need to use “background-color” or “background” for the “.top” element.
    • red color is #FF0000 or a word “red”. #0000ff is blue.
    • To align text to the right or left the “text-align” should be used.
    • The defined float in H1 element hides the background. This part was too tricky to me as I got the whole line red only when I removed it (I confess, I must read more about it, so can't explain).


    The final result should be:

    Code:
    <!DOCTYPE html>
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
            <title></title>
            <style type="text/css"> 
               .top {background: #FF0000;}
               h1 {text-align: left;}
            </style>
        </head>
        <body>
            <div class="top">
                <h1>My Site</h1>
            </div>
        </body>
    </html>
    and the other 4 boring errors in the question are highlighted in red:

    I have a problem with the top div. It's supposed to be red, but its background color is not showing up. What am I missing?
    and the double "Code:" after html.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •