Help! How to wrap with div?


#1

I'm stuck. Can you please help me?

Here is my coding:

<!DOCTYPE html>
<html>
  <body>

<div class="learn-more">
 <div class="container">
  <div>
	<ul>
	  <li>Faris</li>
	  <li>Browse</li>
    </ul>
  <ul>
    <li>Sign Up</li>
    <li>Log in</li>
    <li>Help</li>
  </ul>
    </ul>
</div>
</div>

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

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

<div class="jumbotron">
<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>
<div>

 <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>
 <div>
  <h3>
  <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>

<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>
 </div>
</div>

  </body>
</html>

Thanks.


#2

I cant paste my coding. Help!


#3

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>

#4

I formatted your code for you. For next time you might like to try it yourself: http://discuss.codecademy.com/t/using-backticks-to-format-your-code/3697/2?u=albionsrefuge


#5

Thanks alot for replying. Just to confirm, all my code is correct but just a bit 'mixed up'?


#6

<!DOCTYPE html>
<html>
  <body>
 
<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>
  <div>
    <h3>Host</h3>
    <p>Renting out your unused space could pay your bills or fund your next vacation.</p>
  </div>
</div>

<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>
  </div>
</div>

<p>
  <a href= "#">Learn about trust at Airbnb</a>
</p>

 </body>
</html>
     <div class="container">
     </div>
   </div>
 
  <ul>
    <li>Faris</li>
      <li>Browse</li>
  </ul>
    <ul>
      <li>Sign Up</li>
      <li>Log in</li>
      <li>Help</li>
    </ul>
    
<div>
  <div>
   <h3>Host</h3>
     <p>Renting out your unused space could pay your bills or fund your next vacation.</p>
  </div>
</div>

<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>
  </div>
</div>

<p>
  <a href="#">Learn about trust at Airbnb</a> 
</p>

<div class="jumbotron">
  <div>
   <h3>Travel</h3>
    <p>From apartments and rooms to treehouses and boats: stay in unique spaces in 192 countries.</p>
  </div>
</div>

<p>
  <a href="#">See how to travel on Airbnb</a>
</p>

<div>
  <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>
  <div>
    <h3>Host</h3>
    <p>Renting out your unused space could pay your bills or fund your next vacation.</p>
  </div>
</div>

<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>
  </div>
</div>

<p>
  <a href= "#">Learn about trust at Airbnb</a>
</p>

 </body>
</html>

I've tried to make it a bit more organised but it hasn't worked


#7

I have a hard time telling what is correct when at least the major divs aren't in the right place. The code checker gets lost too.

You saw the layout I posted, the one that shows what order the three major divs must be in.

The very first one, right after the <body> tag is the nav div, I can't seem to find yours.


#8

By the time we are finished, we are going to have a page that looks like this:

If you place your nav at the bottom and your learn-more at the top, yours is not going to look like that at all.


#9

I don't how I can use Wrap with a div. can you help me?


#10

Yes I can. Which exercise are you working on?


#11

Thanks a lot for your help. I have decided to start from scratch. :smile:
Have a good day.


#12

<!DOCTYPE html>
<html>
  <body>
  
<div class="nav">
  <div class="container">
    <ul>
	  <li>Faris</li>
	  <li>Browse</li>
	</ul>
	
	<ul>
	  <li>Sign Up</li>
	  <li>Log In</li>
	  <li>Help</li>
	</ul>
  </div>	
</div>

<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>
  </div>
</div>

<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>
    </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>
</div>

  </body>
</html>

I did it!!!!


#14

Hey there, my name is Chandler and I'm actually having a problem as well. I already have my code organized a bit and I use tab spaces, just to keep tags well organized. Still yet I can't seem to figure out why my code isn't working when run through the compiler. I am able to use the condenser tool on a few lines that I believe are non- problematic So I'll highlight the lines I have deduced to most likely contain the issue. All the exercise asks of you is to wrap the code you've already written (the h3 travel to h3 trust and safety) headers and their descriptions in a div class defining them as a "learn more" division. It's a bit different then what we did in the exercises until now but only in that you're working backwards a bit by wrapping information you've already written rather than laying the foundation division and then filling it. Still yet it doesn't seem difficult. The problem is either in my writing of the division itself, or what seems more likely is that because I am unable to close the subdivision of lines 36-40 I assume something must be wrong there in what code I've written on "Trust and Safety" for some reason "Travel", and "Host" will allow me to condense their respective subdivisions but "Trust and Safety" is less than Trustworthy. I still can't completely believe that to be the issue though because I wrote that code for the exercise immediately prior to this one and it ran fine. Also I am looking at Faris' code above this and I'm seeing what he is saying worked to have a few flaws on the line he wrote for "Hosting". Even though he says it runs fine he's missing a closing tag for a paragraph containing the hyperlink for "learn more about hosting" under the hosting subdivision. Hope this all makes sense I'm not a vet just picking stuff up as I go. Thanks for your help in advance!

<!DOCTYPE html>
<html>
<body>
<div class="nav">
    <div class="countainer">
        <ul>
            <li>Chandler</li>
            <li>Browser</li>
        </ul>
        <ul>
            <li>Sign Up</li>
            <li>Log In</li>
            <li>Help</li>
    </ul>
    </div>
</div>
<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>
    </div>
</div>
<div class="learn-more">
    <div class="containter">
        <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 about trust at Airbnb<a/></p>**
        **</div>**
    </div>
</div>
</body>
</html>`

#15

It looks like you have been a bit creative with the typing:

  • countainer
  • containter

#16

HA!

Okay, I see the error there but I'm still unable to Submit. =/


#17

Once I fix those two typos, your code submits fine for me here.

  • You can try reloading/refreshing the page (browser confused).
  • Or, using the Reset Code button and pasting your code back in (exercise confused).

#18

Re-pasting worked thanks for cleaning the egg off my face xD