Entrar ¿Aún no tienes acceso?
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
1
respuesta

La imagen se muestra pegada al título

Referente al curso HTML5 y CSS3 parte 1: Mi primera página web, en el capítulo Lista y divisiones del contenido y actividad Trabajando con listas

por SilviaJulianaRocioDiazDiaz
| 105k xp | 188 posts

Hola! Sucede que mi imagen aparece pegada al título, así: Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidadMi código es el siguiente:

<!DOCTYPE html>

<html lang="es">

    <head> 

        <meta charset="UTF-8">
        <title>Barbería Alura</title>
        <link rel="stylesheet" href="STYLE.css">


    </head>   

    <body>

        <img id="banner" src="banner/banner/banner.jpg"
         <h1>Sobre la Barbería Alura</h1>


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

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

    </body>

 </html>

Y el CSS es:


body{
    background: #CCCCCC;
}

h1{
    text-align:center;
}

p{
    text-align: center;
}

em strong{
    color: red;
}

#mision{
    font-size: 20px;s
}

.items {
    font-style: italic ;
}
1 respuesta
por Rafaela Rocha
| 2876.2k xp | 8758 posts
Alura Scuba Team Scuba Team

¡Hola Silviajulianarociodiazdiaz!

El problema que estás teniendo es que la imagen y el título están en el mismo nivel de jerarquía dentro del código HTML, lo que hace que se muestren uno al lado del otro. Para solucionarlo, debes envolver la imagen y el título en un contenedor, como un div, y luego aplicar estilos CSS para que la imagen y el título se muestren en diferentes niveles de jerarquía.

Aquí te dejo el código HTML y CSS actualizado:

<!DOCTYPE html>

<html lang="es">

    <head> 

        <meta charset="UTF-8">
        <title>Barbería Alura</title>
        <link rel="stylesheet" href="STYLE.css">


    </head>   

    <body>

        <div id="banner-container">
            <img id="banner" src="banner/banner/banner.jpg">
            <h1>Sobre la Barbería Alura</h1>
        </div>

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

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

    </body>

 </html>
body{
    background: #CCCCCC;
}

h1{
    text-align:center;
}

p{
    text-align: center;
}

em strong{
    color: red;
}

#mision{
    font-size: 20px;
}

.items {
    font-style: italic ;
}

#banner-container {
    text-align: center;
}

#banner {
    display: block;
    margin: 0 auto;
}

Espero que esto te ayude a solucionar tu problema. ¡Buenos estudios!

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