Re: [Ovillo] Centrar li's dentro de ul.
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!
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Centrar li's dentro de ul.
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.
De: ListaCss [EMAIL PROTECTED]
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
lia href=index.phpHome/a/li
lia href=index.php?accion=agregarNews/a/li
lia href=index.php?accion=reportesGallery/a/li
lia href=index.php?accion=busquedaMailing List/a/li
lia href=index.php?accion=busquedaAdd Admin/a/li
lia href=index.php?action=logoutLogout/a/li
/ul
/body
/html
Eva
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Centrar li's dentro de ul.
De: ListaCss [EMAIL PROTECTED]
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
lia href=index.phpHome/a/li
lia href=index.php?accion=agregarNews/a/li
lia href=index.php?accion=reportesGallery/a/li
lia href=index.php?accion=busquedaMailing List/a/li
lia href=index.php?accion=busquedaAdd Admin/a/li
lia href=index.php?action=logoutLogout/a/li
/ul
/body
/html
Eva
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Centrar li's dentro de ul.
Hola,
On Sat, Mar 17, 2007 at 10:45:33PM +0100, Karen Rodríguez wrote:
prueba esto en un archivo aparte,
Esxiste alguna razón para utilizar los div's extra (envoltorios) en
lugar de dar el estilo directamente a los elementos (ul en este caso)?
Lo he simplificado como sigue:
---8
html
head
style
ul#nav {
display: block;
width: 42em;
height: 3em;
margin: 0 auto;
background-color: green;
}
ul#nav, ul#nav li { list-style: none; padding: 0; }
ul#nav li { float: left; }
ul#nav li a {
display: block;
text-align: center;
margin: 0.5em;
padding: 0.5em;
width: 5em;
background-color: yellow;
}
/style
/head
body
ul id=nav
lia href=index.phpHome/a/li
lia href=index.php?accion=agregarNews/a/li
lia href=index.php?accion=reportesGallery/a/li
lia href=index.php?accion=busquedaMailing List/a/li
lia href=index.php?accion=busquedaAdd Admin/a/li
lia href=index.php?action=logoutLogout/a/li
/ul
/body
/html
---8
--
Angel Martin Alganza Tel +34 958 248 926
Departamento de Genetica Fax +34 958 244 073
Universidad de Granada mailto:[EMAIL PROTECTED]
C/ Fuentenueva s/n http://www.ugr.es/~ama/
E-18071 Granada, Spain JabberID [EMAIL PROTECTED]
PGP Public key: http://www.ugr.es/~ama/ama-pgp-key
3EB2 967A 9404 6585 7086 8811 2CEC 2F81 9341 E591
--
() ASCII Ribbon Campaign - http://www.asciiribbon.org/
/\ Against all HTML e-mail and proprietary attachments
Please avoid sending me Word or PowerPoint attachments
http://linux.sgms-centre.com/advocacy/no-ms-office.php
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Centrar li's dentro de ul.
No, de hecho así está mejor.
El día 20/03/07, Angel Martin Alganza [EMAIL PROTECTED] escribió:
Hola,
On Sat, Mar 17, 2007 at 10:45:33PM +0100, Karen Rodríguez wrote:
prueba esto en un archivo aparte,
Esxiste alguna razón para utilizar los div's extra (envoltorios) en
lugar de dar el estilo directamente a los elementos (ul en este caso)?
Lo he simplificado como sigue:
---8
html
head
style
ul#nav {
display: block;
width: 42em;
height: 3em;
margin: 0 auto;
background-color: green;
}
ul#nav, ul#nav li { list-style: none; padding: 0; }
ul#nav li { float: left; }
ul#nav li a {
display: block;
text-align: center;
margin: 0.5em;
padding: 0.5em;
width: 5em;
background-color: yellow;
}
/style
/head
body
ul id=nav
lia href=index.phpHome/a/li
lia href=index.php?accion=agregarNews/a/li
lia href=index.php?accion=reportesGallery/a/li
lia href=index.php?accion=busquedaMailing List/a/li
lia href=index.php?accion=busquedaAdd Admin/a/li
lia href=index.php?action=logoutLogout/a/li
/ul
/body
/html
---8
--
Angel Martin Alganza Tel +34 958 248 926
Departamento de Genetica Fax +34 958 244 073
Universidad de Granada mailto:[EMAIL PROTECTED]
C/ Fuentenueva s/n http://www.ugr.es/~ama/
E-18071 Granada, Spain JabberID [EMAIL PROTECTED]
PGP Public key: http://www.ugr.es/~ama/ama-pgp-key
3EB2 967A 9404 6585 7086 8811 2CEC 2F81 9341 E591
--
() ASCII Ribbon Campaign - http://www.asciiribbon.org/
/\ Against all HTML e-mail and proprietary attachments
Please avoid sending me Word or PowerPoint attachments
http://linux.sgms-centre.com/advocacy/no-ms-office.php
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
--
Juan J. Muñoz
http://www.taarq.com
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Centrar li's dentro de ul.
Hola
prueba esto en un archivo aparte,
le di bordes y colores de fondo horribles :P para que veas donde queda cada
area:
html
head
style
#navigation {
display: block;
width: 600px;
height: 65px;
margin: 0 auto;
background-color: grey;
border: 3px solid red;
}
#navigation ul, #navigation ul li {
list-style: none;
padding: 0;
}
#navigation ul {
display: block;
width: 432px;
height: 65px;
margin: 0 auto;
background-color: green;
border: 3px solid blue;
}
#navigation ul li {
float: left;
}
#navigation ul li a {
display: block;
width: 70px;
height: 50px;
background-color: #BB4527;
border: 1px solid black;
}
/style
/head
body
div id=navigation
ul
lia href=index.phpHome/a/li
lia href=index.php?accion=agregarNews/a/li
lia href=index.php?accion=reportesGallery/a/li
lia href=index.php?accion=busquedaMailing List/a/li
lia href=index.php?accion=busquedaAdd Admin/a/li
lia href=index.php?action=logoutLogout/a/li
/ul
/div
/body
/html
aki te dejo una captura de la pantalla de cómo queda.
http://incenit.net/pruebas/ul_centrado.jpg
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Centrar li's dentro de ul.
Bueno, tome tu ejemplo, y claro que funciono.. creo que mi problema es
que dentro tengo los a como block.. o algo asi.. :S
les dejo un screenshot (no puedo mostrarles el sitio porque es una
pagina 'privada'):
http://archivos.kamikaze.com.mx/screen_bb.jpg
y el CSS:
#navigation {
height: 65px;
background-color: #CC6600;
background-image: url(../imgs/menu_background.jpg);
background-repeat: no-repeat;
background-position: center center;
}
#navigation ul, #navigation ul li {
list-style: none;
margin: 0;
padding: 0;
}
#navigation ul {
text-align: center;
}
#navigation ul li {
float: left;
/* display: inline; */
}
#navigation ul li a {
display: block;
width: 70px;
height: 50px;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
text-align: center;
color: #FF;
background-color: #BB4527;
background-image: url(../imgs/menu_background_li.jpg);
background-repeat: no-repeat;
background-position: center center;
}
#navigation ul li a:hover {
text-decoration: underline;
}
y el html:
div id=navigation
ul
lia href=index.phpHome/a/li
lia href=index.php?accion=agregarNews/a/li
lia href=index.php?accion=reportesGallery/a/li
lia href=index.php?accion=busquedaMailing List/a/li
lia href=index.php?accion=busquedaAdd Admin/a/li
lia href=index.php?action=logoutLogout/a/li
/ul
/div
ya volvi a probar/mover/quitar/poner pero no logro centrar esa cosa =(
gracias x la atencion
On 3/15/07, Santos Corrales [EMAIL PROTECTED] wrote:
Adapta este ejemplo:
!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
titleCentrado de li en ul/title
meta http-equiv=Content-Type content=text/html; charset=iso-8859-1 /
style type=text/css
!--
body {
background: #FFF;
color: #000;
font: 62.5% Lucida Grande, Verdana, Geneva, Helvetica, sans-serif;
margin: 0;
padding: 0;
}
#navigation {
margin-top: 2em;
width: 600px;
margin:0 auto;
}
#navigation ul, #navigation ul li {
list-style: none;
margin: 0;
padding: 0;
}
#navigation ul {
text-align: center; /* posicionamiento centrado de ul */
}
#navigation ul li {
display: inline; /* posicionamiento en linea */
margin-right: .75em; /* separacion entre entre lista de enlaces */
}
#navigation ul li.last {
margin-right: 0;
}
/*
#navigation ul li a {
background: #AAF;
}
*/
#navigation ul li a:hover span {
color: #69C;
text-decoration: underline;
}
// --
/style
/head
body
div id=navigation
ul
lia href=#spanEnlace#1/span/a/li
lia href=#spanEnlace#2/span/a/li
lia href=#spanEnlace#3/span/a/li
lia href=#spanEnlace#4/span/a/li
lia href=#spanEnlace#5/span/a/li
li class=lasta href=#spanEnlace#6/span/a/li
/ul
/div
/body
/html
Un cordial saludo de SantosVZ
-Mensaje original-
De: Ardilla Roja [mailto:[EMAIL PROTECTED]
Enviado el: Lunes, 12 de Marzo de 2007 10:25 p.m.
Para: Ovillo, la lista de CSS en castellano
Asunto: [Ovillo] Centrar li's dentro de ul.
Saludos a todos, aqui con uina duda...
Tengo esto:
ul
litexto/li
liotro texto/li
ul
El ul mide 600px d ancho, esta inline... lo que quiero hacer, es que
los li's esten centrados dentro del ul... trate con lo de text-align
en el ul, con margin: 0 auto en los li y todas las ideas q se me
ocurrieron, pero nada.. :(
cualquier pista, bienvenida...
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Centrar li's dentro de ul.
No deberias aplicarlo en el menu home, news, gallery... y centrarlo?
Es una sugerencia.
Un cordial saludo de SantosVZ
-Mensaje original-
De: Ardilla Roja [mailto:[EMAIL PROTECTED]
Enviado el: Viernes, 16 de Marzo de 2007 10:16 p.m.
Para: Ovillo, la lista de CSS en castellano
Asunto: Re: [Ovillo] Centrar li's dentro de ul.
Bueno, tome tu ejemplo, y claro que funciono.. creo que mi problema es
que dentro tengo los a como block.. o algo asi.. :S
les dejo un screenshot (no puedo mostrarles el sitio porque es una
pagina 'privada'):
http://archivos.kamikaze.com.mx/screen_bb.jpg
y el CSS:
#navigation {
height: 65px;
background-color: #CC6600;
background-image: url(../imgs/menu_background.jpg);
background-repeat: no-repeat;
background-position: center center;
}
#navigation ul, #navigation ul li {
list-style: none;
margin: 0;
padding: 0;
}
#navigation ul {
text-align: center;
}
#navigation ul li {
float: left;
/* display: inline; */
}
#navigation ul li a {
display: block;
width: 70px;
height: 50px;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
text-align: center;
color: #FF;
background-color: #BB4527;
background-image: url(../imgs/menu_background_li.jpg);
background-repeat: no-repeat;
background-position: center center;
}
#navigation ul li a:hover {
text-decoration: underline;
}
y el html:
div id=navigation
ul
lia href=index.phpHome/a/li
lia href=index.php?accion=agregarNews/a/li
lia href=index.php?accion=reportesGallery/a/li
lia href=index.php?accion=busquedaMailing
List/a/li
lia href=index.php?accion=busquedaAdd Admin/a/li
lia href=index.php?action=logoutLogout/a/li
/ul
/div
ya volvi a probar/mover/quitar/poner pero no logro centrar esa cosa =(
gracias x la atencion
On 3/15/07, Santos Corrales [EMAIL PROTECTED] wrote:
Adapta este ejemplo:
!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
titleCentrado de li en ul/title
meta http-equiv=Content-Type content=text/html; charset=iso-8859-1 /
style type=text/css
!--
body {
background: #FFF;
color: #000;
font: 62.5% Lucida Grande, Verdana, Geneva, Helvetica,
sans-serif;
margin: 0;
padding: 0;
}
#navigation {
margin-top: 2em;
width: 600px;
margin:0 auto;
}
#navigation ul, #navigation ul li {
list-style: none;
margin: 0;
padding: 0;
}
#navigation ul {
text-align: center; /* posicionamiento centrado de ul */
}
#navigation ul li {
display: inline; /* posicionamiento en linea */
margin-right: .75em; /* separacion entre entre lista de enlaces */
}
#navigation ul li.last {
margin-right: 0;
}
/*
#navigation ul li a {
background: #AAF;
}
*/
#navigation ul li a:hover span {
color: #69C;
text-decoration: underline;
}
// --
/style
/head
body
div id=navigation
ul
lia href=#spanEnlace#1/span/a/li
lia href=#spanEnlace#2/span/a/li
lia href=#spanEnlace#3/span/a/li
lia href=#spanEnlace#4/span/a/li
lia href=#spanEnlace#5/span/a/li
li class=lasta
href=#spanEnlace#6/span/a/li
/ul
/div
/body
/html
Un cordial saludo de SantosVZ
-Mensaje original-
De: Ardilla Roja [mailto:[EMAIL PROTECTED]
Enviado el: Lunes, 12 de Marzo de 2007 10:25 p.m.
Para: Ovillo, la lista de CSS en castellano
Asunto: [Ovillo] Centrar li's dentro de ul.
Saludos a todos, aqui con uina duda...
Tengo esto:
ul
litexto/li
liotro texto/li
ul
El ul mide 600px d ancho, esta inline... lo que quiero hacer, es que
los li's esten centrados dentro del ul... trate con lo de text-align
en el ul, con margin: 0 auto en los li y todas las ideas q se me
ocurrieron, pero nada.. :(
cualquier pista, bienvenida...
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente
Re: [Ovillo] Centrar li's dentro de ul.
Adapta este ejemplo:
!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
titleCentrado de li en ul/title
meta http-equiv=Content-Type content=text/html; charset=iso-8859-1 /
style type=text/css
!--
body {
background: #FFF;
color: #000;
font: 62.5% Lucida Grande, Verdana, Geneva, Helvetica, sans-serif;
margin: 0;
padding: 0;
}
#navigation {
margin-top: 2em;
width: 600px;
margin:0 auto;
}
#navigation ul, #navigation ul li {
list-style: none;
margin: 0;
padding: 0;
}
#navigation ul {
text-align: center; /* posicionamiento centrado de ul */
}
#navigation ul li {
display: inline; /* posicionamiento en linea */
margin-right: .75em; /* separacion entre entre lista de enlaces */
}
#navigation ul li.last {
margin-right: 0;
}
/*
#navigation ul li a {
background: #AAF;
}
*/
#navigation ul li a:hover span {
color: #69C;
text-decoration: underline;
}
// --
/style
/head
body
div id=navigation
ul
lia href=#spanEnlace#1/span/a/li
lia href=#spanEnlace#2/span/a/li
lia href=#spanEnlace#3/span/a/li
lia href=#spanEnlace#4/span/a/li
lia href=#spanEnlace#5/span/a/li
li class=lasta href=#spanEnlace#6/span/a/li
/ul
/div
/body
/html
Un cordial saludo de SantosVZ
-Mensaje original-
De: Ardilla Roja [mailto:[EMAIL PROTECTED]
Enviado el: Lunes, 12 de Marzo de 2007 10:25 p.m.
Para: Ovillo, la lista de CSS en castellano
Asunto: [Ovillo] Centrar li's dentro de ul.
Saludos a todos, aqui con uina duda...
Tengo esto:
ul
litexto/li
liotro texto/li
ul
El ul mide 600px d ancho, esta inline... lo que quiero hacer, es que
los li's esten centrados dentro del ul... trate con lo de text-align
en el ul, con margin: 0 auto en los li y todas las ideas q se me
ocurrieron, pero nada.. :(
cualquier pista, bienvenida...
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Centrar li's dentro de ul.
Un momento, los elementos inline no pueden tener un ancho definido, sino
que ocupan todo el ancho de que puedan, hasta que se encuentren con un
elemento que los pare. Por la forma de explicarte, parece que pretendes
hacer una barra de menu horizontal, y para eso te basta con poner un ul
li{float:left;}
Si lo que pretendes es lo que te ha dicho javier, no deberías usar inline,
en el ul, y en el li, es válida esa solución, así como darle un
display:block al li, ponerle un ancho específico y después un margin:0 auto;
Saludos ;D
El día 13/03/07, Javier Trejo [EMAIL PROTECTED] escribió:
Me imagino que lo que querés hacer es esto:
CSS:
ul {
border:1px solid #FF;
text-align:center;
width:600px;
}
li {
display:inline;
}
El borde es sólo para que veas que los LI están centrados en el UL.
Cualquier cosa, no dudes en contactarme.
Saludos,
Javier Trejo
--
[EMAIL PROTECTED]
www.tsinformatica.com.ar
TEL.: 4543-4550
CEL.: 15-6485-7734
MSN: [EMAIL PROTECTED]
SKYPE: javier.trejo
-Mensaje original-
De: [EMAIL PROTECTED] [mailto:
[EMAIL PROTECTED]
En nombre de Ardilla Roja
Enviado el: Lunes, 12 de Marzo de 2007 23:25
Para: Ovillo, la lista de CSS en castellano
Asunto: [Ovillo] Centrar li's dentro de ul.
Saludos a todos, aqui con uina duda...
Tengo esto:
ul
litexto/li
liotro texto/li
ul
El ul mide 600px d ancho, esta inline... lo que quiero hacer, es que los
li's esten centrados dentro del ul... trate con lo de text-align en el ul,
con margin: 0 auto en los li y todas las ideas q se me ocurrieron, pero
nada.. :(
cualquier pista, bienvenida...
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes
modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
--
Juan J. Muñoz
http://www.taarq.com
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Centrar li's dentro de ul.
creo que me equivoque al redactar.. :)
este es mi CSS:
#main_menu {
list-style: none;
height: 70px;
}
#main_menu li {
float: left;
}
#main_menu li a {
display: block;
width: 70px;
height: 50px;
text-align: center;
}
#main_menu li a:hover {
text-decoration: underline;
}
Como dijo Jorge, lo que trato d hacer es pretendes hacer una barra de
menu horizontal, y para eso te basta con poner un ul li{float:left;}
pero, quiero que esten los li al centro delul horizontal, no
importa cantidad ni ancho del ul...
Gracias por sus recomendaciones.. por el momento no puedo meter mano
al codigo, pero en cuanto puedo les digo que paso.. :)
On 3/13/07, Juan Jorge Muñoz Herrero [EMAIL PROTECTED] wrote:
Un momento, los elementos inline no pueden tener un ancho definido, sino
que ocupan todo el ancho de que puedan, hasta que se encuentren con un
elemento que los pare. Por la forma de explicarte, parece que pretendes
hacer una barra de menu horizontal, y para eso te basta con poner un ul
li{float:left;}
Si lo que pretendes es lo que te ha dicho javier, no deberías usar inline,
en el ul, y en el li, es válida esa solución, así como darle un
display:block al li, ponerle un ancho específico y después un margin:0 auto;
Saludos ;D
El día 13/03/07, Javier Trejo [EMAIL PROTECTED] escribió:
Me imagino que lo que querés hacer es esto:
CSS:
ul {
border:1px solid #FF;
text-align:center;
width:600px;
}
li {
display:inline;
}
El borde es sólo para que veas que los LI están centrados en el UL.
Cualquier cosa, no dudes en contactarme.
Saludos,
Javier Trejo
--
[EMAIL PROTECTED]
www.tsinformatica.com.ar
TEL.: 4543-4550
CEL.: 15-6485-7734
MSN: [EMAIL PROTECTED]
SKYPE: javier.trejo
-Mensaje original-
De: [EMAIL PROTECTED] [mailto:
[EMAIL PROTECTED]
En nombre de Ardilla Roja
Enviado el: Lunes, 12 de Marzo de 2007 23:25
Para: Ovillo, la lista de CSS en castellano
Asunto: [Ovillo] Centrar li's dentro de ul.
Saludos a todos, aqui con uina duda...
Tengo esto:
ul
litexto/li
liotro texto/li
ul
El ul mide 600px d ancho, esta inline... lo que quiero hacer, es que los
li's esten centrados dentro del ul... trate con lo de text-align en el ul,
con margin: 0 auto en los li y todas las ideas q se me ocurrieron, pero
nada.. :(
cualquier pista, bienvenida...
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes
modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
--
Juan J. Muñoz
http://www.taarq.com
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Centrar li's dentro de ul.
Creo que sé a lo que te refieres, puedes hacer que el ul se adapte al
contenido, y és a este al que le tienes que poner las propiedades, para que
te vaya bien no lo flotes y le pones margin:0 auto; una vez hecho esto,
metelo en un div contenedor (en caso de ser necesario) y ya se alineará
respecto a las medidas de éste.
La verdad, si pones una imágen, o un link hacia alguna página que utilice
este sistema nos aclaramos mejor, ok?
saludos...
El día 13/03/07, Ardilla Roja [EMAIL PROTECTED] escribió:
creo que me equivoque al redactar.. :)
este es mi CSS:
#main_menu {
list-style: none;
height: 70px;
}
#main_menu li {
float: left;
}
#main_menu li a {
display: block;
width: 70px;
height: 50px;
text-align: center;
}
#main_menu li a:hover {
text-decoration: underline;
}
Como dijo Jorge, lo que trato d hacer es pretendes hacer una barra de
menu horizontal, y para eso te basta con poner un ul li{float:left;}
pero, quiero que esten los li al centro delul horizontal, no
importa cantidad ni ancho del ul...
Gracias por sus recomendaciones.. por el momento no puedo meter mano
al codigo, pero en cuanto puedo les digo que paso.. :)
On 3/13/07, Juan Jorge Muñoz Herrero [EMAIL PROTECTED] wrote:
Un momento, los elementos inline no pueden tener un ancho definido,
sino
que ocupan todo el ancho de que puedan, hasta que se encuentren con un
elemento que los pare. Por la forma de explicarte, parece que pretendes
hacer una barra de menu horizontal, y para eso te basta con poner un ul
li{float:left;}
Si lo que pretendes es lo que te ha dicho javier, no deberías usar
inline,
en el ul, y en el li, es válida esa solución, así como darle un
display:block al li, ponerle un ancho específico y después un margin:0
auto;
Saludos ;D
El día 13/03/07, Javier Trejo [EMAIL PROTECTED] escribió:
Me imagino que lo que querés hacer es esto:
CSS:
ul {
border:1px solid #FF;
text-align:center;
width:600px;
}
li {
display:inline;
}
El borde es sólo para que veas que los LI están centrados en el UL.
Cualquier cosa, no dudes en contactarme.
Saludos,
Javier Trejo
--
[EMAIL PROTECTED]
www.tsinformatica.com.ar
TEL.: 4543-4550
CEL.: 15-6485-7734
MSN: [EMAIL PROTECTED]
SKYPE: javier.trejo
-Mensaje original-
De: [EMAIL PROTECTED] [mailto:
[EMAIL PROTECTED]
En nombre de Ardilla Roja
Enviado el: Lunes, 12 de Marzo de 2007 23:25
Para: Ovillo, la lista de CSS en castellano
Asunto: [Ovillo] Centrar li's dentro de ul.
Saludos a todos, aqui con uina duda...
Tengo esto:
ul
litexto/li
liotro texto/li
ul
El ul mide 600px d ancho, esta inline... lo que quiero hacer, es que
los
li's esten centrados dentro del ul... trate con lo de text-align en el
ul,
con margin: 0 auto en los li y todas las ideas q se me ocurrieron,
pero
nada.. :(
cualquier pista, bienvenida...
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a [EMAIL PROTECTED]
modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
--
Juan J. Muñoz
http://www.taarq.com
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
--
Juan J. Muñoz
http://www.taarq.com
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Centrar li's dentro de ul.
Me imagino que lo que querés hacer es esto:
CSS:
ul {
border:1px solid #FF;
text-align:center;
width:600px;
}
li {
display:inline;
}
El borde es sólo para que veas que los LI están centrados en el UL.
Cualquier cosa, no dudes en contactarme.
Saludos,
Javier Trejo
--
[EMAIL PROTECTED]
www.tsinformatica.com.ar
TEL.: 4543-4550
CEL.: 15-6485-7734
MSN: [EMAIL PROTECTED]
SKYPE: javier.trejo
-Mensaje original-
De: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED]
En nombre de Ardilla Roja
Enviado el: Lunes, 12 de Marzo de 2007 23:25
Para: Ovillo, la lista de CSS en castellano
Asunto: [Ovillo] Centrar li's dentro de ul.
Saludos a todos, aqui con uina duda...
Tengo esto:
ul
litexto/li
liotro texto/li
ul
El ul mide 600px d ancho, esta inline... lo que quiero hacer, es que los
li's esten centrados dentro del ul... trate con lo de text-align en el ul,
con margin: 0 auto en los li y todas las ideas q se me ocurrieron, pero
nada.. :(
cualquier pista, bienvenida...
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes
modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
