capas centradas en todos los navegadores

[saraal]

Hola, y gracias por anticipado a los que por lo menos me lean. Estoy trabajando en una web que debe ser accessible y necesito hacer algo que aparentemente parece una chorrada pero la verdad es que yo no encuentro solución para ie, para los demas navegadores no tengo problemas.
Para no extenderme mucho básicamente os cuento que necesito un contendor que debe ocupar el máximo de la pantalla (variable segun sabemos todos en base a la resoluciónde cada uno) y que a su vez debe albergar un tipo de contenedor que lleva una imagen. En algunas páginas puede mostrar 2 imágenes (que siempre deberán aparecer centradas) y en otras ocasiones pueden aparecer muchas más. En todos los casos debe poner en fila tantas imágenes como quepan en la resolución y siempre centradas por cada fila. Es decir, si tienen que salir 5 imágenes en un monitor de 800x600 me cabrán 3 en la primera fila y dos en la segunda, pero en un monitor de los de ahora panorámicos pues si caben las 5 en una misma linea las tiene que poner... y siempre centradas respecto al contenedor principal, el centrado solamente lo quiero horizontal, el vertical me da igual.

Intento poner un par de imágenes pero no me deja!!! Espero haberme explicado bien.

Quizá sea una chorrada pero lo que en otros navegadores simplemente con un display:inline (en el de fuera) y display:inline-table (en los pequeños) me funciona correctamente en ie no me va ayuda por favorrrr!!!!

[pzin]

Lo que puedes hacer son capas flotadas en tu contenedor.

Sería algo así:

Código:

#contenedor{
width:100%;
}
#capaImagen{
float:left;
width:200px;
}

Así se colocarán una al lado de otra, y en caso de no haber suficiente espacio, se muestran en la siguiente "fila", y así sucesivamente.

[saraal]

Gracias por contestarme, eso ya lo he probado pero no centra las imágenes, es decir, las filas que salen "completas" no se nota el centrado... pero las que salen incompletas con ese código las pone a la izquierda y no centradas...
¿se os ocurre alguna otra manera????

[pzin]

Para el centrado, solo con poner en #contenedor text-align:center tendrías suficiente.

[saraal]

Si, lo he probado pero lo único que centra son los textos que pongo debajo de las imágenes, las imagenes las "flota" a la izquierda.

[pzin]

En teoría tal como te he dicho debería de funcionar.

¿La estructura del HTML como la tienes? Debería de ser algo así:

Código html:

<div id="contenedor">
<div id="capaImagen"><img src="algo.jpg" />Texto Imagen</div>
<div id="capaImagen"><img src="algo.jpg" />Texto Imagen</div>
<div id="capaImagen"><img src="algo.jpg" />Texto Imagen</div>
<div id="capaImagen"><img src="algo.jpg" />Texto Imagen</div>
</div>
 

Que por cierto, capaImagen debería ser una clase en realidad, no me dí cuenta antes al ponerlo.

[saraal]

Iniciado por Bonez

En teoría tal como te he dicho debería de funcionar.

¿La estructura del HTML como la tienes? Debería de ser algo así:

Código html:

<div id="contenedor">
<div id="capaImagen"><img src="algo.jpg" />Texto Imagen</div>
<div id="capaImagen"><img src="algo.jpg" />Texto Imagen</div>
<div id="capaImagen"><img src="algo.jpg" />Texto Imagen</div>
<div id="capaImagen"><img src="algo.jpg" />Texto Imagen</div>
</div>
 

Que por cierto, capaImagen debería ser una clase en realidad, no me dí cuenta antes al ponerlo.

Mira, mi codigo de ejemplo:

Código html:

<div class="divAllWidth">                       
    <div class="divOpt" id="Option1" >                      
        <div class="divIcon"><img src="algo.jpg" alt=" " border="0" class="icon_list" title=" " />                                              
        </div>
        <div class="divText">1.-&nbsp;Alcalde
        </div>                      
    </div>
    
    <div class="divOpt" id="Option2" >                      
        <div class="divIcon"><img src="algo.jpg" alt=" " border="0" class="icon_list" title=" " />                                              
        </div>
        <div class="divText">2.-&nbsp;Presidencia e Interior
        </div>                      
    </div>
    
    <div class="divOpt" id="Option3" >                      
        <div class="divIcon"><img src="algo.jpg" alt=" " border="0" class="icon_list" title=" " />                                              
        </div>
        <div class="divText">3.-&nbsp;Cultura y Deportes
        </div>                      
    </div>
 
    </div>
 

y el css asociado:

Código css:

.divAllWidth{ width:98%; text-align:center; border:5px solid #cc0000;}  
.divOpt{   float:left; width:12em; padding:10px; border:5px solid #e5e5e5}
/*estas dos estan dentro de divOpt asi que no debieran tergiversar nada*/
.divIcon{}
.divText{height:2em;}
 

Estoy probando en ie6 ¿eh? en los demas navegadores no tengo problemas utilizando el display con los valores que puse en el mensaje inicial, pero este codigo en ie6 no me centra las imagenes

[saraal]

por cierto, la clase "icon_list" de la imagen lo unico que hace es ponerle un width y un height correcto...

[saraal]

A nadie se le ocurre nada????

[Jeibi]

Prueba con esto:

Código:

margin-left:auto;
margin-right:auto;

juega con tus clases, no se si te servirá.