HTML: How do I remove hyperlink underline from an Image and text?-CodePudding

After adding some hyperlinks to an Image, it has the underline but I couldn't find a way to remove it. First I tried text-decoration: none; but I noticed it only works for text, so the image looks like this image

The "Claro" image has that underline that I cannot remove.

Here is the code:

* {
  background-color: #eeeeee;
}

#parte1 {
  background-color: #da291c;
}

#parte2 {
  background-color: white;
  margin: 10px 480px 10px 0px;
}

#parte3 {
  background-color: blueviolet;
  margin: 10px 480px 10px 0px;
}

#logo {
  background-color: #da291c;
  margin-top: 10px;
  margin-bottom: 10px;
}

#parte1-samsung {
  background-color: #da291c;
}

#parte2-samsung {
  background-color: white;
  margin: 10px 480px 10px 0px;
}

a {
  text-decoration: none;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <link rel="stylesheet" type="text/css" href="estilos.css" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Caracteristicas Claro</title>
</head>

<body>
  <center>
    <div id="parte1" >
      <a href="https://tiendaclaro.pe" title="Tienda Claro">
        <img src="https://placehold.jp/200x100.png" alt="Claro" height="50" id="logo" />
      </a>
    </div>
  </center>

  <div id="parte2" >
    <a href="Web Claro.html" title="Inicio" id="reinicio">Inicio</a>

    <a href="equipos-samsung.html" title="Samsung" target="_blank" id="resamsung">Samsung</a>
  </div>
  <div id="parte3">Aqui iran el equipo y sus caracteristicas</div>
</body>

</html>

How do I manage to erase that underline of the image and make the other "Inicio" and "Samsung" options to looks like normal text, instead of that purple or blue color?

CodePudding user response：

What you're referring to as underline is not actually underline.

You've added this line in your CSS

* {
  background-color: #eeeeee;
}

that means every HTML tag will have this background. so your image and parent <a> will also have this background color and since the image has a bottom margin this which makes a gap in parent <a> and this gap is filled with the defined background color.

so what you're seeing is a filled background color, not an underline or border.

CodePudding user response：

Try adding the background-color: #eeeeee; property to the body tag instead of *

body{
    background-color: #eeeeee;
}
#parte1{
    background-color: #da291c;
}
#parte2{
    background-color: white;
    margin: 10px 480px 10px 0px;
}
#parte3{
    background-color: blueviolet;
    margin: 10px 480px 10px 0px;
}
#logo{    
    background-color:  #da291c;
    margin-top: 10px;
    margin-bottom: 10px;
}
#parte1-samsung{
    background-color: #da291c;
}
#parte2-samsung{
    background-color: white;
    margin: 10px 480px 10px 0px;
}
a{
    text-decoration: none; 
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="estilos.css">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title> Caracteristicas Claro</title>
</head>
<body>
    <center>
    <div id="parte1" >
        <a href="https://tiendaclaro.pe" title="Tienda Claro"><img src="icons/LogoClaro.png" alt="Claro" height="50" id="logo"></a>
    </div>
    </center>
    <div id="parte2" >
        <a  href="Web Claro.html" title="Inicio"  id="reinicio">Inicio</a>
        <a  href="equipos-samsung.html" title="Samsung" target="_blank" id="resamsung">Samsung</a>      
    </div>
    <div id="parte3">
        Aqui iran el equipo y sus caracteristicas
    </div>
</body>
</html>

CodePudding user response：

Use This Code. It Will Solve Your Problem Dear. Tip: Use margin:0 padding:0 box-sizing:border-box; in universal tag.

* 
{
  background-color: #eeeeee;
}

a { text-decoration: none;
color:black;
}

#parte1 {
background-color: #da291c;
}

#parte2 {
background-color: white;
margin: 10px 480px 10px 0px;
}

#parte3 {
background-color: blueviolet;
margin: 10px 480px 10px 0px;
}

#logo {
background-color: #da291c;
margin-top: 10px;
margin-bottom: 10px;
}

#parte1-samsung {
background-color: #da291c;
}

#parte2-samsung {
background-color: white;
margin: 10px 480px 10px 0px;
}