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

Posicionamiento

Referente al curso HTML5 y CSS3 parte 2: Posicionamiento, listas y navegación, en el capítulo Posicionamiento de los elementos y actividad Haz lo que hicimos en el aula

por Estudiante
| 116.2k xp | 54 posts

Hola!! Consulta, cómo puedo corregir lo que se observa en la imagen adjunta? he seguido los pasos indicados en el curso, comparto el código por las dudas de que hayan diferencias que no encuentro. Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad `header{ background-color: #bbbbbb; padding: 20px 0px; }

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

nav{ position:absolute; top:113px; right: 0px; } 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; }`

9 respuestas
por Estudiante
| 116.2k xp | 54 posts

perdón pero no sé cómo poner el código del archivo css para que se vea mejor

por Estudiante
| 116.2k xp | 54 posts

Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad lo que se observa en la imagen es la ventana cuando no ocupa el total de su tamaño en la pantalla

por Jorge Mario Oyola Moreno
| 145k xp | 384 posts

Pudiste solucionarlo?

por Estudiante
| 116.2k xp | 54 posts

Hola Jorge, no

por Lorena Valencia Ruiz
| 129.2k xp | 10 posts
ONE - Oracle Next Education

Hola Andrés, si pusiste el enlace a reset.css antes de los enlaces de los demás estilos. Podrías compartir tu código html? (al insertar tu mensaje hay un botón que se llama** Insertar bloque de código** que tiene esta forma** </>** )

por Jorge Mario Oyola Moreno
| 145k xp | 384 posts

Tampoco le encontré solución, calculo que el problema es por usar las positions. usando directamanete flex esto no pasa

por Estudiante
| 116.2k xp | 54 posts

Lorena, Jorge, muchas gracias por su respuesta. Comparto código

<!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=Lexend&display=swap" rel="stylesheet">

    </head>

    <body>

        <header>
            <div class="caja">
                <h1><img src="imagenes/logo.png" alt=""></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>
            </div>
        </header>

        <img class="banner" src="banner/banner.jpg" alt="banner"> <!-- Se estila utilizar class para modificar estilos y id para modificar comportamientos-->

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

                <!-- para posicionar la imagen podemos utilizar la propiedad position o la propiedad display(inline, inline-block, block). Si queremos que el texto envuelva a la imágen utilizamos la propiedad float. -->
                <img class="utensilios" src="imagenes/utensilios.jpg" alt="Utensillos de un barbero">

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

            <section class="mapa">
                <h3 class="titulo-principal">Nuestra ubicación</h3>
                <p>Nuestro establecimiento está ubicado en el corazón de la ciudad</p>
                <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d27203.003970611036!2d-68.53754880000001!3d-31.541308000000004!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x968140281b059031%3A0xbdafc7e302f74c9a!2sPlaza%2025%20de%20Mayo!5e0!3m2!1ses!2sar!4v1650837083455!5m2!1ses!2sar" width="100%" height="300" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
            </section>

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

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

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

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

        </main>

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

    </body>

</html>
solución!
por Estudiante
| 116.2k xp | 54 posts

Buen día! el tema está en la responsividad. La página está diseñada para dispositivos de 940px o más. Lo estoy viendo en el video de meta tag view-port.

por Estudiante
| 116.2k xp | 54 posts

con esta media query decimos que responda de determinada manera para los dispositivos que tienen hasta 480px de ancho de resolución

@media screen and (max-width:480px){
    .caja, .principal, .mapa-contenido, .contenidos-diferenciales, .video{
        width:auto;
    }
}

también hay que cambiar el tamaño por defecto del video en el index.html. Debemos colocarlo en 100% 

    <iframe width="100%" 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>