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

Posted by foobarbaz
foobarbaz
4,977 Points

There are still bullet points next to my pictures. How can I fix that?

I added normalize.css to work with my HTML file, but there are still bullet points on the list of pictures. There are no bullet points next to the main menu though.

Marcus Parsons
Marcus Parsons
15,719 Points

Can you post your HTML and any additional CSS besides normalize.css? If you haven't posted before, be sure to check out the Markdown Cheatsheet, and don't forget to keep the 3 beginning and closing backticks (on same button as ~) on their own line and keep a blank line above and below each code block for the code to render correctly.

uvwitpmluq
uvwitpmluq
14,915 Points

Hi, Zola. I had same problem before. You need to add "list-style: none" to normalize.css file. Video explains this process very shortly so please watch video carefully again!

Marcus Parsons
Marcus Parsons
15,719 Points

Normalize.css has everything included. The reason I am having her post the code without modifying normalize.css is that there is likely a reference error to the stylesheet.

Wayne Priestley
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

Hey Zola,

Here is a link to explain how to use Markdown to post your code How to post code

If you look at the bottom of the box when your typing a reply you will see Markdown Cheatsheet that will also explain how to post your code.

You have to make sure you have a bit of space under your last line of text in your post. Then you add three back ticks followed by html or css depending on the type of code your inserting.
Then straight after your last line of code you add another three back ticks.
Remember to leave at least a few lines between any text at the top or bottom of your code.

alt text

Hope this helps.

4 Answers

Wayne Priestley
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

Hey Zola,

I would add a class to your ul (any name you like), then set list-style: none.

HTML

     <ul class="my-list">
         <li>
            <a href="img/Antelope Canyon, Arizona, U.S..jpg">
              <img src="img/Antelope Canyon, Arizona, U.S..jpg" alt="Picture of Antelope Canyon, Arizona, US">
              <p>A nice view of Antelope Canyon, Arizona, US</p>
            </a>
          </li>

CSS

.my-list li {
  list-style: none
}

Let us know how you go.

foobarbaz
foobarbaz
4,977 Points

That fixed it. Thanks!

Wayne Priestley
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

Hey Zola,

I think Junxiang, was supposed to say that you need to add list-style:none to your css file, not the normalize file, you shouldn't be adding anything to that.

uvwitpmluq
uvwitpmluq
14,915 Points

As Wayne said, Editing normalize file is not good. I also recommend to add list-style: none to other css file even video explained you need to add list-style: none to normalize file. Thank you Wayne!

foobarbaz
foobarbaz
4,977 Points
foobarbaz
foobarbaz
4,977 Points

I also need to add this information. The bullet points only show up when I don't have the browser at full screen. As I resize the screen from full size, there is a point where the bullet points show up. Sorry I didn't explain fully in the beginning. Thanks for your help!

My HTML code

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Zola Bridges | Double Bassist</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/main.css">
  </head>
  <body>
    <header>
      <a href="index.html" id="logo">
        <h1>Zola Bridges says "Hello World!"</h1>
        <h2>Double Bassist</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>
    <div id="wrapper">
      <section><!--break up a page into logical groupings of information"-->
        <ul>

         <li>
            <a href="img/Antelope Canyon, Arizona, U.S..jpg">
              <img src="img/Antelope Canyon, Arizona, U.S..jpg" alt="Picture of Antelope Canyon, Arizona, US">
              <p>A nice view of Antelope Canyon, Arizona, US</p>
            </a>
          </li>

          <li>
            <a href="img/Bamboo Forest, Japan.jpg">
              <img src="img/Bamboo Forest, Japan.jpg" alt="Bamboo Forest, Japan.jpg">
              <p>A nice view of Bamboo Forest, Japan</p>
            </a>
          </li>
             <li>
            <a href="img/Bass Section Slaying Wagner.jpg">
              <img src="img/Bass Section Slaying Wagner.jpg" alt="Bass Section Slaying Wagner.jpg">
              <p>A nice view of Bass Section Slaying Wagner</p>
            </a>
          </li>

             <li>
            <a href="img/Street in Bonn, Germany.jpg">
              <img src="img/Street in Bonn, Germany.jpg" alt="Street in Bonn, Germany">
              <p>A nice view of Street in Bonn, Germany</p>
            </a>
          </li>

          <li>
             <a href="img/Tulip Fields in Netherlands.jpg">
               <img src="img/Tulip Fields in Netherlands.jpg" alt="Tulip Fields in Netherlands">
                <p>A nice view of Tulip Fields in Netherlands</p>
             </a>
          </li>
          <li>
             <a href="img/Travertines, Pamukkale, Turkey.jpg">
               <img src="img/Travertines, Pamukkale, Turkey.jpg" alt="Travertines, Pamukkale, Turkey">
               <p>A nice view of Travertines, Pamukkale, Turkey</p>
             </a>
          </li>
        </ul>
      </section>
      <footer>
        <a href="http://twitter.com/user"><img src="img/twitter-wrap.png" alt="Twitter Logo"></a>
        <a href="http://facebook.com/user"><img src="img/facebook-wrap.png" alt ="Facebook Logo"></a>

        <p>&copy; 2014 Zola Bridges.</p> <!-- $copy is an html entity. -->
      </footer>
    </div>
  </body>
</html>

My additional CSS code - I just kept going through the courses despite the problem. The problem still shows up without this code added to my html.

a {
 text-decoration: none; 
  color: #6ab47b;
}

header {
  background: #6ab47b;
  border-color: #599a68;
}

h1, h2 {
  color: #fff;
}

nav {
 background: #599a68;
}

nav a, nav a:visited {
  color: #fff;
}

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

#logo {
  text-align: center;
  margin: 0;
}
foobarbaz
foobarbaz
4,977 Points

Sorry about this, but actually the bullet points are there all the time. No matter what the size of the screen is and even when it is full screen. It is just that they move from the bottom corner of the picture to the top when I resize the screen. I just missed that when I was looking before.

Blake Webster
Blake Webster
5,901 Points
Blake Webster
Blake Webster
5,901 Points

I'm having this same issue. The pictures have a bullet appearing next to them but the navigation menu does not. I only have normalize.css as a CSS file included in my index.html file at the moment.

Wayne Priestley
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

Hi Blake,

Normalize wont remove any bullet points or list styling from your code.
Can you please post a new question as more people will see it and be able to respond, and can you include your code.

Hope this helps.

foobarbaz
foobarbaz
4,977 Points

Hi Blake,

If you are having the same problem as me, then you should check out Wayne Priestley's reply above where he mentions I should add a class to my HTML file and style that class in the CSS file. That fixed the problem for me. If you can't understand how to add the code into your file, then post your code and someone can help you edit it properly.