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 Tyler Zika
Tyler Zika
14,402 Points

My bullets are not showing on my webpage for me ul. Please help.

I want the bullets to appear on the ul with the id "about"

Here is the code:

body{
font-size: 80%;
font-family: "Courier New", Courier, monospace;
letter-spacing: 0.15em;
background-color: black;
color: white;
}

#page { 
max-width: 940px;
min-width: 720px;
margin: 10px auto 10px auto;
padding: 0px;
border: 4px double #000;
}

#logo1 {
width: 0px;
margin: 0px 0px 0px 0px;
}

#logo2 {
width: 0px;
margin: -100px 0px -260px 850px;
padding: 0px 0px 100px 0px;
background-color: blue;
}

h1, h2 {
text-align: center; 
}

ul#about{
width: 570px;   
padding: 15px;
margin: 0px auto 0px auto;
text-align: center; 
}

ul#nav{
width: 570px;   
padding: 15px;
margin: 0px auto 0px auto;
border-top: 2px solid white;
border-bottom: 1px solid white;
text-align: center;
}


li{
display:inline;
margin: 0px 3px;
}

p{
text-align: center;
width: 1000px;
margin: 20px auto 20px -10px;
font-weight: normal;
}

a {
    color: white;
text-transform: uppercase;
text-decoration: none;
padding: 6px 18px 5px 18px;
 }

a:hover, a.on {
    color: #cc333;
background-color: #d68e02;
}

Thanks

Richard Crawford-Wilson
Richard Crawford-Wilson
6,094 Points

we need to see the html too.

Brian Pirouet
Brian Pirouet
Courses Plus Student 1,653 Points

Wait? You want them to appear on the "class"? Well why do you have it set to an id?

Tyler Zika
Tyler Zika
14,402 Points

Sorry I edited it. I ment id

Brian Pirouet
Brian Pirouet
Courses Plus Student 1,653 Points

Ok, so from what I can gather you want the bullets to still show up yeah??

Try this perhaps?

Add 20px to the li left margin or the ul padding left.

20px is probably enough for you to see exactly what is going on.

Richard Crawford-Wilson
Richard Crawford-Wilson
6,094 Points

Post the code if you want help please.

Brandon Barrette
Brandon Barrette
20,485 Points
Brandon Barrette
Brandon Barrette
20,485 Points

Yeah we need to see your html. Is your #about id defined on the ul or a div surrounding the id?

J. M.
J. M.
15,389 Points
J. M.
J. M.
15,389 Points

It's the "display: inline" declaration under the <li> selector that causes the bullets to go away.

Try switching the display: inline to display:list-item; adding a width and floating left like this:

li{ display:list-item; width: 100px; float: left; }

The width you're setting is for the individual list items, so you'll need to keep it on the small side so it fits into your ul#about width, otherwise you'll lose the inline styling.

1 Answer

Rby Falr
Rby Falr
2,489 Points
Rby Falr
Rby Falr
2,489 Points

Maybe an easier solution would be to use the HTML Entity &bull; instead.

<ul>
    <li><a href="#">&bull; Home</a></li>
    <li><a href="#">&bull; Work</a></li>
    <li><a href="#">&bull; About</a></li>
    <li><a href="#">&bull; Contact</a></li>
</ul>

If you don't want the bullet points to be part of the link simply move them outside the anchor tag.

<ul>
    <li>&bull;<a href="#"> Home</a></li>
    <li>&bull;<a href="#"> Work</a></li>
    <li>&bull;<a href="#"> About</a></li>
    <li>&bull;<a href="#"> Contact</a></li>
</ul>

See how it looks here.