Foros del web, para los que viven de bits

daPhyre · 01-jul-2008, 22:17

Así como lo pregunto. Actualmente tengo un menú de imagenes, que para comodidad (Y aparentemente por accesibilidad y standar), lo he puesto en una lista desordenada (ul).

Para que estén en la misma linea, les hago un clear:left, pero eso hace que se ordenen a la izquierda, y por estética en mi página, yo quiero alinearlos a la derecha. Ya están en un div que alínea todo a la derecha, pero la lista no se incluye en esto, y no se como hacer que haga tal efecto.

Una forma sencilla sería poner en orden inverso la lista y hacerles un clear:right, pero en otras secciones de la página estará al centro, por lo que no es una solución optima. Espero alguien pueda ayudarme con esta. ¡Gracias!

Mikmoro · 02-jul-2008, 00:45

Hola, daPhyre.

Yo de entrada te recomiendo que no uses el menú a la derecha en unas páginas y centrado en otras (es recomendable mantener la consistencia en la navegación), pero es cosa tuya.

Si muestras el código nos podremos hacer una idea de los que quieres hacer.

Mikel.

Nathan_1979 · 02-jul-2008, 06:21

En la misma linea te refieres así? ------ -------- -----------

Código PHP:


			

Codigo chapucero pero creo que viene bi&#233;n como ejemplo :D
<div style="float:right;">
   <ul id="lista">
             <li>fsaffa</li>
             <li>fsaffa</li>
    </ul>
</div>

#lista li {
display:inline;
}

daPhyre · 02-jul-2008, 09:15

El código:

Código HTML:

<div id="menu">
<ul class="links">
<li><a href="pagina1.html">pagina1</a></li>
<li><a href="pagina2/index.html">pagina2</a></li>
</ul>
</div>
<div id="footer">
<ul class="links">
<li><a href="pagina3.html" class="nobg">
<img src="img1.png" alt="imagen" /></a></li>
<li><a href="pagina4.html" class ="nobg">
<img src="img2.png" alt="imagen"/></a></li>
</ul>
</div>

El CSS:

Código HTML:

#menu{text-align:center;}
#footer{text-align:right;}
.links{list-style:none;width:200px;overflow:hidden;}
.links li{float:left;}
.nobg{background:transparent;}

Hice el width:200px; para que lo acomodara, y eso hace que se vea perfecto en IE, pero en FF no se ven ninguna de las alineaciones. ¿Sugerencias para corregirlo?

daPhyre · 02-jul-2008, 09:39

Encontré el origen del problema; el "display:inline" funciona perfecto para el menú con imagenes, y ya se acomoda, el problema es con el menú con letras, que para que paresca un botón, hago un

#menu a{display:block;background:#ccc;width:100px;}

Al quitarte el display:block, ya me lo muestra en la misma línea, pero el fondo ya no me lo colorea en todo su ancho. ¿Como hacer para que ambos me funcionen, o en dado caso, corregir la forma pasada?

Mikmoro · 02-jul-2008, 09:46

Te iba a decir que difícilmente se van a alinear con text-align los elementos "lu", ya que no son de línea. pero explorer hace esas cosas.

Para lo de los botones, podrás darles el tamaño que quieras a través del padding y el line-height.

Mikel.

daPhyre · 02-jul-2008, 09:54

¿Entonces en los demás exploradores no hay forma de que los elementos en un "ul" me los alínie al centro o a la derecha?

Y no estoy seguro del padding, pues lo que quiero es que todos los links tengan un ancho de 100px, ya sea que sea una palabra más o menos larga, o una simple letra.

Pero si ninguna de las opciones anteriores es posible, ya tendré que idearme un diseño alterno para lo que intento. Gracias.

Mikmoro · 02-jul-2008, 10:38

Cita:

Iniciado por daPhyre

¿Entonces en los demás exploradores no hay forma de que los elementos en un "ul" me los alínie al centro o a la derecha?

Lo que tú estás queriendo alinear a la derecha o al centro no son los elementos dentro de un "ul", sino el propio "ul".

Y además estás queriendo hacerlo usando la misma clase para los dos "ul", lo cual complica más la cosa.

Supongo que la mejor alternativa es darles diferentes clases y alinear los "ul" como elementos de bloque con margin: 0 auto; y margin-left: auto; respectivamente.

Mikel.

daPhyre · 02-jul-2008, 10:45

Tienes razón, me expresé mal, la pregunta correcta sería "¿Entonces en los demás exploradores no hay forma un "ul" me lo alínie al centro o a la derecha?".

El tenerlo en distintas clases no sería problema, aunque creo que hay una solución más sencilla para esto. ¿A cual le pongo cada uno? ¿Debería quedar algo así?

Código HTML:

#menu ul.link{margin: 0 auto;}
#footer ul.link{margin-left: auto;}

¿O lo hago al revez? ¿El display:block; lo hago en el anchor como hasta ahora? Creo que podría probar con todo, pero desafortunadamente no tengo FF conmigo ahora para comprobar los resultados. En todo caso lo haré en un par de horas. Muchas gracias

Mikmoro · 02-jul-2008, 10:56

Sí, así está bien.

Mikmoro · 02-jul-2008, 11:38

Esto funciona igual (en cuanto a la alineación que buscabas), en FF y en IE.

Cita:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
#menu{text-align:center;}
#footer{text-align:right;}
#menu ul.links, #footer ul.links {list-style:none;width:200px;overflow:hidden;}
#menu ul.links {margin: 0 auto;}
#footer ul.links{margin-left: auto;}
.links li{float: left;}
.nobg{background:transparent;}
#menu a, #footer a {display: block;}
</style>
</head>
<body>
<div id="menu">
<ul class="links">
<li><a href="pagina1.html">pagina1</a></li>
<li><a href="pagina2/index.html">pagina2</a></li>
</ul>
</div>
<div id="footer">
<ul class="links">
<li><a href="pagina3.html" class="nobg">
<img src="img1.png" alt="imagen" /></a></li>
<li><a href="pagina4.html" class ="nobg">
<img src="img2.png" alt="imagen"/></a></li>
</ul>
</div>
</body>
</html>

Ahora ya incorporarás los tamaños y esas cosas.

Mikel.

daPhyre · 02-jul-2008, 22:16

Ya pude probarlo, y finalmente se ve perfecto en IE, FF y Safari. ¡Muchas gracias como siempre por tu ayuda!

01-jul-2008, 22:17	#1 (permalink)
daPhyre Fecha de Ingreso: marzo-2008 Ubicación: Idle. Return on 18/08 Mensajes: 734	Menu con LI, en la misma linea, y alineado a la derecha Así como lo pregunto. Actualmente tengo un menú de imagenes, que para comodidad (Y aparentemente por accesibilidad y standar), lo he puesto en una lista desordenada (ul). Para que estén en la misma linea, les hago un clear:left, pero eso hace que se ordenen a la izquierda, y por estética en mi página, yo quiero alinearlos a la derecha. Ya están en un div que alínea todo a la derecha, pero la lista no se incluye en esto, y no se como hacer que haga tal efecto. Una forma sencilla sería poner en orden inverso la lista y hacerles un clear:right, pero en otras secciones de la página estará al centro, por lo que no es una solución optima. Espero alguien pueda ayudarme con esta. ¡Gracias! __________________ <signs> daPhyre </signs> ¿Por qué dejar se usar tablas?

02-jul-2008, 00:45	#2 (permalink)
Mikmoro Colaborador Fecha de Ingreso: octubre-2006 Ubicación: A tu espalda Mensajes: 3.436	Respuesta: Menu con LI, en la misma linea, y alineado a la derecha Hola, daPhyre. Yo de entrada te recomiendo que no uses el menú a la derecha en unas páginas y centrado en otras (es recomendable mantener la consistencia en la navegación), pero es cosa tuya. Si muestras el código nos podremos hacer una idea de los que quieres hacer. Mikel.

02-jul-2008, 06:21	#3 (permalink)
Nathan_1979 Fecha de Ingreso: mayo-2007 Mensajes: 130	Respuesta: Menu con LI, en la misma linea, y alineado a la derecha En la misma linea te refieres así? ------ -------- ----------- Código PHP: `Codigo chapucero pero creo que viene bién como ejemplo :D <div style="float:right;"> <ul id="lista"> <li>fsaffa</li> <li>fsaffa</li> </ul> </div> #lista li { display:inline; }`

02-jul-2008, 09:39	#5 (permalink)
daPhyre Fecha de Ingreso: marzo-2008 Ubicación: Idle. Return on 18/08 Mensajes: 734	Respuesta: Menu con LI, en la misma linea, y alineado a la derecha Encontré el origen del problema; el "display:inline" funciona perfecto para el menú con imagenes, y ya se acomoda, el problema es con el menú con letras, que para que paresca un botón, hago un #menu a{display:block;background:#ccc;width:100px;} Al quitarte el display:block, ya me lo muestra en la misma línea, pero el fondo ya no me lo colorea en todo su ancho. ¿Como hacer para que ambos me funcionen, o en dado caso, corregir la forma pasada? __________________ <signs> daPhyre </signs> ¿Por qué dejar se usar tablas?

02-jul-2008, 09:46	#6 (permalink)
Mikmoro Colaborador Fecha de Ingreso: octubre-2006 Ubicación: A tu espalda Mensajes: 3.436	Respuesta: Menu con LI, en la misma linea, y alineado a la derecha Te iba a decir que difícilmente se van a alinear con text-align los elementos "lu", ya que no son de línea. pero explorer hace esas cosas. Para lo de los botones, podrás darles el tamaño que quieras a través del padding y el line-height. Mikel.

02-jul-2008, 09:54	#7 (permalink)
daPhyre Fecha de Ingreso: marzo-2008 Ubicación: Idle. Return on 18/08 Mensajes: 734	Respuesta: Menu con LI, en la misma linea, y alineado a la derecha ¿Entonces en los demás exploradores no hay forma de que los elementos en un "ul" me los alínie al centro o a la derecha? Y no estoy seguro del padding, pues lo que quiero es que todos los links tengan un ancho de 100px, ya sea que sea una palabra más o menos larga, o una simple letra. Pero si ninguna de las opciones anteriores es posible, ya tendré que idearme un diseño alterno para lo que intento. Gracias. __________________ <signs> daPhyre </signs> ¿Por qué dejar se usar tablas?

02-jul-2008, 10:38	#8 (permalink)
Mikmoro Colaborador Fecha de Ingreso: octubre-2006 Ubicación: A tu espalda Mensajes: 3.436	Respuesta: Menu con LI, en la misma linea, y alineado a la derecha Cita: Iniciado por daPhyre ¿Entonces en los demás exploradores no hay forma de que los elementos en un "ul" me los alínie al centro o a la derecha? Lo que tú estás queriendo alinear a la derecha o al centro no son los elementos dentro de un "ul", sino el propio "ul". Y además estás queriendo hacerlo usando la misma clase para los dos "ul", lo cual complica más la cosa. Supongo que la mejor alternativa es darles diferentes clases y alinear los "ul" como elementos de bloque con margin: 0 auto; y margin-left: auto; respectivamente. Mikel.

02-jul-2008, 10:45	#9 (permalink)
daPhyre Fecha de Ingreso: marzo-2008 Ubicación: Idle. Return on 18/08 Mensajes: 734	Respuesta: Menu con LI, en la misma linea, y alineado a la derecha Tienes razón, me expresé mal, la pregunta correcta sería "¿Entonces en los demás exploradores no hay forma un "ul" me lo alínie al centro o a la derecha?". El tenerlo en distintas clases no sería problema, aunque creo que hay una solución más sencilla para esto. ¿A cual le pongo cada uno? ¿Debería quedar algo así? Código HTML: #menu ul.link{margin: 0 auto;} #footer ul.link{margin-left: auto;} ¿O lo hago al revez? ¿El display:block; lo hago en el anchor como hasta ahora? Creo que podría probar con todo, pero desafortunadamente no tengo FF conmigo ahora para comprobar los resultados. En todo caso lo haré en un par de horas. Muchas gracias __________________ <signs> daPhyre </signs> ¿Por qué dejar se usar tablas?

02-jul-2008, 10:56	#10 (permalink)
Mikmoro Colaborador Fecha de Ingreso: octubre-2006 Ubicación: A tu espalda Mensajes: 3.436	Respuesta: Menu con LI, en la misma linea, y alineado a la derecha Sí, así está bien.

02-jul-2008, 11:38	#11 (permalink)
Mikmoro Colaborador Fecha de Ingreso: octubre-2006 Ubicación: A tu espalda Mensajes: 3.436	Respuesta: Menu con LI, en la misma linea, y alineado a la derecha Esto funciona igual (en cuanto a la alineación que buscabas), en FF y en IE. Cita: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <style type="text/css"> #menu{text-align:center;} #footer{text-align:right;} #menu ul.links, #footer ul.links {list-style:none;width:200px;overflow:hidden;} #menu ul.links {margin: 0 auto;} #footer ul.links{margin-left: auto;} .links li{float: left;} .nobg{background:transparent;} #menu a, #footer a {display: block;} </style> </head> <body> <div id="menu"> <ul class="links"> <li><a href="pagina1.html">pagina1</a></li> <li><a href="pagina2/index.html">pagina2</a></li> </ul> </div> <div id="footer"> <ul class="links"> <li><a href="pagina3.html" class="nobg"> <img src="img1.png" alt="imagen" /></a></li> <li><a href="pagina4.html" class ="nobg"> <img src="img2.png" alt="imagen"/></a></li> </ul> </div> </body> </html> Ahora ya incorporarás los tamaños y esas cosas. Mikel.

02-jul-2008, 22:16	#12 (permalink)
daPhyre Fecha de Ingreso: marzo-2008 Ubicación: Idle. Return on 18/08 Mensajes: 734	Respuesta: Menu con LI, en la misma linea, y alineado a la derecha Ya pude probarlo, y finalmente se ve perfecto en IE, FF y Safari. ¡Muchas gracias como siempre por tu ayuda! __________________ <signs> daPhyre </signs> ¿Por qué dejar se usar tablas?

Herramientas
Mostrar Versión Imprimible Enviar por Correo
Desplegado
Mode Lineal Cambiar a Modo Hibrido Cambiar a Modo Hilado