0

Estoy intentando hacer una barra de navegación superior para una web y la cosa es que no consigo que este completamente pegada arriba y entre las opciones hay huecos clicables que están vacíos y me gustaría quitarlos. Alguien puede darme alguna pista o explicarme un poco como hacerlo? He buscado en internet y no consigo hacerlo con la información que me dan.

He aquí el código:

body{
  background:#3CF;
}
.contenedor {
  width: 95%;
  max-width:1200px;
  margin-left:0px;
  margin-rigth:0px;
}

.contenedor p {
  margin-bottom:40px;
}

header nav {
  background:#3498db;
  margin-bottom:10px;
}

header nav ul {
  list-style: none;
  overflow: hidden;
}

header nav ul li {
  float: left;
}

header nav ul li a {
  padding:40px;
  color:#fff;
  font-family: "Times New Roman", Times, serif;
  font-size: 25px;
  text-decoration: none;
}

header nav ul li a:hover {
  background:#2980b9;
}
<header>
  <div class ="contenedor">
    <nav class = "menu">
      <ul>
        <li><a title="Home" href="YustaHome.html"> Home </li>
        <li><a title="Tattos" href="https://www.google.es/"> Tattos</li>
        <li><a title="Drawings" href=""> Drawings </li>
        <li><a title="About" href=""> About </li>
      </ul>
    </nav>
  </div>
</header>

1 respuesta 1

1

El error mas grave que tenías era que no estabas cerrando ninguna etiqueta <a> dentro de tu menú de navegación, lo que generaba los huecos clicables a los que te referías.

Ahora, te recomiendo siempre usar el selector universal de css que es un asterisco (*) y resetear las márgenes internas y externas para todos los elementos ya que los navegadores utilizan márgenes predeterminadas para algunos tipos de elementos.

*{
    margin: 0;
    padding: 0;
}

body{
    background:#3CF;
}
.contenedor {
    width: 100%;
    margin-left:0px;
    margin-right:0px;
}

.contenedor p {
    margin-bottom:40px;
}

header nav {
    background:#3498db;
    margin-bottom:10px;
}

header nav ul {
    list-style: none;
    overflow: hidden;
}

header nav ul li {
    float: left;
}

header nav ul li a {
    padding:40px;
    color:#fff;
    font-family: "Times New Roman", Times, serif;
    font-size: 25px;
    text-decoration: none;
}

header nav ul li a:hover {
    background:#2980b9;
}
<header>
    <div class ="contenedor">
        <nav class = "menu">
            <ul>
                <li><a title="Home" href="YustaHome.html"> Home </a></li>
                <li><a title="Tattos" href="https://www.google.es/"> Tattos </a></li>
                <li><a title="Drawings" href=""> Drawings </a></li>
                <li><a title="About" href=""> About </a></li>
            </ul>
        </nav>
    </div>
</header>

1
  • Te me has adelantado por segundos! Cancelo mi respuesta pues viene a ser lo mismo. Commented el 1 nov. 2017 a las 15:55

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.