List-style display problem?

Question

Hi all,

I seem to be having trouble getting list-style: circle to work for me. Perhaps there's something obvious I am missing. I'd appreciate any help.

Here's the affected html and css

  <nav>
                    <ul>
                        <li>Weddings</li>
                        <li>Parties</li>
                        <li>Funerals</li>
                        <li>Every Day Floral Needs</li>
                    </ul>
                </nav>

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

nav ul {
    margin: 0 10px;
    padding: 0;
    color: rgb(18, 15, 15);
    list-style-type: circle;
}

nav li {
    display: inline-block;
}

Thanks in advance.

Answer 1 · 2015-03-27T17:52:34Z

March 27, 2015 5:52pm

Hi Josh,

It should just be:

list-style: circle;

not

list-style-type: circle;

Hope that helps, Ede

Answer 2 · 2015-03-27T18:43:44Z

March 27, 2015 6:43pm

Thanks Ede, I tried that, but it didn't seem to work.

Answer 3 · 2015-03-27T18:50:30Z

March 27, 2015 6:50pm

I've also tried this

ul li:before,
ul li:after
    {
  content: " // ";
}

but that doesn't get exactly what I am looking for as this creates the following result

// Weddings // // Parties // // Funerals //// Every Day Floral Needs //

Answer 4 · 2015-03-27T19:58:19Z

March 27, 2015 7:58pm

Hi Josh,

The code didn't work in creating circle bullets? That's strange. Could you post your code and I'll have a look.

Also, why would you use "//" characters if you want circles? Or, what is wrong with the result of that code for you?

All the best

Answer 5 · 2015-03-29T22:51:47Z

March 29, 2015 10:51pm

I was tinkering around with trying different designs for the bullet items. Here's what I've got for my code

<!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">
    <link rel="stylesheet" href="css/responsive.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

</head>

<body>
    <div class="main_header">
        <header>
            <a href="index.html" id="logo">
                <h1>Flowers by Jackie</h1>
                <h2>Full Service Florist</h2>    
            </a>
                <p id="par">We are a locally owned floral shop located in beautiful Lakeport, California.</p>
                <p> (707) 263-3326 // flowersbyjackie@att.net // 108 S. Main St. Lakeport, California 95453</p>
                <nav>
                    <ul>
                        <li>Weddings</li>
                        <li>Parties</li>
                        <li>Funerals</li>
                        <li>Every Day Floral Needs</li>
                    </ul>
                </nav> 
        </header>
    </div>
    <div id="wrapper">
        <div class="primary-content">
        <div class="gallery">
            <ul id="row1">
                <li><img src="img/floral_arrangement1.jpg" alt="flower"></li>
                <li><img src="img/floral_arrangement1.jpg" alt="flower"></li>
                <li><img src="img/floral_arrangement1.jpg" alt="flower"></li>
            </ul>
            <ul id="row2">
                <li><img src="img/floral_arrangement1.jpg" alt="flower"></li>
                <li><img src="img/floral_arrangement1.jpg" alt="flower"></li>
                <li><img src="img/floral_arrangement1.jpg" alt="flower"></li>
            </ul>
        </div>
        <div class="gallery">
            <ul id="bigpic">
                <li><img src="img/floral_arrangement2.jpg" alt="flower2"></li>
            </ul>
        </div>
        <div class="gallery">
            <ul id="row3">
                <li><img src="img/floral_arrangement1.jpg" alt="flower"></li>
                <li><img src="img/floral_arrangement1.jpg" alt="flower"></li>
                <li><img src="img/floral_arrangement1.jpg" alt="flower"></li>
            </ul>
            <ul id="row4">
                <li><img src="img/floral_arrangement1.jpg" alt="flower"></li>
                <li><img src="img/floral_arrangement1.jpg" alt="flower"></li>
                <li><img src="img/floral_arrangement1.jpg" alt="flower"></li>
            </ul>
        </div>
    </div> <!-- end primary content -->
    </div> <!-- end of wrapper -->
    <div class="footer">
        <p>Flowers by Jackie a Lakeport Florist // (707) 676-4500 // 1445 Main St. Lakeport, California 99999</p>
        <a href="#top">Back to top</a>
    </div>
</body>
</html>

and my css

/** General Styles **/

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

h1 {
    color: rgb(18, 15, 15);
    font-size: 2.5em;
    text-align: center;
    font-family: 'Courgette', cursive;
    font-weight: normal;
    padding: 10px 0 0 0;
    margin: 0;
}

h2 {
    color: rgb(18, 15, 15);
    font-family: 'Architects Daughter', cursive;
    margin: 15px 0;
    font-size: 1.5em;
    font-weight: normal;
    line-height: 0.8em;
    text-align: center;
}

/** site body **/

body {
    background-color: #9AB973;
    color: #934962;
    font-family: 'Architects Daughter', cursive, Helvetica, Arial, sans-serif;
} 


/** Home Page**/

.primary-content {
    clear: both;
    background: none;
    background-color: rgb(18, 15, 15);
    border-radius;
    overflow: auto;
    width: 100%;
    padding-left: 40px;
    padding-right: 40px;
    margin: auto;
    max-width: 960px;
}

.primary-content:after {
    content: "";
    display: table;
    clear: both;
}

.main_header {
    background-color: #9AB973;

    text-align: center;
    width: 100%;
    float: left;
    margin: 0 0 30px 0;
    padding: 5px 0 10px 0;
}

#par {
    padding: 10px;
    font-weight: 900;
    color: rgb(203, 43, 183)
}

header p {
    font-weight: 900;
    color: rgb(203, 43, 183)
}

#wrapper {
   max-width: 960px;
   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 ul {
    margin: 0 10px;
    padding: 0;
    color: rgb(18, 15, 15);
}

ul li:before,
ul li:nth-last-child(2)
    {
  content: " // ";
}

nav li {
    display: inline-block;
}


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

/** Page Portfolio **/

.gallery {
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: auto;
  float: left;
  clear: both;
}

.gallery ul {
    list-style: none;
}

.gallery li {
  float: left;
  background-color: #f5f5f5;
  color: #bdc3c7;
  margin: 10px;
}

img {
    max-width: 100%;
}

#bigpic {
    float: left;
    margin: 0 10% 0 10%;
    width: 80%;
    padding: 0;
}

#row1 li img,
#row2 li img,
#row3 li img,
#row4 li img{
    border-radius: 20px;
}

#bigpic li img {
    border-radius: 30px;
}

/** floats **/

#row1, #row2, #row3, #row4 {
    padding: 0;
    width: 46%;

}

#row1 {
    margin: 1% 0 0 4%;
}

#row2 {
    margin: 1% 4% 0 0;
}

#row3 {
    margin: 1% 4% 1% 0;
}

#row4 {
    margin: 1% 0 1% 4%;
}

#row1, #row3 {
    float: left;
}

#row2, #row4 {
    float: right; 
}


/** Footer **/

.footer {
    font-size: 1em;
    text-align: center;
    padding: 50px 0 0 0;
    width: 100%;
    float: left;
    clear: both;
}

.footer:after {
    content: "";
    display: table;
    clear: both;
}

Welcome to the Treehouse Community

Looking to learn something new?

Josh McMullin

Josh McMullin

List-style display problem?

5 Answers

edeharrison

edeharrison

Josh McMullin

Josh McMullin

Josh McMullin

Josh McMullin

edeharrison

edeharrison

Josh McMullin

Josh McMullin