Lesson 11 Making a Div

#1

Lesson 11 is not working properly... or I just can't see the solution.

Here is the code:

<!DOCTYPE html>
<html>
<div class="container'>
            <head>
<h2>Ollie</h2>  
  <ul>
  <li>sign up</li>
  <li>search bikes</li>
  <li>reserve a bike</li>
  <li>about us</li>
</ul>
  
  
  <h1>Ollie Bike Sharing</h1>
  <h3>Share Your Pedals with the World.</h3>
  <p>
    Need a set of wheels while you're in town? Ue Ollie to pair your perfect vacation with a stylish, affordable bike rental. Here is a <a href="cities.html">list</a> of cities where you can find us.
  </p>
  <video width="320" height="240" controls>
  <source src="https://s3.amazonaws.com/codecademy-content/projects/make-a-website/lesson-1/ollie.mp4" type="video/mp4">
</video>
  <meta charset="utf-8"/>
  <link rel="stylesheet" type="text/css" href="main.css"> 
                                                        
</head>
                                                       
                                                        
                                                      
<body>
</div>

</body>
</html>

And Here is the Lesson Instructions.

1.
First, we will enclose all the elements between<body>...</body>in a div element with a class attribute of "container".

<div class="container">
...
</div>

All the HTML elements you added in previous exercises should be inside the opening <div class="container">:

the navbar h2
the navbar ul
the company heading h1
the tagline h3
the paragraph
the video
Make sure the closing</div>tag is at least one line below the closing tag.

Click Run. Notice that the elements have shifted in the web browser. We will fix this effect later on.

There is a contradiction in this. The body is at the bottom of the page. all of the information is outside of "body". If you follow the instructions based on the keyword "body" then it looks like this:

<!DOCTYPE html>
<html>
<head>
<h2>Ollie</h2>  
  <ul>
  <li>sign up</li>
  <li>search bikes</li>
  <li>reserve a bike</li>
  <li>about us</li>
</ul>
  
  
  <h1>Ollie Bike Sharing</h1>
  <h3>Share Your Pedals with the World.</h3>
  <p>
    Need a set of wheels while you're in town? Ue Ollie to pair your perfect vacation with a stylish, affordable bike rental. Here is a <a href="cities.html">list</a> of cities where you can find us.
  </p>
  <video width="320" height="240" controls>
  <source src="https://s3.amazonaws.com/codecademy-content/projects/make-a-website/lesson-1/ollie.mp4" type="video/mp4">
</video>
  <meta charset="utf-8"/>
  <link rel="stylesheet" type="text/css" href="main.css"> 
                                                        
</head>
                                                       
                                                        
       <div class="main">                                               
<body>

</body>
        </div> 
</html>

So... I tried it like this, which is removing the body factor from the instructions

<!DOCTYPE html>
<html>
<head>
  <div class="main">
<h2>Ollie</h2>  
  <ul>
  <li>sign up</li>
  <li>search bikes</li>
  <li>reserve a bike</li>
  <li>about us</li>
</ul>
  
  
  <h1>Ollie Bike Sharing</h1>
  <h3>Share Your Pedals with the World.</h3>
  <p>
    Need a set of wheels while you're in town? Ue Ollie to pair your perfect vacation with a stylish, affordable bike rental. Here is a <a href="cities.html">list</a> of cities where you can find us.
  </p>
  <video width="320" height="240" controls>
  <source src="https://s3.amazonaws.com/codecademy-content/projects/make-a-website/lesson-1/ollie.mp4" type="video/mp4">
</video>
  <meta charset="utf-8"/>
  <link rel="stylesheet" type="text/css" href="main.css">
    </div>
</head>
                                                       
                                                                                                  
<body>

</body>
</html>

...and it is still considered incorrect.

Am I doing something wrong or are these instructions incorrect?

#2

^ This bit of code should be between the <head> </head> tags

^This bit should be inside <body></body> tags
It might just be easier to reset the lesson and start again :slight_smile: 




<!DOCTYPE html>
<html>
<head>
    <!-- All info for the page that is not visible in the 
    actual page will go here, linking, script tags, meta, title ect -->
</head>
<body>
    <!-- all info that is visible in the body will go here, 
   like the div's, images, hyper links, 
   headings, paragraphs tables ect -->
</body>
</html>
#3

2 posts were split to a new topic: 11.Add a div

#7

It keeps converthing the code, last try...

<head>
  <title>Ollie Bike Sharing</title>
	<meta charset="utf-8"/>
	<link rel="stylesheet" type="text/css" href="main.css">

  </head>
  

	
<body>
  

  
  
  <div class="main">
	
  
  
   <h2>Ollie</h2> 
  
  
  
  <ul>
  <li>sign up</li>
  <li>search bikes</li>
  <li>reserve a bike</li>
  <li>about us</li>
</ul>
  
  
  <div>
    
    </div>
  
  
  
  
  
  
  <h1>Ollie Bike Sharing</h1>
  
  
  
  <h3>Share Your Pedals with the World.</h3>
  
  
  
  <p>Need a set of wheels while you're in town? Use Ollie to pair your perfect vacation with a stylish, affordable bike rental.Here is a <a href="cities.html">list</a> of cities where you can find us.</p>
  
 <video width="320" height="240" controls>
  <source src="https://s3.amazonaws.com/codecademy-content/projects/make-a-website/lesson-1/ollie.mp4" type="video/mp4">
</video> 
</div> 
  
  </body>
#8

I clicked "reset exercise" after screwing up the code and it does absolutely nothing. It just displays what I currently have. This page has bugs in it.

#9

Hope this will help you :slight_smile: 

<!DOCTYPE html>
<html>
<head>
  <title>Ollie Bike Sharing</title>
  <meta charset="utf-8"/>
  <link rel="stylesheet" type="text/css" href="main.css">
</head>
  <div class="container">
    
<body>
 <div class="nav">
   
  <h2>
    Ollie
  </h2>
  <ul>
    <li>sign up</li>
    <li>search bikes</li>
    <li>reserve a bike</li>
    <li>about us</li>
  </ul>
  </div>
  <div class="main">
   
<h1>
  Olive Bike Sharing
 </h1>
  <h3>
    Share Your Pedals with the World
  </h3>
  	<p>
      Need a set of wheels while you're in town? Use Ollie to pair your perfect vacation with a stylish, affordable bike rental.
  </p>
  <p>
    Here is a <a href="cities.html">list</a> of cities where you can find us.
  </p>
  <video width="320" height="240" controls>
  	<source src="https://s3.amazonaws.com/codecademy-content/projects/make-a-website/lesson-1/ollie.mp4" type="video/mp4">
  </video>
  </div>
</body>
  </div>
</html>
#10

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.