Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Solucionado (ver solución)
Solucionado
(ver solución)
13
respuestas

[Duda] Hola mi duda acerca de la imagen diferencial me aparece debajo de la lista y no encuentro el error.

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

            <div class="contenido-diferenciales">
                <ul class="lista-diferenciales">

                    <li class="items">Atencion Personalizadas a los clientes</li>
                    <li class="items">Espacio diferenciado</li>
                    <li class="items">Localización</li>
                    <li class="items">Profesionales Calificados</li>
                    <li class="items">Puntualidad</li>
                    <li class="items">Limpieza</li> 

                </ul><img src="diferenciales/diferenciales.jpg"class="imagen-diferenciales">
            </div>
13 respuestas
solución!

Ese error se arregla con CSS, que ahí es donde vas a darle a las propiedades a la imagen de diferenciales tienes que cambiar el display lo más probable, podrías poner como esta contruido tu CSS para así saber bien por qué esta fallando.

buenas noches juan carlos !!! como dice la compañera el error esta en la configuracion del css , recorda que las lista por defecto tiene un display block , por lo que lo tendrias que cambiar en el css por un display inline-block , espero haberte ayudado ,aca te dejo una imagen del css

Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad

Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad

Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad

ya los edite e igual salen asi--..

buenas tardes juan carlos !! ok estuve mirando y pense que te faltaba poner la etiqueta ul y img pegadas (o unidas ) en el html pero ya lo tenes hecho y por lo que subis no veo error (yo no veo error , a lo mejor otro compañero si )mira si tenes configurada bien la clase imagen-difrenciales con un width : 60 % , ahh mira configura el padding 0 0 15 px a lo mejor sea , aca te dejo como lo tengo configurado yo si te sirve ,espero que se eso y puedas solucionar el problema

Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad

Quizas el problema sea el tamaño del '<div'>y el tamaño que ocupan juntos la <ul'> y la <img'>, proba modificando un poco el tamaño de img-diferencial

Yo tengo el mismo problema. Mi codigo. Aclaro que cuando pongo el src y la carpeta, no me jala la imagen, solo me funciona sin ponerla la carpeta y solo el nombre de la imagen, en este caso diferenciales.jpg

body{ font-family: 'Montserrat', sans-serif; }

header{ background-color:#BBBBBB; padding: 20px 0; }

.caja{ width: 940px; position: relative; margin: 0 auto; }

nav{ position: absolute; top:110px; right:0; }

nav li{ display: inline; margin:0 0 0 15px; }

nav a{ text-transform: uppercase; color: #000000; font-weight: bold; font-size: 22px; text-decoration: none; }

nav a:hover{ color: #c78c19; text-decoration: underline; }

.productos{ width: 940px; margin:0 auto; padding: 50px; }

.productos li{ display: inline-block; text-align: center; width:30%; vertical-align: top; margin:0 1.5%; padding: 30px 20px; box-sizing: border-box; border: 2px solid #000000; border-radius:10px; }

.productos li:hover{ border-color: #c78c19; }

.productos li:active{ border-color: #088c19; }

.productos h2{ font-size: 30px; font-weight: bold; }

.productos li:hover h2{ font-size:33px; }

.producto-descripcion{ font-size: 18px; } .producto-precio{ font-size:20px; font-weight: bold; margin-top: 10px; } footer{ text-align: center; background: url(bg.jpg); padding: 40px; }

.copyright{ color: #FFFFFF; font-size:13px; margin:20px; }

form{ margin:40px 0; }

form label, form legend{ display: block; font-size:20px; margin: 0 0 10px; }

.input-padron{ display: block; margin: 0 0 20px; padding: 10px 25px; width: 50%; }

.checkbox{ margin: 20px 0; }

.enviar{ width: 40%; padding: 15px 0; font-size:18px; font-weight:bold; color: white; background: orange; border:none; border-radius:5px; transition: 1s all; cursor:pointer; } .enviar:hover{ background: darkorange; transform:scale(1.2); }

table{ margin: 40px 40px; }

thead{ background: #555555; color: white; font-weight: bold; }

td, th{ border: 1px solid #000000; padding: 8px 15px; }

/Aqui inicia el css para nuestra home/

.banner{ width: 100%; }

.principal{ width: 940px; margin:0 auto; padding: 3em 0; background: #FEFEFE; }

.titulo-principal{ text-align: center; font-size: 2em; margin:0 0 1em; clear: left; }

.principal p{ margin: 0 0 1em; }

.principal strong{ font-weight: bold; }

.principal em{ font-style: italic; }

.utensilios{ width: 120px; float: left; margin: 0 20px 20px 0; }

.mapa{ padding: 3em 0; background: linear-gradient(#FEFEFE, #888888) }

.mapa p{ margin: 0 0 2em; text-align: center; }

.mapa-contenido{ width: 940px; margin: 0 auto; }

.diferenciales{ padding: 3em 0; background: #888888; }

.contenido-diferenciales{ width: 640px; margin: 0 auto; }

.lista-diferenciales{ width: 40%; display: inline-block; vertical-align: top; padding: 0 0 15px; }

.items{ line-height: 1.5; }

.items:before{ content:"★" }

.items:first-child{ font-weight:bold; }

.imagen-diferenciales{ width: 60%; box-shadow: 10px 10px 30px 15px #000000;

}

.video{ width: 560px; margin: 1em auto; }

ahh y el codigo:

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

        <div class="contenido-diferenciales">
           <ul class="listado-diferenciales">
        <li class="items">Atención personalizada a los clientes</li>
        <li class="items">Espacio diferenciado</li>
        <li class="items">Localización</li>
        <li class="items">Profesionales calificados</li>
        <li class="items">Puntualidad</li>
        <li class="items">Limpieza</li>
           </ul><img src="diferenciales.jpg" class="imagen-diferenciales">
         </div>


         <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; web-share" allowfullscreen></iframe>
        </div>
 <section class="diferenciales">

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

            <div class="contenido-diferenciales">
               <ul class="listado-diferenciales">
            <li class="items">Atención personalizada a los clientes</li>
            <li class="items">Espacio diferenciado</li>
            <li class="items">Localización</li>
            <li class="items">Profesionales calificados</li>
            <li class="items">Puntualidad</li>
            <li class="items">Limpieza</li>
               </ul><img src="diferenciales.jpg" class="imagen-diferenciales">
             </div>


             <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; web-share" allowfullscreen></iframe>
            </div>

style.css

body{
    font-family: 'Montserrat', sans-serif;
}

header{
 background-color:#BBBBBB;
 padding: 20px 0;
}

.caja{
    width: 940px;
    position: relative;
    margin: 0 auto;
}

nav{
    position: absolute;
    top:110px;
    right:0;
}


nav li{
    display: inline;
    margin:0 0 0 15px;
}

nav a{
    text-transform: uppercase;
    color: #000000;
    font-weight: bold;
    font-size: 22px;
    text-decoration: none;
}

nav a:hover{
    color: #c78c19;
    text-decoration: underline;
}


.productos{
    width: 940px;
    margin:0 auto;
    padding: 50px;
}

.productos li{
    display: inline-block;
    text-align: center;
    width:30%;
    vertical-align: top;
    margin:0 1.5%;
    padding: 30px 20px;
    box-sizing: border-box;
    border: 2px solid #000000;
    border-radius:10px;
}

.productos li:hover{
    border-color: #c78c19;
}

.productos li:active{
    border-color: #088c19;
}


.productos h2{
    font-size: 30px;
    font-weight: bold;
}

.productos li:hover h2{
    font-size:33px;
}

.producto-descripcion{
    font-size: 18px;
}
.producto-precio{
    font-size:20px;
    font-weight: bold;
    margin-top: 10px;
}
footer{
    text-align: center;
    background: url(bg.jpg);
    padding: 40px;
}

.copyright{
    color: #FFFFFF;
    font-size:13px;
    margin:20px;
}


form{
    margin:40px 0;
}

form label, form legend{
    display: block;
    font-size:20px;
    margin: 0 0 10px;
}

.input-padron{
    display: block;
    margin: 0 0 20px;
    padding: 10px 25px;
    width: 50%;
}

.checkbox{
    margin: 20px 0;
}

.enviar{
    width: 40%;
    padding: 15px 0;
    font-size:18px;
    font-weight:bold;
    color: white;
    background: orange;
    border:none;
    border-radius:5px;
    transition: 1s all;
    cursor:pointer;
}
.enviar:hover{
    background: darkorange;
    transform:scale(1.2);
}

table{
    margin: 40px 40px;
}

thead{
    background: #555555;
    color: white;
    font-weight: bold;
}

td, th{
    border: 1px solid #000000;
    padding: 8px 15px;
}

/*Aqui inicia el css para nuestra home*/

.banner{
    width: 100%;
}

.principal{
    width: 940px;
    margin:0 auto;
    padding: 3em 0;
    background: #FEFEFE;
}

.titulo-principal{
    text-align: center;
    font-size: 2em;
    margin:0 0 1em;
    clear: left;
}

.principal p{
    margin: 0 0 1em;
}

.principal strong{
    font-weight: bold;
}

.principal em{
    font-style: italic;
}

.utensilios{
    width: 120px;
    float: left;
    margin: 0 20px 20px 0;
}

.mapa{
    padding: 3em 0;
    background: linear-gradient(#FEFEFE, #888888)
}

.mapa p{
    margin: 0 0 2em;
    text-align: center;
}

.mapa-contenido{
    width: 940px;
    margin: 0 auto;
}

.diferenciales{
    padding: 3em 0;
    background: #888888;
}

.contenido-diferenciales{
    width: 640px;
    margin: 0 auto;
}

.lista-diferenciales{
    width: 40%;
    display: inline-block;
    vertical-align: top;
    padding: 0 0 15px;
}

.items{
    line-height: 1.5;
}

.items:before{
    content:"★"
}

.items:first-child{
    font-weight:bold;
}

.imagen-diferenciales{
    width: 60%;
    box-shadow: 10px 10px 30px 15px #000000;

}

.video{
    width: 560px;
    margin: 1em auto;
}
<!DOCTYPE html>

<html lang= "es">

<head>

    <meta charset"UTF-8">

    <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>

<body> 

    <header>
        <section class="caja">
            <h1><img src="logo.png"></h1>
            <nav>
                <ul>
                    <li><a href="index.html">Home</a></li>
                    <li><a href="productos.html">Productos</a></li>
                    <li><a href= "contacto.html">Contacto</a></li>

                </ul>
            </nav>
        </section>
    </header>

    <img class="banner" src="banner.jpg">

    <main>
        <section class="principal">

            <h2 class="titulo-principal">Sobre la Barbería Alura</h2>

           <img class= "utensilios" src="utensilios.jpg" alt="utensilios de un barbero"

            <p>Ubicada en el corazón de la ciudad de Santa Ana, la <strong>Barbería Alura</strong> trae para el mercado las últimas tendencias y el mejor servicio para su cabello y barba. Fundada en el año 2020, la Barbería Alura ya es destaque en la ciudad y conquista nuevos clientes diariamente.</p>

            <p id= mision><em>Nuestra misión es: <strong>"Proporcionar autoestima y calidad de vida a nuestros clientes"</strong>.</em></p>

            <p>Ofrecemos profesionales experimentados que están constantemente observando los cambios y movimiento en el mundo de la moda, para así ofrecer a nuestros clientes las últimas tendencias. El atendimiento posee un padrón de excelencia y agilidad, garantizando calidad y satisfacción de nuestros clientes.</p>

        </section>

        <section class="mapa">
            <h3 class= "titulo-principal">Nuestra ubicación</h3>
            <p>Nuestro establecimiento esta ubicado en el corazón de la ciudad</p>

            <div class="mapa-contenido">
                <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3656.4079775648543!2d-46.63683214978493!3d-23.58969706844839!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x94ce5bd9bb943bf5%3A0x6f642995c970f0fe!2scaelum%20alura!5e0!3m2!1sen!2ssv!4v1673234701202!5m2!1sen!2ssv" width="100%" height="300" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
            </div>

        </section>

        <section class="diferenciales">

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

            <div class="contenido-diferenciales">
               <ul class="listado-diferenciales">
            <li class="items"> Atención personalizada a los clientes</li>
            <li class="items"> Espacio diferenciado</li>
            <li class="items"> Localización</li>
            <li class="items"> Profesionales calificados</li>
            <li class="items"> Puntualidad</li>
            <li class="items"> Limpieza</li>
            <br>
               </ul><img src="diferenciales.jpg" class="imagen-diferenciales">
             </div>

             <br>

             <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; web-share" allowfullscreen></iframe>
            </div>

        </section>



    </main>


<footer>
    <img src="logo-blanco.png" alt="Logo de la Barbería Alura">
    <p class="copyright">    
        &copy Copyright Barbería Alura -2020</p>
</footer>

</body>

</html>

hola! tu clase esta como "listado-diferenciales" pero en el css lo pusiste como "lista-diferenciales" :)

Gracias @MariaFernandaSalgadoGarcia!!

Tu ayuda fue super valiosa!