CODEWITHSUNDEEP
htmlcss
lily
lily

Reputation: 85

Remove bullet points from HTML list items

How do I remove the bullet points from #box5, #box6 and #box7? I thought it would be by using #box5 a, but it's not working.

HTML

<div id="con3">
    <!-- irrelevant markup omitted -->

    <div id="box5">
        <li><a href="#">LIAM PRICE<br>Australia</a></li>
    </div>

    <div id="box6">
        <li><a href="#">JESS KWARTZ<br>Germany</a></li>
    </div>

    <div id="box7">
        <li><a href="#">ALI JAB<br>Mexico</a></li>
    </div>
</div>

CSS

#box5 {
    margin-left: 110px;
    margin-top: 10px; 
    font-family: 'pt_serifitalic';
    font-size: 9pt;
    line-height: 16px;  
}

#box5 a {
    color:white;
    text-decoration: none;
    list-style: none;   
}

Upvotes: 3

Views: 8489

Answers (5)

AmmarCSE
AmmarCSE

Reputation: 30607

You need to put list-style:none on a parent container like

#box5, #box6, #box7{
  list-style: none;
  }

or apply to the li elements directly

li{
  list-style: none;
}

Also, surround your li elements with a ul element

#con3 {
 width:1024px;
 height:680px;
 background-color: #161717;
 background-image: url(media/blogs5.png);
 background-repeat: no-repeat;
 background-position: 55px;
 float:none;
 text-decoration:none;

 }

#box4 { 
float:none;
width:300px;
height:195px;
margin-left:580px;
padding-top:60px;
}

#box5 {
margin-left: 110px;
margin-top: 10px; 
font-family: 'pt_serifitalic';
font-size: 9pt;
line-height: 16px;  
}


#box5 a {
color:white;
text-decoration: none;
list-style: none;
}

#box5, #box6, #box7{
  list-style: none;
  }
<div id="con3">
<div id="box4">
<span class="fontheading">SHARE, INSPIRE <br>AND CONNECT </span><br><hr class="white"><br>
<span class="font1">You&#39;ll follow your<br> friends and make <br>new ones   as you discover 
the world through the<br>Amalfi travellor.</span>
<br><br><span class="font2">Read and post blogs,<br> ask questions <br>and      recieve answers </span>
</div>

<ul id="box5">
<li><a href="#">LIAM PRICE<br>Australia</a></li>
</ul>

<ul id="box6">
<li><a href="#">JESS KWARTZ<br>Germany</a></li>
</ul>


<ul id="box7">
<li><a href="#">ALI JAB<br>Mexico</a></li>
</ul>
</div>

Upvotes: 6

5kud
5kud

Reputation: 337

set the list item class to: list-style:none

Upvotes: 0

Abhisek Tripathy
Abhisek Tripathy

Reputation: 46

If you want to remove the bullet points of #box5, #box6 and #box7

then use this

#box5, #box6, #box7 {

        list-style:none;
    }

But you should use li tag inside ul to be syntactically correct and then use the following code

ul li {

            list-style:none;
        }

Upvotes: 0

Rob Audenaerde
Rob Audenaerde

Reputation: 20099

You should put list items LI in either a UL or OL or menu to follow the HTML spec. See here: http://www.w3.org/TR/html-markup/li.html

Bullets are on all the LIs in the ULs or OLs, so we can fix it with:

UL {list-style: none}

Because of inheritance, this style will be transferred to the 'list-style' of the LI elements.

See also the W3C examples.

Upvotes: 2

pavel
pavel

Reputation: 27092

Bullets are on LIs, so:

li {list-style: none}

Upvotes: 1

Related Questions