Ver Mensaje Individual
  #2 (permalink)  
Antiguo 08/04/2009, 19:54
Avatar de Calizman
Calizman
Organiza competencias CSS
 
Fecha de Ingreso: octubre-2008
Ubicación: Ciudad de Guatemala, Guatemala
Mensajes: 1.122
Antigüedad: 15 años, 6 meses
Puntos: 83
Respuesta: Alineación de imágenes con CSS

Hola!! Antes de contestarte... Cuanto tiempo te tardaste en escribir eso eh?

Ahora si, vamos por partes, te parece?
Cita:
El caso es que como he querido hacerla "a palo" con HTML+CSS (que dicen que es como se aprende...), no con programita visual (FP, DW, etc.),
Te sugiero, que comienzes al reves, yo asi aprendi (es Mi opinion propia...) primero use un editor WYGIWYS (como KompoZer) y luego, cuando ya sabia mas sobre el tema, entonces comenze a usar un editor de texto. Creo que asi aprendimos muchos!

Cita:
Para más inri, lo que estoy tratando de hacer es una versión CSS de una web ya hecha, pero que está basada en los (atención sensibles, no leer más) míticos frames, iframes y, como no, tablas... Sí, lo que leeis. Bien, el caso es que esta misma página inicial que estoy haciendo, usando una tablita para colocar las imágenes (sacrilegio mortal, lo se!), no tiene mayor problema al pasar de no-WS a WS ya que las imágenes están situadas centradas en cada una de las 4 celdas de la tablita... et voilà, el espaciado es constante en ambos casos.
...

Cita:
Todo este rollo no es para que os ardan los ojos, es para darle un poco de idea a la historia, que queréis, sintetizo mal... La pregunta es: ¿Puedo y, si sí, cómo puedo hacer que las 4 imágenes estén centradas y tengan un espaciado homogéneo usando CSS? Supongo que usando cajas, pero como no tengo mucha idea, un ejemplito práctico me vendría fetén.
En este caso, lo mejor es usar listas desordenadas, para ordenar las imagenes. te dejo un ejemplo para que lo veas.

Código HTML:
Ver original
  1. <ul>
  2.   <li>
  3.     <img src="imagen1.jpg">
  4.   </li>
  5.   <li>
  6.     <img src="imagen2.jpg">
  7.   </li>
  8.   <li>
  9.     <img src="imagen3.jpg">
  10.   </li>
  11.   <li>
  12.     <img src="imagen4.jpg">
  13.   </li>
  14. <ul>

Código CSS:
Ver original
  1. ul {
  2. display: block;
  3. margin: 0px auto; -- Esto hace que todo este centrado --
  4. padding: 0px;
  5. }
  6. ul li {
  7. float: left; -- Esto hace que se pongan en linea --
  8. margin: 5px; -- Esto hace que se separen un poco --
  9. }

Cita:
Mil gracias y disculpas por el tostón
Mil de nada, y no te preocupes, estas disculpado

Espero que te sirva, seguramente si te servira porque yo lo probé y si funciono...

Hasta Luego!!
__________________
[ Mi Sitio Personal ]
"La felicidad no es una estacion de llegada... Es un modo de viajar"
Tom Schreiter