Foro de elhacker.net

Programación => Desarrollo Web => Mensaje iniciado por: Beginner Web en 31 Marzo 2020, 10:17 am


Título: [Resuelto] no puedo alinear aside
Publicado por: Beginner Web 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)

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


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

Título: Re: no puedo alinear aside
Publicado por: EdePC 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>

Título: Re: no puedo alinear aside
Publicado por: Beginner Web 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.  ;-)

Título: Re: no puedo alinear aside
Publicado por: EdePC 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.


Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines