Discussion:
Centrar li's dentro de ul.
Eva del Campo
2007-04-10 18:57:40 UTC
Permalink
Mi problema es que no sé el ancho del ul, quiero que sea "flexible" para un %
y resolución... y no consigo que los LI estén centrados, bueno mejor dicho que
el UL esté centrado, en cuanto le quito el ancho se va todo a la izquierda...
La única forma que conozco para centrar los elementos de una lista
desconociendo su ancho, es utilizando display: inline para los li y
text-align center; para ul. Y por supuesto tienes que olvidarte de flotar
los li...
Te quedaría algo así:

<html>
<head>
<style>
ul#nav {
list-style: none;
margin: 0;
padding: 0.5em;
text-align: center;
background-color: green;
}
ul#nav li {
display: inline;
}
ul#nav li a {
text-align: center;
margin: 0 0.5em;
padding: 0.5em;
width: 5em;
background-color: yellow;
}
</style>
</head>

<body>
<ul id="nav">
<li><a href="index.php">Home</a></li>
<li><a href="index.php?accion=agregar">News</a></li>
<li><a href="index.php?accion=reportes">Gallery</a></li>
<li><a href="index.php?accion=busqueda">Mailing List</a></li>
<li><a href="index.php?accion=busqueda">Add Admin</a></li>
<li><a href="index.php?action=logout">Logout</a></li>
</ul>
</body>
</html>

xxxx

Eva
ListaCss
2007-04-11 13:31:42 UTC
Permalink
Gracias, hare la prueba con mi ejemplo
----- Original Message -----
From: Eva del Campo
To: Ovillo, la lista de CSS en castellano
Sent: Tuesday, April 10, 2007 8:57 PM
Subject: Re: [Ovillo] Centrar li's dentro de ul.
Mi problema es que no sé el ancho del ul, quiero que sea "flexible" para un %
y resolución... y no consigo que los LI estén centrados, bueno mejor dicho que
el UL esté centrado, en cuanto le quito el ancho se va todo a la izquierda...
La única forma que conozco para centrar los elementos de una lista
desconociendo su ancho, es utilizando display: inline para los li y
text-align center; para ul. Y por supuesto tienes que olvidarte de flotar
los li...
Te quedaría algo así:

<html>
<head>
<style>
ul#nav {
list-style: none;
margin: 0;
padding: 0.5em;
text-align: center;
background-color: green;
}
ul#nav li {
display: inline;
}
ul#nav li a {
text-align: center;
margin: 0 0.5em;
padding: 0.5em;
width: 5em;
background-color: yellow;
}
</style>
</head>

<body>
<ul id="nav">
<li><a href="index.php">Home</a></li>
<li><a href="index.php?accion=agregar">News</a></li>
<li><a href="index.php?accion=reportes">Gallery</a></li>
<li><a href="index.php?accion=busqueda">Mailing List</a></li>
<li><a href="index.php?accion=busqueda">Add Admin</a></li>
<li><a href="index.php?action=logout">Logout</a></li>
</ul>
</body>
</html>

xxxx

Eva


_______________________________________________
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a ***@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Karen_WmBeta
2007-04-17 13:30:02 UTC
Permalink
Hola, tambien existe la opcion de centrar tu ul dinamicamente utilizando
javascript, asi, encuentra el ancho de tu menu sin definir y lo centra en la
pagina, el unico inconveniente es que debes posicionar tu ul de forma
absoluta y especificar su altura, ademas de que si los visitantes no tienen
activo js, tu menu volvera a la izquierda :-S

de cualquier forma te dejo el script por si te sirve:

<script type="text/javascript">

positionIt = function() {
if( document.getElementById ) {
// Get a reference to divCentrado and measure its width and height.
var div = document.getElementById( "menuc" );
var divWidth = div.offsetWidth ? div.offsetWidth : div.style.width ?
parseInt( div.style.width ) : 0;

// Calculating setX and setX so the div will be centered in the
viewport.
var setX = ( getViewportWidth() - divWidth ) / 2;

// If setX or setY have become smaller than 0, make them 0.
if( setX < 0 ) setX = 0;

// Position the div in the center of the page and make it visible.
div.style.left = setX + "px";
div.style.visibility = "visible";
}
};

getViewportWidth = function() {
var width = 0;
if( document.documentElement && document.documentElement.clientWidth ) {
width = document.documentElement.clientWidth;
}
else if( document.body && document.body.clientWidth ) {
width = document.body.clientWidth;
}
else if( window.innerWidth ) {
width = window.innerWidth - 18;
}
return width;
};


window.onload = positionIt;
window.onresize = positionIt;

</script>


para que funcione, debes darle a tu ul el id "menuc" y en el css
position:absolute

Suerte!

Continúe leyendo en narkive:
Loading...