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
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.[COLOR=#464646]
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[/COLOR][COLOR=#464646]ortunately there are many solutions to this, whether they’re correct or not is questionable:
Remove the float. But maybe you need that.
Add “overflow: auto” to the top class
Give the top class ‘height’ and ‘width’ properties.
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.[SUP]1[/SUP] It’[SUP]2[/SUP]s supposed to be red, but its back[SUP]3[/SUP]ground color is not showing up. What am I missing?[SUP]4[/SUP]
HTML (needs caps)[SUP]5[/SUP] Code: (extraneous)[SUP]6[/SUP]
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).
Well guys, this was a fun exercise, and I have to admit, it’s difficult to pick a winner! So many good points made, and many good explanations of various points. Firstly, before announcing the winner, kudos to the following people:
r937 (#1), for first spotting the mismatch of the class in the HTML and id in the CSS.
edbrenner (#2), for spotting the erroneous hex code and the <hl> typo.
tebzil (#3), for the missing apostrophe on Its, the bacground typo, the missing question mark,
tonyhouse (#5), for pointing out the need for the period after “top div”, and mega kudos for spotting that HTML and CSS should be capitalized. (That was one I was hoping to catch you all out on!)
pdmeyer (#6), for spotting that the float on the H1 would cause the container div to collapse and thus also prevent the background color from showing up.
delr2691, for noting the extra “Code:”.
anekola (#10) for asking why the h1 is floated at all. Perhaps there are other elements inside that top div that the OP hasn’t told us about?
galvao (#18) and RyanKing1809 (#22), for longer explanations of the hex code situation.
RyanKing1809 (#22) for a longer explanation of the float/background color situation.
r937 (#1), for pointing out the missing SQL. Shocking!
A few Notes
it’s OK to set a color with background: (as noted by hmudesign, #23). Indeed, it can be more reliable that background-color sometimes.
there either needs to be a period after “the top div” or “Its” should not have a capital I. I would argue that a period is required there, as “I have a problem with the top div” really is a complete idea that does not run on well into the next statement. So I favor a period there. (The use of a capital I was a clue to that.) delr2691 and lillyanka also suggested a colon instead, which is better than a comma, so is a viable alternative … though I prefer a period.
I would argue that the comma after “red” is required, as there’s a natural pause there.
there are two instances of “its”. The first is a contraction of “it is”, so requires an apostrophe. The second (“its background”) does not require an apostrophe. It is indeed possessive, but “its” as a possessive is an exception to the rule of an apostrophe for possession (as noted by Bursh in post #13).
in terms of the HTML, often in forums you get a snippet of code to work on, so I wasn’t concerned that there’s no doctype in the example.
HTML and CSS should indeed be capitalized. They are initialisms created from “hypertext markup language” and “cascading style sheets”. (These names don’t need capitals when spelled out.) These are initialisms, rather than acronyms, as they are pronounced letter-by-letter, rather than as a new name (like UNESCO, which is an acronym).
in terms of the “Code:” that appears before each code block, that’s inserted automatically by the system, so not much we can do about that, even if it’s not ideal. Hoever, the extra “Code:” after “html” was certainly an error.
Using .top h1 would also target the h1, but since there’s normally only one h1 on the page (unless you are using HTML5), you might as well just target it with h1 alone.
As I said, it’s hard to pick, and there were lots of good explanations, which I encouraged. No one actually listed every single possible error, but of the errors I saw, hmudesign only missed the closing <hl>. hmudesign’s post is a nice summary of the errors.
What I liked about this post was the the crisp, clear way the errors were indicated. Even though they weren’t explained as such, the initial point about the background property being appropriate for setting a background color only was nicely expressed.
Thanks again everyone for participating!
We hope to run some more of these quick comps in coming weeks.
Awesome job @ralph_m; I think we can declare this a success! If you PM me your preferred email address for receipt of your prize @hmudesign; I’ll get that organised for you. Congratulations.
Yes Ralph, alot of work went into this by you and the posters. Way To Go! It was fun. The open format was amazing as it drew surprisingly different results (shades of detail, and different takes). Please know one that participated in this thread, ever correct my grammar, syntax, spelling as I could only wish you strength Nice work everyone, and great job Ralph!
