Esquinas redondeadas

Moonlight · #1 (**permalink**) 29/10/2010, 12:20

Hola.

Aquí os vengo con otro nuevo problema. En una página recomendada en las FAQ, encontré una manera de poner las esquinas redondeadas a una caja, pero no funciona, por lo menos en FF e IE. Este es el enlace a ese artículo: http://www.desarrolloweb.com/articul...-imagenes.html

El código que he puesto en mi web es el siguiente:

<script type="text/javascript" src="javascript/niftycube.js"></script>
<script type="text/javascript">
window.onload=function(){
Nifty("div#logo","top","big");
}
</script>

Niftycube es un archivo .js del tío que lo ha desarrollado, que es donde vienen ya las funciones y el código css para hacer esas esquinas redondeadas. Lo que nosotros tenemos que añadir, solamente, son lo sparámetros
que deseemos, lo que se hace en esta línea: Nifty("div#logo","top","big");

En mi caso, he puesto "div#logo" para que afecte al identificados llamado 'logo', que es un elemento de bloque normal y corriente. "Top" para que afecte solo a las esquinas de arriba; y "big", que correspondería a 10px, para definir el tamaño de las esquinas.

¿Veis algo raro? Si no lo entendéis y me podeís dar un código más sencillo sin tener que uesar imágenes, también os lo agradecería.

Un beso.

TEPO · #2 (**permalink**) 29/10/2010, 20:30

A tu pedido de algo mas sencillo va la respuesta.-

TEPO · #3 (**permalink**) 29/10/2010, 21:07

Bueno para los que quieren hacer cajas redondeadas, solo se hacerlas con imagenes, esto te permite que sean compatibles con todos los navegadores, muchos preguntan esto, yo no tengo mucha idea de lo vos estas poniendo moonlight, pero a tu pedido de algo mas sencillo, tal vez te sirva esto, pero seguro que si ya conoces esta tecnica, a otro le va a servir, asi que me arriesgo a armarlo:

1-Genero dos imagenes, la parte de arriba de la caja, top y la parte de abajo, bottom, debe quedar algo asi:

2-En el html coloco lo siguiente:

Código:

<html>
<head>
<title></title>
</head>
<body>
    <div class="box">
        <h2>Titular</h2>
        <p>Contenido</p>
    </div>
</body>
</html>

3-En el css pongo esto:

Código:

.box{
    width:275px; //lo que mide tu imagen
    background:#594b4b url(img/bottom.jpg) no-repeat left bottom; //coloco la imagen de abajo y le doy un color a la caja.
}
.box h2{
    background:url(img/top.jpg) no-repeat left top; //coloco la imagen de arriba
    padding: 10px 20px 0 20px;
}
.box p{
    padding:0 20px 10px 20px;
}

Estas cajas se van a ir agrandando en forma vertical a medida que le agrego texto, yo las uso y son compatibles con todos los navegadores. Saludos.

Moonlight · #4 (**permalink**) 30/10/2010, 12:21

Muchas gracias, Tepo, agradezco mucho la explicación, pero es que, precisamente, no quiero usar imágenes si se puede evitar, y con el código que he puesto arriba, se puede, pero estoy casi segura de que, al definir los parámetros, he puesto algo mal, pero no doy con ello.

Gracias de nuevo.

Un beso.

Moonlight · #5 (**permalink**) 30/10/2010, 12:31

Aprovecho para hacer otra pregunta, porque si alguien me puede contestar a lo de las esquinas, seguro que esto lo sabe. Cuando diseñas con tabalas, cada elemento de la página debes ponerlo en una celda, ¿pasa lo mismo con las cajas? ¿Puedo poner en la misma caja una imagen, debajo un texto y más abajo una película flash o debo usar una caja para cada cosa sin que se descoloquen?

Gracias.

jomaruro · #6 (**permalink**) 30/10/2010, 13:18

Hola:

Cita:

Iniciado por Moonlight

¿Puedo poner en la misma caja una imagen, debajo un texto y más abajo una película flash o debo usar una caja para cada cosa sin que se descoloquen?

Claro que puedes, solo debes posicionar cada uno donde desees dentro del div.

Saludos.

Moonlight · #7 (**permalink**) 01/11/2010, 17:45

Gracias, Jomaruro.