HTML/CSS - Text-decoration Does Not Work

January 25, 2023 Post a Comment

I'm a beginner of HTML and CSS. So, now I'm in trouble. The text-decoration: none; does not work for me. Can you guys help me to find a solution?

Solution 1:

You need to apply list-style-type: none; to remove bullets

See below:

* {
   margin: 0px;
   padding: 0px;
}

#Header {
  width: auto;
  height: 70px;
  
  margin-left: 0px;

}

#Header ul li {
  text-decoration: none;
  color: #645789;
  float: left;
  margin-left: 30px;
  list-style-type: none;

}

<body>
      <div id="Header">
         <ul>
            <li>Home</li>
            <li>About</li>
            <li>Portfolio</li>
            <li>Contact</li>
         </ul>
      </div>
      <p>Dit is een test website waar ik alles uittest, hierna ga ik er verder op in</p>
      <img source="images/Logo/TalkodyLogo.ai" />

   </body>

text-decoration: none;

will remove below text decorations

underline     Defines a line below the text 
overline      Defines a line above the text 
line-through  Defines a line through the text

Solution 2:

When you want to remove bullets from ul try:

#header ul {
  list-style-type: none;
}

When you want to delete underline from links use:

#header li a {
    text-decoration: none;
    }

Baca Juga

Solution 3:

You want to add this to your CSS :

#header ul {
  list-style:none;
}

Solution 4:

The text has no decoration already, so if what you want it's to remove the bullets from the list, then use:

ul {
   list-style-type: none;
}

Solution 5:

* {
   margin: 0px;
   padding: 0px;
}

#Header {
  width: auto;
  height: 70px;
  background-color: #647551;
  margin-left: 0px;

}

#Header ul li {
  text-decoration: none;
  color: #645789;
  float: left;
  margin-left: 30px;
  list-style:none;


}

<!DOCTYPE html>
<html>
   <head>
      <link href="css/Main.css" type="text/css" rel="stylesheet" />
      <meta charset="utf-8">
      <title>Talkody - Gilles </title>
   </head>
   <body>
      <div id="Header">
         <ul>
            <li>Home</li>
            <li>About</li>
            <li>Portfolio</li>
            <li>Contact</li>
         </ul>
      </div>
      <p>Dit is een test website waar ik alles uittest, hierna ga ik er verder op in</p>
      <img source="images/Logo/TalkodyLogo.ai" />

   </body>
</html>

Html5 Academy