[Resuelto] no puedo alinear aside

Beginner Web · 31 Marzo 2020, 10:17 AM

Hola como veran no puedo alinear el asida de mi pagina.

lo quiero aquí.

https://i.ibb.co/1bmy1yr/2013-05-25-copia.jpg

Código (html4strict) [Seleccionar]

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pati</title>
    <link href="https://fonts.googleapis.com/css2?family=Baloo+Thambi+2:wght@700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="css/index.css">
</head>

<body>
    <header class="cabecera text-aling">
        <div class="caja izquierda">
            <a href="index.html" class="ancla logo">PATI</a>
            <p>Siempre pensando en la gente.</p>
        </div>
        <div class="caja derecha">
            <p class="contratar">Contratar: 0388-123456</p>
            <p class="emergencias">Emergencias: 0303456</p>
            <a href="registro.html" class="ancla derecha">Ingresar</a>
        </div>
    </header>

    <nav>

        <a class="nav-enlace" href="#">Inicio</a>
        <a class="nav-enlace" href="#">Programación</a>
        <a class="nav-enlace" href="#">Noticias</a>
        <a class="nav-enlace" href="#">Cocina</a>
        <a class="nav-enlace" href="#">Animes</a>
        <a class="nav-enlace" href="#">Contacto</a>

    </nav>

    <main>
        <section class="flex">
            <div class="izquierda">
                <p class="titulo">¿Quienes somos?</p>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi dolores odio odit? Quidem
                    asperiores,
                    iure enim reprehenderit libero ducimus voluptatibus pariatur veniam modi veritatis! Magni vel
                    sapiente
                    reiciendis nihil enim.</p>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi dolores odio odit? Quidem
                    asperiores,
                    iure enim reprehenderit libero ducimus voluptatibus pariatur veniam modi veritatis! Magni vel
                    sapiente
                    reiciendis nihil enim.</p>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi dolores odio odit? Quidem
                    asperiores,
                    iure enim reprehenderit libero ducimus voluptatibus pariatur veniam modi veritatis! Magni vel
                    sapiente
                    reiciendis nihil enim.</p>
                <p> ...</p>
            </div>
        </section>

        <section class="flex text-align">

            <div class="columna">
                <h1>Plan Joven</h1>
                <p class="precio">$600</p>
                <p>Lorem ipsum dolor, sit amet consectetur.</p>
                <hr>
                <p>Lorem ipsum dolor </p>
                <p>Lorem ipsum dolor</p>
                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
                <hr>
                <a href="#" class="btn-comprar">Comprar</a>
            </div>

            <div class="columna">
                <h1>Plan Adulto</h1>
                <p class="precio">$900</p>
                <p>Lorem ipsum dolor, sit amet consectetur.</p>
                <hr>
                <p>Lorem ipsum dolor </p>
                <p>Lorem ipsum dolor</p>
                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
                <hr>
                <a href="#" class="btn-comprar">Comprar</a>
            </div>

            <div class="columna">
                <h1>Plan Leyenda</h1>
                <p class="precio">$1200</p>
                <p>Lorem ipsum dolor, sit amet consectetur.</p>
                <hr>
                <p>Lorem ipsum dolor </p>
                <p>Lorem ipsum dolor</p>
                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
                <hr>
                <a href="#" class="btn-comprar">Comprar</a>
            </div>

        </section>
    </main>

    <aside class="side">

        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempore alias qui distinctio vero
            repudiandae aliquam mollitia obcaecati cum, quis voluptatibus deleniti quia inventore, eius totam unde! Ad
            corrupti voluptatem maiores!</p>

    </aside>

    <footer>
        <ul>
            <li><a href="aviso-legal.html">Aviso legal</a></li>
            <li><a href="privacidad.html">Privacidad</a></li>
            <li><a href="contactar.html">Contactar</a></li>
        </ul>
    </footer>

</body>

</html>

Creo que estoy maquetando mal

Código (css) [Seleccionar]

p {
    margin: 0px auto;
}

.ancla {
    text-decoration: none;
}

.logo {
    font-size: 80px;
    color: lightseagreen;
    font-family: 'Baloo Thambi 2', cursive;
}

.titulo {
    font-size: 40px;
    color: lightseagreen;
    font-family: 'Baloo Thambi 2', cursive;
}

.cabecera {
    margin: 10px auto;
    padding: 10px;
    width: 90%;
    padding-bottom: 180px;
}

.side{
    margin: 0 auto;
    float: right;
    width: 24%;
}

.flex {
    display: flex;
    width: 70%;
}

.text-align {
    text-align: center;
}

.caja {
    margin: 10px auto;
    padding: 10px;
    width: 23%;
}

.izquierda {
    float: left;
}

.derecha {
    float: right;
}

.contratar {
    background: rgb(85, 85, 247);
    border-radius: 8px;
    color: white;
    text-align: center;
    font-size: 26px;
    margin: 10px auto;
}

.emergencias {
    background: salmon;
    border-radius: 8px;
    color: white;
    text-align: center;
    font-size: 26px;
    margin: 10px auto;
}

.columna {
    background: rgb(238, 238, 238);
    color: #333;
    border: 1px solid #333;
    margin: 10px auto;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 5px 5px;
    width: 23%;
    box-sizing: border-box;
    display: inline-block;
}

.precio {
    font-size: 50px;
    color: lightseagreen;
}

.btn-comprar {
    background: salmon;
    display: block;
    padding: 10px;
    color: seashell;
    text-decoration: none;
    border-radius: 4px;
}

.btn-comprar:hover{
    background: rgb(97, 97, 248);

}

nav {
    padding: 10px;
    display: flex;
    justify-content: space-around;
}

.nav-enlace {
    color: whitesmoke;
    background-color: rgb(80, 80, 241);
    padding: 10px 40px;
    display: inline-block;
    text-decoration: none;
    font-size: 20px;
    border-radius: 6px;
}

.nav-enlace:hover{
    color: whitesmoke;
    background-color: rgb(240, 143, 159);
    padding: 10px 40px;
    display: inline-block;
    text-decoration: none;
    font-size: 20px;
    border-radius: 6px;
}

@media (max-width: 900px) {
    .columna {
        width: 46%;
    }
}

@media (max-width: 600px) {
    .columna {
        width: 92%;
    }
}

EdePC · 31 Marzo 2020, 18:11 PM

Saludos,

- Veo que has estado separando un espacio para tu <aside> dentro de tu <main>, sin embargo tu <aside> esta fuera del <main> XD. Me parece que el problema está en la mezcla de dos ideas, una es guardar espacio para el <aside> y la otra es crear un contenedor para cada columna y dentro de esta crear sub-contenedores para las filas contenidas.

- Solo hay que aplicar bien esa idea correctamente. Sin modificar nada en tu HTML y solo en el CSS se puede agregar lo siguiente al final:

Código (css) [Seleccionar]

main {
  float: left;
  width: 70%;
}

.flex {
  display: flex;
  width: 100%;
}

.side {
  width: 30%;
}

footer {
  clear: both;
}

- Tu <side> no flota al costado del <main> porque este último es un elemento de bloque que ocupa una fila entera dentro de su objeto contenedor <body> en este caso. Para que el <side> pueda flotar al que convertir el <main> en objeto de línea o flotante, en mi caso lo puse flotante a la izquierda con un ancho de 70%.

- A tu estilo .flex le pongo ancho 100% ya que este ancho es mejor ponerlo directamente al <main>

- A tu estilo .side le pongo un ancho del 30% que sería el resto que dejó libre <main>

- Por último al <footer> le doy un clear: both; para que empiece en una nueva fila después de los elementos flotantes <main> y <side>

Beginner Web · 1 Abril 2020, 04:09 AM

Dios mio!! GRACIAS!!
NO entiendo bien lo de seccionar la pagina me pierdo, esto no es como wix, me ayudarias con algun video que te haya servido a ti gracias.

EdePC · 1 Abril 2020, 06:26 AM

- Como ya lo había comentado en tu mensaje sobre donde podías subir tu página web, este curso de MiriadaX es bastante bueno para empezar: https://miriadax.net/web/html5mooc-9edicion/inicio

- En esa nueva edición solo se menciona a Float, ya que hoy se prefiere utilizar FlexBox y Grid. Por cierto el curso es gratuito, solo tienes que darle al botón de "Regístrate", luego podrás acceder al material y vídeos. Comprar el certificado es completamente opcional.

Test Foro de elhacker.net SMF 2.1

[Resuelto] no puedo alinear aside

Beginner Web

EdePC

Beginner Web

EdePC