Barra footer con esquinas redondeadas

floren · #1 (**permalink**) 06/03/2007, 07:32

Hola de nuevo, no paro de estrellarme contra el muro del posicionamiento de las capas, snif.

Estoy haciendo una barra para el footer que tiene las esquinas redondeadas, esto va bien en IE7 pero no en Firefox. ¡Ayuda!

Código HTML:

.footer{
	float: left;
	text-align: center;
	width: 100%;
	height: 30px;
	margin-bottom: 20px;
	background: #D2D3D5 url(footer-left.gif) no-repeat left bottom;
}

.footer .right{
	background: url(footer-right.gif) no-repeat right bottom;
	height: 30px;
	margin-top: 0;
}


.footer .right p{
	margin-top: 5px;
}

<div class="footer">
	  <div class="right">
	     <p>Privacidad | Aviso legal</p>
	  </div>
</div>

El ejemplo está corriendo ahora en www'aaservers'org/prueba2/prueba.html

Gracias!

floren · #2 (**permalink**) 06/03/2007, 14:39

Un alma caritativa que me eche un cablecillo, venga. Debe ser una tontería muy grande, pero como que no.

Grasias mi arma.

Mikmoro · #3 (**permalink**) 06/03/2007, 16:18

Hola, Floren.
Puedes probar con este código. La idea es que no es necesario que "p" esté dentro de "right", de hecho es mejor que esté fuera, y de esa manera poner "right" alineado a la derecha con float: right, y necesitas también darle el ancho del gráfico:

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <title>Floren</title>
  <meta http-equiv="Content-Type"
 content="text/html; charset=iso-8859-1">
  <style>
.footer { background: #D2D3D5 url(footer-left.gif) no-repeat left bottom;
float: left;
text-align: center;
width: 100%;
height: 30px;
margin-bottom: 20px;
}
.right { background: url(footer-right.gif) no-repeat right bottom;
height: 30px;
margin-top: 0pt;
float: right;
width: 30px;
}
.footer p { margin-top: 5px;
}
  </style>
</head>
<body>
<div class="footer">
<div class="right"></div>
<p>Privacidad | Aviso legal</p>
</div>
</body>
</html>

A ver qué tal.

Mikel.

floren · #4 (**permalink**) 07/03/2007, 01:07

¡Perfecto!

Pues fíjate que ese simple detalle de sacar <p> me estaba volviendo loco. La cuestión es que para fondos y esquinas redondeadas he visto que se suelen aprovechar clases como h2 a o span para colar ahí la esquina que sea.

Aún así me alegra ver que no iba demasiado desencaminado y casi hago un pleno al 15 con respecto a tu definición CSS. Parece que uno va viendo un poco de luz al final de este túnel...

¡Gracias Mikel!

Mikmoro · #5 (**permalink**) 07/03/2007, 01:20

De nada, floren.
Efectivamente no ibas nada desencaminado. Hay cosillas que no suelen venir en los manuales, pero que por experiencia se van aprendiendo.

Me alegro de que te haya servido. Hasta la vista.

Mikel.

MikiBroki · #6 (**permalink**) 07/03/2007, 04:23

Una opción es esta pequeña y sencilla librería en javaScript:

http://railes.net/tutoriales/css-nifty-corners-cube/