Hola ¿Como estan? Me pueden explicar por que me esta saliendo este espacio en blanco entre el header que realice y las dos divisiones que...

Pregunta de la clase:
Posicionamiento de Layout Básico en CSS
Jorge Perilla

Jorge Perilla

Pregunta
student•hace 5 años

Hola ¿Como estan? Me pueden explicar por que me esta saliendo este espacio en blanco entre el header que realice y las dos divisiones que hice debajo de este? No entiendp por que. Les dejo una imagen y el codigo

hueco.JPG

!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Nuestros productos en Huevolandia</title>
    <link rel="stylesheet" href="./layout.css">
</head>
<body>
    <header class="header">
        <figure class=" header__ logo">
            <img src="./Fotos logo/huevoslandia.jpg" alt="Huevolandia, la empresa de mejor calidad" class="logohuevo">
            <img src="./Fotos logo/invima-1000x562.png" alt="Logo Invima" class="logo2">
            <img src="./Fotos logo/fenavi.jpg" alt="Logo fenavi" class="logofenavi">
        </figure>

        <nav class="nav">
        <ul class=" nav__list">
        <li>
            <b> Ubicanos </b>
        </li>
        <li>
         <b> Sobre Huevolandia </b>
            </li>
            <li>
                <b> Nuestros productos </b>
                </li>
                 <li> <b>Contactanos </b> </li>
                <li>
                    <b> Acerca de huevolandia</b>
                    </li>
        </ul>
        </nav>
    </header>   
</body>

<main class="infoba">

    <aside class="parte2">

    <nav class="aa" >
        <ul class="huevos">   <b id="huevoc">  Huevo c </b>      </ul>
        <ul class="huevos">   <b id="2">  Huevo B </b>      </ul>
        <ul class="huevos">   <b id="3">  Huevo AA </b>       </ul>
        <ul class="huevos">   <b id="4">  Huevo AAA </b>      </ul>
        <ul class="huevos">   <b id="5">  Huevo Jumbo </b>      </ul>
        
    </nav>
    </aside>

   
    

</main>

<main class="descripcion">

<div class="tituloc">
    <b> Huevo C </b>

</div>


<figure>


</figure>


</main>








</html>

CSS

*{
    box-sizing: border-box;
    margin:0;
    padding: 0;
}
html{
    font-size: 62.5%;
}

.header{
    background-color: green;
    border: black solid 0.5rem;
    }

.nav__list li {
    display: inline-block;
    margin: 0.5rem;
    color: black;
    font: ;
    
}

.nav{
background-color: white;
}

.logo2{
display: inline-block;
max-width: 4rem;
float: right;
margin-right: 10rem;
margin-top: 4.3rem;
border: black solid
}

.logofenavi{
display: inline-block;
max-width: 3.3rem;
float: right;
margin-right: 1rem;
margin-top: 4.3rem;
border: black solid

}

.infoba{
display: inline-block;
height: 1000vmax;
max-width: 30%;
background-color: green;
border-right: black solid 0.5rem;
border-bottom: black solid 0.5rem;
}

.logohuevo,.menu{
display: inline-block;
max-width: 10rem;
padding: 0.5rem;
  }


.parte2{
height: 100%;
padding: 2rem;
font: white;
}

.huevos{
color: white;
text-align: center;

}

.descripcion{
    display: inline-block;
    margin: 10rem;
    padding: 10rem;

}

.huevoaa{
margin-left: 30rem;
}

.tituloc{


}```
4 respuestas
para escribir tu comentario
    Patricio Villarroel Durán

    Patricio Villarroel Durán

    student•hace 5 años

    Hola Jorge, revisé tu código y deberias hacer los siguientes cambios.

    En primer lugar: Sigo teniendo el problema de que .content me esta quedando debajo del menu que quiero que quede en el lado izquierdo. No entiendo por que pasa esto si ambos items (Article.content y .links estan como inline block (entiendo que asi deberian quedar uno pegado del otro) no se si me puedas ayudar.

    Primero la propiedad inline-block va con guión. Corrígelo en la clase

    .links

    .links{
    display: inline-block;
    height: 20%;
    width: 20%;
}

    Además te faltó añadirle un position absolute a la clase

    .content

    .content{
    display: inline-block;
    margin: 1rem;
    padding: 1rem;
    position: absolute;
}

    Con eso ya tienes el layout posicionado.

    Tienes un error en la clase

    .huevos
    , no pones punto y coma al final de
    height: 100rem
    , lo que hace que el
    height
    no funcione ni tampoco el
    text-align
    a continuación (100rem es exagerado, pruébalo y verás)

    La segunda que quisiera preguntarte es la siguiente: ¿Como hago yo para que .links (osea el menu verde que contiene los distintos tipos de huevo me quede en el height el 100%, es decir que vaya desde donde esta hasta donde esta ocupando en la foto todo lo de huevo c? Resulta que he puesto el comando Height: 100% y no lo hace.

    Esto te lo habia explicado antes, con la función

    calc
    de CSS. Vuelve a ver esa parte de mi respuesta anterior.

    Jorge, me doy cuenta que cometes muchos errores de sintaxis que podrias solucionar instalando un par de extensiones en Visual Studio Code. Mira, así veo tu código, con los errores claramente explícitos.

    Screen Shot 2020-11-10 at 18.45.29.png

    Anda a las extensiones de VS Code e instala Error Lens y Error Gutters y luego reinicia VS Code. Y listo.

    Espero que ahora si puedas obtener los resultados que querías. ¡Saludos!

    Jorge Perilla

    Jorge Perilla

    student•hace 5 años

    hola Villarroel. ¿Como estas? hice lo que me recomendaste, (De hecho adecue la pagina como el wirframe que me recomendaste, me queda mas claro, sin embargo tengo los siguientes problemas:

    En primer lugar: Sigo teniendo el problema de que .content me esta quedando debajo del menu que quiero que quede en el lado izquierdo. No entiendo por que pasa esto si ambos items (Article.content y .links estan como inline block (entiendo que asi deberian quedar uno pegado del otro) no se si me puedas ayudar.

    La segunda que quisiera preguntarte es la siguiente: ¿Como hago yo para que .links (osea el menu verde que contiene los distintos tipos de huevo me quede en el height el 100%, es decir que vaya desde donde esta hasta donde esta ocupando en la foto todo lo de huevo c? Resulta que he puesto el comando Height: 100% y no lo hace.

    Te comparto mi codigo para que me comentes que tal quedo estructurado como lo recomendaste

    Saludos

    Jorge

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Nuestros productos en Huevolandia</title>
    <link rel="stylesheet" href="./layout.css">
</head>
<body>
    <header class="header">
        <figure class=" header__ logo">
            <img src="./Fotos logo/huevoslandia.jpg" alt="Huevolandia, la empresa de mejor calidad" class="logohuevo">
            <img src="./Fotos logo/invima-1000x562.png" alt="Logo Invima" class="logo2">
            <img src="./Fotos logo/fenavi.jpg" alt="Logo fenavi" class="logofenavi">
        </figure>

        <nav class="nav">
        <ul class=" nav__list">
        <li>
            <b> Ubicanos </b>
        </li>
        <li>
         <b> Sobre Huevolandia </b>
            </li>
            <li>
                <b> Nuestros productos </b>
                </li>
                 <li> <b>Contactanos </b> </li>
                <li>
                    <b> Acerca de huevolandia</b>
                    </li>
        </ul>
        </nav>
    </header>   

    <main class="main">

    <aside class="links">

        <ul class="huevos">   <b id="huevoc">  Huevo c </b>      </ul>
        <ul class="huevos">   <b id="2">  Huevo B </b>      </ul>
        <ul class="huevos">   <b id="3">  Huevo AA </b>       </ul>
        <ul class="huevos">   <b id="4">  Huevo AAA </b>      </ul>
        <ul class="huevos">   <b id="5">  Huevo Jumbo </b>      </ul>
        
    </aside>

<article class="content">

<section class="tituloc">  

    <b> Huevo C </b>

</section>


</article>



</main>




</body>



</html>

    CSS CODE:

    *{
    box-sizing: border-box;
    margin:0;
    padding: 0;
}
html{
    font-size: 62.5%;
}

.header{
    background-color: green;
    border: black solid 0.5rem;
    width: 100%;
    height: 100%;
    }

.nav__list li {
    display: inline-block;
    margin: 0.5rem;
    color: black;
    font: ;
    
}

.nav{
background-color: white;
}

.logo2{
display: inline-block;
max-width: 4rem;
float: right;
margin-right: 10rem;
margin-top: 4.3rem;
border: black solid
}

.logofenavi{
display: inline-block;
max-width: 3.3rem;
float: right;
margin-right: 1rem;
margin-top: 4.3rem;
border: black solid

}

.main{
height: 100%;
width: 100%;
border-right: black solid 0.5rem;
border-bottom: black solid 0.5rem;
}

.logohuevo,.menu{
display: inline-block;
max-width: 10rem;
padding: 0.5rem;
  }


.links{
display: inline block;
height: 20%;
width: 20%;
font: white;
}

.huevos{
color: white;
background-color: green;
height: 100rem
text-align: center;

}

.content{
display: inline-block;
    margin: 1rem;
    padding: 1rem;

}

.huevoaa{
margin-left: 30rem;
}

.tituloc{


}

    Muchas gracias por tu ayuda y quedo pendiente de tu respuesta

    pregunta 2.JPG

    Patricio Villarroel Durán

    Patricio Villarroel Durán

    student•hace 5 años

    Hola Jorge

    Intentaré ayudarte. Hay varios problemas en tu código y te aconsejo que para que entiendas lo que está mal, sigas mi razonamiento y anda paso a paso corrigiendo tu código con mis indicaciones. De seguro te ayudarán a entender.

    El primero es que cierras el body después del

    </header>
    . El body lo debes cerrar antes del
    </html>
    .

    Lo segundo es que, como jegolvera indicó, al usar el inspector podemos ver que la zona donde dice Huevo C tiene el padding que produce ese espaciado (lo naranja en la imagen la continuación). La pregunta es entonces por qué el aside no está desde arriba.

    Screen Shot 2020-11-08 at 01.14.08.png

    Esto lo corriges cambiando en el CSS, en la clase

    .infoba
    el display por
    display: block;
    Una vez hecho esto, el aside verde quedará como esperas.

    Además yo cambiaría el

    height: 1000vmax;
    por
    height: calc(100vh - 78px);
    Los 78 px es el alto que me indica el inspector que tiene tu header:

    Screen Shot 2020-11-08 at 01.14.32.png

    Pero cada navegador podría darle un alto distinto así que si te aconsejo definir el height de la clase header, cuyo valor luego será el que debes restar en el calc para decirle al navegador que la clase infobae que debe medir de alto el 100 % de la altura del viewport (100vh) menos los 78 pixeles (o los que definas) del alto del header). Es decir:

    .header{
    background-color: green;
    border: black solid 0.5rem;
    height: 80px;
}

.infoba{
    display: block;
    height: calc(100vh - 80px);
    max-width: 30%;
    background-color: green;
    border-right: black solid 0.5rem;
    border-bottom: black solid 0.5rem;
}

    Con todo eso solucionamos el problema que preguntabas, pero tenemos un nuevo problema: el main de clase description no queda al lado del aside, sino debajo.

    ¿Por qué pasa esto? Porque tienes dos elementos main en tu layout. Por definición solo puedes tener un elemento main por documento.

    Si tomo tu layout y lo llevo a un wireframe, tú tienes esto (los colores solo son para diferenciarlos y los puntos representan clases, por lo que

    main.infoba
    =
    <main class="infoba"></main>
    ):

    Recurso 1.png

    Pero -y aquí tienes que meterte a tu código y hacer los cambios correspondientes- debería ser asi:

    Recurso 2.png

    Es decir sólo un main. Haz estos cambios y ahora si debería funcionarte.

    Y por favor, ¡cuéntame cómo te fue!

    Jonathan Edwin Gutiérrez Olvera

    Jonathan Edwin Gutiérrez Olvera

    student•hace 5 años

    Saludos, podrías usar el inspector de elementos para visualizar que lo ocasiona, o puede ser por un conflicto con las dimensiones de los contenedores.

Curso de HTML y CSS [Empieza Gratis]

Curso de HTML y CSS [Empieza Gratis]

Crea vistas web fluidas y eficientes con HTML, CSS y Flexbox. Aprende a estructurar layouts adaptables, desde mobile a desktop, optimizando imágenes y aplicando buenas prácticas semánticas y de accesibilidad.

Ir al curso
Curso de HTML y CSS [Empieza Gratis]
Curso de HTML y CSS [Empieza Gratis]

Curso de HTML y CSS [Empieza Gratis]

Crea vistas web fluidas y eficientes con HTML, CSS y Flexbox. Aprende a estructurar layouts adaptables, desde mobile a desktop, optimizando imágenes y aplicando buenas prácticas semánticas y de accesibilidad.

Ir al curso