Foros del Web » Creando para Internet » CSS »

Crear div con imagenes

Estas en el tema de Crear div con imagenes en el foro de CSS en Foros del Web. Como maquetar con div redimensionable o flexible con bordes redondeados? y que sea soportado tanto por IE, como firefox. de la siguiente forma: [IMAGEN1]....[IMAGEN3: Repeat-x]....[IMAGEN4] ...
  #1 (permalink)  
Antiguo 06/12/2008, 09:57
Avatar de SPAWN3000  
Fecha de Ingreso: marzo-2008
Ubicación: Bogota
Mensajes: 858
Antigüedad: 9 años, 9 meses
Puntos: 15
Crear div con imagenes

Como maquetar con div redimensionable o flexible con bordes redondeados? y que sea soportado tanto por IE, como firefox.

de la siguiente forma:

[IMAGEN1]....[IMAGEN3: Repeat-x]....[IMAGEN4]

[IMAGEN2].........................................[IMAGEN7]
[IMAGEN2].........................................[IMAGEN7]
[IMAGEN2].........................................[IMAGEN7]
[IMAGEN2]..........[CONTENIDO]..........[IMAGEN7]
[IMAGEN2].........................................[IMAGEN7]
[IMAGEN2].........................................[IMAGEN7]
[IMAGEN2].........................................[IMAGEN7]
[IMAGEN2].........................................[IMAGEN7]

[IMAGEN5]....[IMAGEN6: Repeat-x]....[IMAGEN8]

Las imagenes 1,4,5,8: son esquinas redondeadas.
El resto son bordes. Y la idea es que sea redimensionable.
  #2 (permalink)  
Antiguo 06/12/2008, 15:05
 
Fecha de Ingreso: noviembre-2008
Mensajes: 94
Antigüedad: 9 años
Puntos: 6
Respuesta: Crear div con imagenes

Más o menos así:

html:

<div class="sup_izq"></div>
<div class="sup"></div>
<div class="sup_der"></div>
<div class="izq"></div>
<div class="contenido">
Bla bla bla bla
</div>
<div class="inf_izq"></div>
<div class="inf"></div>
<div class="inf_der"></div>

css:

.sup_izq {
background: url('imagen1.jpg') bottom right no-repeat #000;
width: 10px;
height: 10px;
}

.sup {
background: url('imagen3.jpg') bottom repeat-x #000;
width: 30%; <-- o lo que sea.
height: 10px;
}


.sup_der {
background: url('imagen4.jpg') bottom left no-repeat #000;
width: 10px;
height: 10px;
}

.izq {
background: url('imagen2.jpg') right repeat-y #000;
width: 10px;
}

.der {
background: url('imagen2.jpg') left repeat-y #000;
width: 10px;
}

Bueno, ya te podrás imaginar lo demás (todavía tengo el cerebro desbielado)
  #3 (permalink)  
Antiguo 10/12/2008, 14:24
Avatar de SPAWN3000  
Fecha de Ingreso: marzo-2008
Ubicación: Bogota
Mensajes: 858
Antigüedad: 9 años, 9 meses
Puntos: 15
Respuesta: Crear div con imagenes

Mas o menos eso... Pero tu ejemplo no funciona, Lo probe en firefox y en IExplorer, y nada.

- Yo le crearía un contenedor a los 3 superiores.
- Otro a los que están en el medio(con propiedades: Height:auto!important; Height:400px;min-height:400px;), con esto validamos tanto IE, como Firefox.
- y otro para los inferiores.
  #4 (permalink)  
Antiguo 10/12/2008, 22:49
 
Fecha de Ingreso: noviembre-2008
Mensajes: 94
Antigüedad: 9 años
Puntos: 6
Respuesta: Crear div con imagenes

Claro que no funciona, si todavía tenía un dolorón de cabeza a esa hora y me estaba cayendo de sueño (ya sé que eran como las 4:00pm acá, pero ¡que fin!).

Te respondo de manera mucho más clara, amplia, precisa y hasta con ejemplo y todo en http://robertobaca.net/2008/12/como-...s-a-las-capas/
  #5 (permalink)  
Antiguo 11/12/2008, 00:44
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Crear div con imagenes

Tras el primer mensaje estuve a punto de preguntar: "¿preguntas o afirmas?", porque no me quedaba claro si estabas preguntando algo o afirmando cómo había de hacerse.

No sé exactamente el efecto que se busca, pero para cajas no demasiado grandes, es mucho más simple con una sóla imagen como en este ejemplo, o con sólo 4 imágenes, como en este otro.

rb3m: el ejemplo de tu blog al verlo funcionando tienen un error en el cuadro superior izquierdo (en FF 2).
__________________
Visita mi nueva web idplus.org
  #6 (permalink)  
Antiguo 11/12/2008, 13:04
 
Fecha de Ingreso: noviembre-2008
Mensajes: 94
Antigüedad: 9 años
Puntos: 6
Respuesta: Crear div con imagenes

Cita:
Iniciado por Mikmoro Ver Mensaje
rb3m: el ejemplo de tu blog al verlo funcionando tienen un error en el cuadro superior izquierdo (en FF 2).
Sí. De hecho el error está en todos los navegadores porque recorté mal la imagen que forma la esquina superior izquerda. Lo noté pero ya era tarde y preferí irme a dormir. Lo corregiré esta noche.

La complejidad estriba en que el compañero busca la manera de hacer que la caja sea flexible, que se le pueda dar un ancho en porcentaje para que se adapte al ancho del navegador. O por lo menos eso entendí. Si fuera de ancho fijo entonces sí es mucho mejor usar la técnica de una o cuatro imágenes.
  #7 (permalink)  
Antiguo 11/12/2008, 13:15
Avatar de willyfc  
Fecha de Ingreso: octubre-2008
Ubicación: Santa Cruz - Bolivia
Mensajes: 662
Antigüedad: 9 años, 2 meses
Puntos: 40
Respuesta: Crear div con imagenes

la técnica de una imagen que usa Mikel es flexible ve al vínculo y pruebala yo mismo estoy usando la de 1 imagen y funciona perfectamente es cuestión de saber aplicarla, pero estiran hasta donde quieras que llegen, entonces no encuentro necesidad de u imágenes o más de cuatro, salvo algún caso especial.
__________________
WFC
codigo82
  #8 (permalink)  
Antiguo 11/12/2008, 13:20
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Crear div con imagenes

Y la de cuatro imágenes también por supuesto es flexible. ¿Si no qué sentido tendría usar cuatro imágenes?
__________________
Visita mi nueva web idplus.org
  #9 (permalink)  
Antiguo 11/12/2008, 13:28
Avatar de willyfc  
Fecha de Ingreso: octubre-2008
Ubicación: Santa Cruz - Bolivia
Mensajes: 662
Antigüedad: 9 años, 2 meses
Puntos: 40
Respuesta: Crear div con imagenes

hola Mikel

la verdad que la de cuatro de imágenes no he probado a utilizarla me agrado mas la de una imagen por eso me atreví a utilizarla y adaptarla a mi diseño, me pareció muy bueno el trabajo felicidades
__________________
WFC
codigo82
  #10 (permalink)  
Antiguo 11/12/2008, 16:52
 
Fecha de Ingreso: noviembre-2008
Mensajes: 94
Antigüedad: 9 años
Puntos: 6
Respuesta: Crear div con imagenes

¡Ah! ¡Qué ingenioso el de una sola imagen! No se me habría ocurrido hacerlo así. Una sola imagen de fondo y después cada capa en las esquinas cambia la posición a top right, bottom right, etc.

Gracias.
  #11 (permalink)  
Antiguo 12/12/2008, 19:28
Avatar de SPAWN3000  
Fecha de Ingreso: marzo-2008
Ubicación: Bogota
Mensajes: 858
Antigüedad: 9 años, 9 meses
Puntos: 15
Respuesta: Crear div con imagenes

Exacto, era lo que buscaba... como hacerlo con una sola imagen... y luego solo tomar los pedazos que neceitas de la imagen y mostrarlos... Me parece que es la mejor, y deberia ser la unica tecnica estandar para estos diseños. ya que con varias imagenes, algunas raras veces no se carga alguna... sobre todo si el servidor es linux puede tener problema de mayusculas y minusculas, o de ubicacion de directorios... mas aun si trabajamos con jsp, y peor aun si en vez de paginas con java... son documentos java xml.
  #12 (permalink)  
Antiguo 12/12/2008, 19:29
Avatar de SPAWN3000  
Fecha de Ingreso: marzo-2008
Ubicación: Bogota
Mensajes: 858
Antigüedad: 9 años, 9 meses
Puntos: 15
Respuesta: Crear div con imagenes

Por cierto, muchas gracias a todos...
  #13 (permalink)  
Antiguo 12/12/2008, 23:06
 
Fecha de Ingreso: diciembre-2008
Ubicación: Cordoba
Mensajes: 127
Antigüedad: 9 años
Puntos: 17
Respuesta: Crear div con imagenes

hola pero lo mismo se hace con css esquinas redondeadas :) en la pagina web de _TUll lo aprendi :)
  #14 (permalink)  
Antiguo 17/12/2008, 12:24
Avatar de SPAWN3000  
Fecha de Ingreso: marzo-2008
Ubicación: Bogota
Mensajes: 858
Antigüedad: 9 años, 9 meses
Puntos: 15
Respuesta: Crear div con imagenes

Si, se puede hacer con CSS... Pero para mis buena visión, no tienen la misma calidad que hacerlo con imágenes. Es cierto, se puede simular sobra con una capa inferior, y hasta degradado si se usa varias capas. Pero no se ve muy realista!

Ya había hecho tiempo a tras algo con solo CSS, pero en este caso me quedo con las imágenes...
  #15 (permalink)  
Antiguo 17/12/2008, 12:37
Avatar de SPAWN3000  
Fecha de Ingreso: marzo-2008
Ubicación: Bogota
Mensajes: 858
Antigüedad: 9 años, 9 meses
Puntos: 15
Respuesta: Crear div con imagenes

Cita:
Iniciado por Mikmoro Ver Mensaje
Tras el primer mensaje estuve a punto de preguntar: "¿preguntas o afirmas?", porque no me quedaba claro si estabas preguntando algo o afirmando cómo había de hacerse.

No sé exactamente el efecto que se busca, pero para cajas no demasiado grandes, es mucho más simple con una sóla imagen como en este ejemplo, o con sólo 4 imágenes, como en este otro.

rb3m: el ejemplo de tu blog al verlo funcionando tienen un error en el cuadro superior izquierdo (en FF 2).
Y para modelos Líquidos?
  #16 (permalink)  
Antiguo 17/12/2008, 12:55
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Crear div con imagenes

Si miras bien el comcepto de cómo están hechos, verás que te sirven exactamente igual. Creo que eso ya se habló con lo del tamaño dinámico, ¿no?
__________________
Visita mi nueva web idplus.org
  #17 (permalink)  
Antiguo 17/12/2008, 13:34
Avatar de iconogt  
Fecha de Ingreso: septiembre-2004
Ubicación: Guatemala
Mensajes: 573
Antigüedad: 13 años, 3 meses
Puntos: 4
Respuesta: Crear div con imagenes

lo de una sola imagen queda bien pero aun es un poco pesadita "peor si es un .png", pues seria mejor recortarla no? asi lo hago yo

Código:
<div id="contenedor">

<div id="superior">
 <!-- aca el primer borde superior como fondo --> 
</div>

<div id="centro">
<!-- aca como fondo una imagen repetida en (y) -->
</div>

<div id="inferior">
<!-- la misma operacion llamando la imagen como fondo que no se repita -->
</div>

</div>
Eso sería todo! luego con unas cuantas declaraciones para llamar las imagenes como fondo y listo, no pesa tanto y es compatible con todos los navegadores

ejem.
Código:
div#contenedor {
width : 200px;
height : auto;
margin : 1cm auto; /* para centrar */
padding : ?;
background-color : #fff;
color : #000;
}

div#superior{
margin : 0;
padding : 0;
width : 200px;
height : 20px; /* por ejem */
background : #fff url('../directorio/borde_sup.jpg') no-repeat top left;
color : #000;
}

div#centro {
background : #fff url('../directorio/centro.jpg') repeat-y top left;
color : #000;
margin : 0;
padding : ?;
width : 200px;
height : 250px;
}

div#inferior {
margin : 0;
padding : 0;
width : 200px;
height : 20px; /* por ejem */
background : #fff url('../directorio/borde_inf.jpg') no-repeat top left;
color : #000;
}
Como les digo a mi me funciona perféctamente de esa forma y no hay que complicarse tanto la vida...
__________________
_______
Jorge Rojas.
  #18 (permalink)  
Antiguo 17/12/2008, 17:18
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Crear div con imagenes

¿Has mirado por casualidad el peso de la imagen de mi ejemplo? Sí, pesa 2.241 bytes, es decir, 2,2kb. ¿Estás seguro de conseguir que tus imágenes pesen en total menos que eso?

El segundo ejemplo, que está hecho con 4 imágenes (supongo que lo has leído), tiene en conjunto sumando las 4 imágenes 2.081 bytes (2kb), es decir, sólo 0,2 kb menos.

Aun así, es más rápida una sola petición al servidor que 4 (y estamos hablando de milisegundos, claro, porque hablamos de una imagen de 2 kb).

En fin, que maneras de hacerlo hay muchas, pero para afirmar "esta es mejor que la otra" hay que estar muy seguro.
__________________
Visita mi nueva web idplus.org

Última edición por Mikmoro; 17/12/2008 a las 17:30
  #19 (permalink)  
Antiguo 22/12/2008, 22:04
Avatar de iconogt  
Fecha de Ingreso: septiembre-2004
Ubicación: Guatemala
Mensajes: 573
Antigüedad: 13 años, 3 meses
Puntos: 4
Respuesta: Crear div con imagenes

Si, pero la solución que has dado es para un alto fijo, y la opción que di yo es un alto automático... pero bueno, como decias anteriormente hay varias opciones, cuestion de gustos
__________________
_______
Jorge Rojas.
  #20 (permalink)  
Antiguo 23/12/2008, 03:42
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Crear div con imagenes

¿Otra vez? ¿pero dónde ves tu un alto fijo?
http://www.araudi.net/ejemplos/caja_sombra.html

Menuda gracia tendría decir que hago las 4 esquinas con una sola imagen, si fuera un tamaño estático y sólo se pudiera hacer un cuadro del tamaño de la imagen. Eso no sería 4 esquinas con una imagen, eso sería un imagen de fondo y punto. Por dios.
__________________
Visita mi nueva web idplus.org

Última edición por Mikmoro; 23/12/2008 a las 03:55
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

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 04:29.