dichosos puntos suspensivos en div

macaluan · #1 (**permalink**) 27/04/2017, 09:26

Es increíble a veces lo complejo que es solucionar algunas tonterías.
Tengo un div dentro del cual tengo otros 3 divs para que estén centrados. Cada uno es un icono con link para una red social. Bien pues debajo de cada icono me aparece una dichosa linea de punto suspensivos. Solo desaparece si se hace mover, por una propiedad que tengo para que cambie el icono de color.

He probado con la propiedad list-style:none; y nada, ahí siguen. Veo en el foro que esto suele pasar con listas, pero yo estoy usando un div, no lo entiendo.

Rafael · #2 (**permalink**) 27/04/2017, 12:59

Las cosas no aparecen porque sí. No debe de ser por lista sino por el link.

a {text-decoration: none;}

macaluan · #3 (**permalink**) 27/04/2017, 15:31

Gracias rafa, pero no, siguen apareciendo los puntos....

Rafael · #4 (**permalink**) 27/04/2017, 21:25

Pon una captura porque si no no se puede adivinar que está pasando.

ut261c · #5 (**permalink**) 28/04/2017, 15:28

<!DOCTYPE html>
<html lang="es">
<head>

<style>
*{
margin:0;
}
body>div{
width:300px;
margin:0 auto;
background:blue;
}
div>div{
float:left;
width:calc((300px)/3);
}
</style>

</head>
<body>
<div>
<div>
<a href="https://www.google.com.pe">
<img src="img/icon.jpg">
</a>
</div>

<div>
<a href="https://www.google.com.pe">
<img src="img/icon.jpg">
</a>
</div>

<div>
<a href="https://www.google.com.pe">
<img src="img/icon.jpg">
</a>
</div>
</div>
</body>
</html>

ut261c · #6 (**permalink**) 28/04/2017, 15:33

<!DOCTYPE html>
<html lang="es">
<head>

<style>
*{
margin:0;
}
body>div{
width:300px;
margin:0 auto;
background:blue;
}
div>div{
float:left; //elige el que quieras
width:calc((300px)/3);
}
</style>

</head>
<body>
<div>
<div>
<a href="https://www.google.com.pe">
<img src="img/icon.jpg">
</a>
</div>

<div>
<a href="https://www.google.com.pe">
<img src="img/icon.jpg">
</a>
</div>

<div>
<a href="https://www.google.com.pe">
<img src="img/icon.jpg">
</a>
</div>
</div>
</body>
</html>

macaluan · #7 (**permalink**) 28/04/2017, 17:19

Gracias a los dos, me sigue saliendo.

A lo que me refiero es a esto de la foto.
Es curioso porque en otro apartado de la web tengo lo mismo y no aparecen, pero en el índex principal si, que es el caso que os pongo. Solo desaparecen al hacer hover, cambia el icono como debe ser pero los puntos extrañamente se van.

pzin · #8 (**permalink**) 28/04/2017, 18:46

Código CSS:

Ver originaltext-decoration: none;

De todas formas, si no pones código, es más difícil ayudarte.

macaluan · #9 (**permalink**) 29/04/2017, 00:10

Código HTML:

Ver original<header>
    <nav>
        <ul class="socialgeneral">
            <div>
            <a href="" target="_blank"    class="socialig"></a>
            </div>
            <div>
                <a href="" target="_blank" class="socialtw"></a>
            </div>
            <div>
            <a href="" target="_blank" class="socialfb"></a>
            </div>
            <div>
            <a href="mailto:" class="socialmail"></a>
            </div>
        </ul>
     </nav>
</header>

Código CSS:

Ver original.socialgeneral {
    text-decoration-line: none;
    display: flex;
    justify-content: center;
}
 
.socialig {
    display:block;
    padding: 10px;
    margin: 50px 20px 0px;
    float: left;
    width: 50px;
    height: 50px;
    background: url(../files/Instagramb.png);
    background-repeat: no-repeat;
    transition:  1s ease;
 
}
 
.socialig:hover {
    width: 50px;
    height: 50px;
    background: url(../files/Instagramw.png);
    background-repeat: no-repeat;
 
}
 
.socialtw {
    display:block;
    padding: 10px;
    margin: 50px 20px 0px;
    float: left;
    width: 50px;
    height: 50px;
    background: url(../files/Twitterb.png);
    background-repeat: no-repeat;
    transition:  1s ease;
 
}
 
.socialtw:hover {
    width: 50px;
    height: 50px;
    background: url(../files/Twitterw.png);
    background-repeat: no-repeat;
 
}
 
.socialfb {
    display:block;
    padding: 10px;
    margin: 50px 20px 0px;
    float: left;
    width: 50px;
    height: 50px;
    background: url(../files/Facebookb.png);
    background-repeat: no-repeat;
    transition:  1s ease;
 
}
 
.socialfb:hover {
    width: 50px;
    height: 50px;
    background: url(../files/Facebookw.png);
    background-repeat: no-repeat;
 
}
 
.socialmail {
    display:block;
    padding: 10px;
    margin: 50px 20px 0px;
    float: left;
    width: 50px;
    height: 50px;
    background: url(../files/Mailb.png);
    background-repeat: no-repeat;
    transition:  1s ease;
 
}
 
.socialmail:hover {
    width: 50px;
    height: 50px;
    background: url(../files/Mailw.png);
    background-repeat: no-repeat;
 
}

Rafael · #10 (**permalink**) 29/04/2017, 20:25

¿Seguro que no están pegados a tu imagen? Revisa tu mapa de bits.

macaluan · #11 (**permalink**) 30/04/2017, 05:01

no no, ademas si los cambio de posición los puntos también lo hacen. y la imagen de atrás es en movimiento.

pzin · #12 (**permalink**) 30/04/2017, 12:43

Con ese código que has puesto no se reproduce el problema.

¿Probaste lo que te había dicho?

macaluan · #13 (**permalink**) 01/05/2017, 04:34

Si, tengo puesto el "text-decoration: none"

rarísimo.....