Foros del Web » Creando para Internet » CSS »

tabla bordes redondeados + imagen II

Estas en el tema de tabla bordes redondeados + imagen II en el foro de CSS en Foros del Web. Hola todos, Hace unos días necesité ayuda con una tabla y una imgen de fondo y me ayudaron a solucionarlo: http://www.forosdelweb.com/showthread.php?t=287911 Esta tabla pensé que ...
  #1 (permalink)  
Antiguo 16/04/2005, 12:26
 
Fecha de Ingreso: abril-2003
Mensajes: 150
Antigüedad: 14 años, 8 meses
Puntos: 1
tabla bordes redondeados + imagen II

Hola todos,
Hace unos días necesité ayuda con una tabla y una imgen de fondo y me ayudaron a solucionarlo:

http://www.forosdelweb.com/f53/tabla-con-bordes-redondeados-imagen-287911/

Esta tabla pensé que podría hacerla de igual manera pero me doy cuenta que es muy diferente. Quisiera hacer esto:

- Una tabla con bordes
- Las esquinas con bordes redondeados
- la tabla quisiera que usara una imagen de fondo.
- en la parte superior necesito que vaya texto para poderlo actualizar (no imagen de texto).



No sé cómo hacerla. alguien tiene sugerencias?
Agradezco sus comentarios!

Saludos
Liz
  #2 (permalink)  
Antiguo 18/04/2005, 14:51
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 15 años, 1 mes
Puntos: 317
Hola lizfranco :

Puede ser así
Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html><head>
<style>
#alfa{color:fuchsia; font-weight:bold; margin:15px; }
#bravo{background:url("http://www.geocities.com/af1pics/tabla.jpg"); width:209px; height:178px; }
</style>
</head>
<body>

<div id="bravo"><div id="alfa"></div></div>
<br /><br />
<input type="button" onclick="document.getElementById( 'alfa' ).innerHTML = 'QWERTY'" value="QWERTY">
<input type="button" onclick="document.getElementById( 'alfa' ).innerHTML = 'ASDFGH<br>ASDFGH'" value="ASDFGH">

</body></html>
Lo que quiero decir es que el método de poner esquinas redondeadas en las tablas es para que un borde se ajuste automáticamente al contenido si la celda cambia de tamaño.
Pero el ejemplo que pones puede ser más complejo. La imagen -que supongo de fondo- no se va a 'estirar' como los bordes, y eso puede arruinar el diseño; si la tabla debe respetar el tamaño de la imagen de fondo, entonces alcanza con poner los bordes a una imagen y meterla atrás de un DIV.

Ahora, si el fondo es mosaico o se va a acomodar al centro o en alguna esquina ( lo que no funciona en cualquier navegador ), enonces ya es otra cosa.

El método es el mismo que usaste en tu otra tabla, solamente debes modificar los bordes. En las esquinas, la línea curva ( el cuarto decírculo ) debe ser "color borde", hacia 'afuera' debe ser "color fondo de documento", y hacia 'adentro', color transparente. La imagen de fondo será para la tabla y no para la celda central.

saludos

furoya
  #3 (permalink)  
Antiguo 19/04/2005, 09:52
Avatar de RootK
Moderador
 
Fecha de Ingreso: febrero-2002
Ubicación: México D.F
Mensajes: 8.004
Antigüedad: 15 años, 10 meses
Puntos: 50
Mira éste ejemplo:

http://www.maestrosdelweb.com/editorial/cssesquinas/

Salu2
__________________
Nadie roba nada ya que en la vida todo se paga . . .

Exentrit - Soluciones SharePoint & Net
  #4 (permalink)  
Antiguo 19/04/2005, 14:45
 
Fecha de Ingreso: abril-2003
Mensajes: 150
Antigüedad: 14 años, 8 meses
Puntos: 1
Gracias furoya,
Tu solución está muy buena, pero no es lo que busco para este diseño en particular, ya que me gustaría mas adelante por actualizar texto e imagen. Me inclino mas por tu segunda opción.

RootK Gracias por el link. Si mas o menos pienso que por ahí también puede ir mi solución.. pero como dice furoya en mi caso debe ser necesario usar fondo transparante de ser posible porque en teoría la imagen va a cambiar, etonces deber ser un modelo estandar.

Gracias por sus comentarios!!
Liz
  #5 (permalink)  
Antiguo 19/04/2005, 23:44
 
Fecha de Ingreso: abril-2003
Mensajes: 150
Antigüedad: 14 años, 8 meses
Puntos: 1
Hola,
Al fin pude hacerlo.. seguí sus consejos de cortar en pezados los bordes y hacerlos transparentes.
Me costó mucho trabajo cuadrar todo pero al final logré lo que necesitaba.

Bueno, acá se me corrieron las margenes pero funciona bien

http://www.geocities.com/af1pics/bordes_esquinas3.html

Gracias por sus comentarios como siempre chicos
Liz
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 23:02.