Learn Basic CSS by Building a Cafe Menu - Step 20

HTML-CSS
1

Tell us what’s happening:

I have put the div element inside the body element and copied all the other components into the div element. the id with “menu” is in the div open element. I have looked up the case and mine looks like them . I can not seem to get this correct

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Cafe Menu</title>
    <link href="styles.css" rel="stylesheet"/>
  </head>

<!-- User Editable Region -->

  <body <div id="Menu"<main>
      <h1>CAMPER CAFE</h1>
      <p>Est. 2020</p>
      <section>
        <h2>Coffee</h2>
      </section>
    </main>>
    
  </body>

<!-- User Editable Region -->

</html>

/* file: styles.css */
body {
  background-color: burlywood;
}

h1, h2, p {
  text-align: center;
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.6 Safari/605.1.15

Challenge Information:

Learn Basic CSS by Building a Cafe Menu - Step 20

2

Hi @CatieA,

Welcome to the forum! :partying_face:

Your div is missing a closing tag. And you’re opening div tag is missing a greater than symbol.

4

Tell us what’s happening:

I do not understand the instructions, "Add a div element inside the body element and then move all the other elements inside the new div.

“Inside the opening div tag”, “add the id” attribute “with a value of menu”. where exactly “inside the div” when the whole of the body is inside the div element. Also, my word “menu” is showing up on my template, but it seems the ‘code’ is not acceptable. I need some extra guidance.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Cafe Menu</title>
    <link href="styles.css" rel="stylesheet"/>
  </head>

<!-- User Editable Region -->

  <body <div <main>
      <h1>CAMPER CAFE</h1>
      <p>Est. 2020</p>
      <section>
        <h2>Coffee</h2>
        <id> MENU</>
      </section>
    </main></div>
 </body>

<!-- User Editable Region -->

</html>

/* file: styles.css */
body {
  background-color: burlywood;
}

h1, h2, p {
  text-align: center;
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.6 Safari/605.1.15

Challenge Information:

Learn Basic CSS by Building a Cafe Menu - Step 20

5

Hi. You have missed the closing tag off the opening div element. You also need to add an id attribute to the opening div as instructed.

6

I don’t understand your help as I have tried multiple combinations of this “inside the div tag” when I put it up top, the “Menu” does not show up to the left under the centered Coffee word. Plus “all the body had to be moved INSIDE the div element” that is a lot, the closing div is after the main closing (which is inside and BEFORE the body closing) which makes all that “moved inside the div”

7

Hi

The closing tag > is missing after div here

<div

Also:

Inside the opening div tag, add the id attribute with a value of menu .

The syntax for an attribute:

The value of an attribute is what you put inside the quotation marks after the equal sign.

8

Tell us what’s happening:

Add a div element inside the body element and then move all the other elements inside the new div.

Please clarify the specification here: Inside the opening div tag, add the id attribute with a value of menu. I did get Menu to arrive on my screen adjusted left under coffee with this configuration, but its not correct… I think it looks good lol

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Cafe Menu</title>
    <link href="styles.css" rel="stylesheet"/>
  </head>

<!-- User Editable Region -->

  <body <div <main>
      <h1>CAMPER CAFE</h1>
      <p>Est. 2020</p>
      <section>
        <h2>Coffee</h2>
        <id> MENU</>
      </section>
    </main></div>
 </body>

<!-- User Editable Region -->

</html>

/* file: styles.css */
body {
  background-color: burlywood;
}

h1, h2, p {
  text-align: center;
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.6 Safari/605.1.15

Challenge Information:

Learn Basic CSS by Building a Cafe Menu - Step 20

9

Can you identify what the “opening div tag” is?

10

[quote=“CatieA, post:1, topic:731688”]
<div <main>
That was my understanding of "Add a div element inside the body element and then move all the other elements inside the new div.

as this was INSIDE the body and I moved everything inside the body which (I understood ) was every thing in the MAIN

11

This is an incomplete opening div tag.

You have to close the tag before starting a new tag, like you did here.

12

Yes, I close the open div tag here ' ’ which you see is after the main close and BEFORE the body close which makes the div INSIDE the body and include (opening div < and closing /div> ) inside the main open and close

13

No, you have not closed the opening div TAG. A tag is given by < and >. An element is given by an opening tag and a closing tag.

This isn’t helping you and doesn’t close anything.

14

Thank you Jeremy, but Im still not understanding. at all

HOW do I put " everything in the body" inside the Open div tab ??

15

The instructions don’t say to put everything inside of the opening div tag. That is not allowed with HTML.

16

Yes, it does. (well my understanding) Please explain…

Add a div element inside the body element and then “move all the other elements inside the new div.”

17

The instructions are saying to “move all other elements inside of the new div (element)”. It does not say “move all other elements inside of the new div tag”. You can never place an element inside of a tag, that’s not allowed.

This is an example of elements inside of other elements (though, that id element isn’t a valid HTML element).

18

The id element config. was the only way it seemed to populate the word menu on my template.

I still don’t understand what you mean… :frowning: now I am more confused than ever

19

You seem to be mixing up tags and elements.

I would take a look at this diagram: Basic HTML syntax - Learn web development | MDN

20

What exactly does MOVE ALL OTHER ELEMENTS INSIDE of the new Div? How would I know what “it does not say”, when in fact it does NOT say it, lol!!

21

Do you understand what is the difference between a tag and an element? Its difficult to answer if you don’t.