Error message in chapter 5


#1

When i try to create a CSS rule for the left_column and right_column classes. It throws an error of- It looks like the left column is still in front of the right column in the HTML. You should switch them!
I don’t know how to resolve the issue.
please help!


#2

You can help by providing the information we request.

  1. A link to the exact exercise
  2. your code
  3. the error message
  4. your question.

#3

https://www.codecademy.com/en/courses/websites-r-fun/0/6


#4

my code -

<!DOCTYPE html>
<html>
<head>
<style>

.left_column {
    margin-right: 170px;
    }
    
.right_column {
    float: right;
    width: 160px;
    }


</style>
<script>
</script>
</head>


<body>
<div id= "main_content">
<div class= "left_column">
<p>Well Hello there!</p>

</div>
<div class= "right_column">
<p></p>

</div>

</div>


<ul id= "nav_container">
<li><a href = "Home.html"> Home </li>
<li><a href = "Recipes.html"> Recipes </li>
<li><a href = "Contact.html"> Contact </li>
</ul>
</body>
</html>

#5

error message - Oops, try again. It looks like the left column is still in front of the right column in the HTML. You should switch them!

Question- how to resolve this


#6

It’s pretty common to see the nav at the top of the document, not the bottom.

Dig up some lorem ipsum text to fill up the paragraph in the left column so it has some dimensions. Use about 200 words or more.

For the fun of it, try writing the right_column markup above the left_column. It’s getting floated out of normal flow so it won’t affect anything and might just work as you expect.

Use this image to fill the column with a 160 x 600 content.

<img src="http://i1150.photobucket.com/albums/o605/slaundy/160x600ad.gif">

#7

Thank you so very much. I appreciate your help
I will try it out.!


#8

link - https://www.codecademy.com/en/courses/websites-r-fun/0/7

code -

<!DOCTYPE html>
<html>
<head>
<style>

.left_column {
    margin-right: 170px;
    }
    
.right_column {
    float: right;
    width: 160px;
    }
ul {
  list-style: none;
  margin-bottom: 15px;
  
}

li {
 display: inline-block;
 text-decoration: none;
 padding: 15px;
}

a:link{
    color: blue;
    display: inline-block;
}

a:hover {
    color: hotpink;
    list-style: none;
}


</style>
<script>
</script>
</head>


<body>
<ul id= "nav_container">
<li><a href = "Home.html"> Home </li>
<li><a href = "Recipes.html"> Recipes </li>
<li><a href = "Contact.html"> Contact </li>
</ul>
<div id= "main_content">

<div class = "right_column">
<p></p>
</div>

<div class= "left_column">
<p>Well Hello there!
It’s pretty common to see the nav at the top of the document, not the bottom.

Dig up some lorem ipsum text to fill up the paragraph in the left column so it has some dimensions. Use about 200 words or more.

For the fun of it, try writing the right_column markup above the left_column. It’s getting floated out of normal flow so it won’t affect anything and might just work as you expect.
ahahahahha
ahahahahah \n
dhjhdhbcb</p>

</div>


</div>

<img id = "logo" src = "http://metaboliccooking.com/welcome/index-redesign/img/top-slideshow/metabolic-cooking-8.jpg">

</body>
</html>

error - Oops, try again. Make sure you defined the style for a:hover.

Question - I do not understand the meaning of the error. please help


#9

A logo should not be larger than about 200 x 150. Noboby uses a photograph for a logo. The place for the logo is the top left corner of the page, in the header. The navbar will be just below that.

Use this image so there is no hotlinking…

<img id="logo" src="http://codecademy.com/assets/codecademy_logo_small.png">

You did not search for lorem ipsum? Use it, not my text.

Where is the filler image in the right column?

The image you have used is hotlinked from a domain that you do not control. That is copyright infringement. Don’t hotlink to images on someone else’s site unless you want a stern letter from their lawyer.

As for white space, you have way too much of it where it is not expected.

<a href="#">Home</a>

Notice no white space?

It is not a good practice to capitalize html file names.

<a href="recipes.html">Recipes</a>

The Home page is

<a href="index.html">Home</a>

by default. The server handles all requests to the domain by serving that file from the root directory of the site.

Make sure to remove all white space from inside your tags.

<div id="main_content">

<div clss="right_column">

#10

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