Foros del Web » Creando para Internet » CSS »

problema con esquinas redondeadas

Estas en el tema de problema con esquinas redondeadas en el foro de CSS en Foros del Web. Estoy maquetando una pagina que lleva 2 columnas y pretendo redondearles las esquinas utilizando esta tecnica Código HTML: <div id= "contenedor" > <b class= "esquinas_superiores" ...
  #1 (permalink)  
Antiguo 16/11/2010, 22:32
Avatar de walterfcr  
Fecha de Ingreso: julio-2009
Ubicación: Costa Rica
Mensajes: 148
Antigüedad: 8 años, 5 meses
Puntos: 4
problema con esquinas redondeadas

Estoy maquetando una pagina que lleva 2 columnas y pretendo redondearles las esquinas utilizando esta tecnica
Código HTML:
<div id="contenedor">
<b class="esquinas_superiores">
  <b class="r1"></b>
  <b class="r2"></b>
  <b class="r3"></b>
  <b class="r4"></b>
</b>
 
<!-- Aquí se incluyen los contenidos -->
 
<b class="esquinas_inferiores">
  <b class="r4"></b>
  <b class="r3"></b>
  <b class="r2"></b>
  <b class="r1"></b>
</b>
</div>


.esquinas_superiores, .esquinas_inferiores {
  display: block;
}
.esquinas_superiores *, .esquinas_inferiores * {
  display: block;
  height: 1px;
  overflow: hidden;
}
.r1 { margin: 0 5px; }
.r2 { margin: 0 3px; }
.r3 { margin: 0 2px; }
.r4 { margin: 0 1px; height: 2px; }
la parte superior queda perfecta pero la parte inferior no se ve o queda igual

aca dejo los codigos a ver si alguien puede ver mi error

Código HTML:
<body>
<div id="cabecera">
  
</div> 

<div id="container">

 <b class="esquinas_superiores"> <b class="r1"></b> <b class="r2"></b> <b class="r3"></b> <b class="r4"></b> </b>
 
 
    <div id="content">
      <p> BIENVENIDOS <br />
          <br />
        El equipo de trabajo del Grupo xxxxx le da la más cordial bienvenida a nuestro sitio en internet. Esperamos que éste le resulte muy interesante, pero principalmente, útil para el desarrollo de su negocio. <br />
        
    </div>
	
  
  <div id="menu"> 
  bla bla bla 
  </div>
   
 <b class="esquinas_inferiores">
  <b class="r4"></b>
  <b class="r3"></b>
  <b class="r2"></b>
  <b class="r1"></b>
</b>
 
  </div>


 


<div id="pie">
 
</div>


</body> 
css

Código HTML:
#container {  
background-color: #C1EBFF;
overflow: hidden;  
width: 880px;  
margin: 10px auto 5px auto;  
border: 1px solid #fffS;  
} 


#content {  
background-color: #fff;  
width: 500px;  
border-right: 380px solid #fff; /* ancho y color del menú */  
margin-right: -380px;  
float: left;  
}



#menu {  
width: 380px;  
float: left;  
color: #fff;  
background: #fff;  
text-align: left;  
}

#cabecera {
	
	height: 100px;
	margin: auto;
}

body {
	min-width: 990px;
	background-color: #C1EBFF;
}

#pie {
	clear: both;
	background-attachment: scroll;
	padding: 0px;
	margin-top: 50px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
}
p {
	margin: 50px;
}
#container #menu img {
	margin-top: 50px;
	margin-right: 25px;
	margin-bottom: 25px;
	margin-left: 25px;
}




.esquinas_superiores, .esquinas_inferiores {
  display: block;
}
.esquinas_superiores *, .esquinas_inferiores * {
  display: block;
  height: 1px;
  overflow: hidden;
}
.r1 {
	margin: 0 5px;
	background-color: #FFFFFF;
}
.r2 {
	margin: 0 3px;
	background-color: #FFFFFF;
}
.r3 {
	margin: 0 2px;
	background-color: #FFFFFF;
}
.r4 {
	margin: 0 1px;
	height: 2px;
	background-color: #FFFFFF;
}
  #2 (permalink)  
Antiguo 17/11/2010, 08:04
 
Fecha de Ingreso: octubre-2010
Mensajes: 73
Antigüedad: 7 años, 1 mes
Puntos: 1
Respuesta: problema con esquinas redondeadas

y si utilizas border radius?

-moz-border-radius: 5px; //para firefox y netscape
-webkit-border-radius: 5px //para safari y opera
border-radius: 5px; //para los exploradores que soporten css3

esos son bordes redondeados en todas las esquinas
  #3 (permalink)  
Antiguo 17/11/2010, 09:19
Avatar de walterfcr  
Fecha de Ingreso: julio-2009
Ubicación: Costa Rica
Mensajes: 148
Antigüedad: 8 años, 5 meses
Puntos: 4
Respuesta: problema con esquinas redondeadas

border radius es genial pero no funciona en IE y necesito que se vea bien en IE.
  #4 (permalink)  
Antiguo 17/11/2010, 09:51
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: problema con esquinas redondeadas

Unos cuantos tutoriales para lograr doblar las esquinas:
http://www.smashingshare.com/2009/11...ers-tutorials/
Quizás ahí encuentre lo que anda buscando

Etiquetas: esquinas, redondeadas
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 15:58.