Wrapping with a div confusion


#1

its telling me that I need to add a div with the learn-more class, but i think I already did? Please help!

<div class="learn more">
    <div class="container">
<div>
  <h3>Travel</h3>
   <p>From apartments and rooms to treehouses and boats: stay in unique spaces in 192 countries</p>
   <p>
       <a href="#">See how to travel on Airbnb</a>
   </p>
  </div>
  <div>
    <h3>Host</h3>
    <p>Renting out your unused space could pay your bills or fund your next vacation</p>
    <p>
        <a href="#">Learn more about hosting</a>
    </p>
  </div>
  <div>
    <h3>Trust and safety</h3>
    <p>From Verified ID to our worldwide customer support team, we've got your back.</p>
    <p>
        <a href="#">Learn more about trust at Airbnb</a>
   </p>
  </div>
 </div>
</div>



#2

This code is where the problem lies.

<div class="jumbotron"> <div>
<div class="container"> <div>
<h1>Find a Place to Stay</h1>
<p>Rent from people in over 34,000 cities and 192 countries.</p>
</div>
</div>

That is the same as:

<div class="jumbotron">  <!-- starts jumbotron -->
    <div>  <!-- starts an un-named div -->
        <div class="container">  <!-- starts container -->
            <div>  <!-- starts a second un-named div -->
                <h1>Find a Place to Stay</h1>
                <p>Rent from people in over 34,000 cities and 192 countries.</p>
	    </div>  <!-- ends second un-named div -->
	</div>  <!-- ends container -->

Do you see the problem that is being caused by those two <div> tags?


#3

Thank you so much! I was confused earlier and those snuck in there. crazy how it impacts something later on like that.


#4

Actually its still saying I need to add a div with the learn-more class...


#5

You are missing the hyphen in yours.


#6

the devil is in the details lol thanks


#7
<!DOCTYPE html>
<html>
  <body>
  <div class="jumbotron">
  <div class="container">
  	<h1>"Find a place to stay"</h1>
	  <p> "Rent from people in over 34,000 cities and 192 countries."</p>
	<ul>
	  <li>Rida</li> 
	  <li>Browse</li>
	  </ul>
	  <ul>
	  <li>Sign up</li>
	  <li>Log in</li>
	  <li>Help</li>
	  
	</ul>
	</div>
	</div>
	
	<div>
	<h3>Travel</h3>
	<p> "From apartments and rooms to treehouses and boats: stay in unique spaces in 192 countries." <br>
	
	<a href="#">See how to travel on Airbnd</a>
	</p>
	</div>
	<div>
	<h3>Host</h3>
	<p>"Renting out your unused space could pay your bills or fund your next vacation."</p>
	<p>
	<a href="#">"Learn about trust at Airbnb"</a>
	</p>
	</div>
	<div>
	<h3>"Trust and Safety"</h3>
	<p> "From Verified ID to our worldwide customer support team, we've got your back."</p>
	<p>
	<a href="#">"Learn about trust at Airbnb"</a>
	</p>
	</div>



  </body>
</html>

I cannot understand chapter 8?? what i have to do next? create new div tag?


#9

@cloudsurfer17222, yes you will have to create two new div elements in exercise 8. This is very much like you did in exercise 3 when you created two new divs to wrap your lists in and in exercise 5 when you created two new divs to wrap your jumbotron code.

You have things just a little bit mixed up there. You may want to try looking back over a couple of the previous exercises to make sure that you get things in the expected order.

Keeping your matching open/close tags at the same indent level will help you see what you are building.

Here is the overall plan that you are aiming for:

<!DOCTYPE html>
<html>
  <body>

    <div class="nav">
      <div class="container">
      ... your nav code goes in here
      </div>
    </div>

    <div class="jumbotron">
      <div class="container">
      ... your jumbotron code goes in here
      </div>
    </div>
    
    <div class="learn-more">
      <div class="container">
        ... your learn-more code goes in here
      </div>
    </div>

  </body>
</html>

#10

thanks bu what to place inside the div tag
heading paragraph or element???


#11

You are going to place the Travel, Host and Trust code that you wrote in the last two exercises.


#12
  <!DOCTYPE html>
    <html>
    <body>
    <div class="nav">
    <div class="container">
    <h3>Travel</h3>
    <p>"From apartments and rooms to treehouses and boats stay in unique spaces in 192 countries."</p>
    <a href="#">See how to travel on Airbnd</a>
    </div>
    </div>
    <div class="jumbotron">
    <div class="container">
    <h3>Host</h3>
    <p>"Rent from people in over 34,000 cities and 192 countries."</p>
    <a href="#">see more</a>
    </div>
    </div> 
     <div class="learn-more">
     <div class="container">
    <h3>Trust</h3>
    <p>"Get to know our customer services"</p>
    <a href="#">visit for more</a>
    </div>
    </div>
    
    </body>
    </html>

#13

what mistake i do now


#14

Oh, dear.

In the nav div, you should have the two lists that you wrote in exercise 1 and 2.
In the jumbotron div, you should have the code that you wrote in exercise 4 -- the h1 and the p elements.
In the learn-more div, you should have the Travel, Host and Trust code that you wrote in exercises 6 and 7.


#15
<!DOCTYPE html>
<html>
<body>
 <div class="nav">
 <div class="container">
  <ul>
  <li>Rida</li>
  <li>Browse</li>
  </ul>
  <ul>
  <li>Sign up<li>
  <li>Login<li>
  <li>Help<li>
  </ul>
  </div>
  </div>
  <div class="jumbotron">
  <div class="container">
  <ul>
  <li>browse</li>
  <li>Login</li>
  <li>Help</li>
  </ul> 
  </div>
  </div>
  <h3>Find a place to stay<h3>
  <p>"Rent from people in over 34,000 cities and 192 countries."</p>
  <a href="#">click here for more</a>
  <div class="learn-more">
  <div class="container">
 	<h3>Travel</h3>
	<p> "From apartments and rooms to tree houses and boats: stay in unique spaces in 192 countries." <br>
	
	<a href="#">See how to travel on Airbnd</a>
	</p>
	</div>
	<div>
	<h3>Host</h3>
	<p>"Renting out your unused space could pay your bills or fund your next vacation."</p>
	<p>
	<a href="#">"Learn about trust at Airbnb"</a>
	</p>
	</div>
	<div>
	<h3>"Trust and Safety"</h3>
	<p> "From Verified ID to our worldwide customer support team, we've got your back."</p>
	<p>
	<a href="#">"Learn about trust at Airbnb"</a>
	</p>
	</div>
	</div>
  </body>
  </html>

#16

could you please sort out my mistake?


#17

You shouldn't have a list in your jumbotron. Have a look at exercise 4 to get the right elements for it.


#18

Please can you help where am I going wrong?


#19

Hi @asgashwin, you are missing a hyphen in the class name. As it is, that is being interpreted as two different class names, learn and more.


#20

What do I keep doing wrong? It won't let me advance, keeps telling me I need to place the supporting content inside the <div class ="container">...</div>

!DOCTYPE html>
<html>
  <body>
  <div class="jumbotron">
    <div class="learn-more">
      <div class="container">
    <h1>Find a place to stay</h1>
    <p>Rent from people in over 34,000 cities and 192 countries.</p>
    </div>
</div>    
<div>
     <h3>Travel</h3>
     
     ...
     </div>
     
     <p>From apartments and rooms to treehouses and boats: stay in unique spaces in 192 countries.</p>
     <p>
       <a href="#">See how to travel on Airbnb.
     </p>
  </div>
  <div>
     <h3>Host</h3>
     
     ...
     </div>
     <p>Renting out your unused space could pay your bills or fund your next vacation.</p>
     <p>
        <a href="#">Learn more about hosting</a>
     </p>
    </div>
    <div>
      <h3>Trust and Safety</h3>
      
      ...
      </div>
      <p>From Verified ID to our worldwide customer support team, we've got your back.</p>
      <p>
      <p> <a href="#">Learn about trust at Airbnb</a>
      </p>
      </div>
    </div>
</div>    
	<ul>
	  <li>Heidi Shuler</li>
	  ...
	  </ul>
	  <ul>
	  <li>Browse</li>
	  ...
	  </ul>
      <ul>
      <li>Sign Up</li>
      ...
      </ul>
      <ul>
      <li>Log In</li>
      ...
      </ul>
      <ul>
	<li>Help</li>
  </body>
</html>

#21

You have things just a little bit mixed up there. You may want to try looking back over a couple of the previous exercises to make sure that you get things in the expected order.

Keeping your matching open/close tags at the same indent level will help you see what you are building.

Here is the overall plan that you are aiming for:

<!DOCTYPE html>
<html>
  <body>

    <div class="nav">
      <div class="container">
      ... your nav code goes in here
      </div>
    </div>

    <div class="jumbotron">
      <div class="container">
      ... your jumbotron code goes in here
      </div>
    </div>
    
    <div class="learn-more">
      <div class="container">
        ... your learn-more code goes in here
      </div>
    </div>

  </body>
</html>