centrar un menu horizontal en css

eiqqen · #1 (**permalink**) 19/09/2011, 00:31

alguien me podría ayudar centrando un menu horizontal en la pagina, eh leido tuts pero no me ha funcionado paso lo que es el html:

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>ttite</title>
<link rel="stylesheet" type="text/css" href="stylecss.css"/>

</head>

<body>
<div id="logo"></div>
<div id="menuback">
  <ul id="menu"> 
	<li id="inicio"><a href="index.html"></a></li>
	<li id="cocina"><a href="cocina.html"></a></li>
    <li id="sala"><a href="cocina.html"></a></li>
    <li id="recamara"><a href="cocina.html"></a></li>
    <li id="oficina"><a href="cocina.html"></a></li>
    <li id="contacto"><a href="cocina.html"></a></li>
  </ul>
</div>
</body>
</html>

y el css:

Código:

@charset "utf-8";
/* CSS Document */

<style type="text/css">
body,td,th {
	font-family: Arial, Helvetica, sans-serif;
}
body {
	background-image: url(images/backdamask.png);
	background-repeat: repeat;
}
#logo {
	background-image:url(images/logo.png);
	margin:0 auto;
	top:40px;
	position:relative;
	width:160px;
	height:70px;
	z-index:1;
	background-repeat:no-repeat;
}
#menuback {
	background-color:#191818;
	position:relative;
	width:auto;
	height:50px;
	z-index:-1;
	marging:0px;
	padding:0px;
	top:55px;
	list-style-type:none;
}

#menu ul{
	position:relative;
	width:230px;
	margin: 0 auto;
}

#menu li{
	list-style:none;
	position:relative;
	float:left;
	margin-left:5px;
	top:5px;

}
#menu li, #menu a{height:36px; width:100px; display:block;}


#inicio{background:url(images/menu.png) -109px 0;}


#cocina{background:url(images/menu.png) -3px -36px;}
#cocina a:hover{background: url(images/menu.png) -211px -36px;}


#sala{background:url(images/menu.png) -3px -74px;}
#sala a:hover{background: url(images/menu.png) -211px -74px;}


#recamara{background:url(images/menu.png) -3px -112px;}
#recamara a:hover{background: url(images/menu.png) -211px -112px;}


#oficina{background:url(images/menu.png) -3px -148px;}
#oficina a:hover{background: url(images/menu.png) -211px -148px;}


#contacto{background:url(images/menu.png) -3px -222px;}
#contacto a:hover{background: url(images/menu.png) -211px -222px;}

</style>

no eh podido centrarlo ayuda porfavor

C2am · #2 (**permalink**) 19/09/2011, 02:43

Hola eiqqen

Aquí una posible solución:
La idea es centrar el ul dentro del div que lo contiene, en este caso menuback.
Para ello en #menuback ponemos text-align: center, para que el texto dentro de el quede centrado.
Luego al ul dentro menuback lo transformamos en display:inline-block;

Para evitar confusiones borre el id del ul, y me maneje directamente con "#menuback ul li".

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
<title>ttite</title>
<style>
 
body,td,th {
    font-family: Arial, Helvetica, sans-serif;
}
body {
    background-image: url(images/backdamask.png);
    background-repeat: repeat;
}
 
#menuback {
    background-color:#191818;
    position:relative;
    width:auto;
    height:50px;
    z-index:-1;
    margin:0 auto;
    padding:0px;
    top:55px;
    list-style-type:none;
    text-align: center; /*con esto mas inline-block en ul centro la lista */
}
 
#menuback ul{
    position:relative;
    width:700px;/*este valor tiene que ser igual a la suma de cada li */
    margin: 0 auto;
    display:inline-block;/*para centrar el menu*/
    
}
 
#menuback ul li{
    list-style:none;
    position:relative;
    float:left;
    margin-left:5px;
    top:5px;
    border: 1px solid #06C; 
 
}
#menuback ul li, #menuback a{height:36px; width:100px; display:block;}
 
</style>
 
</head>
 
<body>
<div id="logo"></div>
<div id="menuback">
  <ul> 
    <li id="inicio"><a href="index.html"></a></li>
    <li id="cocina"><a href="cocina.html"></a></li>
    <li id="sala"><a href="cocina.html"></a></li>
    <li id="recamara"><a href="cocina.html"></a></li>
    <li id="oficina"><a href="cocina.html"></a></li>
    <li id="contacto"><a href="cocina.html"></a></li>
  </ul>
</div>
</body>
</html>

Saludos y bienvenido al foro

eiqqen · #3 (**permalink**) 19/09/2011, 14:12

funciono de maravilla! muchas gracias!!

SOftwareCR · #4 (**permalink**) 20/05/2015, 19:53

Hola amigo me registre solo para agradecerte esta info realmente me tomo mucho tiempo y solo con esto lo logre