7/14 - Adding images


#1

All, I added this code to try and add images, but keep getting the error "Oops, try again. Add a

..
"



Neighborhood Guides


Not sure where to stay? We've created neighborhood guides for cities all around the world.

<div class="row">
<div class="col-md-4">
<div class="thumbnail">
<img src="http://goo.gl/0sX3jq">
</div>
<div class="thumbnail">
<img src="http://goo.gl/an2HXY">
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="http://goo.gl/Av1pac">
</div>
<div class="thumbnail">
<img src="http://goo.gl/vw43v1">
</div>

<div class="col-md-4">
<div class="thumbnail">
<img src="http://goo.gl/0Kd7UO">
</div>

Thus, i am sure my issue is with

opening and closing, but I am not sure where! Can someone point me in the right direction? Also, more broadly, WHEN do we need these? How do I know to add them in? Thanks for insight :smile:

#3

From what I can see of your code, your are missing a </div> closing tag at the end, try adding that.


#4

That's a good suggestions and sort of what I thought too! Sadly, adding closing tag like you suggest still causes an error... I think I am missing an opening or closing tag somewhere, just not sure where! :smile: thanks for your insight!


#5

Could you post your whole code so I could see the problem? Thanks.


#6

This is the section about Neighborhood Guides. The goal is to add more images to the last two columns. Here is my code in its current form... thanks for being so willing to offer advice and insight :smile:



<link rel="stylesheet" href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css">
<link rel="stylesheet" href="main.css">







<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>
    <a href="#">Learn More</a>
  </div>
</div> 

<div class="neighborhood-guides">
<div class="container">
<h2>Neighborhood Guides</h2>
<p>Not sure where to stay?  We've created neighborhood guides for cities all around the world.</p>

<div class="row">
<div class="col-md-4">
<div class="thumbnail">
<img src="http://goo.gl/0sX3jq">
</div>
<div class="thumbnail">
<img src="http://goo.gl/an2HXY">
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="http://goo.gl/Av1pac">
</div>
<div class="thumbnail">
<img src="http://goo.gl/vw43v1">
</div>

<div class="col-md-4">
<div class="thumbnail">
<img src="http://goo.gl/0Kd7UO">
</div>
</div>

<div class="learn-more">
  <div class="container">
  <div class="row">
     
    <div class="col-md-4">  
		<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 class="col-md-4">   
		<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 class="col-md-4">  
		<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>



#7

It's still a bit messed up, if you're unsure of how to format the code in your reply, look at my post on how to do it.


#8

Thanks for the great suggestion... this should do it.... I hope...

<!DOCTYPE html>
<html>

  <head>
    <link href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/shift.css" rel="stylesheet">
    
    <link rel="stylesheet" href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css">
    <link rel="stylesheet" href="main.css">
    
  </head>

  <body>
    <div class="nav">
      <div class="container">
        <ul class="pull-left">
          <li><a href="#">Name</a></li>
          <li><a href="#">Browse</a></li>
        </ul>
        <ul class="pull-right">
          <li><a href="#">Sign Up</a></li>
          <li><a href="#">Log In</a></li>
          <li><a href="#">Help</a></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>
        <a href="#">Learn More</a>
      </div>
    </div> 
    
    <div class="neighborhood-guides">
    <div class="container">
    <h2>Neighborhood Guides</h2>
    <p>Not sure where to stay?  We've created neighborhood guides for cities all around the world.</p>
    
    <div class="row">
    <div class="col-md-4">
    <div class="thumbnail">
    <img src="http://goo.gl/0sX3jq">
    </div>
    <div class="thumbnail">
    <img src="http://goo.gl/an2HXY">
    </div>
    <div class="col-md-4">
    <div class="thumbnail">
    <img src="http://goo.gl/Av1pac">
    </div>
    <div class="thumbnail">
    <img src="http://goo.gl/vw43v1">
    </div>
    
    <div class="col-md-4">
    <div class="thumbnail">
    <img src="http://goo.gl/0Kd7UO">
    </div>
    </div>

    <div class="learn-more">
	  <div class="container">
	  <div class="row">
	     
	    <div class="col-md-4">  
			<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 class="col-md-4">   
			<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 class="col-md-4">  
			<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>

#9

Ok now I can see the code, what was the error message?


#10

Like you have alluded to, I fiddled with opening and closing in different locations; I think that is the culprit.
I receive this message "Oops, try again. Add a

..
"

#11

Trying putting the error message in <pre> </pre> tags or grave accents (`)


#12

Hmmm didn't show up, eh? Okay... here is another attempt using


<pre> Oops, try again. Add a <div class="thumbnail">..</div> </pre>

#13

Good enough :stuck_out_tongue:
Well if the error message says 'Add a <div class="thumbnail">..</div>' then that's probably your problem, as I can't see a thumbnail class there!


#14

hmmm... yes, i am using the hint as suggested by the exercise... but sadly, I am making no progress... they recommend this code:

<div class="row">
  <div class="col-md-4">
    ...
  </div>

  <div class="col-md-4">
    <div class="thumbnail">
      <img src="http://goo.gl/Av1pac" >
    </div>
    <div class="thumbnail">
      <img src="http://goo.gl/vw43v1">
    </div>
  </div>

  <div class="col-md-4">
    <div class="thumbnail">
      <img src="http://goo.gl/0Kd7UO" >
    </div>
  </div>

</div>

mine seems to match, yet i am at an impasse!


#15

The code that you have in there may be affecting the rest of your columns. Could you show us that please?


#16

Here is rest of my code, albionsrefuge :smile: Do you think you could provide some insight here?

<!DOCTYPE html>
<html>

  <head>
    <link href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/shift.css" rel="stylesheet">
    
    <link rel="stylesheet" href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css">
    <link rel="stylesheet" href="main.css">
    
  </head>

  <body>
    <div class="nav">
      <div class="container">
        <ul class="pull-left">
          <li><a href="#">Name</a></li>
          <li><a href="#">Browse</a></li>
        </ul>
        <ul class="pull-right">
          <li><a href="#">Sign Up</a></li>
          <li><a href="#">Log In</a></li>
          <li><a href="#">Help</a></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>
        <a href="#">Learn More</a>
      </div>
    </div> 
    
    <div class="neighborhood-guides">
    <div class="container">
    <h2>Neighborhood Guides</h2>
    <p>Not sure where to stay?  We've created neighborhood guides for cities all around the world.</p>
    
    <div class="row">
    <div class="col-md-4">
    <div class="thumbnail">
    <img src="http://goo.gl/0sX3jq">
    </div>
    <div class="thumbnail">
    <img src="http://goo.gl/an2HXY">
    </div>
    <div class="col-md-4">
    <div class="thumbnail">
    <img src="http://goo.gl/Av1pac">
    </div>
    <div class="thumbnail">
    <img src="http://goo.gl/vw43v1">
    </div>
    
    <div class="col-md-4">
    <div class="thumbnail">
    <img src="http://goo.gl/0Kd7UO">
    </div>
    </div>

    <div class="learn-more">
	  <div class="container">
	  <div class="row">
	     
	    <div class="col-md-4">  
			<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 class="col-md-4">   
			<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 class="col-md-4">  
			<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>

#17

It's a bit hard to see because you have your code all scrunched up, but your first column is missing its closing tag.

Here is your code with some breathing room:

    <div class="col-md-4">
        <div class="thumbnail">
            <img src="http://goo.gl/0sX3jq">
        </div>
        <div class="thumbnail">
            <img src="http://goo.gl/an2HXY">
        </div>
    <!-- the first column needs a closing tag here -->

    <div class="col-md-4">

#18

Thanks for offering advice albionsrefuge! I thought that a closing or opening tag was my problem too. I tried what you suggested and I am still getting this error message:

Oops, try again. Inside the third <div class="col-md-4">..</div>, add a <div class="thumbnail">..</div>

There has to be something simple that I am missing... ergh! Any additional thoughts would be greatly appreciated :smile:


#19

In your original post, you are also missing the closing tag for your second column.


#20

Bam! That did it! Thanks so much for your advice!!!! :sunglasses:


#21

Try to get in the habit of nesting your code like this:

<div>
        <div>
                <h1></h1>
                <p></p>
        </div>
</div>

it will help you to track the opening and closing your tags