Foros del Web » Creando para Internet » CSS »

Caja con imagenes

Estas en el tema de Caja con imagenes en el foro de CSS en Foros del Web. Hola, no se si me explicado muy bien con el titulo, pero resulta que acabo de empezar en esto del css y he de hacer ...
  #1 (permalink)  
Antiguo 16/06/2011, 08:19
 
Fecha de Ingreso: junio-2011
Mensajes: 13
Antigüedad: 5 años, 11 meses
Puntos: 0
Caja con imagenes

Hola, no se si me explicado muy bien con el titulo, pero resulta que acabo de empezar en esto del css y he de hacer una pagina web para el colegio.
Resulta, que me encaprichado en hacer un fondo un tanto especial lo que quiero hacer es una imagen de fondo con un recuadro blanco en medio y hay escribir el texto. Quiero que quede como en la imagen puesto abajo, y en lo blanco que se ve escribir.

http://imageshack.us/photo/my-images/96/forot.jpg
  #2 (permalink)  
Antiguo 16/06/2011, 11:12
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 7 años, 11 meses
Puntos: 269
Respuesta: Caja con imagenes

Hola ruben:

Código HTML:
Ver original
  1. <div id="contenedor"></div>
  2. </body>
Código CSS:
Ver original
  1. body{background:url(ruta/laimagen.xxx);}
  2. #contenedor{ width: ...; margin: ... ; box-shadow: ... ; /* background: ... ;*/}

box-shadow es css3 y no funciona en todos los navegadores:
http://www.css3.info/preview/box-shadow/
Si no queda otra pones el fondo como imagen, generando divs extra y un sprite css o bien usando la imagen entera como fondo y height: ... ; pero ya te va a pesar mucho.

Saludos.
  #3 (permalink)  
Antiguo 17/06/2011, 05:27
 
Fecha de Ingreso: junio-2011
Mensajes: 13
Antigüedad: 5 años, 11 meses
Puntos: 0
Respuesta: Caja con imagenes

y no hay otra manera de ponerlo?
  #4 (permalink)  
Antiguo 17/06/2011, 09:24
 
Fecha de Ingreso: junio-2011
Mensajes: 13
Antigüedad: 5 años, 11 meses
Puntos: 0
Respuesta: Caja con imagenes

Al final me decidido por hacer la imagen de fondo ya hecha con el recuadro, pero resulta que ahora me gustaría saber como hacer que la parte de abajo se adapte a lo que ocupe el tamaño
  #5 (permalink)  
Antiguo 20/06/2011, 00:08
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 7 años, 11 meses
Puntos: 269
Respuesta: Caja con imagenes

Hola ruben:

Podes hacer que el div crezca y tener al mismo tiempo una imagen como fondo con los bordes degradados (en reemplazo de box-shadow) usando un sprite css y añadiendo cajas extras para mostrar los bordes.

Este ejemplo será útil para ilustrar el caso, luego lo completas a tu necesidad:
1ro en photoshop o similar creas la imagen para el sprite. Luego...

Código HTML:
Ver original
  1. <div class="top"></div> <!-- aca mostras la parte de la imagen con los bordes izq y der superiores -->
  2. <div class="middle">... contenido ...</div>
  3. <div class="bottom"></div><!-- aca mostras la parte de la imagen con los bordes izq y der inferiores-->
Código CSS:
Ver original
  1. /*el ancho y el sprite es comun para los 3 elementos*/
  2. .top, .middle, .bottom {width:...;  background:url('ruta/imgsprite.xxx') 0 0 no-repeat;}
  3. /*el alto de top y bottom generalmente es el mismo, middle crecerá según el contenido*/
  4. .top, .bottom{height:...;}
  5.  
  6. .top{
  7. background-position: ... ;
  8. }
  9. .middle{
  10. background-position:... ;
  11. background-repeat:repeat-y; /*repetis la imagen en y para que crezca según el contenido*/
  12. }
  13. .bottom{
  14. background-position: ... ;
  15. }

O usas esto, o usas css3 o usas una imagen fija como venis haciendo. Otra forma no conozco.

En el link que te pase en la respuesta anterior tenes un ejemplo de como hacer andar un sprite, si aún así siguen las dudas, podes leer el material que sugiero en ese mismo link, si aún así no logras entender como trabajar con sprites pregunta y lo vemos. Pero primero por favor lee el material.

Un saludo.

Etiquetas: caja, imagenes
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 12:37.