Centrar menú dentro de div

manuxdjent · #1 (**permalink**) 04/11/2012, 06:58

Buenos días , tengo un problema al centrar el menú que veis en la imagen. El menu quiero que esté centrado dentro de los 950px de ancho que ocupa el contenido de la web , ya que quiero que se alinee con el fondo que le he puesto jugando con la opacidad.
Aquí os dejo el código:

Código:

<HTML>
<HEAD>
<LINK rel="stylesheet" href="orbit-1.2.3.css">
<LINK rel="stylesheet" href="demo-style.css">
<SCRIPT type="text/javascript" src="jquery-1.5.1.min.js"></SCRIPT>
<SCRIPT type="text/javascript" src="jquery.orbit-1.2.3.min.js"></SCRIPT>
<SCRIPT type="text/javascript">
			$(window).load(function() {
				$('#featured').orbit();
			});
</SCRIPT>
<STYLE type="text/css">



body{ 
margin:0;
padding:0;
background-position:center center;
background-color: black;
background-image:url(fondo.png);
background-repeat: no-repeat;
-webkit-background-size:100%;
-moz-background-size:100%;
height: 100%;


} 
#button{
padding:0;
text-align: left;
}
#button li{
display:inline;

}
#button li a{
font-size: 20px;
padding: 20px; 
padding-left:22px;
background: rgba(0, 0, 0, 0.2);
color: #FFF;
text-decoration: none; 
float:left;

}
#contenedor{
margin:0 auto;
width:950px;
vertical-align:top;
height-size:100%;
background: rgba(0, 0, 0, 0.2);


}

#icons{
margin:0 auto;
width:950px;
}
#fecha{

margin-left:4.5%;
}
#espacio{
height:2%;
width:950px;
background: rgba(0, 0, 0, 0.0);
}
#menu{
margin:auto;
width:950px;
text-align:center;
}

#button li a:hover {  
background-color: #2586d7;   
 
}  
</STYLE>
</HEAD>
<BODY>
<DIV id="menu">
	<UL id="button">
		<LI><A href="#">INICIO</A></LI>
		<LI><A href="#">NOTICIAS</A></LI>
		<LI><A href="#">TRABAJOS</A></LI>
		<LI><A href="#">VIDEOS</A></LI>
		<LI><A href="#">BLOG</A></LI>
		<LI><A href="#">EQUIPO</A></LI>
		<LI><A href="#">INFO</A></LI>
		<LI><A href="#">CONTACTO</A></LI>
	</UL>
</DIV>
<DIV id="icons">
<IMG src="icons.png"/>
</DIV>
<DIV id="contenedor">

<DIV class="container">
	<div id="featured">

			<a href=""><img src="slider.png" data-caption="#htmlCaption" /></a>
			<a href=""><img src="slider.png" /></a>


	</div>
</div>
<DIV id="espacio">
</DIV>
<DIV id="fecha">
<IMG src="marca.png"/>
</DIV>
</DIV>




</BODY>
</HTML>

Como podéis observar el ítem de contacto no llega al final del width del contenedor que tiene debajo.
Espero que me podáis ayudar, gracias y un saludo.

manuxdjent · #2 (**permalink**) 04/11/2012, 08:47

Al final lo he conseguido , pero no creo que sea la mejor manera, ya que lo he ajustado con píxeles del padding-left y no sé si se descuadrará con una resolución mayor, lo único que se me ocurre es sustituir los px por porcentaje.