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 Josh McMullin
Josh McMullin
3,012 Points

Can't get rid of bullets with list-style: none

Hi all,

I can't seem to get rid of my list bullets. Perhaps I'm just missing something with my code. Here's what I've got:

<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8">
    <title>Flowers by Jackie</title>
    <link rel="stylesheet" href="css/normalize.css">
        <link href='http://fonts.googleapis.com/css?family=Courgette|Architects+Daughter' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">
    <meta name="viewport" content="width=device-width, initial-scale=1" />

</head>

<body>
    <div id="wrapper">
    <div class="main_header">
        <header>
            <h1>Elegant Floral Design for Any Occassion</h1>    
            <a href="index.html" id="logo"><h2>Flowers by Jackie</h2></a>
                <nav>
                    <ul>
                        <li><a href="About.html" class="selected">About</a></li>
                        <li><a href="Contact.html">Contact</a></li>
                    </ul>
                </nav>
        </header>
    </div>
        <div class="primary-content">
        <div id="row1">
            <ul class="gallery">
                <li><img src="img/floral_arrangement1.jpg" alt="flower">picture 1</li>
                <li><img src="img/floral_arrangement1.jpg" alt="flower">picture 1</li>
                <li><img src="img/floral_arrangement1.jpg" alt="flower">picture 1</li>
            </ul>            
        </div>
        <div id="row2">
            <ul class="gallery">
                <li><img src="img/floral_arrangement1.jpg" alt="flower">picture 1</li>
                <li><img src="img/floral_arrangement1.jpg" alt="flower">picture 1</li>
                <li><img src="img/floral_arrangement1.jpg" alt="flower">picture 1</li>

            </ul>            
        </div>
    </div> <!-- end primary content -->
    <div class="footer">
        <p>&copy; 2015 Josh McMullin.</p>
    </div>
    </div> <!-- end of wrapper -->

</body>
</html>

and here's what I have for my main.css:

/** General Styles **/

* {
    box-sizing: border-box;
    text-decoration: none;
}

h1 {
    color: #FF6699;
    font-size: 2em;
    text-align: center;
    font-family: font-family: 'Architects Daughter', cursive;
    font-weight: normal;
    padding: 10px 0 0 0;
    margin: 0;
}

a {
    color: #FF6699;
}


h2 {
    font-family: 'Courgette', cursive;
    margin: 15px 0;
    font-size: 1.75em;
    font-weight: normal;
    line-height: 0.8em;
    text-align: center;
}


/** site body **/

body {
    background-color: #F0F0F0;
    color: #FF6699;
    font-family: font-family: font-family: 'Architects Daughter', cursive;

} 


/** Home Page**/


.main_header {
    background-color: #CCCCCC;
    text-align: center;
    height: 250px;
    width: 100%;

}



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

#logo {
    text-align: center;
    margin: 0;
}


/** navigation **/

nav {
    text-align: center;
    padding: 10px 0;
    margin: 20px 0 0;
}

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

nav a.selected, nav a:hover {
    color: #32673f;
}

/** Page Portfolio **/

.primary-content {
    list-style: none;    
}

img {
    max-width: 100%;
}

#row1 {
    margin: 0;
    padding: 0;
}

#row2 {

}


#gallery {
  margin: 0;
  padding: 0;

}

#gallery li {
  float: left;
  width: 45%;
  margin: 2.5%;
  background-color: #f5f5f5;
  color: #bdc3c7;
}


/** Footer **/

.footer {
    0.75em;
    text-align: center;
    padding: 50px 0 0 0;

}
Josh McMullin
Josh McMullin
3,012 Points

Sorry not sure how to configure the css so it displays properly in here.

Robert Richey
Robert Richey
Courses Plus Student 16,352 Points

Hi Josh,

I added markdown to help make the code more readable. If you're curious about how to add markdown like this on your own, checkout this thread on posting code to the forum . Also, there is a link at the bottom called Markdown Cheatsheet that gives a brief overview of how to add markdown to your posts.

Cheers!

Josh McMullin
Josh McMullin
3,012 Points

Thanks mate!

Konrad Pilch
Konrad Pilch
2,435 Points

I got an easier idea. Just press edit on ir post md ur gonna see how to do it.

4 Answers

Robert Richey
PLUS
Robert Richey
Courses Plus Student 16,352 Points
Robert Richey
Robert Richey
Courses Plus Student 16,352 Points

Target the ul class="gallery" element with the list-style:none declaration, and that should fix it for you.

Hope this helps,

Cheers

Josh McMullin
Josh McMullin
3,012 Points
Josh McMullin
Josh McMullin
3,012 Points

I should have had my v8 for the day! Thanks good sir. I realized I had my gallery marked as a id and not a class in the css.

Robert Richey
Robert Richey
Courses Plus Student 16,352 Points

I actually didn't notice that part, good catch :)

The list-style declaration needs to be applied to the parent container of the list items - normally, this is a ul or ol. So, that's why it's not working with .primary-content.

Simon Gray
Simon Gray
10,507 Points
Simon Gray
Simon Gray
10,507 Points

Hi Josh,

You need to be a little more specific with your selector .primary-content is a "div" not a list item.

Try this:

.primary-content ul {
    list-style: none;
}
Josh McMullin
Josh McMullin
3,012 Points
Josh McMullin
Josh McMullin
3,012 Points

Thanks all, I got that issue taken care of.

Konrad Pilch
Konrad Pilch
2,435 Points

HI, Its a good practice and suggested by others , like Guil to make the links in lower case like "contact.html" or if we got about me page we would write "about_me.html" or "aboutme.html" instead to put any other upper case. This will make the browser less confusing or somehitng.