Foros del Web » Creando para Internet » CSS »

[SOLUCIONADO] Hay un espacio entre el header y el nav

Estas en el tema de Hay un espacio entre el header y el nav en el foro de CSS en Foros del Web. Hola a todos. Estoy desarrollando una web pero me aparece un "espacio" entre el header y el nav que no puedo eliminar. Aquí tengo una ...
  #1 (permalink)  
Antiguo 21/05/2014, 13:02
Avatar de blancoarnau  
Fecha de Ingreso: junio-2013
Mensajes: 119
Antigüedad: 11 años, 5 meses
Puntos: 0
Hay un espacio entre el header y el nav

Hola a todos. Estoy desarrollando una web pero me aparece un "espacio" entre el header y el nav que no puedo eliminar. Aquí tengo una imagen:



Y aquí el HTML y el CSS:

Código CSS:
Ver original
  1. body{
  2.     margin:0px 0px 0px 0px;
  3. }
  4. nav{
  5.     height:60px;
  6.     width:100%;
  7.     background-color:#BD3333;
  8.     text-align: center;
  9. }
  10. nav ul li{
  11.     display:inline-block;
  12.     background-color:#BD3333;
  13.     list-style-type:none;
  14.     padding:5px 5px;
  15.     font-size:25px;
  16.     margin-top:10px;
  17. }
  18. nav ul li a{
  19.     color:white;
  20.     text-decoration:none;
  21. }
  22. nav ul li a:hover{
  23.     color:grey;
  24. }
  25. #page2, #page3, #page4{
  26.     margin-left:10%;
  27. }
  28. #header{
  29.     font-size:50px;
  30.     height:150px;
  31.     line-height:150px;
  32. }
  33. #header span a{
  34.     color:black;
  35.     text-decoration:none;
  36. }
  37. #header span{
  38.     margin-left:2.5%;
  39.     vertical-align:middle;
  40.     display:inline-block;
  41. }

Código HTML:
Ver original
  1. <div id="header">
  2. <span><a href="home.html">TÍTULO DE LA PÁGINA</a><span>
  3. </div>
  4. <nav>
  5. <ul>
  6.     <li id="page1"><a href="#">PÁGINA 1</a></li>
  7.     <li id="page2"><a href="#">PÁGINA 2</a></li>
  8.     <li id="page3"><a href="#">PÁGINA 3</a></li>
  9.     <li id="page4"><a href="#">PÁGINA 4</a></li>
  10. </ul>
  11. </nav>

He eliminado cosas como fuentes de letra o imágenes de fondo en el código para evitar añadir demasiado de este. ¿Alguna idea de cómo eliminar este "espacio"?

Gracias :)
  #2 (permalink)  
Antiguo 21/05/2014, 13:54
Colaborador
 
Fecha de Ingreso: septiembre-2013
Ubicación: España
Mensajes: 3.648
Antigüedad: 11 años, 2 meses
Puntos: 578
Respuesta: Hay un espacio entre el header y el nav

Los elemenentos UL generan un margen por defecto, eliminarlo es muy simple:

Código CSS:
Ver original
  1. nav ul {
  2.  margin-top: 0px;
  3. }
  #3 (permalink)  
Antiguo 21/05/2014, 13:57
Avatar de blancoarnau  
Fecha de Ingreso: junio-2013
Mensajes: 119
Antigüedad: 11 años, 5 meses
Puntos: 0
Respuesta: Hay un espacio entre el header y el nav

Muchas gracias :D

Etiquetas: background, color, espacio, header, hover, html, nav, página, width
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 07:34.