The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> html & CSS newbie. My container code is not working., help with container code
msa969
post 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)
Attached Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Oct 7 2018, 04:44 PM
Post #2


.
********

Group: WDG Moderators
Posts: 7,915
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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Oct 7 2018, 08:22 PM
Post #3


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,024
Joined: 9-August 06
Member No.: 6



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

tongue.gif

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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
msa969
post 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>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Oct 8 2018, 03:10 AM
Post #5


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,024
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. wink.gif

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! smile.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Oct 8 2018, 05:29 AM
Post #6


.
********

Group: WDG Moderators
Posts: 7,915
Joined: 10-August 06
Member No.: 7



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-embedd...-of-publication (I am nitpicking here tongue.gif tongue.gif ).

But in the case of the OP, the IMG element probably should have an empty ALT, since it seems to be a decorative image.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Oct 8 2018, 07:09 AM
Post #7


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,024
Joined: 9-August 06
Member No.: 6



You should still provide a text alternative, only in another way, though 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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Oct 8 2018, 11:00 AM
Post #8


.
********

Group: WDG Moderators
Posts: 7,915
Joined: 10-August 06
Member No.: 7



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
* 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.

blush.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Oct 8 2018, 12:04 PM
Post #9


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,024
Joined: 9-August 06
Member No.: 6



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

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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Oct 9 2018, 07:58 AM
Post #10


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,024
Joined: 9-August 06
Member No.: 6



How goes it, msa969? Do you get it to work?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
msa969
post 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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Oct 9 2018, 12:14 PM
Post #12


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,024
Joined: 9-August 06
Member No.: 6



Good. smile.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Oct 9 2018, 05:44 PM
Post #13


.
********

Group: WDG Moderators
Posts: 7,915
Joined: 10-August 06
Member No.: 7



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. laugh.gif

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Oct 10 2018, 12:44 AM
Post #14


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,024
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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 16th October 2018 - 08:51 AM