Foros del Web » Creando para Internet » CSS »

capas centradas en todos los navegadores

Estas en el tema de capas centradas en todos los navegadores en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 10/03/2009, 07:47
 
Fecha de Ingreso: noviembre-2006
Mensajes: 13
Antigüedad: 11 años
Puntos: 0
capas centradas en todos los navegadores

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!!!!
  #2 (permalink)  
Antiguo 10/03/2009, 07:56
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.462
Antigüedad: 15 años, 4 meses
Puntos: 2098
Respuesta: capas centradas en todos los navegadores

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.
  #3 (permalink)  
Antiguo 11/03/2009, 05:00
 
Fecha de Ingreso: noviembre-2006
Mensajes: 13
Antigüedad: 11 años
Puntos: 0
Respuesta: capas centradas en todos los navegadores

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????
  #4 (permalink)  
Antiguo 11/03/2009, 05:15
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.462
Antigüedad: 15 años, 4 meses
Puntos: 2098
Respuesta: capas centradas en todos los navegadores

Para el centrado, solo con poner en #contenedor text-align:center tendrías suficiente.
  #5 (permalink)  
Antiguo 11/03/2009, 06:18
 
Fecha de Ingreso: noviembre-2006
Mensajes: 13
Antigüedad: 11 años
Puntos: 0
Respuesta: capas centradas en todos los navegadores

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.
  #6 (permalink)  
Antiguo 11/03/2009, 06:24
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.462
Antigüedad: 15 años, 4 meses
Puntos: 2098
Respuesta: capas centradas en todos los navegadores

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:
Ver original
  1. <div id="contenedor">
  2. <div id="capaImagen"><img src="algo.jpg" />Texto Imagen</div>
  3. <div id="capaImagen"><img src="algo.jpg" />Texto Imagen</div>
  4. <div id="capaImagen"><img src="algo.jpg" />Texto Imagen</div>
  5. <div id="capaImagen"><img src="algo.jpg" />Texto Imagen</div>
  6. </div>
Que por cierto, capaImagen debería ser una clase en realidad, no me dí cuenta antes al ponerlo.
  #7 (permalink)  
Antiguo 11/03/2009, 07:04
 
Fecha de Ingreso: noviembre-2006
Mensajes: 13
Antigüedad: 11 años
Puntos: 0
Respuesta: capas centradas en todos los navegadores

Cita:
Iniciado por Bonez Ver Mensaje
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:
Ver original
  1. <div id="contenedor">
  2. <div id="capaImagen"><img src="algo.jpg" />Texto Imagen</div>
  3. <div id="capaImagen"><img src="algo.jpg" />Texto Imagen</div>
  4. <div id="capaImagen"><img src="algo.jpg" />Texto Imagen</div>
  5. <div id="capaImagen"><img src="algo.jpg" />Texto Imagen</div>
  6. </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:
Ver original
  1. <div class="divAllWidth">                      
  2.     <div class="divOpt" id="Option1" >                     
  3.         <div class="divIcon"><img src="algo.jpg" alt=" " border="0" class="icon_list" title=" " />                                             
  4.         </div>
  5.         <div class="divText">1.-&nbsp;Alcalde
  6.         </div>                     
  7.     </div>
  8.    
  9.     <div class="divOpt" id="Option2" >                     
  10.         <div class="divIcon"><img src="algo.jpg" alt=" " border="0" class="icon_list" title=" " />                                             
  11.         </div>
  12.         <div class="divText">2.-&nbsp;Presidencia e Interior
  13.         </div>                     
  14.     </div>
  15.    
  16.     <div class="divOpt" id="Option3" >                     
  17.         <div class="divIcon"><img src="algo.jpg" alt=" " border="0" class="icon_list" title=" " />                                             
  18.         </div>
  19.         <div class="divText">3.-&nbsp;Cultura y Deportes
  20.         </div>                     
  21.     </div>
  22.  
  23.     </div>

y el css asociado:
Código css:
Ver original
  1. .divAllWidth{ width:98%; text-align:center; border:5px solid #cc0000;}  
  2. .divOpt{   float:left; width:12em; padding:10px; border:5px solid #e5e5e5}
  3. /*estas dos estan dentro de divOpt asi que no debieran tergiversar nada*/
  4. .divIcon{}
  5. .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
  #8 (permalink)  
Antiguo 11/03/2009, 07:05
 
Fecha de Ingreso: noviembre-2006
Mensajes: 13
Antigüedad: 11 años
Puntos: 0
Respuesta: capas centradas en todos los navegadores

por cierto, la clase "icon_list" de la imagen lo unico que hace es ponerle un width y un height correcto...
  #9 (permalink)  
Antiguo 12/03/2009, 07:10
 
Fecha de Ingreso: noviembre-2006
Mensajes: 13
Antigüedad: 11 años
Puntos: 0
Respuesta: capas centradas en todos los navegadores

A nadie se le ocurre nada????
  #10 (permalink)  
Antiguo 12/03/2009, 09:05
 
Fecha de Ingreso: noviembre-2007
Ubicación: Madrid
Mensajes: 96
Antigüedad: 10 años
Puntos: 2
Respuesta: capas centradas en todos los navegadores

Prueba con esto:

Código:
margin-left:auto;
margin-right:auto;
juega con tus clases, no se si te servirá.
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:51.