Foros del Web » Creando para Internet » CSS »

alinear a la izquierda

Estas en el tema de alinear a la izquierda en el foro de CSS en Foros del Web. Hola tengo una duda estoy haciendo un tipo panel en donde tengo una capa de 500px x 500px por decir algo y dentro tengo iconos ...
  #1 (permalink)  
Antiguo 27/04/2011, 13:32
Avatar de kaninox  
Fecha de Ingreso: septiembre-2005
Ubicación: In my House
Mensajes: 3.591
Antigüedad: 12 años, 3 meses
Puntos: 49
alinear a la izquierda

Hola tengo una duda estoy haciendo un tipo panel en donde tengo una capa de 500px x 500px por decir algo y dentro tengo iconos que van a aplicaciones.

la cosa es que no todos ven los mismos iconos y me gustaría que se mostraran como los iconos de windows alineados a cuadricula, me explico

tengo mi caja de 500x500 y que a medida que se vallan mostrando los iconos que cabe 4 iconos por linea vertical cuando se vea el icono 5 este se valla a la posición top segunda linea de forma automática, sera posible hacer esto con css? no se si me explique bien....

saludos
__________________
Gokuh Salvo al mundo. PUNTO!!!!
  #2 (permalink)  
Antiguo 27/04/2011, 14:20
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 8 años, 10 meses
Puntos: 306
Respuesta: alinear a la izquierda

Podrías darles a esos iconos un estilo como esto:
display: block (si es que no lo tienes dentro de una etiqueta de bloque)
float: left (para que se vayan colocando uno al lado del otro, y en caso de que la suma de sus anchos supere los 500px ponerse debajo)

Claro que para que queden bien, todos los iconos deberían tener el mismo alto.

Resumiendo: flota los iconos.
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--
  #3 (permalink)  
Antiguo 27/04/2011, 14:24
Avatar de kaninox  
Fecha de Ingreso: septiembre-2005
Ubicación: In my House
Mensajes: 3.591
Antigüedad: 12 años, 3 meses
Puntos: 49
Respuesta: alinear a la izquierda

pues eso es fácil incluso puedo crearme una tabla con justify para ello, el tema es que me gustaría que el primero estuviera a la izquierda el segundo bajo este el tercero bajo el segundo el cuarto bajo el tercero el quinto al lado del primero, en el caso de que el usuario no veo el icono 3 por decir algo el icono 5 pase abajo no se si me explico creo que es un tanto dificil, si no hay solución optare por tu idea.

caso 1
1 - 5
2
3
4

caso 2

1
2
4
5

gracias
__________________
Gokuh Salvo al mundo. PUNTO!!!!
  #4 (permalink)  
Antiguo 27/04/2011, 14:53
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 8 años, 10 meses
Puntos: 306
Respuesta: alinear a la izquierda

Ah, alineados en forma vertical, yo entendí que era horizontal.
Tendría que pensarlo un poco, a ver que se me ocurre.
Aunque supongo que alguien ya tendrá la respuesta.

Saludos
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--
  #5 (permalink)  
Antiguo 29/04/2011, 07:55
Avatar de kaninox  
Fecha de Ingreso: septiembre-2005
Ubicación: In my House
Mensajes: 3.591
Antigüedad: 12 años, 3 meses
Puntos: 49
Respuesta: alinear a la izquierda

Pues yo por mas que he tratado no he podido hacer un align="justify" por decir asi de forma vertical, solo es para el horizontal ya sea en capas o tablas, alguien iluminado que lo halla realizado o tenga una idea?
__________________
Gokuh Salvo al mundo. PUNTO!!!!
  #6 (permalink)  
Antiguo 29/04/2011, 08:13
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: alinear a la izquierda

Cita:
la cosa es que no todos ven los mismos iconos
Supongo que hay implicada programación.
En base a esa suposición y asumiendo que los iconos los muestras en una lista*:
Programa para que al llegar al 5º icono cierres la lista y para los siguientes cinco se cree una nueva.
Dale la anchura necesaria a las listas y flótalas a la izquierda.

*: sería lo mismo si el etiquetado es otro, aunque por semántica creo que sería lo indicado.
  #7 (permalink)  
Antiguo 29/04/2011, 12:34
 
Fecha de Ingreso: enero-2003
Ubicación: Córdoba, Argentina
Mensajes: 1.047
Antigüedad: 14 años, 10 meses
Puntos: 10
Respuesta: alinear a la izquierda

Opino igual que kseso? la forma más prudente de hacerlo es abriendo y cerrando listas.

Código:
<ul style="float:left; margin-right:10px; width:100px;">
   <li>ICONO 1</li>
   <li>ICONO 2</li>
   <li>ICONO 3</li>
   <li>ICONO 4</li>
</ul>
<ul style="float:left; width:100px;">
   <li>ICONO 5</li>
</ul>
La otra opción, pero que sirve solo si hablamos de un contenedor con tamaño fijo e iconos con los mismos tamaños o aproximados, es usar clases que asignen posiciones absolutas. Por ejemplo:
Código:
<div id="contenedor">
   <a class="icono i1"><img src...... /></a>
   <a class="icono i2"><img src...... /></a>
   <a class="icono i3"><img src...... /></a>
   <a class="icono i4"><img src...... /></a>
   <a class="icono i5"><img src...... /></a>
   <a class="icono i6"><img src...... /></a>
</div>

<style>
#contenedor { height:500px; position:relative; width:500px; }
#contenedor .icono { height:50px; position:absolute; width:50px; }
#contenedor .icono.i1 { left:0px; top:0px;*}
#contenedor .icono.i2 { left:0px; top:50px;*}
#contenedor .icono.i3 { left:0px; top:100px;*}
#contenedor .icono.i4 { left:0px; top:150px;*}
#contenedor .icono.i5 { left:100px; top:0px;*}
#contenedor .icono.i6 { left:100px; top:50px;*}
</style>
En este caso, mientras siempre asignes las clases de los enlaces en orden (sin importar que icono tenga adentro), siempre deberían respetar el orden que le asignas.
__________________
oohh... quisiera ser godines!!!

Etiquetas: alinear, izquierda
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 06:37.