Foros del Web » Creando para Internet » CSS »

El formato de la barra de navagación

Estas en el tema de El formato de la barra de navagación en el foro de CSS en Foros del Web. Hola a Todos Tengo un problema al darle el formato a la barra de navegación de mi página. Los botones de mi barra se encuentras ...
  #1 (permalink)  
Antiguo 16/12/2009, 14:57
 
Fecha de Ingreso: marzo-2008
Ubicación: Posadas Misiones Argentina
Mensajes: 440
Antigüedad: 9 años, 8 meses
Puntos: 0
El formato de la barra de navagación

Hola a Todos

Tengo un problema al darle el formato a la barra de navegación de mi página.
Los botones de mi barra se encuentras en una lista desordenada(<ul>) que a su vez dicha lista esta dentro de una <div>llamada navegador.

El problema en en el archivo CSS externo (me parece) en donde le doy un fondo de color a mi <div> llamado navegador con el atributo Background , y una alto con la etiqueta <heigh>

En Interntet Explorer me aparece el alto de mi <div> navegador mucho mas alto de lo que define.
En Mozilla Firefox aparece el alto de mi div navegador mas bajo de lo que defini y ademas los botones me salen afuera o debajo de esa barra o fondo de color de mi etiqueta div navegador.

Este es el codigo HTMl

Cita:
<body>
<div id="borde">
<div id="contenedor">
<div id= "cabecera" ><img src="imagenes/logo-temas2.jpg" alt="Jespa" border="0" > </div>
<div id= "navegador">
<ul>
<li><a href="#">Inicio</a></li>
<li><a href="#">Autor</a></li>
<li><a href="#">Temas</a></li>
<li><a href="#">Estudios</a></li>
<li><a href="#">Noticias</a></li>
<li><a href="#">Cruzada</a></li>
</ul>
</div>
.
.
.
Arhcivo externo CSS

Cita:
#navegador{
background:#F5F4C3 url(images/fondonav.gif);
border-top: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
height: 5px
}

#navegador ul{
list-style-type:none;
text-align:center;
}

#navegador li{
display: inline;
text-align: center;
margin: 0 1px 0 0;
}

#navegador li a{
padding: 2px 7px 2px 7px;
color: #666;
background-color: #ffff00;
border:1px solid #ccc;
text-decoration: none;
}

#navegador li a:hover{
background-color: #ff9900;
color: #ffffff;
}


Gracias.
  #2 (permalink)  
Antiguo 16/12/2009, 15:24
Avatar de willyfc  
Fecha de Ingreso: octubre-2008
Ubicación: Santa Cruz - Bolivia
Mensajes: 662
Antigüedad: 9 años, 2 meses
Puntos: 40
Respuesta: El formato de la barra de navagación

Simplemente no definidas un alto al div, el alto que pusiste es de 5px, no veo para que, pienso que debería quedarte así:
Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  4. <title>Documento sin t&iacute;tulo</title>
  5. <style type="text/css">
  6. #navegador{
  7. background:#F5F4C3 url(images/fondonav.gif);
  8. border-top: 1px solid #CCC;
  9. border-bottom: 1px solid #CCC;
  10. }
  11.  
  12. #navegador ul{
  13. list-style-type:none;
  14. text-align:center;
  15. }
  16.  
  17. #navegador ul li{
  18. display: inline;
  19. text-align: center;
  20. }
  21.  
  22. #navegador a{
  23. padding: 2px 7px;
  24. color: #666;
  25. background-color: #ffff00;
  26. border:1px solid #ccc;
  27. text-decoration: none;
  28. }
  29.  
  30. #navegador a:hover{
  31. background-color: #ff9900;
  32. color: #ffffff;
  33. }
  34. </head>
  35.  
  36. <body>     
  37. <div id= "navegador">
  38.     <ul>
  39.         <li><a href="#">Inicio</a></li>
  40.         <li><a href="#">Autor</a></li>
  41.         <li><a href="#">Temas</a></li>
  42.         <li><a href="#">Estudios</a></li>
  43.         <li><a href="#">Noticias</a></li>
  44.         <li><a href="#">Cruzada</a></li>
  45.     </ul>
  46. </div>
  47. </body>
  48. </html>

__________________
WFC
codigo82
  #3 (permalink)  
Antiguo 18/12/2009, 12:47
 
Fecha de Ingreso: marzo-2008
Ubicación: Posadas Misiones Argentina
Mensajes: 440
Antigüedad: 9 años, 8 meses
Puntos: 0
Respuesta: El formato de la barra de navagación

Hola

Cita:
Simplemente no definidas un alto al div, el alto que pusiste es de 5px, no veo para que.
El problema es que si no defino una alto al <div> me sale en Interntet Explorer un alto muy grande para la barra de color donde se ecuentra los botones de navegación , y no sé porque pasa eso.
  #4 (permalink)  
Antiguo 19/12/2009, 14:51
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 8 años, 10 meses
Puntos: 306
Respuesta: El formato de la barra de navagación

Hola

para solucionar eso agrega a
#navegador ul{
margin: 0;
..}

Si ves que queda mal, prueba de poner un margin minimo de 1px o lo que quieras.

En realidad debería ser sólo para los margenes superior e inferior, pero vale el ejemplo, creo.

Esto se puede deber a que toma los valores por defecto de los navegadores, para evitar eso crea un reset en el css:
algo tipo:

Código HTML:
* {margin:0; padding: 0;}
El cual debe ser lo primero en el css


Sigue el consejo de willyfc, quitale la altura al div.
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--

Última edición por C2am; 19/12/2009 a las 14:57
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 04:30.