Alineación de imágenes con CSS

[Senku]

Hola,

Lo primero disculpad si esto es muy simple y ya se discutió o está resuelto en FAQs, pero es que no lo he encontrado con una búsqueda por encima...

En fín, al grano. Estoy empezando con una página que tiene un index.htm como "start site" y que tiene un título, cuatro imágenes debajo del título y un par de botoncillos de "escoge idioma" y que enlazan con las dos versiones que tendrá la web, una para cada idioma.

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.), y no tengo ni pajolera idea pues me encuentro con problemitas del tipo que os cuento ahora:

Las cuatro imágenes son de 250x250 y deben ir en paralelo horizontalmente con ligera separación entre ellas y con los extremos de la pantalla. Punto 1, mi portátil tiene la pantalla de 15" widescreen. Pruebo la página en el portátil de mi novia, que tiene una de 15" normal y las imágenes se descolocan, montándose unas sobre otras. Y os cuento qué he hecho (probablemente una barbaridad) para colocar las imágenes. En el HTML simplemente he puesto las etiquetas de las 4 imágenes y les he dado una ID a cada una y en la hoja CSS he cogido cada clase y le he dado unos valores de posición en porcentajes, que es lo que había leído que dinamiza las cosas para diferentes resoluciones o pantallas. Para más señas he probado primero a aplicar todos los porcentajes en base a "left" pero eso siempre descuadra las cosas hacia la izquierda en la 15" normal, así que hice las dos de la izquierda basadas en "left" y las otras dos en "right". La pega es que para que en la no-widescreen se vean bien (teniendo en cuenta que la resolución es de 1024 y entre todas las imágenes ya suman 1000 pixels, solo quedan 24 pixels para los pequeños espacios entre ellas y con los márgenes) en la widescreen, con los porcentajes, siempre el espacio entre las dos del medio es mayor que en los extremos o entre las dos de la izquierda o de la derecha. Un poco chafa, en resumen.

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.

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.

Mil gracias y disculpas por el tostón.

Un saludo

[Calizman]

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

Ahora si, vamos por partes, te parece?

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!

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.

...

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:

<ul>
  <li>
    <img src="imagen1.jpg">
  </li>
  <li>
    <img src="imagen2.jpg">
  </li>
  <li>
    <img src="imagen3.jpg">
  </li>
  <li>
    <img src="imagen4.jpg">
  </li>
<ul>
 

Código CSS:

ul {
display: block;
margin: 0px auto; -- Esto hace que todo este centrado --
padding: 0px;
}
ul li {
float: left; -- Esto hace que se pongan en linea --
margin: 5px; -- Esto hace que se separen un poco --
}
 

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!!

[Senku]

Hola!

Muchas gracias por la rápida respuesta.

He aplicado el código a ambos archivos y luego también apliqué el list-style: none para quitar los puntitos de la lista. No lo he probado en la pantalla "normal" a 1024x768 pero seguro que funciona bien, pero a mí, con la "widescreen" a 1280x800 se me siguen apilando las imágenes a la izquierda del todo, aunque perfectamente alineadas.

En la prueba que hice, anterior a tu solución, las tenía todas dentro de un contenedor de 1024 de ancho y centré el contenedor y se ve igual que en un monitor normal y centrado -claro- pero bueno, el fondo se expande hasta los límites de la pantalla como debe pero las imágenes están centradas, con lo que quedan unos 140 píxeles de cada lado sin usar: un poco feo. Lo que yo quiero es que en una "ws" las imágenes se espacien un poco entre sí para que queden distribuidas con cierta homogeneidad y cuando las vea un usuario con monitor "normal" se junten hacia el centro... No sé si me explico.

A ver si se te/os ocurre algo?

Muchas gracias!

PD.: Evolución y capacidad de adaptación: como no tengo mucha capacidad de síntesis he aprendido a escribir muy rápido, por lo que los tostones no me cuestan nada ;)

Edito: Este es el código de mi modelo anterior, que se ve igual de centrado en "ws" que en "normal":

Iniciado por HTML

<body>
<div id="hauptbilder">
<div class="bildbox"><img src="bilder/a01.jpg"</div>
<div class="bildbox"><img src="bilder/a03.jpg"</div>
<div class="bildbox"><img src="bilder/a04.jpg"</div>
<div class="bildbox"><img src="bilder/a02.jpg"</div>
</div>
</body>

Iniciado por CSS

body {
background-color: #401300;
}
#hauptbilder {
margin: 0 auto;
width: 1024px;
height: 250px;
}
.bildbox {
float: left;
margin: 0;
padding: 5.5% 0 0 0.5%;
}

[Calizman]

Haber haber...

Lo que se me ocurre, es que cambies el width de 1024, por un width de 100%, asi el contenedor se adaptara a la resolucion de la pantalla y demas cosas... Luego en vez de darle 5% a el padding, podrias ponerle 15px a magin-left y a margin-right.

Posiblemente eso te ayude mas... Porque realmente no entiendo eso de el WS y esas cosas... Bueno, espero te sirva el aporte!

Hasta Luego!!

[Senku]

Pues no, no funciona... A ver si consigo hacer un chanchullo, que a cabezón no me gana nadie :)

Muchas gracias de todas formas!

[jomaruro]

Hola:

Iniciado por Senku

que a cabezón no me gana nadie :)

¿Estás seguro?

Prueba esto en el CSS:

Código:

#hauptbilder {
    width: 1024px;
    margin: 0 auto;
    border: 1px solid #000;
}

#caja1, #caja2, #caja3, #caja4{
    width: 250px;
    height: 250px;
    margin-left: 5px;
    float: left;
}

#caja1{
    background-color: green;
    margin-left: 5px;
}

#caja2{
    background-color: yellow;
}

#caja3{
    background-color: blue;
}

#caja4{
    background-color: red;
}

.corte {
    clear: both;
}

Y este HTML:

Código:

<div id="hauptbilder">
    <div id="caja1"></div>
    <div id="caja2"></div>
    <div id="caja3"></div>
    <div id="caja4"></div>
    <div class="corte" />
</div>

Después tendrás que adaptarlo a tus necesidades.

Saludos.

[Adryi19]

interesante tu codigo CaLiZzZ yo tambien tenia una duda algo parecida

Gracias

[Calizman]

Siempre es bueno ayudar

[Senku]

Iniciado por jomaruro

Hola:



¿Estás seguro?

Prueba esto en el CSS:

Es una expresión hombre, en realidad tengo poca paciencia en general, salvo cuando sé que se puede hacer algo y lo tengo metido entre ceja y ceja. A pesar de ser un principiante total, ¡me pasé ayer todo el día probando cosas absurdas a ver si alguna era la solución! ;)

Bueno, el caso es que he adaptado el código y es una solución -seguro que en cuanto a lenguaje y semántica, mucho mejor que la mía- que viene a hacer lo mismo que conseguía con mi código. En cuanto le das al contenedor que contiene las 4 cajas para las imágenes un ancho de 1024px o el equivalente en em, que creo que son como 63em o algo así, pues efectivamente, en una pantalla normal a 1024px se ve bien y centrado y en una panorámica a 1280, pues también, pero no lo hace dinámicamente como ocurre si metes las imágenes en una tabla.

Yo pensé que con "em" o "%" el navegador interpretaría la variación en el ancho de la página 1024->1280->... y escalaría el espaciado apropiadamente, pero me llevé el palo al ver los resultados, en parte porque pensé que con CSS serían más sencillas estas cosas, para eso queríamos librarnos de las tablitas de marras...

A ver si esto ayuda:

Lo que pasa con mi código y el de jomaruro es esto:

Pantalla 15" norm. [_°_°_°_°_]
(imágenes 1000px+espacios entre imágenes 4,8x3=14,4px+laterales4,8x2=9,6px; total 1024px)
Pantalla 15" pano. [___°_°_°_°___]
(imágenes 1000px+espacios entre imágenes 4,8x3=14,4px+laterales132,8x2=265,6px; total 1280px)

Resumiendo: en la panorámica sobra un trocito de pantalla por cada lado y aunque la solución es buena y las imágenes están centradas en ambos tipos de pantalla, las imágenes podían estar más espaciadas en la versión panorámica pero sin perjudicar la distribución en la normal, tal que así:

Pantalla 15" norm. [_°_°_°_°_]
(imágenes 1000px+espacios entre imágenes 4,8x3=14,4px+laterales4,8x2=9,6px; total 1024px)
Pantalla 15" pano. [__°__°__°__°__]
(imágenes 1000px+espacios entre imágenes 56x3=168px+laterales56x2=112px; total 1280px)

Creo que con esto queda explicada definitivamente la idea... xD

A ver si entre todos conseguimos algo. Si no, con el código de jomaruro o el mío queda arreglado de forma, si no óptima para mi gusto, al menos sí satisfactoria.

En cualquier caso, muchas gracias a todos por las colaboraciones :)

Un saludo