3

Me preguntaba si existe alguna forma de hacer que el cuadro grande se pueda mover a la derecha de la página web sin que se ponga abajo del índice que hay a la izquierda (sin usar bootstrap). Gracias por la ayuda :) introducir la descripción de la imagen aquí

.indice{
width: 12%;
border: solid;}
.cuerpo{
float: right;
width: 87%;
border: solid;}

<body>
    <h1>
        Centro formativo Lancaster
    </h1>

    <div class="indice">
        <ul>
            <li><a href="./index.html">Inicio</a></li>
            <li><a href="./informacion.html">Información del centro</a></li>
            <li><a href="./alumnos.html">Antiguos alumnos</a></li>
        </ul>
    </div>
    <div class="cuerpo">
        <ul>
            <h2>Miembros del Centro</h2>
            <p>
                <ul>
                    <li>Directora: Jimena Álvarez Carrillo</li>
                    <li>Jefe de estudios: Gonzalo Menéndez Blanco</li>
                    <li>Coordinadora: Francisca Bonito Bonilla</li>
                    <li>Secretaría: Eduardo Pereira Gómez</li>
                </ul>
            </p>
        </ul>
        <hr>            
    </div>
</body>
3
  • ¿El cuadro donde dice miembros?
    – user128299
    el 8 mar. 2020 a las 18:03
  • De paso por favor agrega tu CSS para poder replicar tu escenario
    – user128299
    el 8 mar. 2020 a las 18:04
  • tienes algunos errores en el HTML. Tienes un h2 y un parafo p dentro de una lista ul. Además de esto para que el cuerpo aparezca debajo del indice no tienes que hacer absolutamente nada. Si borras todo el css que tienes los dos divs aparecen uno debajo de otro.
    – enxaneta
    el 8 mar. 2020 a las 18:23

2 respuestas 2

5

Hay varias soluciones a este problema, si no quieres cambiar el layout y utilizar, por ejemplo, un contendor con display flex en modo fila, hay una solución algo más básica pero que consigue el objetivo:

.indice {
    max-width: 250px;
    float: left;
}

.cuerpo {
    margin-left: 250px;
}
3
  • Eso es, muchas gracias.Yo estaba haciendo es: .indice{ width: 12%; border: solid; } .cuerpo{ float: right; width: 87%; border: solid; }
    – DonRabisa
    el 8 mar. 2020 a las 18:23
  • Esos detalles de tu código debieron ir en tu pregunta así sería mas fácil ayudarte @rabisa47
    – user128299
    el 8 mar. 2020 a las 18:26
  • si, ya lo he agregado, lo siento. Es que no conseguía que me apareciera como código.
    – DonRabisa
    el 8 mar. 2020 a las 18:28
0

Procedimiento

  • Un contenedor general tanto para el menú del lado izquierdo como para el menú del lado derecho
  • Al contenedor padre aplicarle la propiedad flex para hacer que todos los elementos queden alineados sobre el main axis
  • Ahora a cada div que contienen a los menús les aplicaremos un ancho dado en porcentajes, dando la separación deseada considerando abarcar el 100% del viewport
  • Por otro lado no hay razón para que una etiqueta de párrafo envuelva una lista de elementos desordenada
  • Así como tampoco para que tengas un hr dibujando una línea, eso se puede hacer directo con CSS
  • Finalmente el título hay que sacarlo y dejarlo dentro del div y no del ul como estaba antes

Ejemplo

    <style>
      body {
        margin: 0;
      }
      .titulo-principal {
        background-color: steelblue;
        margin: 0;
        text-align: center;
      }
      .contenedor-menu {
        display: flex;
      }
      .indice {
        border: solid 1px ;
        width: 20%;
      }
      .indice > ul > li {
        list-style: none;
      }
      .cuerpo {
        border: solid 1px;
        width: 80%;
      }
    </style>
    <body>
    <h1 class="titulo-principal">
      Centro formativo Lancaster
    </h1>
    <section class="contenedor-menu">
        <div class="indice">
            <ul>
                <li><a href="./index.html">Inicio</a></li>
                <li><a href="./informacion.html">Información del centro</a></li>
                <li><a href="./alumnos.html">Antiguos alumnos</a></li>
            </ul>
        </div>
        <div class="cuerpo">
            <h2>Miembros del Centro</h2>
                    <ul>
                        <li>Directora: Jimena Álvarez Carrillo</li>
                        <li>Jefe de estudios: Gonzalo Menéndez Blanco</li>
                        <li>Coordinadora: Francisca Bonito Bonilla</li>
                        <li>Secretaría: Eduardo Pereira Gómez</li>
                    </ul>           
        </div>
    </section>
    
    </body>

1
  • Ostras pues sí, es más cómodo. Esto me lo guardo y se lo voy a aplicar
    – DonRabisa
    el 8 mar. 2020 a las 18:37

Tu Respuesta

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

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