2

introducir la descripción de la imagen aquíestoy intentando aprender css y html por mi cuenta, lastimosamente tengo un problema. Cuando uso la etiqueta nav (ver ejemplo) los elementos que tengo dentro de la etiqueta se ven desorganizados y no logro entender porque, he revisado mis estilos y también la forma en que están organizados, me ayude también con la etiqueta float:left; para poder ubicarlos pero aún así tampoco quedan bien. Estaría realmente agradecido si alguien me explica que sucede. Saludos y buen día

¿Cómo podría aprender mejor acerca de este error?

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Propiedades de ubicación</title>
    <style>
        
        /*<!--SELECTOR UNIVERSAL ( ASTERISCO )-->*/
        
        *{    
            margin: 0;
        }
        header{
            position: relative;
            margin: 20px auto;
            width: 1000px;
            height: 120px;
            background-color: #3A7CE1;
        }
        
        #logo{
            position: absolute;
            top: 30px;
            left: 30px;
        /*Es posible usar right y bottom*/
            width: 200px;
            height: 60px;
            background-color: #000000;
        }
        
        .redes{
            position: absolute;
            width: 42px;
            height: 42px;
            background-color:#000000;
            border-radius: 100%;
        }
        
        
        #Icono1{
            top: 42px;
            right: 120px;
            
        }
        
        #Icono2{
            top: 42px;
            right: 71px;
            
        }
        #Icono3{
            top: 42px;
            right: 19px;
            
        }
        nav{
            position:relative;
            margin:auto;
            width: 1000px;
            height: 48px;
            background:#18D8DB;
        }
        
        .botones{
            float:left;
            width: 196px;
            margin: 0px 2px;
            height: 48px;
            background:#DB1E21;
        }
        /*Top o parte superior*/ 
        
        #Top{
            position: relative;
            margin: 20px auto;
            width: 1000px;
            height: 192px;
            background:#EF2023;
        }
        
        section{
            position: relative;
            margin: auto;
            width: 1000px;
            height: 453px;
            background-color:#B916DD;
            
        }
        
        footer{
            position: relative;
            margin: 20px auto;
            width: 1000px;
            height: 70px;
            background-color:#ECAC0A;
    </style>
</head>

<body>
    
    <!--Inicia cabezote-->
    
    <header>
        <div id="logo"></div>
        
        <div id="Icono1" class="redes"></div>
        <div id="Icono2" class="redes"></div>
        <div id="Icono3" class="redes"></div>
    </header>
    
    <!--Cierra Cabezote-->
    
    <!--Inicia barra de Navegación-->
    <nav>
        <ul>
            
            <li class="botones"></li>   
            <li class="botones"></li>
            <li class="botones"></li>
            <li class="botones"></li>
            <li class="botones"></li>
            
        </ul>
        
    </nav>
    
    <!--Cierra barra de Navegación-->
    
    <!--Inicia parte superior-->
    
    <div id="Top">
        <ul>
            <li> </li>
            <li> </li>
            <li> </li>
        </ul>
    </div>
    
    <!--Cierra parte superior-->
    
    <!--Inicia section-->
    
    <section>
        <aside id="izq"></aside>
        <article></article>
        <aside id="der"></aside>
    </section>
    <!--Cierra section-->
    
    <!--Iniciapie de página-->
    <footer></footer>
    <!--Cierra pie de página-->
</body>
</html>
2
  • Buenas, por favor explica mejor, que está mal, y como quisieras que se viese. Por que veo una lista que quieres meter al div, pero no entiendo como quieres que se vea.
    – Excorpion
    Commented el 5 ene. 2022 a las 19:49
  • He añadido una edición amigo, lo que quiero es que los elementos 1, 2, 3, 4, 5 queden organizados dentro de mi barra nav, sin embargo el 5 elemento se ve debajo del primero. Commented el 5 ene. 2022 a las 19:53

3 respuestas 3

3

El botón 5 flota correctamente a la izquierda, visualmente se ve debajo del 1 porque al no tener espacio a la derecha del 4 arma su propia "línea".

La falta de espacio está dada porque el elemento ul incluye un padding de manera predeterminada, quitando el padding del ul :

nav > ul { padding:0 }

los cálculos dan bien:

( 196px + 2px * 2  ) * 5 = 1000px

El > es un "selector de hijo directo" y afectará sólo a los ul dentro de un nav

* {
  margin: 0;
}

header {
  position: relative;
  margin: 20px auto;
  width: 1000px;
  height: 120px;
  background-color: #3A7CE1;
}

#logo {
  position: absolute;
  top: 30px;
  left: 30px;
  /*Es posible usar right y bottom*/
  width: 200px;
  height: 60px;
  background-color: #000000;
}

.redes {
  position: absolute;
  width: 42px;
  height: 42px;
  background-color: #000000;
  border-radius: 100%;
}

#Icono1 {
  top: 42px;
  right: 120px;
}

#Icono2 {
  top: 42px;
  right: 71px;
}

#Icono3 {
  top: 42px;
  right: 19px;
}

nav {
  position: relative;
  margin: auto;
  width: 1000px;
  height: 48px;
  background: #18D8DB;
}

nav>ul {
  padding: 0;
}

.botones {
  float: left;
  width: 196px;
  margin: 0px 2px;
  height: 48px;
  background: #DB1E21;
}


/*Top o parte superior*/

#Top {
  position: relative;
  margin: 20px auto;
  width: 1000px;
  height: 192px;
  background: #EF2023;
}

section {
  position: relative;
  margin: auto;
  width: 1000px;
  height: 453px;
  background-color: #B916DD;
}

footer {
  position: relative;
  margin: 20px auto;
  width: 1000px;
  height: 70px;
  background-color: #ECAC0A;
<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>Propiedades de ubicación</title>
</head>

<body>

  <!--Inicia cabezote-->

  <header>
    <div id="logo"></div>

    <div id="Icono1" class="redes"></div>
    <div id="Icono2" class="redes"></div>
    <div id="Icono3" class="redes"></div>
  </header>

  <!--Cierra Cabezote-->

  <!--Inicia barra de Navegación-->
  <nav>
    <ul>

      <li class="botones">boton 1</li>
      <li class="botones">boton 2</li>
      <li class="botones">boton 3</li>
      <li class="botones">boton 4</li>
      <li class="botones">boton 5</li>

    </ul>

  </nav>

  <!--Cierra barra de Navegación-->

  <!--Inicia parte superior-->

  <div id="Top">
    <ul>
      <li>top 1</li>
      <li>top 2</li>
      <li>top 3</li>
    </ul>
  </div>

  <!--Cierra parte superior-->

  <!--Inicia section-->

  <section>
    <aside id="izq"></aside>
    <article></article>
    <aside id="der"></aside>
  </section>
  <!--Cierra section-->

  <!--Iniciapie de página-->
  <footer></footer>
  <!--Cierra pie de página-->
</body>

</html>

1

Actualmente no te recomiendo utilices float, a menos que sea un caso muy particular, en el caso del nav lo que puedes hacer es usar un display flex o grid, pero como estas comenzando aprende primero flexbox y luego pasa a css grid, como resolver lo de tu nav, pues bueno con el siguiente código te puedes apoyar.

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Etiqueta Nav</title>
        <style>
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            body {
                font-family: Arial, Helvetica, sans-serif;
                font-size: 16px;
                line-height: 24px;
            }
            nav {
                max-width: 1200px;
                margin: auto;
            }
            .menu {
                list-style: none;
                display: flex;
                justify-content: space-between;
                align-items: center;
            }
            .menu li {
                width: 200px;
                padding: 10px 0;
                background-color: blue;
                text-align: center;
                color: #fff;
            }
        </style>
    </head>
    <body>
        <nav>
            <ul class="menu maximo">
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
            </ul>
        </nav>
    </body>
    </html>

1
  • Muchas gracias por tu ayuda y tu solución, aprenderé más acerca de lo que mencionas. ¡Saludos! Commented el 6 ene. 2022 a las 2:31
1

Por lo que veo estas llamando a un identificador llamado "#Top" lo cual puede ser una palabra reservada dentro de los ámbitos de nombres.

Cambia el Nombre de top a tope por ejemplo:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Propiedades de ubicación</title>
<style>
    
    /*<!--SELECTOR UNIVERSAL ( ASTERISCO )-->*/
    
    *{    
        margin: 0;
    }
    header{
        position: relative;
        margin: 20px auto;
        width: 1000px;
        height: 120px;
        background-color: #3A7CE1;
    }
    
    #logo{
        position: absolute;
        top: 30px;
        left: 30px;
    /*Es posible usar right y bottom*/
        width: 200px;
        height: 60px;
        background-color: #000000;
    }
    
    .redes{
        position: absolute;
        width: 42px;
        height: 42px;
        background-color:#000000;
        border-radius: 100%;
    }
    
    
    #Icono1{
        top: 42px;
        right: 120px;
        
    }
    
    #Icono2{
        top: 42px;
        right: 71px;
        
    }
    #Icono3{
        top: 42px;
        right: 19px;
        
    }
    nav{
        position:relative;
        margin:auto;
        width: 1000px;
        height: 48px;
        background:#18D8DB;
    }
    
    .botones{
        float:left;
        width: 196px;
        margin: 0px 2px;
        height: 48px;
        background:#DB1E21;
    }
    /*Top o parte superior*/ 
    
    #Tope{
        position: relative;
        margin: 20px auto;
        width: 1000px;
        height: 192px;
        background:#EF2023;
    }
    
    section{
        position: relative;
        margin: auto;
        width: 1000px;
        height: 453px;
        background-color:#B916DD;
        
    }
    
    footer{
        position: relative;
        margin: 20px auto;
        width: 1000px;
        height: 70px;
        background-color:#ECAC0A;
</style>
</head>

<body>

<!--Inicia cabezote-->

<header>
    <div id="logo"></div>
    
    <div id="Icono1" class="redes"></div>
    <div id="Icono2" class="redes"></div>
    <div id="Icono3" class="redes"></div>
</header>

<!--Cierra Cabezote-->

<!--Inicia barra de Navegación-->
<nav>
    <ul>
        
        <li class="botones"></li>   
        <li class="botones"></li>
        <li class="botones"></li>
        <li class="botones"></li>
        <li class="botones"></li>
        
    </ul>
    
</nav>

<!--Cierra barra de Navegación-->

<!--Inicia parte superior-->

<div id="Tope">
    <ul>
        <li> </li>
        <li> </li>
        <li> </li>
    </ul>
</div>

<!--Cierra parte superior-->

<!--Inicia section-->

<section>
    <aside id="izq"></aside>
    <article></article>
    <aside id="der"></aside>
</section>
<!--Cierra section-->

<!--Iniciapie de página-->
<footer></footer>
<!--Cierra pie de página-->
</body>
</html>

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.