html & CSS newbie. My container code is not working., help with container code |
html & CSS newbie. My container code is not working., help with container code |
msa969 |
Oct 7 2018, 02:17 PM
Post
#1
|
Group: Members Posts: 3 Joined: 7-October 18 Member No.: 26,727 |
Hi i am new html and css style sheets.
My container code is not working. Please help me. Thank you CODE <!DOCTYPE html> <html> <head> <title>Mr Alam New Zealand</title> <style> h1 {color: #ffffcc; font-size: 24pt; text-align:center} </style> <style> body {background-color: green;} </style> <style> a:link {color: blue;} a:visited {color: green;} a:hover {color: red;} a:active {color: orange;} </style> #container /*Styles for Container*/ { width:800px; margin: 0 auto; padding: 5px; background-color: dodgerblue; text-align: center; font-family: Arial, Verdana, sans-serif; font-size: 14pt } </head> <body> <div id="container"> <h1> SEE AMAZING SCENERY </h1> <p style="text-align:center"> <img src=newzealand.jpg width=700px> <br> Explore the lakes, rivers and mountains of New Zealand, or <a href="http://www.australia.com/"> click here to explore Australia </a> </p> </div> <font color="white"> help </font> </body> </html> Attached thumbnail(s) |
Christian J |
Oct 7 2018, 04:44 PM
Post
#2
|
. Group: WDG Moderators Posts: 9,630 Joined: 10-August 06 Member No.: 7 |
There are three STYLE elements (only one is necessary), but the last CSS code is outside any of them.
Also a few sidenotes: - IMG elements should almost always have an ALT attribute, even if it's empty. - It's good practice to specify text color and background at the same place. - It's more practical to avoid inline CSS (the STYLE attribute), put all CSS in STYLE elements (or external stylesheets) instead. |
pandy |
Oct 7 2018, 08:22 PM
Post
#3
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,716 Joined: 9-August 06 Member No.: 6 |
IMG elements should
The short. https://www.w3.org/QA/Tips/altAttribute The long. http://jkorpela.fi/HTML/alt.html Specifically about when and why empty an empty alt can be a good thing. http://jkorpela.fi/HTML/alt.html#empty |
msa969 |
Oct 8 2018, 02:29 AM
Post
#4
|
Group: Members Posts: 3 Joined: 7-October 18 Member No.: 26,727 |
Nwbie to CSS style sheets have completed after much effort everything the last two commentators have told me to do, however my problem with container and id still remains. Please help.
CODE <!DOCTYPE html> <html> <head> <title>Mr Alam New Zealand</title> <style> h1 {color: #ffffcc; font-size: 24pt; text-align:center} body {background-color: green;} body {color: white} a:link {color: blue;} a:visited {color: green;} a:hover {color: red;} a:active {color: orange;} </style> #container /*Styles for Container*/ { width:800px; margin: 0 auto; padding: 5px; background-color: dodgerblue; text-align: center; font-family: Arial, Verdana, sans-serif; font-size: 14pt } </head> <body> <div class="container"> <h1> SEE AMAZING SCENERY </h1> <p style="text-align:center"> <img src=newzealand.jpg width=700px alt="Scene from New Zealand> <br> Explore the lakes, rivers and mountains of New Zealand, or <a href="http://www.australia.com/"> click here to explore Australia </a> </p> </div> </body> </html> |
pandy |
Oct 8 2018, 03:10 AM
Post
#5
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,716 Joined: 9-August 06 Member No.: 6 |
Almost everything. The CSS for #container is still outside the style block.
HTML is all about containers. One element can contain one or more other elements. Or none. Take this snip. CODE <p> Containers are <em>important</em>. </p> The P element contains the EM element and some text. The EM element contains only text. In a complete document the HTML element contains everything. The BODY element contains everything that's visible on the page - and is itself contained in HTML. And so on and so on. Circles within circles. What decides the scope of an element is the start tag and the closing tag (with a few exceptions like IMG that lacks an closing tag). So what the element should contain must be inside those tags, right? Here's what you've got. With comments. HTML <!-- Here the STYLE element starts --> <style> h1 {color: #ffffcc; font-size: 24pt; text-align:center} body {background-color: green;} body {color: white} a:link {color: blue;} a:visited {color: green;} a:hover {color: red;} a:active {color: orange;} </style> <!-- And here the STYLE element ends --> <!-- And here comes the rule for #container - outside STYLE. --> #container /*Styles for Container*/ { width:800px; margin: 0 auto; padding: 5px; background-color: dodgerblue; text-align: center; font-family: Arial, Verdana, sans-serif; font-size: 14pt } Look at a sample page that you know is correct. Find the containers. Learn to see the circles. You could take this short example to begin with. http://htmlhelp.com/reference/html40/structure.html#doc The doctype comes first. It isn't really part of HTML. Then comes <html> and the last thing on the page is </html> - since HTML contains everything. Look at the list. UL contains the LIs. The Ps, they just contains text. Lots of circles in that short page. Grok the containers and you are all set! |
Christian J |
Oct 8 2018, 05:29 AM
Post
#6
|
. Group: WDG Moderators Posts: 9,630 Joined: 10-August 06 Member No.: 7 |
IMG elements should HTML5 has loosened that requirement under very specific circumstances: https://www.w3.org/TR/html/semantics-embedd...-of-publication (I am nitpicking here ). But in the case of the OP, the IMG element probably should have an empty ALT, since it seems to be a decorative image. |
pandy |
Oct 8 2018, 07:09 AM
Post
#7
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,716 Joined: 9-August 06 Member No.: 6 |
You should still provide a text alternative, only in another way, through figcaption. Which, I think, is a level or two above where the OP is at.
I don't see their point BTW. If you can't provide an alt text, in what way is it easier to produce a figcaption text? And the last point there is totally incomprehensible to me. CODE * Ignoring the figcaption element and its descendants, the figure element has no Text node descendants other than inter-element white space, and no embedded content descendant other than the img element. But we are straying form the topic at hand. Sorry, msa969. |
Christian J |
Oct 8 2018, 11:00 AM
Post
#8
|
. Group: WDG Moderators Posts: 9,630 Joined: 10-August 06 Member No.: 7 |
Digression follows!
I don't see their point BTW. If you can't provide an alt text, in what way is it easier to produce a figcaption text? Writing a caption text might be more intuitive for most users (like in the "Eloisa with Princess Belle" example), while proper ALT texts are often misunderstood even by web developers. And it seems even image meta data can be used for the FIGCAPTION, something that a file upload script can handle automatically. But ALT text is of course the norm: CODE "If there is even the slightest possibility of the author having the ability to provide real alternative text, then it would not be acceptable to omit the alt attribute." QUOTE And the last point there is totally incomprehensible to me. CODE * Ignoring the figcaption element and its descendants, the figure element has no Text node descendants other than inter-element white space, and no embedded content descendant other than the img element. I think they mean that in this special case (of ALT omission), the FIGURE element can only contain an IMG and a FIGCAPTION element. QUOTE But we are straying form the topic at hand. Sorry, msa969. |
pandy |
Oct 8 2018, 12:04 PM
Post
#9
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,716 Joined: 9-August 06 Member No.: 6 |
Writing a caption text might be more intuitive for most users (like in the "Eloisa with Princess Belle" example), while proper ALT texts are often misunderstood even by web developers. And it seems even image meta data can be used for the FIGCAPTION, something that a file upload script can handle automatically. And why couldn't that phrase be an alt text? Besides, alt is meant for the convenience of the user, not the author. But I really think we should stop this discussion now. Or start another thread about it. |
pandy |
Oct 9 2018, 07:58 AM
Post
#10
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,716 Joined: 9-August 06 Member No.: 6 |
How goes it, msa969? Do you get it to work?
|
msa969 |
Oct 9 2018, 10:19 AM
Post
#11
|
Group: Members Posts: 3 Joined: 7-October 18 Member No.: 26,727 |
done
thanks for the help |
pandy |
Oct 9 2018, 12:14 PM
Post
#12
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,716 Joined: 9-August 06 Member No.: 6 |
Good.
|
Christian J |
Oct 9 2018, 05:44 PM
Post
#13
|
. Group: WDG Moderators Posts: 9,630 Joined: 10-August 06 Member No.: 7 |
And why couldn't that phrase be an alt text? It might be in some cases, but I don't think users uploading images would know if/when that's the case. Keep in mind that an ALT text is "an appropriate functional replacement for the image" - it's not a caption text. "Eloisa with Princess Belle" would be a good caption text though, and I think users uploading images understand the concept of captions better than ALT, so the HTML5 spec does makes sense to me here (in its convoluted way). QUOTE But I really think we should stop this discussion now. Or start another thread about it. As long as I get the last word. |
pandy |
Oct 10 2018, 12:44 AM
Post
#14
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,716 Joined: 9-August 06 Member No.: 6 |
I confess I hadn't noticed the cases with user upload. That makes sense. Otherwise I still think it's rather pointless.
I don't mind digressions. I'm guilty of a few. That's often what makes things interesting. Just not when it complicates a newbie thread. |
Lo-Fi Version | Time is now: 30th March 2024 - 12:17 AM |