Medio mareado para central menu horizontal :S

[ishared]

Hola muchachos, estoy queriendo centrar mi menu css y no logro hacerlo :S
Les paso el codigo sin mis modificaciones "truchas"

Tambien me gustaria que el menu no siga toda la pagina, me refiero a que termine en el ultimo link de el menu, un ejemple de este menu:
http://13styles.com/code/time-4-bed
se puede observar que el menu sigue hasta que termina la pantalla, eso me gustaria cortarlo .... :D

Código:

/* */
#time4bed-nav{position:relative;height:43px;font-size:14px;text-transform:uppercase;background:#fff url("images/time4bed_bg.gif") repeat-x bottom left;font-family:Georgia, "Times New Roman", Times, serif;}
#time4bed-nav ul{margin:0;padding:0;list-style-type:none;width:auto;float:left;}
#time4bed-nav ul li{display:block;float:left;margin:0 2px;}
#time4bed-nav ul li a{display:block;float:left;color:#ffdab6;text-decoration:none;padding:0 0 0 25px;height:43px;line-height:50px;}
#time4bed-nav ul li a span{display:block;float:left;padding:0 25px 0 0;height:31px;width:auto;}
#time4bed-nav ul li a:hover{color:#fff;}
#time4bed-nav ul li a:hover span{display:block;cursor:pointer;}
#time4bed-nav ul li a.current,#time4bed-nav ul li a.current:hover{color:#894d12;background:transparent url("images/time2bed_left-ON.gif") no-repeat top left;}
#time4bed-nav ul li a.current span{background:transparent url("images/time2bed_right-ON.gif") no-repeat top right;height:43px;}

/*

Agradesco muchisimo su respuesta!

[Narkha]

Código:

<style type="text/css">
<!--

#time4bed-nav{
	position:relative;
	height:43px;
	font-size:14px;
	text-transform:uppercase;
	background:#fff url("/code/time-4-bed/images/time4bed_bg.gif") repeat-x bottom left;
	font-family:Georgia, "Times New Roman", Times, serif;

	text-align: center;
}

#time4bed-nav ul{
	margin:0;
	padding:0;
	list-style-type:none;
	width:auto;


	display: inline;
}

#time4bed-nav ul li{
	margin:0 2px;

	display: inline;
}
#time4bed-nav ul li a{
/* 	display:block; */
/* 	float:left; */
	color:#ffdab6;
	text-decoration:none;
	padding:0 0 0 25px;
	height:43px;
	line-height:50px;
}

#time4bed-nav ul li a span{
/* 	display:block; */
/* 	float:left; */
	padding:0 25px 0 0;
	height:31px;
	width:auto;
}

#time4bed-nav ul li a:hover{
	color:#fff;
}

#time4bed-nav ul li a:hover span{
/* 	display:block; */
	cursor:pointer;
}

#time4bed-nav ul li a.current,#time4bed-nav ul li a.current:hover{
	color:#894d12;
	background:transparent url("/code/time-4-bed/images/time2bed_left-ON.gif") no-repeat top left;
}

#time4bed-nav ul li a.current span{
	background:transparent url("/code/time-4-bed/images/time2bed_right-ON.gif") no-repeat top right;
	height:43px;
}

-->
</style>

<div id="time4bed-nav">
	<ul>
		<li><a href="http://www.13styles.com/css-menus/time-4-bed/" title="css menus" class="current"><span>Home</span></a></li>
		<li><a href="http://www.13styles.com/css-menus/time-4-bed/" title="css menus"><span>About Us</span></a></li>
		<li><a href="http://www.13styles.com/css-menus/time-4-bed/" title="css menus"><span>Services</span></a></li>
		<li><a href="http://www.13styles.com/css-menus/time-4-bed/" title="css menus"><span>Our Work</span></a></li>

		<li><a href="http://www.13styles.com/css-menus/time-4-bed/" title="css menus"><span>Contact Us</span></a></li>
	</ul>
</div>

Prueba con esto.
Te he dejado comentadas las propiedades que sobraban (display: block crea una nueva linea por asi decirlo y float: left hacia que siempre quedasen a la izquierda)
Y añadidas propiedades inline (para que te lo muestren en unalinea y text-align: center para que el texto quede centrado)

Y un par de comentarios personales. Los span son para crear divisiones a nivel de linea. Creo que podrias tranquilamente quitarlas ya que con la propiedad inline ya lo haces que los li esten a nivel de linea. SI a un span los pones con display:block

te dejo una pagina que yo consulto bastante a menudo [URL="http://html.conclase.net/recursos/especificaciones"]http://html.conclase.net/recursos/especificaciones[/URL]

bh

[Impostor]

Aquí tienes un menu centrado bastante sencillo, espero te sirva de ayuda.

Saludos¡¡

[ishared]

Iniciado por Narkha

Código:

<style type="text/css">
<!--

#time4bed-nav{
	position:relative;
	height:43px;
	font-size:14px;
	text-transform:uppercase;
	background:#fff url("/code/time-4-bed/images/time4bed_bg.gif") repeat-x bottom left;
	font-family:Georgia, "Times New Roman", Times, serif;

	text-align: center;
}

#time4bed-nav ul{
	margin:0;
	padding:0;
	list-style-type:none;
	width:auto;


	display: inline;
}

#time4bed-nav ul li{
	margin:0 2px;

	display: inline;
}
#time4bed-nav ul li a{
/* 	display:block; */
/* 	float:left; */
	color:#ffdab6;
	text-decoration:none;
	padding:0 0 0 25px;
	height:43px;
	line-height:50px;
}

#time4bed-nav ul li a span{
/* 	display:block; */
/* 	float:left; */
	padding:0 25px 0 0;
	height:31px;
	width:auto;
}

#time4bed-nav ul li a:hover{
	color:#fff;
}

#time4bed-nav ul li a:hover span{
/* 	display:block; */
	cursor:pointer;
}

#time4bed-nav ul li a.current,#time4bed-nav ul li a.current:hover{
	color:#894d12;
	background:transparent url("/code/time-4-bed/images/time2bed_left-ON.gif") no-repeat top left;
}

#time4bed-nav ul li a.current span{
	background:transparent url("/code/time-4-bed/images/time2bed_right-ON.gif") no-repeat top right;
	height:43px;
}

-->
</style>

<div id="time4bed-nav">
	<ul>
		<li><a href="http://www.13styles.com/css-menus/time-4-bed/" title="css menus" class="current"><span>Home</span></a></li>
		<li><a href="http://www.13styles.com/css-menus/time-4-bed/" title="css menus"><span>About Us</span></a></li>
		<li><a href="http://www.13styles.com/css-menus/time-4-bed/" title="css menus"><span>Services</span></a></li>
		<li><a href="http://www.13styles.com/css-menus/time-4-bed/" title="css menus"><span>Our Work</span></a></li>

		<li><a href="http://www.13styles.com/css-menus/time-4-bed/" title="css menus"><span>Contact Us</span></a></li>
	</ul>
</div>

Prueba con esto.
Te he dejado comentadas las propiedades que sobraban (display: block crea una nueva linea por asi decirlo y float: left hacia que siempre quedasen a la izquierda)
Y añadidas propiedades inline (para que te lo muestren en unalinea y text-align: center para que el texto quede centrado)

Y un par de comentarios personales. Los span son para crear divisiones a nivel de linea. Creo que podrias tranquilamente quitarlas ya que con la propiedad inline ya lo haces que los li esten a nivel de linea. SI a un span los pones con display:block

te dejo una pagina que yo consulto bastante a menudo [URL="http://html.conclase.net/recursos/especificaciones"]http://html.conclase.net/recursos/especificaciones[/URL]

bh

Muchas gracias!
y en efecto el menu ya esta centrado, ahora el problema es que las imagenes no se ven
Igualmente agradesco enormemente la ayuda! ¿A que se debera este problema?

Saludos!