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

Posted by dalexis peguero
dalexis peguero
2,631 Points

Why do my paragraph boxes under my photos have an invisible link that stretches throughout the width of the page?

I want it to be a link that you hover over the box and you can click it only when you do that. This page has the links that you can click even when you step away from the paragraph text. Does that make sense? Here's my code so you can understand it better. BTW I'm a beginner. So don't judge lol 

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="main.css">
        <link href='http://fonts.googleapis.com/css?family=Playfair+Display:400,700,900|Raleway:400,500,600|Oswald|Nunito' rel='stylesheet' type='text/css'>
        <title>Dalexis The Great Critic</title>
    </head>
    <body>
        <header class="headercolor">
        <a href="index.html" id="logo">
            <h1>The Greatest TV Shows of All Time</h1>
            <h2>The Shows That Enthrilled Us!</h2>
        </a>
            <nav>
                <ul class="directory">
                    <li><a href="index.html" class="selected">Home</a></li>
                    <li><a href="About.html">About Us</a></li>
                    <li><a href="Contact.html">Contact Us</a></li>
                </ul>     
            </nav>
        </header>
        <div id="list">
        <section class="section">
            <p>This website is devoted to shows that kept us loving the tv series</p>
            <p>This is the list and believe that this is true!</p>
            <ul>
                <li><a href="breaking-bad.html"><img src="img/breaking-bad.jpg" alt=""><p>Breaking Bad</p></a></li>
                <li><a href="The-Wire.html"><img src="img/the-wire.jpg" alt=""><p>The Wire</p></a></li>
                <li><a href="The-Sopranos.html"><img src="img/the-sopranos.jpg" alt=""><p>The Sopranos</p></a></li>
                <li><a href="Seinfeld.html"><img src="img/seinfeld.jpg" alt=""><p>Seinfeld</p></a></li>
                <li><a href="Curb.html"><img src="img/curb.jpg" alt=""><p>Curb Your Enthusiasm</p></a></li>
            </ul>
        </section>
        </div>
        <footer>
            <img src="img/facebook.jpg" id="logo">
            <p>&copy; 2014 Dalexis Peguero</p>
        </footer>

    </body>
</html>

body {


}

/***************************
HEAD
****************************/
body { 
    background-color:  #BDB76B
}

#logo {
    max-width:940px;
  margin: 0 auto;
  padding: 0 5%;

}


header {
    background-color:  #d3d3d3;
    padding:  10px 0 0 0 ;
    margin:  0 0 35px 0;
    width:  100%; 
    float:  left;
    text-align:  center;

}
a { 
   text-decoration:  none;
   padding:  0;
   margin: 0;
   outline: none;
}

a:visited {
    color: #15141c;
    font-weight:  100; 
}

a:hover {
     color: #201818;

}

a {
    list-style: none;
}
/***************************
 BODY
****************************/
body {
    font-family: 'nunito', sanse-serif;

}

/***************************
 HEADER
****************************/

div ul li p {
    margin 0;
  padding: 5%;
  font-size: 0.75em;
}

.directory { 
  padding: 0;
  border:  1px solid #ccc;
  border-width:  1px 0;
   margin:  0 auto;
   text-align: center;

}

}

/***************************
 NAVIGATION
****************************/


/***************************
 SECTION
****************************/

#list li a p {
  margin 0;
  padding: 5%;
  font-size: 0.75em;
  color: #bdc3c7;
}

}

div li {
   float: left;
  width: 45%;
  margin: 2.5%;;




}


div img {
    max-width: 50%;
    width: 200px;
    length : 200px;
}

/***************************
 fOOTER
****************************/

#logo {
    width: 50px;
    height:  50px;
    padding:  5px 0;

}
Antonis Martalis
Antonis Martalis
1,506 Points

write ``html at the begin and the same 3 at the end of your code so we can understand

1 Answer

James Anwyl
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
James Anwyl
Full Stack JavaScript Techdegree Graduate 49,960 Points
James Anwyl
.a{fill-rule:evenodd;}techdegree seal-36
James Anwyl
Full Stack JavaScript Techdegree Graduate 49,960 Points

Hi, Fixed the formatting of the code in your post. Check out this guide for help using markdown.

I think the paragraph tag within the anchor is causing the issue. You don't need to use it at all, you can just write it like this:

<ul>
  <li><a href="#"><img src="img/breaking-bad.jpg">Breaking Bad</a></li>
  <li><a href="#"><img src="img/the-wire.jpg">The Wire</a></li>
</ul>

Hope this helps!