Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS How to Make a Website Styling Web Pages and Navigation Polish the Navigation and Footer

Holly Holliday
Holly Holliday
1,563 Points
Posted by Holly Holliday
Holly Holliday
1,563 Points

Newby: Doesn't know what's wrong but KNOW's something is wrong

My html has a few red highlighted places and I can't figure out what's wrong. Here is the code: This is highlighted which is placed right after the Contact.html line </ul> </nav> </header> </section>

These lines are highlighted in red. They reside after the Creating shapes using repetition line. </a> </li> </ul> </section>

These lines are highlighted in red. They reside after the </footer> </div> </body> </html>

Thanks for your help

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <TITLE> Holly Holliday | Designer</TITLE> <link rel="stylesheet" href="css/normalize.css"> <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> </head> <body> <header> <a href="index.html"id="logo"> <h1>Holly Holliday</h1> <h2>Designer</h2> </a> <nav> <li><a href="index.html"class="selected">Portfolio</a></li> <li><a href="about.html">About</a></li> <li><a href="Contact.html">Contact</a></li> </ul> </nav> </header> </section> <div id="wrapper"> <section> <ul id="gallery"> <ul> <li> <a href="img/numbers-01.jpg"></a> <img src="img/numbers-01.jpg" alt=""> <p>Experimenting with color and texture.</p> </li> <li> <a href="img/numbers-02.jpg"></a> <img src="img/numbers-02.jpg" alt=""> <p>Playing with blending modes in Photoshop.</p> </li> <li> <a href="img/numbers-06.jpg"></a> <img src="img/numbers-06.jpg" alt=""> <p>Trying to create an 80's style of glows.</p> </li> <li> <a href="img/numbers-09.jpg"></a> <img src="img/numbers-09.jpg" alt=""> <p>Drips created using PHotoshop brushes.</p> </li><li> <a href="img/numbers-12.jpg"></a> <img src="img/numbers-12.jpg" alt=""> <p>Creating shapes using repetition.</p> </a> </li> </ul> </section> <footer> <a href="http://twitter.com/hholliday"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a> <a href="http://facebook.com/hholliday"><img src="img/facebook-wrap.png" alt="Facebook Logo"class="social-icon"></a> <p>© 2015 Holly Holliday.</p> </footer> </div> </body> </html>

Holly Holliday
Holly Holliday
1,563 Points
Holly Holliday
Holly Holliday
1,563 Points

well once I posted it --it took out my !!! to help you find it.

5 Answers

Joe Cochran
Joe Cochran
18,249 Points
Joe Cochran
Joe Cochran
18,249 Points

Your list items have an extra closing A tag:

<li>
        <a href="img/numbers-12.jpg"></a>
           <img src="img/numbers-12.jpg" alt="">
           <p>Creating shapes using repetition.</p>
      </a>
      </li>

change this to:

<li>
        <a href="img/numbers-12.jpg">
           <img src="img/numbers-12.jpg" alt="">
           <p>Creating shapes using repetition.</p>
      </a>
</li>

UPDATE: I Saw Jonny Strange's comment and took another look through. He correctly mentioned that at the <ul> is not opened inside the <nav> element.

SECOND UPDATE: Added an opening ul tag I forgot to point out the first time.

Also, I took another look and noticed this bit:

<div id="wrapper">
  <section>
     <ul id="gallery">
    <ul>

You only need one opening <ul>, so I would remove the one without the ID.

You also appear to be missing the opening html, head, and body tags. Here is the full file, corrected. Comments added where I have made changes.

<!doctype html>
<html lang="en"> <!-- added opening html tag -->
<head><!-- added opening head tag -->
    <meta charset="UTF-8">
    <!-- changed <TITLE> to lowercase for consistency -->
    <title> Holly Holliday | Designer</title>
    <!-- Extra <title> was deleted: <title>Document</title> -->
    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">
</head> <!-- added closing head tag -->
<body> <!-- added opening body tag -->
    <header>
        <a href="index.html" id="logo"> <!-- missing space between "index.html" and id -->
            <h1>Holly Holliday</h1>
            <h2>Designer</h2>
        </a>
        <nav>
            <ul> <!-- add an opening <ul> here -->
                <li><a href="index.html" class="selected">Portfolio</a></li> <!-- missing space between "index.html" and class -->
                <li><a href="about.html">About</a></li>
                <li><a href="Contact.html">Contact</a></li>
            </ul>
        </nav>
    </header>
    <div id="wrapper">
        <section>
            <ul id="gallery">
                <li>
                    <a href="img/numbers-01.jpg"> <!-- removed incorrect </a> -->
                        <img src="img/numbers-01.jpg" alt="">
                        <p>Experimenting with color and texture.</p>
                    </a> <!-- added correct </a> -->
                </li>
                <li>
                    <a href="img/numbers-02.jpg"> <!-- removed incorrect </a> -->
                        <img src="img/numbers-02.jpg" alt="">
                        <p>Playing with blending modes in Photoshop.</p>
                    </a> <!-- added correct </a> -->
                </li>
                <li>
                    <a href="img/numbers-06.jpg"> <!-- removed incorrect </a> -->
                        <img src="img/numbers-06.jpg" alt="">
                        <p>Trying to create an 80's style of glows.</p>
                    </a> <!-- added correct </a> -->
                </li>
                <li>
                    <a href="img/numbers-09.jpg"> <!-- removed incorrect </a> -->
                        <img src="img/numbers-09.jpg" alt="">  
                        <p>Drips created using PHotoshop brushes.</p>
                    </a> <!-- added correct </a> -->
                </li>
                <li>
                    <a href="img/numbers-12.jpg"> <!-- removed incorrect </a> -->
                        <img src="img/numbers-12.jpg" alt="">
                        <p>Creating shapes using repetition.</p>
                    </a> <!-- added correct </a> -->
                </li>
            </ul>
        </section>
        <footer>
            <a href="http://twitter.com/hholliday"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
            <a href="http://facebook.com/hholliday"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a> <!-- added missing space between "Facebook Logo" and Class -->
            <p>&copy; 2015 Holly Holliday.</p>
        </footer>
    </div>
</body><!-- added closing body tag -->
</html><!-- added closing html tag -->
Holly Holliday
Holly Holliday
1,563 Points
Holly Holliday
Holly Holliday
1,563 Points

Thanks. I still have red highlight copy after this section: </section>

then below the <</footer> red----</div> red---</body> red---</html>

then the four lines above <div id="wrapper" are all red. </ul> </nav> </header> </section>

Joe Cochran
Joe Cochran
18,249 Points

I've updated the answer with a full walkthrough of the file. Let me know if you have any more questions!

Jonny Strange
Jonny Strange
6,412 Points
Jonny Strange
Jonny Strange
6,412 Points

Hi Holly, I've spotted another error, you haven't opened your unordered list tag in your navigation, but you've closed it. You may need to think about fixing this as well.

Jonny Strange
Jonny Strange
6,412 Points
Jonny Strange
Jonny Strange
6,412 Points

You've opened the unordered list twice in your 'gallery', just delete the second ul tag

Holly Holliday
Holly Holliday
1,563 Points
Holly Holliday
Holly Holliday
1,563 Points

Thanks Joe. I made your changes and still get red highlighted text. I've highlighted the lines with !!! on either side. It's on line 20, 21, 22 and 24 then the last 3 lines. I was doing so well and now am so confused. Such is life! thanks for your help---

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> Holly Holliday | Designer</title> <link rel="stylesheet" href="css/normalize.css"> <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> </head> <body> <header> <a href="index.html"id="logo"> <h1>Holly Holliday</h1> <h2>Designer</h2> </a> <nav> <li><a href="index.html"class="selected">Portfolio</a></li> <li><a href="about.html">About</a></li> <li><a href="Contact.html">Contact</a></li> !!! </ul>!!! !!! </nav> !!! !!!</header> !!! <div id="wrapper"> !!!</section> !!! <section> <ul id="gallery"> <li> <a href="img/numbers-01.jpg"> <img src="img/numbers-01.jpg" alt=""> <p>Experimenting with color and texture.</p> `</a> </li> <li> <a href="img/numbers-02.jpg"> <img src="img/numbers-02.jpg" alt=""> <p>Playing with blending modes in Photoshop.</p> </a> </li> <li> <a href="img/numbers-06.jpg"> <img src="img/numbers-06.jpg" alt=""> <p>Trying to create an 80's style of glows.</p> </a> </li> <li> <a href="img/numbers-09.jpg"> <img src="img/numbers-09.jpg" alt=""> <p>Drips created using PHotoshop brushes.</p> </a> </li>

        <li>
    <a href="img/numbers-12.jpg">
       <img src="img/numbers-12.jpg" alt="">
       <p>Creating shapes using repetition.</p>
  </a>

</li> </ul> </section> <footer> <a href="http://twitter.com/hholliday"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a> <a href="http://facebook.com/hholliday"><img src="img/facebook-wrap.png" alt="Facebook Logo"class="social-icon"></a> <p>© 2015 Holly Holliday.</p> </footer> !!! </div> !!! !!! </body> !!! !!!</html> !!!

Joe Cochran
Joe Cochran
18,249 Points

Looks like I missed one. Inside the <nav> element, there is a closing <ul> tag but no opening <ul> tag:

<header>
  <a href="index.html"id="logo">
    <h1>Holly Holliday</h1>
    <h2>Designer</h2>
  </a>
  <nav>
    <ul> <!-- need an opening <ul> here as well. -->
       <li><a href="index.html"class="selected">Portfolio</a></li>
       <li><a href="about.html">About</a></li>
       <li><a href="Contact.html">Contact</a></li>
    </ul>
  </nav>
</header>

I went in and added a comment to my original answer to include this one as well.

Holly Holliday
Holly Holliday
1,563 Points
Holly Holliday
Holly Holliday
1,563 Points

Thank you so much. I even learned something.