Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Cascading Style Sheets _ html & CSS newbie. My container code is not working.

Posted by: msa969 Oct 7 2018, 02:17 PM

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)

Posted by: Christian J Oct 7 2018, 04:44 PM

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.

Posted by: pandy Oct 7 2018, 08:22 PM

IMG elements should ~~almost~~ always have an ALT attribute, even if it's empty.

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

Posted by: msa969 Oct 8 2018, 02:29 AM

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>

Posted by: pandy Oct 8 2018, 03:10 AM

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

<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
}

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!

Posted by: Christian J Oct 8 2018, 05:29 AM

QUOTE(pandy @ Oct 8 2018, 03:22 AM)

IMG elements should ~~almost~~ always have an ALT attribute, even if it's empty.

HTML5 has loosened that requirement under very specific circumstances: https://www.w3.org/TR/html/semantics-embedded-content.html#when-a-text-alternative-is-not-available-at-the-time-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.

Posted by: pandy Oct 8 2018, 07:09 AM

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.

Posted by: Christian J Oct 8 2018, 11:00 AM

Digression follows!

QUOTE(pandy @ Oct 8 2018, 02:09 PM)

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

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.

Posted by: pandy Oct 8 2018, 12:04 PM

QUOTE(Christian J @ Oct 8 2018, 06:00 PM)

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.

Posted by: pandy Oct 9 2018, 07:58 AM

How goes it, msa969? Do you get it to work?

Posted by: msa969 Oct 9 2018, 10:19 AM

done
thanks for the help

Posted by: pandy Oct 9 2018, 12:14 PM

Good.

Posted by: Christian J Oct 9 2018, 05:44 PM

QUOTE(pandy @ Oct 8 2018, 07:04 PM)

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.

Posted by: pandy Oct 10 2018, 12:44 AM

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.