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

HTML

Vidit Shah
Vidit Shah
6,037 Points
Posted by Vidit Shah
Vidit Shah
6,037 Points

White space error in website

here is my code i am getting a white space between my elements here is the pic

<a href="http://tinypic.com?ref=15wu3o" target="_blank"><img src="http://i61.tinypic.com/15wu3o.png" border="0" alt="Image and video hosting by TinyPic"></a>

IMG

http://i61.tinypic.com/15wu3o.png

Code of that page 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
    <title> Die Hard </title>
     <link rel="stylesheet" href="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="main.css">
</head>
    <header>
        <h1>Die Hard</h1>
        <h2>Be the Change You Wish To See! </h2>
    </header>

    <nav>
<ul>   
    <li>  <a href="index.html">About us</a></li>
    <li><a href="Events.html">Events</a></li>
    <li><a href="contact.html">Contact</a></li>
        </ul>    
    </nav>

    <body>
        <div class="Gallery">


            <ul>

                <li> <a href="blooddonation.html"><img src="b4.jpg"><p>Blood Donation!</p></a></li>

                <li> <a href="independenceday,html"><img src="third%20year/15th%20august/IMG_4630.JPG"><p id="inde">Independence day</p></a></li>
                <li> <a href="beachcleaning.html"><img src="third%20year/beach%20cleaning/IMG-20140909-WA101.jpg"><p>Beach Cleaning</p></a></li>

                <li><a href="Weeklyevents.html"><img src="third%20year/IMG_0410.JPG"><p>Weekly events</p></a></li>


                <li><a href="village.html"><img src="third%20year/village/IMG_7275.JPG"><p>Cloth Distribution in Remote Village</p></a></li>
                <li><a href="interglobe.html"><img src=i3.png><p>InterGlobe</p></a></li>
                <li><a href="childrenday.html"><img src="c3.jpg"><p>Children's Day</p></a></li>
                <li><a href="donation.html"><img src="d5.png"><p>Donations by our club</p></a></li>



             <div id="old" > <li><a href="oldage.html"><img src="third%20year/womens%20day/IMG-20140910-WA0034.jpg"><p>Mother's Day</p></a></li></div>



            </ul>

        </div>


    </body>
</html>
Ted Sumner
Ted Sumner
Courses Plus Student 17,967 Points

Edited to format post.

3 Answers

Nathan Blair
Nathan Blair
9,551 Points
Nathan Blair
Nathan Blair
9,551 Points

Well there are a few things that could be wrong here. Let's take a look at each:

Your HTML syntax is incorrect. This is important to get right, because it's how you're communicating with the browser.

First, you need a head tag. This will contain your document title and any stylesheet links, and should appear above your body tag as follows:

<!DOCTYPE html>
<head>
    <title> Die Hard </title>
    <link rel="stylesheet" href="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="main.css">
</head>

Next, you should include all visual elements of your page within the body tag. This includes elements such as "header", "div", "footer" and really most HTML elements. Think of the body tag as the visual part of your website. It's sort of what's displayed on the browser window. So your body tag should look like this:

<body>
    <header>
        <!-- header content goes here -->
    </header>

    <nav>
        <!-- navigation content goes here -->
    </nav>

    <div class="Gallery">
        <!-- Gallery content goes here -->
    </div>

</body>

In your nav element, you've created an unordered list (ul) element, but forgot to include the opening ul tag for it. Make sure your nav element looks like this:

<nav>
    <ul>
        <li><a href="index.html">About us</a></li>
        <li><a href="Events.html">Events</a></li>
        <li><a href="contact.html">Contact</a></li>
    </ul>    
</nav>

Remove any whitespace characters within li tags. List Item tags could interpret white space characters like " " literally as white space. I notice there are a few instances of spaces before your anchor (a) tags.

Be sure to close your HTML tag at the bottom. Otherwise, this could cause odd things to happen depending on the browser being used.

Lastly, it's not good practice to wrap an li element with a div. as you've done with your "old" div. You should make sure that the direct children of any ul element are only li elements, and just as well, you should make sure that all li elements are contained within a parent ul.

I advise that you re-work your code with these fixes to clean up your code. If none of this helps, please let us know exactly what elements you're experiencing white space.

Ted Sumner
Ted Sumner
Courses Plus Student 17,967 Points

most of this is done, except the part with the header and nav being in the body.

Ted Sumner
PLUS
Ted Sumner
Courses Plus Student 17,967 Points
Ted Sumner
Ted Sumner
Courses Plus Student 17,967 Points

I think you will find the answer to your issue in this discussion. If you try this and cannot figure it out, post a snapshot of your Workspace. Directions are also in that post.

Ted Sumner
PLUS
Ted Sumner
Courses Plus Student 17,967 Points
Ted Sumner
Ted Sumner
Courses Plus Student 17,967 Points

In addition to what Nathan said, I usually put the nav inside the header.