Solucionado (ver solución)
Solucionado
(ver solución)
6
respuestas

Items diferenciales con punto

En mi página la lista de diferenciales me muestra estos puntos y no se porque o como quitarlos. ![](Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad )

            <section class = "diferenciales">
                <h3 class="titulo-principal">Diferenciales</h3>

                <div class="contenido-diferenciales">
                    <lu class="lista-diferenciales">
                        <li class = "items" >Localización</li>
                        <li class = "items" >Profesionales Capacitados</li>
                        <li class = "items" >Atención personalizada</li>
                        <li class = "items" >Mejor precio</li>
                        <li class = "items" >Puntualidad</li>
                        <li class = "items" >Limpieza</li>
                    </lu><img src = "diferenciales/diferenciales.jpg" class ="image-diferenciales">
                    <div class="video">
                        <iframe width="560" height="315" src="https://www.youtube.com/embed/wcVVXUV0YUY" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                    </div>
                </div>

            </section> 
.diferenciales {
    padding: 3em 0;
    background: #888888;
}
.contenido-diferenciales {
    width: 640px;
    margin: 0 auto;
}
.lista-diferenciales {
    width: 40%;
    display: inline-block;
    vertical-align: top;
}
.items {
    line-height: 1.5;
}
.items::before{
    content: "★";
}
.items:first-child {
    font-weight: bold;
}
.image-diferenciales {
    width: 60%;
}
6 respuestas
solución!

Hola Jonathan, espero estés muy bien.

Felicitaciones por tu aprendizaje. Estamos priorizando el foro para postear dudas, así optimizamos el tiempo de respuesta para ustedes.

Para no dejar de compartir los códigos, actividades y ejercicios que realizas, creamos un canal en Discord (#compartatucodigo) donde puedes compartirlos, dar y sugerir mejoras con el resto de tus compañeros.

Si este post te ayudó, por favor, marca como solucionado ✓. Continúa con tus estudios

Hola Jonathan, cómo estás?

Eso sucede porque el navegador de manera preformateada le pone un puntito a cada item de la etiqueta < li > (lista).

Tenés 2 opciones:

-Agregarle el archivo reset.css que indican en el curso (eso borra todos esos preformatos que hace el navegador).

-Agregarle a tu código en CSS el siguiente comando:

    li{
        list-style: none;
    }

Espero haber sido de ayuda. Saludos!

Hola Gonzalo, tenia la misma duda de Jhonatan y me sirvió tu observación, muchas gracias. Saludos!

Por nada Alfredo. Un placer ayudar.

Jonathan, si te sirvió la ayuda, luego marcá el tópico como resulto por si otro compañero tiene la misma consulta.

Saludos!

Hola Gonzalo, Si estoy usando el reset.css como lo indica el curso. Esta raro que no las haya quitado.

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width= device-width">
        <title>Barbería Alura</title>
        <link rel="stylesheet" href="reset.css">
        <link rel="stylesheet" href = "style.css">
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300&display=swap" rel="stylesheet">

    </head>

Gonzalo con tu sugerecian del comando li {list-style: none;} funciono correctamamente Gracias