Foros del Web » Creando para Internet » CSS »

alineando a la derecha

Estas en el tema de alineando a la derecha en el foro de CSS en Foros del Web. Estimados: tengo el siguiente codigo html Código HTML: <div> <ul> <li> izquierda </li> <li> izquierda </li> <li> derecha </li> </ul> </div> necesito alinear el ultimo ...
  #1 (permalink)  
Antiguo 22/03/2008, 01:08
Avatar de dieguicho  
Fecha de Ingreso: noviembre-2001
Ubicación: Buenos Aires
Mensajes: 1.190
Antigüedad: 16 años
Puntos: 1
alineando a la derecha

Estimados:

tengo el siguiente codigo html
Código HTML:
<div>
    <ul>
      <li>izquierda</li>
      <li>izquierda</li>
      <li>derecha</li>
    </ul>
</div> 
necesito alinear el ultimo a la derecha..

Código HTML:
<li style="float:right">derecha</li> 
y funciona... lo alinea a la derecha, pero.... en una segunda linea!

si a los dos primeros
Código HTML:
<li> 
les agrego
Código HTML:
<li style="float:left"> 
funciona un poco mejor... pero.. el
Código HTML:
<div> 
se me acorta en el alto, es como que si al hacer float:left pasara a position:relative
como puedo solucionarlo? gracias!!!!
__________________
On error no hago nada porque deje de fumar...
  #2 (permalink)  
Antiguo 22/03/2008, 01:52
Avatar de emiliodeg  
Fecha de Ingreso: septiembre-2005
Ubicación: Córdoba
Mensajes: 1.830
Antigüedad: 12 años, 3 meses
Puntos: 54
Re: alineando a la derecha

agrega esto
li {display:block;width:33%}
__________________
Degiovanni Emilio
developtus.com
  #3 (permalink)  
Antiguo 22/03/2008, 09:47
Avatar de dieguicho  
Fecha de Ingreso: noviembre-2001
Ubicación: Buenos Aires
Mensajes: 1.190
Antigüedad: 16 años
Puntos: 1
Re: alineando a la derecha

sucede lo mismo
para que el width??
__________________
On error no hago nada porque deje de fumar...
  #4 (permalink)  
Antiguo 22/03/2008, 10:19
Avatar de Raulmmmm  
Fecha de Ingreso: marzo-2007
Ubicación: En otro lugar que tú
Mensajes: 1.549
Antigüedad: 10 años, 8 meses
Puntos: 36
Re: alineando a la derecha

Si dices que funciona con el float: left; puedes poner esto:
Código HTML:
<div style="clear: both"></div> 
antes del </ul> para que te lo meta dentro del div. Quedaría así:
Código HTML:
<div>
<ul>
<li style="float: left">Hola</li>
<li style="float: left">Hola</li>
<li style="float: right">Hola</li>
<div style="clear: both"></div>
</ul>
</div> 
  #5 (permalink)  
Antiguo 22/03/2008, 13:55
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: alineando a la derecha

En realidad es sencillo:

<div>
<ul>
<li class="derecha">derecha</li>
<li class="izquierda">izquierda</li>
<li class="centro">izquierda</li>
</ul>
</div>

y la css:

.derecha { float: right;}
.izquierda { float: left;}

Es decir, siempre que quieras alinear algo a la derecha y en la misma línea otras cosas a su izquierda, es recomendable que primero pongas las cosas que van a la derecha y luego lo que va a su izquierda, por el flujo del documento.

Mikel.
  #6 (permalink)  
Antiguo 22/03/2008, 15:13
Avatar de dieguicho  
Fecha de Ingreso: noviembre-2001
Ubicación: Buenos Aires
Mensajes: 1.190
Antigüedad: 16 años
Puntos: 1
Re: alineando a la derecha

Mikmoro, si al div contenedor le ponemos un color de fondo cualquiera en tu ejemplo veras como se corta, el div queda por la mitad de los li probalo y me contas
__________________
On error no hago nada porque deje de fumar...
  #7 (permalink)  
Antiguo 22/03/2008, 16:28
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: alineando a la derecha

Pues no entiendo muy bien qué quieres decir con que se corta, pero en este código no veo nada que se corte:

Cita:
<!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>dieguicho</title>
<style>
.derecha { float: right;}
.izquierda { float: left;}
li {list-style: none;
}
div {background: #aaa;
}
</style>
</head>
<body>
<div>
<ul>
<li class="derecha">Derecha</li>
<li class="izquierda">Izquierda</li>
<li class="centro">Centro</li>
</ul>
</div></body>
</html>
Sólo he puesto fondo al div y he quitado los discos de los li.
O no entiendo qué se corta o no has probado bien el código. No obstante, tampoco sé exactamente qué es lo que quieres hacer, porque esto yo nunca lo haría así. Seguro que es para algo en concreto que no imagino. Si eres más explícito creo que será más fácil.

Mikel.
  #8 (permalink)  
Antiguo 22/03/2008, 16:47
Avatar de dieguicho  
Fecha de Ingreso: noviembre-2001
Ubicación: Buenos Aires
Mensajes: 1.190
Antigüedad: 16 años
Puntos: 1
Re: alineando a la derecha

quiero hacer un encabezado con los links: productos y servicios
alineados a la izquierda y con un link mi cuenta y salir alineado a la derecha
como lo harias vos?
veo que en tu codigo creaste un li class=centro

si eliminas ese li veras a que me refiero... el div deja de contener el ul y se auto-achica, me explique mejor?? gracias!!
__________________
On error no hago nada porque deje de fumar...
  #9 (permalink)  
Antiguo 22/03/2008, 17:29
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: alineando a la derecha

Cita:
Iniciado por dieguicho Ver Mensaje
quiero hacer un encabezado con los links: productos y servicios
alineados a la izquierda y con un link mi cuenta y salir alineado a la derecha
como lo harias vos?
veo que en tu codigo creaste un li class=centro

si eliminas ese li veras a que me refiero... el div deja de contener el ul y se auto-achica, me explique mejor?? gracias!!
Claro, pero ese li class="centro" ya estaba en el mensaje anterior, por eso decía que quizá no lo habías probado bien.

Si quieres un li alineado a la derecha y otros dos a la izquierda, pero nada más entre ellos, la mejor manera es como te decía:

1.- el de la derecha, flotado a la derecha
2.- el de más a la izquierda, flotado a la izquierda
3.- el siguiente de la izquierda (al que he llamado "centro"), sin flotar.

¿Por qué? En primer lugar porque el segundo de la izquierda (centro) no es necesario flotarlo, en segundo lugar porque de esa manera el del centro ocupa toda la línea hasta hacer tope con el de la derecha, y en tercer lugar, porque así el div crece tanto como ese li del centro, porque en FF, con los li flotados no crece.

Eso es lo que te ocurre cuando flotas los tres. Espero que te sirva.

Mikel.
  #10 (permalink)  
Antiguo 22/03/2008, 21:27
Avatar de dieguicho  
Fecha de Ingreso: noviembre-2001
Ubicación: Buenos Aires
Mensajes: 1.190
Antigüedad: 16 años
Puntos: 1
Re: alineando a la derecha

perfecto, clarisimo... muchas gracias Mikel, dejare un li vacio en el centro
__________________
On error no hago nada porque deje de fumar...
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 07:45.