Tabla con bordes redondeados + imagen

[lizfranco]

Hola todos,

Bueno tengo un inconveniente que no estoy segura cómo desarrollarlo.
Quiero hacer una imagen como esta:

http://www.geocities.com/af1pics/cuadro.jpg

Y no estoy segura si se puede crear con CSS.

La tabla con bordes redondeados ya sé como crearla con CSS, hasta el momento tengo esto

http://www.geocities.com/af1pics/cuadro2.jpg

Pero de ahí no sé como insertarle la imagen sin que se me corra el top de la tabla, ya que como ven la imagen empieza desde el top del cuadro...

Alguien sabe cómo hacerlo??
Gracias por sus comentarios de antemano,
Liz

[Neuron_376]

Como lo hiciste para hacer el redondeo ?

Dices que el problema es el top, yo para esto uso tablas normales, con 4 esqinas redondeadas con la parte de afuera del color de fuera y el color interno totalmente transparente, entonces el top no se vuelve problema, pero explica como lo haces...

Y si bueno, si estas utilizando un sistema avanzado de CSS, pues ya que, utiliza entonces Layers y asi pones la imagen sobre tu imagen redondada.

(y)

[lizfranco]

mmm no entendí.

Bueno la tabla con bordes redondeados la hice como el ejemplo de esta página:
http://www.neuroticweb.com/recursos/css-rounded-box/
excepto que no utilicé imagen de fondo para rellenar sino le puse color al background.

Como tu dices usando tablas, es como cuando uno crea un botón gráfico verdad?. Así lo pensé en un principio.. pero ya que estoy desarrollando todo en CSS pensé que podría hacer esto así.

Con layers? bueno voy a buscar porque soy bastante nueva en esto...

Gracias Neuron_376,
Liz

[kemie]

liz, puedes poner la imagen del mouse como fondo en tu div principal. si me muestras tu codigo, puedo ver como es la mejor manera.

[Neuron_376]

Ya vi el codigo de CSS, esta padre pero si es avanzado, el unico problema con ese codigo es que no sera compatible con todos los navegadores, y de hehco hasta dentro de los navegadores mas comunes es compatible desde ciertas versiones.

Entonces, bien, si ya tienes eso, entonces si, hazlo con Layers, pero en tu pagina asegurate de poner una notita de que ese sitio esta optimizado para X navegadores, asi nadie se enojara.

De layers, muy facil, busca en yahoo, escontraras muy rapido, aqui en este foro tambien

Suerte!!

[lizfranco]

Iniciado por Neuron_376

el unico problema con ese codigo es que no sera compatible con todos los navegadores, y de hehco hasta dentro de los navegadores mas comunes es compatible desde ciertas versiones.

No!!! debo cambiarlo, sabes algún ejemplo que sea compatible para la mayoría, sino todos los navegadores?

Iniciado por kemie

liz, puedes poner la imagen del mouse como fondo en tu div principal. si me muestras tu codigo, puedo ver como es la mejor manera.

Gracias kemie, pero antes de hacer esto debo cambiar mi código de las tablas porque segun el comentario de Neuron_376 no me conviene usar este código.

Este es el código que tengo:

Código HTML:

<div class="rbroundbox2">
   <div class="rbtop2"><div></div></div>
        <div class="rbcontent2">
	CONTENIDO
        </div>
   <div class="rbbot2"><div></div></div>
</div> 

Código:

.rbroundbox2 { background: #FF6600; }
.rbtop2 div  { background: url('t2tl.gif') no-repeat top left; }
.rbtop2      { background: url('t2tr.gif') no-repeat top right; }
.rbbot2 div  { background: url('t2bl.gif') no-repeat bottom left; }
.rbbot2      { background: url('t2br.gif') no-repeat bottom right; }
.rbtop2 div, .rbtop2, .rbbot2 div, .rbbot2 {
	height: 7px;
	font-size: 1px;
}
.rbcontent2  { 
	margin: 0px 0px 0px 0px; 
}
.rbroundbox2 { 
             margin: 10px 0px 0px 0px;
	width: 212px; 
	\width: 210px;
	w\idth: 209px;
}

Gracias,
Liz

[kemie]

no veo porque tu codigo no seria compatible con algun navegador, a menos de que te refieras a versiones previas a la 4.0 de netscape e ie, y esos navegadores tienen ya alrededor de 7 años de antiguedad y son usados por una minoria inuscula. Fuera de eso, te puedo decir que ese codigo funciona en IE 5.5, IE 6, Netscape 7, Firefox, Mozilla y Opera.

Con respecto al fondo, podrias simplemente definir:
.rbroundbox2 { background: #FF6600 url('mouse.gif') no-repeat 50px 0; }

(ajustando el valor 50px para que te quede en la posicion que quieres. )

espero que te sirva!

[lizfranco]

kemie, me dices entonces que mi código me va a funcionar bien en los navegadores?, yo lo probé en Firefox e IE 6 y me funciona bien...
Y con respecto a lo que necesitaba Si eso era!! Muchas gracias! La imagen me quedó de fondo tal como la quería. Y si, solo tuve que ajustarse la posición y me quedó en la esquina!

Liz

[Neuron_376]

Que bueno leer todos estos comentarios, y que bueno que te funcionano, bien, yo me referia exactamente a eso, en versiones anteriores, natiguas, pero que aun muchas personas utilizan, bueno, que bueno leer esto, y saber que es seguro usar ese metodo, suerte

[kayetano]

Hola

Otra opción sin usar CSS sería usar PHP y las librerías GD, con esto podrías crear una imagen real con la composición que quisieras.