elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Usando Git para manipular el directorio de trabajo, el índice y commits (segunda parte)


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  [Resuelto] no puedo alinear aside
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: [Resuelto] no puedo alinear aside  (Leído 3,094 veces)
Beginner Web


Desconectado Desconectado

Mensajes: 634


youtu.be/0YhflLRE-DA


Ver Perfil
[Resuelto] no puedo alinear aside
« en: 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   :huh:


Código
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4.    <meta charset="UTF-8">
  5.    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.    <title>Pati</title>
  7.    <link href="https://fonts.googleapis.com/css2?family=Baloo+Thambi+2:wght@700&display=swap" rel="stylesheet">
  8.    <link rel="stylesheet" href="css/index.css">
  9. </head>
  10.  
  11.    <header class="cabecera text-aling">
  12.        <div class="caja izquierda">
  13.            <a href="index.html" class="ancla logo">PATI</a>
  14.            <p>Siempre pensando en la gente.</p>
  15.        </div>
  16.        <div class="caja derecha">
  17.            <p class="contratar">Contratar: 0388-123456</p>
  18.            <p class="emergencias">Emergencias: 0303456</p>
  19.            <a href="registro.html" class="ancla derecha">Ingresar</a>
  20.        </div>
  21.    </header>
  22.  
  23.    <nav>
  24.  
  25.        <a class="nav-enlace" href="#">Inicio</a>
  26.        <a class="nav-enlace" href="#">Programación</a>
  27.        <a class="nav-enlace" href="#">Noticias</a>
  28.        <a class="nav-enlace" href="#">Cocina</a>
  29.        <a class="nav-enlace" href="#">Animes</a>
  30.        <a class="nav-enlace" href="#">Contacto</a>
  31.  
  32.    </nav>
  33.  
  34.    <main>
  35.        <section class="flex">
  36.            <div class="izquierda">
  37.                <p class="titulo">¿Quienes somos?</p>
  38.                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi dolores odio odit? Quidem
  39.                    asperiores,
  40.                    iure enim reprehenderit libero ducimus voluptatibus pariatur veniam modi veritatis! Magni vel
  41.                    sapiente
  42.                    reiciendis nihil enim.</p>
  43.                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi dolores odio odit? Quidem
  44.                    asperiores,
  45.                    iure enim reprehenderit libero ducimus voluptatibus pariatur veniam modi veritatis! Magni vel
  46.                    sapiente
  47.                    reiciendis nihil enim.</p>
  48.                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi dolores odio odit? Quidem
  49.                    asperiores,
  50.                    iure enim reprehenderit libero ducimus voluptatibus pariatur veniam modi veritatis! Magni vel
  51.                    sapiente
  52.                    reiciendis nihil enim.</p>
  53.                <p> ...</p>
  54.            </div>
  55.        </section>
  56.  
  57.        <section class="flex text-align">
  58.  
  59.            <div class="columna">
  60.                <h1>Plan Joven</h1>
  61.                <p class="precio">$600</p>
  62.                <p>Lorem ipsum dolor, sit amet consectetur.</p>
  63.                <hr>
  64.                <p>Lorem ipsum dolor </p>
  65.                <p>Lorem ipsum dolor</p>
  66.                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
  67.                <hr>
  68.                <a href="#" class="btn-comprar">Comprar</a>
  69.            </div>
  70.  
  71.            <div class="columna">
  72.                <h1>Plan Adulto</h1>
  73.                <p class="precio">$900</p>
  74.                <p>Lorem ipsum dolor, sit amet consectetur.</p>
  75.                <hr>
  76.                <p>Lorem ipsum dolor </p>
  77.                <p>Lorem ipsum dolor</p>
  78.                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
  79.                <hr>
  80.                <a href="#" class="btn-comprar">Comprar</a>
  81.            </div>
  82.  
  83.            <div class="columna">
  84.                <h1>Plan Leyenda</h1>
  85.                <p class="precio">$1200</p>
  86.                <p>Lorem ipsum dolor, sit amet consectetur.</p>
  87.                <hr>
  88.                <p>Lorem ipsum dolor </p>
  89.                <p>Lorem ipsum dolor</p>
  90.                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
  91.                <hr>
  92.                <a href="#" class="btn-comprar">Comprar</a>
  93.            </div>
  94.  
  95.        </section>
  96.    </main>
  97.  
  98.    <aside class="side">
  99.  
  100.        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempore alias qui distinctio vero
  101.            repudiandae aliquam mollitia obcaecati cum, quis voluptatibus deleniti quia inventore, eius totam unde! Ad
  102.            corrupti voluptatem maiores!</p>
  103.  
  104.    </aside>
  105.  
  106.    <footer>
  107.        <ul>
  108.            <li><a href="aviso-legal.html">Aviso legal</a></li>
  109.            <li><a href="privacidad.html">Privacidad</a></li>
  110.            <li><a href="contactar.html">Contactar</a></li>
  111.        </ul>
  112.    </footer>
  113.  
  114. </body>
  115.  
  116. </html>

Creo que estoy maquetando mal

Código
  1. p {
  2.    margin: 0px auto;
  3. }
  4.  
  5. .ancla {
  6.    text-decoration: none;
  7. }
  8.  
  9. .logo {
  10.    font-size: 80px;
  11.    color: lightseagreen;
  12.    font-family: 'Baloo Thambi 2', cursive;
  13. }
  14.  
  15. .titulo {
  16.    font-size: 40px;
  17.    color: lightseagreen;
  18.    font-family: 'Baloo Thambi 2', cursive;
  19. }
  20.  
  21. .cabecera {
  22.    margin: 10px auto;
  23.    padding: 10px;
  24.    width: 90%;
  25.    padding-bottom: 180px;
  26. }
  27.  
  28. .side{
  29.    margin: 0 auto;
  30.    float: right;
  31.    width: 24%;
  32. }
  33.  
  34. .flex {
  35.    display: flex;
  36.    width: 70%;
  37. }
  38.  
  39. .text-align {
  40.    text-align: center;
  41. }
  42.  
  43. .caja {
  44.    margin: 10px auto;
  45.    padding: 10px;
  46.    width: 23%;
  47. }
  48.  
  49. .izquierda {
  50.    float: left;
  51. }
  52.  
  53. .derecha {
  54.    float: right;
  55. }
  56.  
  57. .contratar {
  58.    background: rgb(85, 85, 247);
  59.    border-radius: 8px;
  60.    color: white;
  61.    text-align: center;
  62.    font-size: 26px;
  63.    margin: 10px auto;
  64. }
  65.  
  66. .emergencias {
  67.    background: salmon;
  68.    border-radius: 8px;
  69.    color: white;
  70.    text-align: center;
  71.    font-size: 26px;
  72.    margin: 10px auto;
  73. }
  74.  
  75. .columna {
  76.    background: rgb(238, 238, 238);
  77.    color: #333;
  78.    border: 1px solid #333;
  79.    margin: 10px auto;
  80.    padding: 10px;
  81.    border-radius: 5px;
  82.    box-shadow: 5px 5px;
  83.    width: 23%;
  84.    box-sizing: border-box;
  85.    display: inline-block;
  86. }
  87.  
  88. .precio {
  89.    font-size: 50px;
  90.    color: lightseagreen;
  91. }
  92.  
  93. .btn-comprar {
  94.    background: salmon;
  95.    display: block;
  96.    padding: 10px;
  97.    color: seashell;
  98.    text-decoration: none;
  99.    border-radius: 4px;
  100. }
  101.  
  102. .btn-comprar:hover{
  103.    background: rgb(97, 97, 248);
  104.  
  105. }
  106.  
  107. nav {
  108.    padding: 10px;
  109.    display: flex;
  110.    justify-content: space-around;
  111. }
  112.  
  113. .nav-enlace {
  114.    color: whitesmoke;
  115.    background-color: rgb(80, 80, 241);
  116.    padding: 10px 40px;
  117.    display: inline-block;
  118.    text-decoration: none;
  119.    font-size: 20px;
  120.    border-radius: 6px;
  121. }
  122.  
  123. .nav-enlace:hover{
  124.    color: whitesmoke;
  125.    background-color: rgb(240, 143, 159);
  126.    padding: 10px 40px;
  127.    display: inline-block;
  128.    text-decoration: none;
  129.    font-size: 20px;
  130.    border-radius: 6px;
  131. }
  132.  
  133. @media (max-width: 900px) {
  134.    .columna {
  135.        width: 46%;
  136.    }
  137. }
  138.  
  139. @media (max-width: 600px) {
  140.    .columna {
  141.        width: 92%;
  142.    }
  143. }

 :huh:


« Última modificación: 3 Abril 2020, 22:11 pm por #!drvy » En línea

7w7
EdePC
Moderador Global
***
Desconectado Desconectado

Mensajes: 2.041



Ver Perfil
Re: no puedo alinear aside
« Respuesta #1 en: 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
  1. main {
  2.  float: left;
  3.  width: 70%;
  4. }
  5.  
  6. .flex {
  7.  display: flex;
  8.  width: 100%;
  9. }
  10.  
  11. .side {
  12.  width: 30%;
  13. }
  14.  
  15. footer {
  16.  clear: both;
  17. }

- 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>


En línea

Beginner Web


Desconectado Desconectado

Mensajes: 634


youtu.be/0YhflLRE-DA


Ver Perfil
Re: no puedo alinear aside
« Respuesta #2 en: 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.  ;-)
En línea

7w7
EdePC
Moderador Global
***
Desconectado Desconectado

Mensajes: 2.041



Ver Perfil
Re: no puedo alinear aside
« Respuesta #3 en: 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.
« Última modificación: 1 Abril 2020, 06:30 am por EdePC » En línea

Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
Como puedo obtener las contraseñas ¿? Resuelto
Hacking
necro1991 4 4,666 Último mensaje 30 Noviembre 2010, 15:23 pm
por sexyta
[Resuelto] No puedo ubicarme con cd
GNU/Linux
Br1ant 8 3,663 Último mensaje 4 Junio 2015, 03:37 am
por Br1ant
[Resuelto] [DUDA] Alinear vericalmente
Desarrollo Web
kaskull 6 2,328 Último mensaje 9 Enero 2016, 16:44 pm
por MinusFour
[Resuelto] Alinear texto dentro de imagen (IE)
Desarrollo Web
.:UND3R:. 1 2,871 Último mensaje 8 Febrero 2016, 21:25 pm
por karmany
[Resuelto] ¿Como puedo modificar la URL?
Desarrollo Web
SrTrp 5 3,882 Último mensaje 28 Febrero 2020, 22:35 pm
por MetaNoia
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines