Crear div con imagenes

[SPAWN3000]

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.

[rb3m]

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)

[SPAWN3000]

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.

[rb3m]

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/

[Mikmoro]

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).

[rb3m]

Iniciado por Mikmoro

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.

[willyfc]

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.

[Mikmoro]

Y la de cuatro imágenes también por supuesto es flexible. ¿Si no qué sentido tendría usar cuatro imágenes?

[willyfc]

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

[rb3m]

¡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.

[SPAWN3000]

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.

[SPAWN3000]

Por cierto, muchas gracias a todos...

[McPinkY18]

hola pero lo mismo se hace con css esquinas redondeadas :) en la pagina web de _TUll lo aprendi :)

[SPAWN3000]

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

[SPAWN3000]

Iniciado por Mikmoro

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?

[Mikmoro]

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?

[iconogt]

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

[Mikmoro]

¿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.

[iconogt]

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

[Mikmoro]

¿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.