borde redondeado div repeat-x

[sandrox23]

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:

.tcat {
    background:url(tcatBG.gif) repeat-x top left;
    color: #c5c5c5;
    height:35px;
    clear:both;
    margin-top: 8px;
    float: left;
    border:0;
    padding:0;
    width: 100%;
}
.tcatLeft {
    background:url(tcatLeft.gif) no-repeat top left;
    height:35px;
}
.tcatRight {
    background:url(tcatRight.gif) no-repeat top right;
    height:35px;
    position:relative;
}
 

Código HTML:

<div class="tcat">
    <div class="tcatLeft"><div class="tcatRight">
contenido
</div></div>
</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/

[rossijona]

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!

[metacortex]

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:

<div class="tcatLeft"></div>
<div class="tcatRight"></div>
 

[IsaBelM]

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

.tcatRight

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

.tcatLeft

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