Foros del Web » Creando para Internet » CSS »

como hacer los marcos div??

Estas en el tema de como hacer los marcos div?? en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 21/12/2009, 20:02
rtr
 
Fecha de Ingreso: abril-2009
Mensajes: 368
Antigüedad: 8 años, 7 meses
Puntos: 2
como hacer los marcos div??

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
  #2 (permalink)  
Antiguo 21/12/2009, 20:28
Avatar de asinox  
Fecha de Ingreso: enero-2002
Ubicación: Santo Domingo
Mensajes: 2.712
Antigüedad: 15 años, 10 meses
Puntos: 6
Respuesta: como hacer los marcos div??

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
__________________
www.dataautos.com
  #3 (permalink)  
Antiguo 22/12/2009, 08:06
rtr
 
Fecha de Ingreso: abril-2009
Mensajes: 368
Antigüedad: 8 años, 7 meses
Puntos: 2
Respuesta: como hacer los marcos div??

Hola asinox, no se que puede ocurrir , pero no me funciona..
  #4 (permalink)  
Antiguo 22/12/2009, 08:51
 
Fecha de Ingreso: agosto-2008
Mensajes: 469
Antigüedad: 9 años, 3 meses
Puntos: 20
Respuesta: como hacer los marcos div??

Cita:
Iniciado por rtr Ver Mensaje
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¡¡
__________________
Revisa las FAQ's antes de disparar.
  #5 (permalink)  
Antiguo 22/12/2009, 11:24
Avatar de asinox  
Fecha de Ingreso: enero-2002
Ubicación: Santo Domingo
Mensajes: 2.712
Antigüedad: 15 años, 10 meses
Puntos: 6
Respuesta: como hacer los marcos div??

Cita:
Iniciado por rtr Ver Mensaje
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
__________________
www.dataautos.com
  #6 (permalink)  
Antiguo 22/12/2009, 19:04
rtr
 
Fecha de Ingreso: abril-2009
Mensajes: 368
Antigüedad: 8 años, 7 meses
Puntos: 2
Respuesta: como hacer los marcos div??

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,
  #7 (permalink)  
Antiguo 22/12/2009, 22:55
Avatar de asinox  
Fecha de Ingreso: enero-2002
Ubicación: Santo Domingo
Mensajes: 2.712
Antigüedad: 15 años, 10 meses
Puntos: 6
Respuesta: como hacer los marcos div??

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

Saludos
__________________
www.dataautos.com
  #8 (permalink)  
Antiguo 23/12/2009, 22:18
rtr
 
Fecha de Ingreso: abril-2009
Mensajes: 368
Antigüedad: 8 años, 7 meses
Puntos: 2
Respuesta: como hacer los marcos div??

.css

Cita:
.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

Cita:
<div class="rectangulo"> aqui toda tu data </div>
Exactamente como tu lo tienes..noseque pasa...
  #9 (permalink)  
Antiguo 24/12/2009, 12:27
Avatar de erick_arcini  
Fecha de Ingreso: julio-2005
Ubicación: Jaltenco / DF
Mensajes: 1.723
Antigüedad: 12 años, 4 meses
Puntos: 50
Respuesta: como hacer los marcos div??

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
__________________
Mejoremos nuestro país, ayudemos al planeta... próximamente.
  #10 (permalink)  
Antiguo 27/12/2009, 17:53
rtr
 
Fecha de Ingreso: abril-2009
Mensajes: 368
Antigüedad: 8 años, 7 meses
Puntos: 2
Respuesta: como hacer los marcos div??

he cambiado webkit por moz ,pero sigue sin funcionar...y lo he probado en varios sitios y en distintos alojamientos y navegadores...
  #11 (permalink)  
Antiguo 29/12/2009, 20:47
rtr
 
Fecha de Ingreso: abril-2009
Mensajes: 368
Antigüedad: 8 años, 7 meses
Puntos: 2
Respuesta: como hacer los marcos div??

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.
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 18:22.