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

DUDA CÓDIGO

Que tal excelente día. No logro alinear a un lado del texto la 2da imagen "diferenciales", así como hace el instructor. Ya revisé mis códigos pero no logro encontrar el porque del error. Adjunto mis códigos y una imagen de mi navegador.

  • Imagen: Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad
  • Códido index: `
<head>
    <meta charset="UTF-8">
    <title>Barbería</title>
    <link rel="stylesheet" href="style.css">

</head>

<body>

    <img id="banner" src="banner/banner.jpg">

    <div class="principal">
        <h1>Sobre la Barbería Alura</h1>

        <p>Ubicada en el corazón de la ciudad, la <strong>Barbería Alura</strong> trae para el mercado lo que hay de mejor para su cabello y barba. Fundada en 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>


    </div>

    <div class="diferenciales">

        <h2>Diferenciales</h2>

    <ul> 
        <li class="items">Atención personalisada a los clientes</li>
        <li class="items">Espacio diferenciado</li>
        <li class="items">Localización</li>
        <li class="items">Profesionales calificados</li>
    </ul>

        <img src="diferenciales/diferenciales.jpg" class="imagenDiferenciles"

    </div>
</body>
``` * Acá está el código style:
body{
   background: #FFFFFF;
}

#banner{
    width:100%;
}

.principal{
    background: #cccccc;
    padding: 20px;

}

h1{
    text-align: center;
}

p{
    text-align: center;
}

em strong{ 
    color: red;
}

#mision{
    font-size: 20px;
}

.diferenciales{
    background: #FFFFFF;
    padding: 30px;
}

h2{
    text-align: center;
}

.items{
    font-style: italic;
}

ul{
    display: inline-block;
    vertical-align: top;
    width: 20%;
    margin-right: 15%;
}

.imagenDiferenciales{
    width: 50%;

}
7 respuestas
solución!

Hola Aldo, ¿todo bien?

Encontré 2 inconsistencias:

Está faltando cerrar la etiqueta img en la segunda imagen.

<img src="diferenciales/diferenciales.jpg" class="imagenDiferenciales">

Luego el nombre de tu clase tiene un error dice class="imagenDiferenciles", lo correcto es class="imagenDiferenciales"

Espero haberte ayudado.

Saludos

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

Tengo el mismo problema, verifique ambas cosas que menciona el profesor, aún así no se coloca en el lugar la imagen. **Agradecería su ayuda :D Buen día

<head>

    <meta charset = "UTF-8">  <!-- ortografía, [tag informativo]-->

    <title> Inline & Block </title> <!-- Cambia el nombre de la
    pestaña de la página,  [tag informativo] -->

    <link rel="stylesheet" href ="style_inline y block.css"> <!--HAce referencia--> 

</head>





<body>

    <img id="banner" src ="Carp Banner/banner.jpg"> <!--HAce referencia-->

    <div class="principal">

        <h1> Sobre la Barbería Alura </h1> <!-- Título de la página [tag Contenido]-->

        <p> Ubicada en el corazón de la ciudad, la  <strong> Barbería Alura </strong> trae para el mercado lo que hay de mejor para su cabello y barba. Fundada en 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>
        <!-- El carácter : sirve para atribuir un valor a una propiedad. -->

    </div>





    <div class="diferenciales">


        <h2> Diferenciales </h2>

        <ul> <!-- crea una lista no ordenada. -->

            <li class="items" >  Atencion perzonalizada a los clientes </li> <!--  declara cada uno de los elementos de una lista, pone punto inicial en la frase -->
            <li class="items" > Espacio especial a clientes   </li>
            <li class="items" > Localizacion especisal         </li>
            <li class="items" > Profecioneles calificados     </li>
            <!-- Con las clases puedo modificar un conjunto de datos 
            asi no ponemos el ID para cada cambio -->
        </ul>  <!-- crea una lista no ordenada. -->
                <img src="Diferenciales/diferenciales.jpg" class="imagenDiferenciales" >


        <h2> Tratamientos Especiales </h2>

        <ol>
            <li class="orden" > Tintes de barba y bigote  </li>
            <li class="orden" > Depilaciones con navaja suiza </li>
            <li class="orden" > Protesis de cabello </li>
        </ol>

    </div>


    Ingrese en Alura LATAM, haga <a href="https://app.aluracursos.com/course/html5-css3-primera-pagina-web/task/73258"  >click </a>


</body>

body { background: #10d7a9;

    }

    #banner /* donde esta la imagen*/
    {
        width: 100% ;
    }

    .principal /*division principal dentro del body*/
    {
        background: #cccccc;

    }

    h1 /* Titulo principal */
    {
        text-align: center; 
        background: #9e3a77;
        height: 75px; /* Altura donde esta el TITULO */
        border: 5px solid #000000; /* tamanho y color del borde */
        padding: 25px;  /* va a tomar espacio de todos los lados */
        margin: 5px; /* margen del titulo con referencia de la imagen
        y del parrafo que esta abajo */

    }

    p /*Parrafos*/
    {
        text-align: center; 
      /*background: #cccccc; solo pitaría los parrafos de Gris  */
    }


    em strong /* especifucando a etiqueta puedes modificar el 
    color.. Si pusieras solo strong  la linea 23 tambine se cambiaria
    y solo queremos cambiar la linea 26 que es la mision 
    ID = solo va a cambiar o modificar un dato muy espscifico que 
     es como el CURP de una persona*/

    {
        color: red;

    }

    #mision /* Mision de la barbería*/
    {    
    font-size: 35px;
    }


    .diferenciales /* division 2 dentro del body
    diferenciales, características de la barberia*/
    {
        background: #CC9900;
        padding: 30px;

    }

    h2
    {
        text-align: center;
    }

    .items /* Clase de diferenciales de la barbería es un conjunto
    de características que se puede modificar en conjunto
    . es para decir que hace referencia a una clase y NO a un id */
    {
        font-style: oblique;
        color: #800080;
        font-weight: bold; /*Negritas */

    }

    .orden/*clases, Segunda lista de diferenciales o tratamientos especiales 
    que se puede modificar en conjunto */
    {
        font-style: oblique;
        color: #014eb8;
        font-weight: bolder;  /* Es mas grueso y grande que bold*/
    }

    ul
    {
        display: inline-block;
        vertical-align: top;
    }


    .imagenDiferenciales
    {
        width: 50;
    }

Me ocurre lo mismo he revisado el código y lo he vuelto a escribir varias veces y lo he chequeado con el video, y sólo logro reducir el tamaño de la imagen, pero no logro ubicarla a la derecha luego de usar el inline-block

Ya encontré el error jaja, había escrito ** img src** dentro de la etiqueta ul por eso me alineaba la imagen dentro de la lista como otro item. Y no la lograba ubicar a la derecha.

El error estaba en el código y no en las hoja de estilo

        <h2>Diferenciales</h2>

    <ul>

        <li class= "items">Atención personalizada</li>
        <li class= "items">Espacio diferenciado</li>
        <li class= "items">Localización</li>
        <li class= "items">Profesionales calificados</li>

        <img src="diferenciales/diferenciales.jpg" class="imagenDiferenciales">

    </ul>

    </div>


</body>

Gracias Aldo por compartir el código así me di cuenta del error. Saludos.

Ok excelente, Virginia! Me alegra que hayas encontrado el problema :)

Hola, OK. Gracias Christian !!