Foros del Web » Creando para Internet » CSS »

borde redondeado div repeat-x

Estas en el tema de borde redondeado div repeat-x en el foro de CSS en Foros del Web. Hola a todos, tengo una barra que tiene dos gif transparentes a los costados, resulta que no encuentro al manera que se vean los bordeados ...
  #1 (permalink)  
Antiguo 19/05/2011, 12:42
Avatar de sandrox23  
Fecha de Ingreso: abril-2005
Ubicación: Lima - Peru
Mensajes: 274
Antigüedad: 12 años, 5 meses
Puntos: 0
borde redondeado div repeat-x

Hola a todos, tengo una barra que tiene dos gif transparentes a los costados, resulta que no encuentro al manera que se vean los bordeados del costado ya que el .tcat usa una imagen de fonde que lo tapa.

este es el codigo:

Código CSS:
Ver original
  1. .tcat {
  2.     background:url(tcatBG.gif) repeat-x top left;
  3.     color: #c5c5c5;
  4.     height:35px;
  5.     clear:both;
  6.     margin-top: 8px;
  7.     float: left;
  8.     border:0;
  9.     padding:0;
  10.     width: 100%;
  11. }
  12. .tcatLeft {
  13.     background:url(tcatLeft.gif) no-repeat top left;
  14.     height:35px;
  15. }
  16. .tcatRight {
  17.     background:url(tcatRight.gif) no-repeat top right;
  18.     height:35px;
  19.     position:relative;
  20. }

Código HTML:
Ver original
  1. <div class="tcat">
  2.     <div class="tcatLeft"><div class="tcatRight">
  3. contenido
  4. </div></div>
  5. </div>

ah ver si me dan ideas de como hacer que se vean los bordeados, Gracias

dejo adjunto la imagen de como se ve el disenio.



pueden ver aqui el ejemplo:

http://jsfiddle.net/jim3481/72bGk/1/
__________________
diseniando ........

Última edición por sandrox23; 19/05/2011 a las 13:18
  #2 (permalink)  
Antiguo 20/05/2011, 14:08
 
Fecha de Ingreso: junio-2010
Mensajes: 142
Antigüedad: 7 años, 2 meses
Puntos: 5
Respuesta: borde redondeado div repeat-x

Varias maneras para hacer lo que necesitas.

En tu caso puedo darte una solución extremadamente rápida.

(que los gif de los bordes no sean con fondo transparentes, saca un pantallazo y integra lo que esta detras en el gif).

Hay otras formas de realizarlo, tienes que cambiar varias cosas,

Un tuto porque toy corto de tiempo:
http://www.cristalab.com/tutoriales/...cript-c55623l/

o bien puedes usar CSS3 (no son validados y en IE no funciona).
aplicas esto a lo que quieras:

border-top-left-radius: 10px;
border-top-right-radius: 10px;
-moz-border-top-left-radius: 10px;
-moz-border-top-right-radius: 10px;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;

eso por CSS, busca algo similar por google, incluso en el foro.

Saludos!
  #3 (permalink)  
Antiguo 21/05/2011, 07:05
Avatar de metacortex
Viejo demente
 
Fecha de Ingreso: junio-2004
Ubicación: Caracas - Venezuela
Mensajes: 9.018
Antigüedad: 13 años, 3 meses
Puntos: 832
Respuesta: borde redondeado div repeat-x

Asigna position:relative a .tcat y position:absolute a .tcatRight y .tcatLeft, cada uno con right y left en "0". Eso solucionará el problema.

Y por amor de Alá, cierra esos div internos. Mejor dicho, colócalos de esta forma:

Código HTML:
Ver original
  1. <div class="tcatLeft"></div>
  2. <div class="tcatRight"></div>
  #4 (permalink)  
Antiguo 21/05/2011, 08:04
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 9 años, 3 meses
Puntos: 1010
Respuesta: borde redondeado div repeat-x

referente a lo que te comenta metacortex, hay que cambiar alguna cosa en .tcatRight y .tcatLeft para que se ajusten

.tcatRight
Cita:
top: 0;
right: -10px; /* el ancho de la imagen */
left: 0;
.tcatLeft
Cita:
top: 0;
right: 0;
left: -10px; /* el ancho de la imagen */

Etiquetas: bordes
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 04:29.