Foro de elhacker.net

Programación => Desarrollo Web => Mensaje iniciado por: Locura_23 en 16 Diciembre 2022, 18:40 pm



Título: posicionar menú navegación
Publicado por: Locura_23 en 16 Diciembre 2022, 18:40 pm
Buenas estimados,
hace poco empiezo con HTML5 y CSS3, y tengo una duda que tal vez me puedan aclarar.
La idea seria armar un menú navegación de esta manera:

https://imgur.com/a/bzWYJDz

osea un menú de navegación a la izquierda.

Lo pude implementar pero no sé si lo estoy haciendo de la manera más optima, convendria hacerlo utilizando solo cajas flexibles o en este caso solo se puede utilizar la propiedad float?

Saludos

Código
  1. <!DOCTYPE html>
  2. <html lang="es">
  3.    <head>
  4.        <meta charset="UTF-8">
  5.        <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.        <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.        <title>Car Market</title>
  8.        <link href = "./css/estilos.css" rel = "stylesheet"/>
  9.    </head>
  10.  
  11.    <body>
  12.        <header>
  13.            <h1>Cabecera</h1>
  14.        </header>
  15.  
  16.        <nav>
  17.            <h2>menu</h2>
  18.        </nav>
  19.  
  20.        <section>
  21.            <p>sección</p>
  22.        </section>
  23.  
  24.        <footer>
  25.            Pagina hecha por SFK&copy
  26.        </footer>
  27.  
  28.    </body>
  29. </html>
  30.  

Código
  1. body
  2. {
  3.    height: 100%;
  4.    max-width: 100%;
  5.    background-color: #e5dada;
  6.    color: #02040f;
  7.    margin: 0%;
  8. }
  9.  
  10. header
  11. {
  12.    margin: 0% 0% 1% 0% ;
  13.    display: flex;
  14.    border: 1px solid black;
  15. }
  16.  
  17. nav
  18. {
  19.    float: left;
  20.    margin: 1% 1%;
  21.    display: flex;
  22.    flex-direction: column;
  23.    border: 1px solid black;
  24. }
  25.  
  26. section
  27. {
  28.    flex-direction: column;
  29.    margin: 1% 1%;
  30.    display: flex;
  31.    border: 1px solid black;
  32. }
  33.  
  34. footer
  35. {
  36.    clear: both;
  37.    border: 1px solid black;
  38. }
  39.