Foros del Web » Creando para Internet » CSS »

Tabla con bordes redondeados + imagen

Estas en el tema de Tabla con bordes redondeados + imagen en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 11/04/2005, 22:39
 
Fecha de Ingreso: abril-2003
Mensajes: 150
Antigüedad: 14 años, 8 meses
Puntos: 1
Tabla con bordes redondeados + imagen

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
  #2 (permalink)  
Antiguo 11/04/2005, 23:54
Avatar de Neuron_376  
Fecha de Ingreso: abril-2005
Mensajes: 1.051
Antigüedad: 12 años, 8 meses
Puntos: 2
Depende de tu metodo actual !

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)
  #3 (permalink)  
Antiguo 12/04/2005, 01:36
 
Fecha de Ingreso: abril-2003
Mensajes: 150
Antigüedad: 14 años, 8 meses
Puntos: 1
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
  #4 (permalink)  
Antiguo 12/04/2005, 03:30
Avatar de kemie  
Fecha de Ingreso: junio-2003
Ubicación: estocolmo<-->mexico
Mensajes: 1.627
Antigüedad: 14 años, 5 meses
Puntos: 1
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.
__________________
::::::::::::::::::::::::::::: WebHostNinja | diseñorama.com::::::::::::::::::::::::::::::
  #5 (permalink)  
Antiguo 12/04/2005, 22:02
Avatar de Neuron_376  
Fecha de Ingreso: abril-2005
Mensajes: 1.051
Antigüedad: 12 años, 8 meses
Puntos: 2
Que padre

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!!
  #6 (permalink)  
Antiguo 13/04/2005, 01:13
 
Fecha de Ingreso: abril-2003
Mensajes: 150
Antigüedad: 14 años, 8 meses
Puntos: 1
Cita:
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?

Cita:
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
  #7 (permalink)  
Antiguo 13/04/2005, 02:25
Avatar de kemie  
Fecha de Ingreso: junio-2003
Ubicación: estocolmo<-->mexico
Mensajes: 1.627
Antigüedad: 14 años, 5 meses
Puntos: 1
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!
__________________
::::::::::::::::::::::::::::: WebHostNinja | diseñorama.com::::::::::::::::::::::::::::::
  #8 (permalink)  
Antiguo 13/04/2005, 13:47
 
Fecha de Ingreso: abril-2003
Mensajes: 150
Antigüedad: 14 años, 8 meses
Puntos: 1
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
  #9 (permalink)  
Antiguo 13/04/2005, 15:09
Avatar de Neuron_376  
Fecha de Ingreso: abril-2005
Mensajes: 1.051
Antigüedad: 12 años, 8 meses
Puntos: 2
Hola!

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
  #10 (permalink)  
Antiguo 14/04/2005, 02:40
 
Fecha de Ingreso: marzo-2005
Mensajes: 74
Antigüedad: 12 años, 8 meses
Puntos: 0
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.
__________________
Salu2
KAYETANO
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 10:35.