Foros del Web » Creando para Internet » CSS »

Preguntas sobre barra de navegacion

Estas en el tema de Preguntas sobre barra de navegacion en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 10/05/2011, 17:53
 
Fecha de Ingreso: marzo-2008
Ubicación: Posadas Misiones Argentina
Mensajes: 440
Antigüedad: 9 años, 8 meses
Puntos: 0
Preguntas sobre barra de navegacion

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>
<!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
</head>


HTML

<div id="nav">
<!-- Listado de Navegación -->
<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.
  #2 (permalink)  
Antiguo 10/05/2011, 18:22
Avatar de TEPO  
Fecha de Ingreso: febrero-2010
Mensajes: 235
Antigüedad: 7 años, 10 meses
Puntos: 23
Respuesta: Preguntas sobre barra de navegacion

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.-

Etiquetas: barra, cross-browser, firefox, ie9.js, navegacion, preguntas
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 15:52.