menu horizontal

juan_14nob · #1 (**permalink**) 24/07/2010, 09:33

Hola a todos me encuentro haciendo un menu horizontal con css en el cual ocupa todo el ancho de la pagina.. la lista tiene 4 elementos. "Home" "Servicios" "Presupuesto" "Contacto" cuando lo hago queda todo bien pero cuando le agrego la separacion para que no quede cada bloque uno alado de otro pegado "contacto" se me va hacia abajo
les dejo el codigo por si quieren verlo..
Saludos y gracias a aquel que intente ayudarme..

Código HTML:

<html>
<head>
<title>nada</title>
<style type="text/css" >
		#menuhori{
		position:realtive;
		font: 80% "Trebuchet MS", Arial, Helvetica, sans-serif;
		margin-top:20px;
		border: 1px solid #ACCFE8;
		width:1003px;
		height:25px;
		list-style: none;
		
		}
		#menuhori ul, li{
		list-style-type: none;

		}
		#menuhori ul {
		margin: 0px;
		padding: 0px;
		width:700px;
		}
		#menuhori li{
		margin-right:100px;
		float:left;
		width:100px;
		}	
		#menuhori a{
		display:block; 
		width:200px;
		padding:4px 0;
		text-decoration:none;
		text-align:center;
		font-size:11px;
		color:#FFFFFF;
		background-color:#B2B2B2;

		}
		#menuhori a:hover {
        background: #DBEBF6;
		}
</style>
</head>
<body>
<div id="contenedor" style="-moz-border-radius-topright: 10px;">

	

	

	<div id="menuhori" >
	<ul>
	<li><a href="#" id="pri">Home </a></li>
	<li><a href="#"> Servicios </a></li>
	<li><a href="#">Presupuesto</a></li>
	<li><a href="#">Contacto</a></li>
	</ul>
	</div>
		</div>
</body>
</html>

jomaruro · #2 (**permalink**) 24/07/2010, 10:43

Hola:

Según tu código cada enlace del menú tiene un ancho:

Cita:

Iniciado por juan_14nob

#menuhori a{
display:block;
width:200px;
padding:4px 0;
text-decoration:none;
text-align:center;
font-size:11px;
color:#FFFFFF;
background-color:#B2B2B2;

}

Si tenemos cuatro enlaces en el menú, el total de la lista debería medir 800px ¿no?

Cita:

Iniciado por juan_14nob

#menuhori ul {
margin: 0px;
padding: 0px;
width:700px;
}

Saludos.

juan_14nob · #3 (**permalink**) 24/07/2010, 14:12

exacto, gracias por tu gran ayuda!!
Saludos!!