0

Quería utilizar un código que vi en Youtube "Como hacer un Menú de Navegación con Tabs" (https://www.youtube.com/watch?v=Xh94Osf1hvU&t=191s). Pero al momento de crear el menú utilizan position absolute y relative (CREO que ese es el problema). Lo que pasa es que el contenido se sobrepone al footer por ejemplo.

Esto es lo que sucede, es como si no reconociera que existe un footer y si coloca por encima

Ese es el error que se me presenta, es como si el menú no identificará que debajo de él existen elementos, y no sé como solucionarlo.

Me gustaría saber si hay alguna manera de solucionar ese error, lo agradecería de antemano.

HTML

<div class="container">
    <div class="lbl-menu">
      <label for="radio1">Inicio</label>
      <label for="radio2">Servicio</label>
    </div>

    <div class="content">

      <input type="radio" name="radio" id="radio1" checked/>
      <div class="tab1">
        <h2>Inicio</h2>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum et
          atque corrupti repellat beatae facere tempore mollitia ducimus
          nulla laudantium eveniet, provident debitis. Fugit nisi minus
          laborum delectus autem esse.
        </p>
      </div>

      <input type="radio" name="radio" id="radio2" />
      <div class="tab2">
        <h2>Servicio</h2>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum et
          atque corrupti repellat beatae facere tempore mollitia ducimus
          nulla laudantium eveniet, provident debitis. Fugit nisi minus
          laborum delectus autem esse.
        </p>
      </div>

    </div>

  </div>

CSS

.container{
width: 100%; /* Ocupe el 100% del ancho */
max-width: 700px;
margin: auto; /* Centrado en el medio de la pagina */
margin-top: 100px;/* Separacion con el borde superior */
}
.lbl-menu{
background-color: #234; /* Color de fondo del Menu donde estan los label (Inicio y 
Servicio) */
}

.lbl-menu label{
display: inline-block;
padding: 20px; /* Espaciado interno de los label */
color: white;
cursor: pointer;
transition: all 400ms ease;
}

.lbl-menu label:hover{
background: #28435d;
}

.content{
position: relative;/* Despues colocaremos que nuestro contenido interno este 
absoluto, y asi siempre quede dentro del contenedor padre  */
}

.content div{
position: absolute;
line-height: 1.8;
transition: all 600ms ease;
opacity: 0; /* Para que por defecto no aparezca ninguno */
visibility: hidden; /* Para ocultarlo */
transform: scale(0.90);
padding: 30px;
background-color:#fff;
padding-bottom: 40px;
}

#radio1, #radio2{
display: none;
}

#radio1:checked ~ .tab1, #radio2:checked ~ .tab2{
opacity: 1; /* Cuando damos clic en algun Label, que aparezca la informacion */
visibility: visible;
transform: scale(1);
}
2
  • ¡Hola Luis! Prueba a poner clear:both al footer y/o a darle una altura mínima a .content que ocupe lo que los elementos absolute necseitan. Con absolute estás sacando los divs del flujo de la página y solo el elemento con relative cuenta para el navegador para medir el alto del contenedor. Commented el 4 nov. 2023 a las 22:08
  • No aparece el footer en ese código HTML
    – Yussef
    Commented el 5 nov. 2023 a las 3:35

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

Examina otras preguntas con la etiqueta o formula tu propia pregunta.