como hacer los marcos div??

[rtr]

Hola , alguien puede decirme cual es la forma mas practica de hacer los,tan utilizados," marcos con cabecera", que utiliza youtube por ejemplo...( los utilizas para agrupar contenidos)

Creo que se trata de un div con borde y dentro otro a modo de cabecera con los bordes superiores redondeados.

si alguien me puede ayudar, sospecho que no puede ser muy dificil...

gracias, saludos

[asinox]

Sencillo, Youtube lo hace con CSS3, te explico como:

En tu css:

Código:

.rectangulo{
        -webkit-border-bottom-left-radius: 5px 5px;
	-webkit-border-bottom-right-radius: 5px 5px;
	-webkit-border-top-left-radius: 5px 5px;
	-webkit-border-top-right-radius: 5px 5px;
}

En tu XHTML

Código:

<div class="rectangulo"> aqui toda tu data </div>

Con eso es suficiente.

Nota: Los redondeados no funcionan en IE, pero aquien le importa :P

Saludos

[rtr]

Hola asinox, no se que puede ocurrir , pero no me funciona..

[Impostor]

Iniciado por rtr

Hola asinox, no se que puede ocurrir , pero no me funciona..

Que solo son válidos para CSS3 y quizas tu navegador no lo soporte.

Saludos¡¡

[asinox]

Iniciado por rtr

Hola asinox, no se que puede ocurrir , pero no me funciona..

Como dije, si usas Internet Explorer no funcionara, pero si usas otro navegador (que esten al dia actualizados) te funciona, hasta en mobiles.

Saludos

[rtr]

Uso Firefox actualizado...y veo estos marcos con div en youtube, y otras muchas webs que lo tienen..

No hay otra forma mas "antigua" que la soporten los navegadores mas antiguos..??

saludos,

[asinox]

Por favor muestrame como estas poniendo tu codigo... eso funciona sin duda.

Saludos

[rtr]

.css

.rectangulo{
-webkit-border-bottom-left-radius: 5px 5px;
-webkit-border-bottom-right-radius: 5px 5px;
-webkit-border-top-left-radius: 5px 5px;
-webkit-border-top-right-radius: 5px 5px;
}

.html

<div class="rectangulo"> aqui toda tu data </div>

Exactamente como tu lo tienes..noseque pasa...

[erick_arcini]

Cambia webkit por moz, por lo cual solo te va a funcionar con firefox, ya que si pruebas en Opera abriendo la pagina de youtube esta se va a mostrar sin los bordes redondos.

Lo que utiliza asinox esta bien escrito solo que es funcional solamente para webKit y Safari.

Te dejo este link para que te des una idea mas amplia

[rtr]

he cambiado webkit por moz ,pero sigue sin funcionar...y lo he probado en varios sitios y en distintos alojamientos y navegadores...

[rtr]

ya me funciona, el problema estaba al colocar el class al div , en vez de "rectangulo" le he puesto "rounded-corners ", muy raro pero ha funcionado.

Gracias a todos.