how to remove undesired object text (dot) is displaying on my website

Question

i created a simple website, everything works fine till when i add a new ul division in my html page as a spacer between two html element i.e.

 <div>
     <ul>
        <li><a></a></li>
     </ul>
  </div>

and after that a dot start appearing in my website (as you can see i this image) image

so my question is how can i remove this dot ?

(this is what i want image)

here is my code:-

header {
    width:100%; 
    height:350px; 
    position:relative;
    overflow:hidden; 
    z-index:-1;
    border:3px solid grey;
    background-position: center center;
    display: flex;
    background-image:url("../images/index/header/header.jpg");
    background-size: cover;
}

.main-wrapper {
  position: relative;
} 

#navul01 {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: transparent;
    position: absolute;
    right: 0;
    bottom: 0;
}

#navul01 li {
    float: left;
}

#navul01 li a {
    display: block;
    color: white;
    font-weight: bold;
    text-shadow: 2px 2px black;
    text-align: center;
    padding: 14px 16px;
    font-size: 25px;
    text-decoration: none;
    border:2px solid white;
}

#navul01 li a:hover {
    background-color: lightgreen;
}

#subjects_nav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    position: absolute;
    left: 10%;
    width: 80%
}

#subjects_nav li {
    float: center;
}

#subjects_nav li a {
    display: block;
    color: white;
    font-size: 5vw;
    font-weight: bold;
    text-shadow: 2px 2px black;
    text-align: center;
    padding: 50px 50px;
    text-decoration: none;
    border:3px solid white;
}

#physics_image {
    background-position: center center;
    display: flex;
    background-image:url("../images/index/subjects/physics.jpg");
    background-size: cover;
}

#chemistry_image {
    background-position: center center;
    display: flex;
    background-image:url("../images/index/subjects/chemistry.jpg");
    background-size: cover;
}

#maths_image {
    background-position: center center;
    display: flex;
    background-image:url("../images/index/subjects/maths.jpg");
    background-size: cover;
}

<!DOCTYPE html>
<html>

   <head>
      <title>home</title>
      <link rel="stylesheet" type="text/css" href="css/index.css" />
      <meta name="viewport" content="width=device-width, initial-scale=1">

   </head>

   <body> 
      <div class="main-wrapper"> 
         <header> </header> 
         <div><nav>
            <ul id="navul01">
               <li><a class="active" href="#home">Home</a></li>
               <li><a href="#news">blog</a></li>
               <li><a href="#contact">subjects</a></li>
               <li><a href="#about">contacts</a></li>
            </ul>
         </nav></div>
      </div>
      <div>
         <ul>
            <li><a></a></li>
         </ul>
      </div>
      <div>
         <ul id="subjects_nav">
            <li><a id="physics_image" href="#home">PHYSICS</a></li>
            <li><a id="chemistry_image" href="#news">CHEMISTRY</a></li>
            <li><a id="maths_image" href="#contact">MATHS</a></li>
         </ul>
      </div>
   </body>

</html>

Why on earth would you use a `ul` as a spacer....that's what margins/padding are for? — Paulie_D, Feb 15 '18 at 16:41

Johannes · Accepted Answer · 2018-02-15T16:32:14.447

That's a list bullet. Add a class to that ul and add this rule for this class to avoid the bullet:

ul.your_class {
  list-style: none;
}

Actually, you better apply a class to that ul and only apply that rule to that class in order to not affect other uls. (see my edited snippet...)

header {
    width:100%; 
    height:350px; 
    position:relative;
    overflow:hidden; 
    z-index:-1;
    border:3px solid grey;
    background-position: center center;
    display: flex;
    background-image:url("../images/index/header/header.jpg");
    background-size: cover;
}

.main-wrapper {
  position: relative;
} 

#navul01 {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: transparent;
    position: absolute;
    right: 0;
    bottom: 0;
}

#navul01 li {
    float: left;
}

#navul01 li a {
    display: block;
    color: white;
    font-weight: bold;
    text-shadow: 2px 2px black;
    text-align: center;
    padding: 14px 16px;
    font-size: 25px;
    text-decoration: none;
    border:2px solid white;
}

#navul01 li a:hover {
    background-color: lightgreen;
}

#subjects_nav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    position: absolute;
    left: 10%;
    width: 80%
}

#subjects_nav li {
    float: center;
}

#subjects_nav li a {
    display: block;
    color: white;
    font-size: 5vw;
    font-weight: bold;
    text-shadow: 2px 2px black;
    text-align: center;
    padding: 50px 50px;
    text-decoration: none;
    border:3px solid white;
}

#physics_image {
    background-position: center center;
    display: flex;
    background-image:url("../images/index/subjects/physics.jpg");
    background-size: cover;
}

#chemistry_image {
    background-position: center center;
    display: flex;
    background-image:url("../images/index/subjects/chemistry.jpg");
    background-size: cover;
}

#maths_image {
    background-position: center center;
    display: flex;
    background-image:url("../images/index/subjects/maths.jpg");
    background-size: cover;
}
ul.no_bullet {
  list-style: none;
}

<!DOCTYPE html>
<html>

   <head>
      <title>home</title>
      <link rel="stylesheet" type="text/css" href="css/index.css" />
      <meta name="viewport" content="width=device-width, initial-scale=1">

   </head>

   <body> 
      <div class="main-wrapper"> 
         <header> </header> 
         <div><nav>
            <ul id="navul01">
               <li><a class="active" href="#home">Home</a></li>
               <li><a href="#news">blog</a></li>
               <li><a href="#contact">subjects</a></li>
               <li><a href="#about">contacts</a></li>
            </ul>
         </nav></div>
      </div>
      <div>
         <ul class="no_bullet">
            <li><a></a></li>
         </ul>
      </div>
      <div>
         <ul id="subjects_nav">
            <li><a id="physics_image" href="#home">PHYSICS</a></li>
            <li><a id="chemistry_image" href="#news">CHEMISTRY</a></li>
            <li><a id="maths_image" href="#contact">MATHS</a></li>
         </ul>
      </div>
   </body>

</html>

But it's a bit strange to use an empty link in an empty list as a "spacer" - why? You'd better apply some bottom/top margins to the elements above and/or below.

<3 list-style was culprit in my case – Suhail Mumtaz Awan Dec 15 '22 at 08:15 — Suhail Mumtaz Awan, Dec 15 '22 at 08:15

score 0 · Answer 2 · answered Feb 15 '18 at 16:34

0

Add class to your

<ul class="separator">
  <li><a></a></li>
</ul>

And then add css:

.separator {
  list-style: none;
}

May be a better solution want be only using marging-bottom on .main-wrapper

answered Feb 15 '18 at 16:34

Mugen

1
1

score -4 · Answer 3 · answered Feb 15 '18 at 16:28

the solution is easy! Just add https://www.w3schools.com/cssref/pr_list-style.asp

list-style: none;

to your ul :) this is the bullet point for the ul tag (list tag) you applied that to one of the ul's but not to the one which causes this dot. Add:

ul {
  list-style: none;
}

to your css and it will never appear again on any list

how to remove undesired object text (dot) is displaying on my website

3 Answers3