Foros del Web » Creando para Internet » HTML »

Se pueden redondear ??

Estas en el tema de Se pueden redondear ?? en el foro de HTML en Foros del Web. Sólo esa duda... Se pueden redondear las esquinas de algunas celdas, o de algunas tablas? Gracias. Un abrazo....
  #1 (permalink)  
Antiguo 28/06/2004, 11:32
Avatar de rusoftware  
Fecha de Ingreso: abril-2004
Ubicación: Rosario - Argentina
Mensajes: 1.083
Antigüedad: 13 años, 8 meses
Puntos: 2
Pregunta Se pueden redondear ??

Sólo esa duda... Se pueden redondear las esquinas de algunas celdas, o de algunas tablas?

Gracias. Un abrazo.
  #2 (permalink)  
Antiguo 28/06/2004, 13:45
Avatar de bichomen  
Fecha de Ingreso: junio-2003
Ubicación: Barcelona y alrededores, España
Mensajes: 874
Antigüedad: 14 años, 6 meses
Puntos: 2
Que yo sepa, no, pero puedes hacer dibujos de medio circulos y luego posicionarlos, como si de bordes se tratase.

bichomen
__________________
"Se sabe con exactitud, con cuanta imprecisión, se sabe algo"
Linux Registered User #320332
  #3 (permalink)  
Antiguo 30/06/2004, 16:23
(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 todos:

si, eso se hace con imágenes. La pregunta se hizo y respondió varias veces, rusoftware, puedes usar el buscador interno.

Aprovecho tu tema para postear una curiosidad. Ésto se hace sin imágenes, con HTML y CSS, pero las limitaciones son enormes. Está hecho para IE, aunque en la versión 6 con XP (o alguna de sus combinaciones) no se ve porque MS ha cambiado el diseño de los elementos de formulario.

[edit]Agregué un meta que corrige el problema. Lo que no sé es qué doctype usar. Seguramente ninguno, ya que un código que usa una tabla como sporte de div's no debe estar contemplado en ninguno
[/edit]

Código:
<html> 
<head> 
<meta http-equiv="msthemecompatible" content="no" >

<title> BORDE CURVO CON RADIOBUTTON.</title> 

<style>

.abs{position:absolute;}

</style>
</head> 
<body bgcolor="beige">
<h2>Esquinas redondeadas usando <tt>radio</tt> y <tt>div</tt> con bordes. (IE)</h2>
<p>
<table align="center" border="0" cellspacing="0" height="150px" width="100px"><div class="abs"><tbody> 

<div class="abs">
 <input class="abs" type="radio" style="height:30px; width:30px; top:0; left:0;" readonly="readonly">
 <input class="abs" type="radio" style="height:30px; width:30px; top:0; left:67px;" readonly="readonly">
 <input class="abs" type=radio style="height:30px; width:30px; top:120px; left:67px;" readonly="readonly"> 
 <input class="abs" type=radio style="height:30px; width:30px; top:120px; left:0;" readonly="readonly"> 

 <div class="abs" style="background:white; height:140px; width:72px; top:5px; left:13px; border-top:inset 2px; border-bottom:inset 2px"> </div>
 <div class="abs" style="background:white; height:120px; width:88px; top:15px; left:6px; border-left:inset 2px; border-right:inset 2px"> </div>
</div> 

<div class="abs" align="center" style="padding-top:45px ; overflow:hidden; height:150px; width:100px; font:bold 46px"> &#9827;</div> 

</tbody></div> </table><br /></p>



<table align="center" border="0" cellspacing="0" height="200px" width="300px"><div class="abs"><tbody> 

<div class="abs">
 <input class="abs" type="radio" style="height:100px; width:100px; top:0; left:0; " readonly="readonly">
 <input class="abs" type="radio" style="height:100px; width:100px; top:0; left:200px; " readonly="readonly">
 <input class="abs" type="radio" style="height:100px; width:100px; top:100px; left:200px; " readonly="readonly"> 
 <input class="abs" type="radio" style="height:100px; width:100px; top:100px; left:0; " readonly="readonly"> 

<div class="abs" style="background:white;height:183px;width:202px;top:8px;left:50px;border-top:inset 12px;border-bottom:inset 12px;"> </div>
<div class="abs" style="background:white;height:100px;width:283px;top:50px;left:10px;border-left:inset 12px;border-right:inset 12px ;"> </div>

</div> 
<div class="abs" align="center" style="padding:25px ; overflow:hidden; height:200px; width:300px"> <h3>QWERTYUIOP</h3></div> 

</tbody></div> </table><br /></p>
</body> 
</html>
Otra rareza; esta vez con caracteres, el primero solamente se ve si tienes instalada la fuente 'courier new'; el segundo usa Box Drawing, y no todos los navegadores la muestran (además, los bordes no son curvos, pero a alguien le va a servir para algo)

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

<html> 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title> BORDES CON CARACTERES.</title> 
 
<STYLE>
<!--
body{background-color:beige;}
#tabla1{border-collapse:collapse; align:center; }
#tabla1 td{padding:0; }
#tabla1 #cTexto{padding:10px; position:relative; z-index:100; background:#fcc; text-align:center}
#tabla1 td.rojo{background:red; }
.esqNO{height:86px; width:54px; padding:0; font:180px 'courier new'; color:red; overflow:hidden; margin-top:-64px; margin-left:-32px}
.esqNE{height:86px; width:78px; padding:0; font:180px 'courier new'; color:red; overflow:hidden; margin-top:-64px; margin-left:-56px;}
.esqSE{height:108px; width:78px; padding:0; font:180px 'courier new'; color:red; overflow:hidden; margin-top:-84px; margin-left:-56px; position:relative; z-index:-1}
.esqSO{height:108px; width:54px; padding:0; font:180px 'courier new'; color:red; overflow:hidden; margin-top:-84px; margin-left:-32px}
#cESE{position:relative; z-index:-0}
// -->
</STYLE>
</head> 
<body>
<h2>Esquinas redondeadas usando caracter <i>bullet</i> ( <span style="font-size:150%; color:red;">&bull; </span> <span style="font-weight:200;"> = &amp;#0149</span> ) y fuente <span style="font-family:'courier new';">'courier new'</span>.</h2>
Para <b>IE , FF0.93+ , Op7.5+</b>.<p>

<table align="center" id="tabla1"><tr>
<td><div class="esqNO">&bull;</div></td> <td class="rojo"></td> <td><div class="esqNE">&bull;</div></td>

</tr>
<tr>
<td class="rojo"></td> <td id="cTexto"><div>QWERTYUIOP <br>qwertyuiop</div></td> <td class="rojo"></td>
</tr>
<tr>
<td><div class="esqSO">&bull;</div></td> <td class="rojo"></td> <td id="cESE"><div class="esqSE">&bull;</div></td>
</tr></table>
</p>
</body> 

</html>
Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">

<html> 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title> BORDES CON CARACTERES.</title> 
 
<STYLE>
<!--
q{cursor:help; font:14pt}
// -->
</STYLE>
</head> 
<body bgcolor=beige>
<h2>Bordes con caracteres <i>Box Drawing</i>.</h2>

<center><pre style="font-size:30pt; font-family:'courier new', 'monotype.com', 'courier'; color:green">
&#9556;&#9552;&#9552;&#9552;&#9574;&#9552;&#9552;&#9552;&#9559;
&#9568;&#9552;&#9552;&#9552;&#9577;&#9552;&#9552;&#9552;&#9571;
&#9553;<font color="fuchsia">qwerty.</font>&#9553;
&#9562;&#9557;     &#9554;&#9565;
 &#9492;&#9472;&#9472;&#9472;&#9472;&#9472;&#9496; 
</pre></center><p>

Lista de caracteres disponibles. (Señale el caracter hasta que el puntero cambie a <tt>help</tt> para ver el código)</p>
<p>

<q title="&amp;#9472">&#9472</q>  <q title="&amp;#9474">&#9474</q>  
<q title="&amp;#9484">&#9484</q>  <q title="&amp;#9488">&#9488</q>  
<q title="&amp;#9492">&#9492</q>  <q title="&amp;#9496">&#9496</q>  
<q title="&amp;#9500">&#9500</q>  <q title="&amp;#9508">&#9508</q>  
<q title="&amp;#9516">&#9516</q>  <q title="&amp;#9524">&#9524</q>  
<q title="&amp;#9532">&#9532</q>  <q title="&amp;#9552">&#9552</q>  
<q title="&amp;#9553">&#9553</q>  <q title="&amp;#9554">&#9554</q>  
<q title="&amp;#9555">&#9555</q>  <q title="&amp;#9556">&#9556</q>  
<q title="&amp;#9557">&#9557</q>  <q title="&amp;#9558">&#9558</q>  

<q title="&amp;#9559">&#9559</q>  <q title="&amp;#9560">&#9560</q>  
<q title="&amp;#9561">&#9561</q>  <q title="&amp;#9562">&#9562</q>  
<q title="&amp;#9563">&#9563</q>  <q title="&amp;#9564">&#9564</q>  
<q title="&amp;#9565">&#9565</q>  <q title="&amp;#9566">&#9566</q>  
<q title="&amp;#9567">&#9567</q>  <q title="&amp;#9568">&#9568</q>  
<q title="&amp;#9569">&#9569</q>  <q title="&amp;#9570">&#9570</q>  
<q title="&amp;#9571">&#9571</q>  <q title="&amp;#9572">&#9572</q>  
<q title="&amp;#9573">&#9573</q>  <q title="&amp;#9574">&#9574</q>  
<q title="&amp;#9575">&#9575</q>  <q title="&amp;#9576">&#9576</q>  

<q title="&amp;#9577">&#9577</q>  <q title="&amp;#9578">&#9578</q>  
<q title="&amp;#9579">&#9579</q>  <q title="&amp;#9580">&#9580</q>  </p>


</body> 
</html>
saludos

furoya

Última edición por furoya; 10/12/2005 a las 06:31
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 03:35.