Preguntas sobre barra de navegacion

pabje · #1 (**permalink**) 10/05/2011, 16:53

Hola a Todos

Tengo 2 problemas con una barra de nabegacion horizontal que lo hice con html y CSS. Las preguntas son:

1_No se ve bien en Internet Explorer 8. La barra aparece muy desplazada a la derecha y muy alta , es como si no andara los atributos Position y line-height de css.
Agregue el codigo necesario en java script que me hablaron en este foro, pero no anda.

2_La barra de navegación horizontal en firefox 4 y google crhome 11 le falta un poquito que llegue hasta el final. En el codigo CSS le puse 76% en la propiedad width , pero todavia le falta un poco para que llegue hasta el final de la pagina , y se le coloco un 77% ya se pasa de la pagina.
No se cual puede ser el problema.

Este es el código:

Cita:

JAVA SCRIPT

<head>
.
.
</script>

</head>

HTML

<div id="nav">

<ul>
<li><a href="index.html">Inicio</a></li>
<li><a href="nuestras-bases.html">Nuestras Bases</a></li>
<li><a href="cuatro-leyes.html">Cuatro Leyes</a></li>
<li><a href="temas.html">Temas</a></li>
<li><a href="videos.html">Videos</a></li>
<li><a href="noticias.html">Noticias</a></li>
</ul>
</div>

ARCHIVO EXTERNO CSS

#nav {
position : absolute;
left : 120;
width : 76%;
background : url(../imagenes/nav_background.png);
}
#nav ul {
margin : 0 auto;
width : 770px;
list-style : none;
}
#nav ul li {
float : left;
}
#nav ul li a {
margin-right : 60px;
width : 140px;
font-size : 14px;
line-height : 36px;
text-align : center;
text-decoration : none;
color : #ccc;
}
#nav ul li a:hover {
color : #fff;
}
#nav ul li.selected a {
color : #fff;
}

PAGINA WEB DEL PROBLEMA

http://vidamisiones.xtreemhost.com

Gracias.

TEPO · #2 (**permalink**) 10/05/2011, 17:22

Por lo que veo la barra de navegacion con css esta mal encarada, hay varias cosas que faltan y otras que sobran, si bien hay varias maneras de hacer estas barras de navegacion con css y html, te voy a pasar un ejemplo y despues vos podes usarlo en tu pagina cambiendo obviamente las medidas y los colores de la barra, espero que te sirva, Saludos.
Ejemplo css:

Código:

#lista{
	height:100px;
	width:700px;
	background-color:#000;
}
#lista ul{
	list-style-type:none;
	margin:0;
	padding:0;
	font: 12px Verdana, Geneva, sans-serif;
	text-align:center;
	line-height:30px;
	width:450px;
	float:left;
	margin-left:120px;
	margin-top:30px;
}
#lista li{
	float:left;
	margin-left:5px;
	width:100px;
	height:30px;
	border:1px dashed #FF0;	
}
#lista a{
	text-decoration:none;
	color:#000;
	font-weight:bold;
}
#lista a:link{
	display:block;
	width:100px;
	height:30px;
	background-color:#ff0066;
}
#lista a:visited{
	background-color:red;
	width:100px;
	height:30px;
	display:block;
}
#lista a:hover{
	background-color:#ff6666;
	width:100px;
	height:30px;
	display:block;
}
#lista a:active{
	background-color:#f60;
	width:100px;
	height:30px;
	display:block;
}

El html:

Código:

<div id="lista">
	<ul>
    	  <li><a href="#">HOME</a></li>
          <li><a href="#">PORTFOLIO</a></li>
          <li><a href="#">SERVICIOS</a></li>
          <li><a href="#">CONTACTO</a></li>
        </ul>
</div>

Espero que te sirva, te repito, las medidas las vas cambiando y se deberia ver igual en todos los navegadores, siempre utilizo esta estructura par realizar barras horizontales.-