0

Tengo una Cabecera y me gustaría ponerlo debajo del div de menús usando sólo CSS, sin tocar el HTML, es eso posible?

  <body>
    <header>Cabecera</header>
    <div class="menus">
      <nav class="menu-izquierdo">
        <h2>Menu</h2>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
      </nav>
      <nav class="menu-derecho">
        <h2>Menu</h2>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
      </nav>
    </div>
    <main>
      <article>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis
        atque quia, rerum voluptates veniam quod culpa iusto vel, odio nulla
        enim amet? Quod consectetur a laudantium vitae architecto labore
        laborum.
      </article>
    </main>
  </body>
</html>

introducir la descripción de la imagen aquí

13
  • 1
    Un header, es un div con nombre. Si quieres ponerlo en otro lado, puedes hacerlo.
    – Excorpion
    el 11 nov. 2020 a las 18:35
  • No termino de entender tu duda @RoyalUp, ¿puedes ser mas claro por favor?
    – BetaM
    el 11 nov. 2020 a las 18:36
  • Pero como puedo ponerlo justo debajo del div de menús tal y como está declarado todo?
    – RoyalUp
    el 11 nov. 2020 a las 18:36
  • Copialo, y pegalo en la seccion que quieres.
    – Excorpion
    el 11 nov. 2020 a las 18:37
  • 1
    ahhh @RoyalUp por ahi debimos de empezar, eso no queda nada claro en la pregunta, ¿al respecto has tratado algo?
    – BetaM
    el 11 nov. 2020 a las 18:38

2 respuestas 2

1

si no quieres mover nada del HTML, una de las pocas opciones es forzando las posiciones de los elementos. para usar otras cosas como un flexbox como te mencionan en los comentarios, tendrías que agruparlos en contenedores.

 header, .menus, main  {
  position: absolute
 }
 header { 
  top: 250px;
 }
 .menus { 
  top: -20px;
 }
 main { 
  top: 280px;
 }
<body>
    <header>Cabecera</header>
    <div class="menus">
      <nav class="menu-izquierdo">
        <h2>Menu</h2>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
      </nav>
      <nav class="menu-derecho">
        <h2>Menu</h2>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
      </nav>
    </div>
    <main>
      <article>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis
        atque quia, rerum voluptates veniam quod culpa iusto vel, odio nulla
        enim amet? Quod consectetur a laudantium vitae architecto labore
        laborum.
      </article>
    </main>
  </body>

0

Probaste así:

<body>
<div class="div-nuevo">Div Nuevo</div>
<header>Cabecera</header>
<div class="menus">
  <nav class="menu-izquierdo">
    <h2>Menu</h2>
    <div>Item</div>
    <div>Item</div>
    <div>Item</div>
  </nav>
  <nav class="menu-derecho">
    <h2>Menu</h2>
    <div>Item</div>
    <div>Item</div>
    <div>Item</div>
    <div>Item</div>
  </nav>
</div>
<main>
  <article>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis
    atque quia, rerum voluptates veniam quod culpa iusto vel, odio nulla
    enim amet? Quod consectetur a laudantium vitae architecto labore
    laborum.
  </article>
</main>

Esa es la forma que yo conozco. Tal vez te sirve. No es CSS, es HTML pero es la más sencilla a mi entender.

Tu Respuesta

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

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.