4 Replies - 9620 Views - Last Post: 28 June 2014 - 04:48 PM

#1 Mahmood Al-Bunni   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 25
  • Joined: 16-November 12

Error in wrapping HTML code content with a </div>

Posted 30 May 2014 - 04:11 PM

Hi,

I'm trying to end my HTML code with an equivalent </div> numbers to "learn more" classes. I've tried my best in adding, removing </div> to equalize the classes; but I'm still having errors that block me from debugging this basic code and proceed to next level. Please, show some help.
Thanks in advance.

<!DOCTYPE html>
<html>
  <body>
  
  <div class="nav">
  <div class="container">
<ul> 
	<li>Item 1</li> 
	<li>Item 2</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 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>
<div>
<div class="learn more">
<div class="container">
<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 class="learn more">
<div class="container">
<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>


Is This A Good Question/Topic? 0
  • +

Replies To: Error in wrapping HTML code content with a </div>

#2 BetaWar   User is online

  • #include "soul.h"
  • member icon

Reputation: 1630
  • View blog
  • Posts: 8,491
  • Joined: 07-September 06

Re: Error in wrapping HTML code content with a </div>

Posted 30 May 2014 - 04:17 PM

I am going to suggest indenting your code. It helps a lot and then your problem becomes pretty apparent:
<!DOCTYPE html>
<html>
  <body>

	  <div class="nav">
		  <div class="container">
			  <ul> 
				  <li>Item 1</li> 
				  <li>Item 2</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 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>
			  <div>
				  <div class="learn more">
					  <div class="container">
						  <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 class="learn more">
						  <div class="container">
							  <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>



I'll leave it to you to fix the problems.

Indenting code properly should be the first thing you do when programming.
Was This Post Helpful? 0
  • +
  • -

#3 andrewsw   User is online

  • never lube your breaks
  • member icon

Reputation: 6818
  • View blog
  • Posts: 28,228
  • Joined: 12-December 12

Re: Error in wrapping HTML code content with a </div>

Posted 30 May 2014 - 04:28 PM

You are also missing a head-tag, and title. These are required.

This post has been edited by andrewsw: 30 May 2014 - 04:29 PM

Was This Post Helpful? 0
  • +
  • -

#4 Mahmood Al-Bunni   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 25
  • Joined: 16-November 12

Re: Error in wrapping HTML code content with a </div>

Posted 27 June 2014 - 07:35 PM

Thanks a lot guys for your 'highly' appreciated help. I've been busy with my final exams, and finally... No more school! Am officially graduated!! > Destination: Computer Science hahaha, anyways.

@BetaWar: I'm following the tutorials of codeacademy. I went back for my code. Thanks for indenting my code, you turned it neat and elegant (readable), although I didn't get its technical advantage yet. I googled (code indentation) to get a clue.
It took me awhile to solve it. I'm not REALLY getting how it got solved though. I could not differ between my code and your "indented code", going through these lines of codes just get me dizzy as a beginner. However, what REALLY drove me to the solution is the following hint (Excerpted from the website marginal manual):
(Wrap all pieces of supporting content with two divs. Give the outer div a class="learn-more" and the inner div a class="container".)

Given datum:
1- Supporting content are (Travel, Host, Trust and Safety) categories.
2- the inner div = <div> | the outer div = </div>
3- Giving the inner div the "container" class, and the outer div "learn-more" class.

My scrutinized code accordingly:
<!DOCTYPE html>
<html>
  <body>
  
  <div class="nav">
  <div class="container">
<ul> 
	<li>Item 1</li> 
	<li>Item 2</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 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 class="learn-more">
<div class="container">
<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 class="learn-more">
<div class="container">
<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 class="learn-more">
  </body>
</html>


Wish if you explain how the problem is solved technical wise, but in a simple way... :-)


@andrewsw: Thanks buddy. But as I stated above. I'm following a series of tutorials. So I'm just writing what the tutorials content prompts me to write :-)
Was This Post Helpful? 0
  • +
  • -

#5 astonecipher   User is offline

  • Senior Systems Engineer
  • member icon

Reputation: 2938
  • View blog
  • Posts: 11,414
  • Joined: 03-December 12

Re: Error in wrapping HTML code content with a </div>

Posted 28 June 2014 - 04:48 PM

Assuming you are using a straight text editor, the simplest way to ensure everything matches up is to
Spoiler

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1