En esta oportunidad vamos a explicar como utilizar las hojas de estilo para realizar celdas con puntas redondeadas sin la necesidad de utilizar imágenes.
Antes de iniciar es necesario especificar que este ejemplo funciona con Internet Explorer únicamente.
Para inicar es necesario incluir el siguiente estilo en el documento que contendrá la celda:
<style type="text/css">
<!--
body {text-align:center}
#ttt {width:396;height:1;background:D3D3D1;}
#tt {width:398;height:1;background:EFEFEF; border-right:1px solid D3D3D1;border-left:1px solid D3D3D1;}
#t {width:400;background:EFEFEF;border-right:1px solid D3D3D1; border-left:1px solid D3D3D1;padding:4;}
-->
</style>
La hoja de estilo anteriormente publicada posee 4 (cuatro) capas. Para los que recién se inician en CSS o para los que necesitan refrescar la memoria, las capas se utilizan para aplicar estilos a partes amplias de un documento HTML y poseen atributos especiales que hacen más fácil su manejo.
Para poder experimentar el resultado en nuestra página en necesario incluir las siguientes líneas en el lugar donde queramos que aparezca la celda:
<div id="ttt"><img src="blank.gif" width="1" height="1"></div> <div id="tt"><img src="blank.gif" width="1" height="1"></div> <div id="t" style="font-family:Verdana;font-size:x-small;color:999">Esta es una celda con puntas redondeadas realizada enteramente con hojas de estilo.</div> <div id="tt"><img src="blank.gif" width="1" height="1"></div> <div id="ttt"><img src="blank.gif" width="1" height="1"></div>
Debo aclarar que para su buen funcionamiento es necesario crear una imagen de 1×1 px transparente (en este ejemplo se lo llamó ‘blank.gif’).
Dejo a su gusto el tamaño, el grosor de los bordes y el color, el color de fondo y el texto.
El resultado final se puede apreciar a continuación:
al parecer nesecitamos un pokito mas de explikacion pues ya lo intente de mil formas y nada funciona… ai alguien le ha funcionado plx podria ayudarnos un poko??
Las celdas con puntas redondeadas en el IE no existen, ni existirán hasta que Microsoft lance un tag para IE, o hasta que tengamos disponible CSS2.
Para los navegadores de la famila Mozilla, existe un tag propietario de CSS que se utiliza de esta forma:
.celda {-moz-border-radius:5px;}
Pueden ser 5px, 20px, dependiendo de la pronunciación de la curva del borde.
Un saludo!
Nuestro amigo nos aclaro algunas dudas respecto al codigo que estaba mal. Atencion con los tags que se muestran con espacio, solamente es para correcta publicacion!…
¿Cuales tags con espacio?
Tuvimos un error con la publicación del artículo pero ya fue corregido. Intenten de nuevo con el código proveido y debería de funcionarles (IE únicamente)
Ahora si funciona. Solo IE. Para la familia Mozilla deben usar la etiqueta mencionada anteriormente. UN saludo!
Saludos. El codigo que ya ha sido arreglado lo tienen en este enlace http://www.maestrosdelweb.com/editorial/celrendo/ ya corregido o en otra parte??
takitei: el tag que decis que va para mozilla en que parte del código se incertaria?
Lo insertas en tus estilos css como lo desees.
En Opera, al menos, funciona de maravilla, así que si usamos el truco para Mozilla, ya funcionaría para los 3 grandes. Sólo faltaría por ver si funciona en Konqueror/Safari…
A VER QUIEN PUEDE AYUDARME CON ESTO, ME GUSTARIA PODER PONER MIS REGISTROS DE DB EN TABLAS CREADAS EN ARCHIVOS .CSS LO CUAL LE DA UNA PRESENTACION MEJOR.
PUEDEN VER ESTE TIPO DE TABLAS EN ESTA DIRECCION Y ME GUSTARIA PARENDER HACER ESTO, YA QUE MIS REGISTROS SE VERIAN BIEN PADRES EN LA WEB.
LA DIRECCION ES :
http://www.geocities.com/arianreyes2002/displaytagAsp.htm
Y MI CORREO ES:
[email protected]
Quien este dispuesto a ayudarme se lo agradeceria, espero respuestas
copio el codigo que se presenta arriba y no funciona para IE, cuales son los tags con espacio que hablan por alla arriba?
HLA COMO ESTAN
NOSE SI ME PUEDEN AYUDAR CON EL CODIGO DE IRSERTARLO EN EL MSN DE MENJAGE
Y CON EL BORDE
GRACIAS
HLA COMO ESTAN
NOSE SI ME PUEDEN AYUDAR CON EL CODIGO DE IRSERTARLO EN EL MSN DE MENJAGE
Y CON EL BORDE
GRACIAS
hola como estan ……. no puedo copear el codigo y no se como ahcerlo quiero vuestra ayuda