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 How to Make a Website Creating HTML Content Include External CSS

Formatting

So I have bullet point right outside of the upper lefthand corner of my images in the preview of my web page for this assignment. I do not see these bullet points in the tutorial video nor are they addressed as far as I recall. Did I overlook a mistake in my LOC? I am providing a dropbox link with a screenshot of the preview and LOC:

https://www.dropbox.com/s/1egleuerwhnu6kr/Screenshot%202014-07-18%2016.20.38.png

Thank you in advance for any assistance and your time.

Jeremy

7 Answers

Hi Jeremy,

It's normal to still have the bullet points at this point for the gallery. You'll remove them later in the project with css similar to what Bryan has shown although you will use a different selector.

The normalize version that you're linking to here only removes bullets from lists within a nav element.

What I'm not sure about is why you're seeing them at the top left of each image. Are you seeing 5 bullets all in that same position for each image?

When I test locally the bullets are at the lower left corner of each image.

Yes each image has a bullet in the upper left corner. Thing is... I had a previous preview in another tab long before I linked the normalize.css file so I originally thought I missed something. Thank you for your input. I want to get it right.

I decided to type in your web preview url that is showing in your screenshot and your bullets are showing in the lower left like i see with the project files. I'm not sure how you got it like that in your screenshot.

So I would say you're fine right now and your web preview url looks the way it is supposed to at this point in time.

Nick never scrolls down at the end of the video which is why you don't see the bullet points.

Without seeing your code, I would guess that you've forgotten to set the list-style to "none" for list-items/unordered lists in the section element.

section ul {
    list-style: none;
}

Haven't fooled around with CSS in a while, but that should work.

Here is my entire LOC I dont recall the teach going over list style:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Jeremy Smith | Designer</title>
    <link rel="stylesheet" href="css/normalize.css">
  </head>
  <body>
    <header>
      <a href="index.html">
        <h1>Jeremy Smith</h1>
        <h2>Designer</h2>
      </a>
      <nav>
        <ul>
          <li><a href="index.html">Portfolio</a></li>
          <li><a href="about.html">About</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>
      </nav>
    </header>
    <section>
      <ul>
        <li>
          <a href="img/numbers-01.jpg">
            <img src="img/numbers-01.jpg" alt="">
            <p>Experimentation 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/synchr0nisity"><img src="img/twitter-wrap.png" alt="Twitter Logo"></a>
      <a href="http://facebook.com/synchr0nisity"><img src="img/facebook-wrap.png" alt="Facebook Logo"></a>
      <p>&copy; 2014 Jeremy Smith.</p>
    </footer>
  </body>
</html>

Add code by using the backtick characters :)

It could be that Nick hasn't gone over list-styles yet, and you're getting ahead of him :P No problem with that, but he will certainly go over it sometime.

Did adding my CSS to your code fix it?

Im not sure where to enter that LOC. We definitely havent gone into that detail regarding css yet. He had me link a normalize.css file though. Where would I insert that LOC? I also noticed that it wasnt in Nick's preview in the tutorial when he showed his web page.

See my comment to my answer. This is strange because when I go to your web preview url I see the bullets where they should be at the bottom left corner. Not where your screenshot says they are.

What do you mean by LOC?

Ok thank you. I also noticed that when I cut and paste my LOC into the message box (like this one) the code is not visible. Is there a way around this for future reference when I am asking for help or collaborating?

This thread here shows you how to properly post code in the forums: https://teamtreehouse.com/forum/posting-code-to-the-forum

Lines of code

Weird...now the bullets are at the bottem left corner.

That is strange but at least they're where they are supposed.to be now. I would say you're right on track then.

To clear up any confusion, eventually you will start writing "main.css" which is where you're going to put your own custom css to style this site. That's where you'll end up putting css similar to what Bryan showed you to get rid of those bullets.

Thanks guys. I appreciate the assistance.