El formato de la barra de navagación

pabje · #1 (**permalink**) 16/12/2009, 14:57

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.

willyfc · #2 (**permalink**) 16/12/2009, 15:24

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<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin t&iacute;tulo</title>
<style type="text/css">
#navegador{
background:#F5F4C3 url(images/fondonav.gif);
border-top: 1px solid #CCC;
border-bottom: 1px solid #CCC;
}
 
#navegador ul{
list-style-type:none;
text-align:center;
}
 
#navegador ul li{
display: inline;
text-align: center;
}
 
#navegador a{
padding: 2px 7px;
color: #666;
background-color: #ffff00;
border:1px solid #ccc;
text-decoration: none; 
}
 
#navegador a:hover{
background-color: #ff9900;
color: #ffffff;
}
</style>
</head>
 
<body>      
<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>
</body>
</html>

pabje · #3 (**permalink**) 18/12/2009, 12:47

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.

C2am · #4 (**permalink**) 19/12/2009, 14:51

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.