Foros del Web » Creando para Internet » CSS »

Menu con LI, en la misma linea, y alineado a la derecha

Estas en el tema de Menu con LI, en la misma linea, y alineado a la derecha en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 01/07/2008, 22:17
Avatar de daPhyre
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.404
Antigüedad: 16 años
Puntos: 142
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>
Jugaa.me


Adios al dolor de cabeza de IE...
  #2 (permalink)  
Antiguo 02/07/2008, 00:45
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 5 meses
Puntos: 280
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.
  #3 (permalink)  
Antiguo 02/07/2008, 06:21
 
Fecha de Ingreso: mayo-2007
Mensajes: 348
Antigüedad: 16 años, 9 meses
Puntos: 9
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
&#233;n como ejemplo :D
<div style="float:right;">
   <
ul id="lista">
             <
li>fsaffa</li>
             <
li>fsaffa</li>
    </
ul>
</
div>

#lista li {
display:inline;

  #4 (permalink)  
Antiguo 02/07/2008, 09:15
Avatar de daPhyre
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.404
Antigüedad: 16 años
Puntos: 142
Respuesta: Menu con LI, en la misma linea, y alineado a la derecha

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?
__________________
<signs>daPhyre</signs>
Jugaa.me


Adios al dolor de cabeza de IE...
  #5 (permalink)  
Antiguo 02/07/2008, 09:39
Avatar de daPhyre
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.404
Antigüedad: 16 años
Puntos: 142
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>
Jugaa.me


Adios al dolor de cabeza de IE...
  #6 (permalink)  
Antiguo 02/07/2008, 09:46
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 5 meses
Puntos: 280
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.
  #7 (permalink)  
Antiguo 02/07/2008, 09:54
Avatar de daPhyre
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.404
Antigüedad: 16 años
Puntos: 142
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>
Jugaa.me


Adios al dolor de cabeza de IE...
  #8 (permalink)  
Antiguo 02/07/2008, 10:38
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 5 meses
Puntos: 280
Respuesta: Menu con LI, en la misma linea, y alineado a la derecha

Cita:
Iniciado por daPhyre Ver Mensaje
¿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.
  #9 (permalink)  
Antiguo 02/07/2008, 10:45
Avatar de daPhyre
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.404
Antigüedad: 16 años
Puntos: 142
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>
Jugaa.me


Adios al dolor de cabeza de IE...
  #10 (permalink)  
Antiguo 02/07/2008, 10:56
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 5 meses
Puntos: 280
Respuesta: Menu con LI, en la misma linea, y alineado a la derecha

Sí, así está bien.
  #11 (permalink)  
Antiguo 02/07/2008, 11:38
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 5 meses
Puntos: 280
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.
  #12 (permalink)  
Antiguo 02/07/2008, 22:16
Avatar de daPhyre
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.404
Antigüedad: 16 años
Puntos: 142
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>
Jugaa.me


Adios al dolor de cabeza de IE...
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 04:30.