Queria saber si me pueden ayudar a encontrar la solución al siguiente problema:
Tengo una barra de nabegación hecha con listas en html.
Los botones de la barra de navegación estan dentro de un etiqueta <div> llamado navegador.
Al <div> le doy un color de fondo y es una franja horizontal donde adentro de ella coloco los botones de navegación.
Formatero usando css para que me formatea la barra de navegación como yo deseo.
El problema es que en los navegadores Mozilla Firefox y Google Chrome no se bien la barra de navegación.
Los botones salen fuera de la barra del <div> y se colocan abajo, y el <div> sale apenas una linea delgada horizontal.
Este es el código:
HTML
Cita:
CSS= 1 hoja de estilo externa <div id="navegador">
<ul>
<li><a href="index.html">Inicio</a></li>
<li><a href="nuestras-bases.html">Nuestras Bases</a></li>
<li><a href="cuatroleyes.html">Cuatro leyes</a></li>
<li><a href="temas.html">Temas</a></li>
<li><a href="#">Noticias</a></li>
<li><a href="#">Eventos</a></li>
<li><a href="#">MU 2011</a></li>
<li><a href="http://www.vidabaires.com">VECAF</a></li>
</ul>
</div>
<ul>
<li><a href="index.html">Inicio</a></li>
<li><a href="nuestras-bases.html">Nuestras Bases</a></li>
<li><a href="cuatroleyes.html">Cuatro leyes</a></li>
<li><a href="temas.html">Temas</a></li>
<li><a href="#">Noticias</a></li>
<li><a href="#">Eventos</a></li>
<li><a href="#">MU 2011</a></li>
<li><a href="http://www.vidabaires.com">VECAF</a></li>
</ul>
</div>
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;
}
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.