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

Posted by Jhuanderson Macias
Jhuanderson Macias
1,870 Points

'id' “attribute value” is not unique What am I doing wrong?

      <section>
             <ul id = "coverPhoto">
             <li><a href="img/Cover Photo.jpg"> <img src="img/Cover Photo.jpg" alt""></a>    
             <li><p>Hi, there my name is daniel and i can write w.e</p></li>
        </ul> 

        <ul id = "featuredHomes">
                <li><a href="img/1.jpg"> <img src="img/1.jpg" alt""> 
                    <p>home1</p></a></li>
                <li><a href="img/2.jpg"> <img src="img/2.jpg" alt""> 
                    <p>home2</p></a></li>
                <li><a href="img/3.jpg"> <img src="img/3.jpg" alt""> 
                    <p>home3</p></a></li>
                <li><a href="img/4.jpg"> <img src="img/4.jpg" alt""> 
                    <p>home4</p></a></li> 
                <li><a href="img/6.jpg"> <img src="img/6.jpg" alt""> 
                    <p>home5</p></a></li> 
            </ul>

On the second ul id = featuredHomes, I am getting an error message saying that 'id' "attribute value" is not unique What am I doing wrong?

4 Answers

Casey Antoine
PLUS
Casey Antoine
Courses Plus Student 5,174 Points
Casey Antoine
Casey Antoine
Courses Plus Student 5,174 Points

Looking through the code you have I don't see any reason why you'd be receiving the error about the id not being unique.. are you having an issue trying to add attributes to the id in css??

aside from that I did look through and mark up some things I did notice and want to bring to your attention:

<header>
 <nav>
   <ul>
     <li>
       <a href = "Home.html"> Home </a>
     </li>
     <li>
       <a href = "Buyers.html"> Buyer </a>
     </li>
     <li>
       <a href = "Sellers.html"> Seller </a>      <li>  <!-- /li-->
     <li>
       <a href = "Rent.html"> Rent </a>
     <li>  <!-- /li-->
     <li>
       <a href = "Contacts.html"> Contacts </a>
     <li>
  </ul>
</nav>  
</header>
  <section>
     <ul id ="coverPhoto">
     <!--div container instead of ul? -->
       <li>
         <a href="img/Cover Photo.jpg"> <img src="img/Cover Photo.jpg" alt""></a> 
<!-- img missing / to close, plus no closing li tag-->   
       <li>
         <p>Hi, there my name is daniel and i can write w.e</p>
       </li>
    </ul>           
            <ul id ="featuredHomes">
                    <li><a href="img/1.jpg"> <img src="img/1.jpg" alt""> <!-- / -->
                        <p>home1</p></a></li>
                    <li><a href="img/2.jpg"> <img src="img/2.jpg" alt""> <!-- / -->
                        <p>home2</p></a></li>
                    <li><a href="img/3.jpg"> <img src="img/3.jpg" alt""> <!-- / -->
                        <p>home3</p></a></li>
                    <li><a href="img/4.jpg"> <img src="img/4.jpg" alt""> <!-- / -->
                        <p>home4</p></a></li> 
                    <li><a href="img/6.jpg"> <img src="img/6.jpg" alt""> <!-- / -->
                        <p>home5</p></a></li> 
                </ul>
        </section>

through the code I noticed a lot of your img tags don't close and missing a few closing li tags Also marked up the cover photo list that you have, I'd suggest instead of putting the img and the text into a ul wrapping them in a div together.

Jhuanderson Macias
Jhuanderson Macias
1,870 Points

Thanks, I didn't notice those syntax errors. Thank for the advise. I'll get on that, and to fixing the errors. Just a few things:

  1. On my CSS when I try to format #coverPhoto the first image from #featuredHomes get formatted with the #coverPhoto Rule. Maybe fixing these these syntax errors would help.

2.Also, the reason I made coverPhoto an <ul> is because I want the paragraph next to the image, and I was having a hard time trying to format that under a <div>.

  1. I am little confuse on this <!-- img missing / to close--> I am following the format from the video and what I have seen online, and I don't see a forward / to close img.
Casey Antoine
Casey Antoine
Courses Plus Student 5,174 Points

a good alternative to have the image and the p next to each other would be to float each and create a div to clear both.

Example:

<section>
  <div id="photo">
    <img src="img.jpg" alt="">
  </div>
  <div id="Greeting">
    <p>This is test greeting to the right of the photo</p>
  </div>
  <div class="clear">
  </div>
</section>

section{
  width:500px;
  background-color: skyblue;
}
#photo{
  float: left;
  margin-left: 30px;
}

.clear{
  clear: both;
}

#Greeting{
  float: right;
  text-align: center;
  margin-right: 30px;
}

Disregard my comment about closing img tags.. I do it on habit, it isn't necessary... sorry..

without seeing what you have for your css to format each id I'm not sure if editing the syntax would fix or tweaking the way your selecting elements in your css

Jhuanderson Macias
Jhuanderson Macias
1,870 Points

Thank you so much. You have no idea how much help this conversation has been. I will try to implement all your suggestion and review my code again. I may ask a few follow up question if i get stuck after a few tries; I hope you'll be available to answer. Thank you again!

Casey Antoine
Casey Antoine
Courses Plus Student 5,174 Points

Glad It could be helpful! I'm not sure what you're using to code or is you've used this site before, but I would suggest Codepen. If you haven't used it before it's really easy to use, and it's a great site to use that will allow you to tweak your code and adjust things all together at once.

If you do have any further questions or need additional help feel free to post questions, There's a lot of great help and suggestions to get from these forums

Steven Parker
Steven Parker
243,318 Points
Steven Parker
Steven Parker
243,318 Points

:point_right: This error seems unrelated to this code excerpt.

It's probably caused by a portion of the code not shown here. It's always a good idea to include the complete code, or even better, make a snapshot of your workspace and post the link to it.

One minor point: spaces are not normally used around the "=" in a property assignment. Having the spaces there seems unlikely to cause this error, but since you didn't say what was presenting this error, it might be related.

Casey Antoine
PLUS
Casey Antoine
Courses Plus Student 5,174 Points
Casey Antoine
Casey Antoine
Courses Plus Student 5,174 Points

Agreed that the error that you are receiving does not seem to be coming from this excerpt of code that you've posted.. it sounds like you've possibly given the same id to another element within the page..

also along with the previous suggestion, Not sure if it's what you used as the example of your code but I noticed that your a tags have the href value of the src of the img element..

Jhuanderson Macias
Jhuanderson Macias
1,870 Points

I am using the href tag are have the same relative link as the source of the image as a place holder, once I can get the home page going I will be adding the real images and real links.

Jhuanderson Macias
Jhuanderson Macias
1,870 Points
Jhuanderson Macias
Jhuanderson Macias
1,870 Points 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel ="stylesheet" href="CSS/normalize.css">
        <link rel ="stylesheet" href="CSS/main.css">
        <title>Danielle Home Page</title>
    </head>

    <body>
        <header>
            <nav>
                <ul>
                    <li><a href = "Home.html"> Home </a></li>
                    <li><a href = "Buyers.html"> Buyer </a></li>
                    <li><a href = "Sellers.html"> Seller </a><li>
                    <li><a href = "Rent.html"> Rent </a><li>
                    <li><a href = "Contacts.html"> Contacts </a><li>
                </ul>
            </nav>  
        </header>
        <section>
            <ul id ="coverPhoto">
                <li><a href="img/Cover Photo.jpg"> <img src="img/Cover Photo.jpg" alt""></a>    
                <li><p>Hi, there my name is daniel and i can write w.e</p></li>
            </ul>           
            <ul id ="featuredHomes">
                    <li><a href="img/1.jpg"> <img src="img/1.jpg" alt""> 
                        <p>home1</p></a></li>
                    <li><a href="img/2.jpg"> <img src="img/2.jpg" alt""> 
                        <p>home2</p></a></li>
                    <li><a href="img/3.jpg"> <img src="img/3.jpg" alt""> 
                        <p>home3</p></a></li>
                    <li><a href="img/4.jpg"> <img src="img/4.jpg" alt""> 
                        <p>home4</p></a></li> 
                    <li><a href="img/6.jpg"> <img src="img/6.jpg" alt""> 
                        <p>home5</p></a></li> 
                </ul>
        </section>      
        <footer>
            <a href = "https://twitter.com/?lang=en"><img src = "img/twitter-wrap.png">     
            <a href = "https://www.facebook.com/jhuanderson" >  <img src = "img/facebook-wrap.png">
        </footer>
   </body>
</html>

This is my complete code