Foros del Web - Barra footer con esquinas redondeadas

Foros del Web (http://www.forosdelweb.com/)

- CSS (http://www.forosdelweb.com/f53/)

- - Barra footer con esquinas redondeadas (http://www.forosdelweb.com/f53/barra-footer-con-esquinas-redondeadas-470481/)

floren

06/03/2007 07:32

Barra footer con esquinas redondeadas

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

06/03/2007 14:39

Re: Barra footer con esquinas redondeadas

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

Grasias mi arma.

Mikmoro

06/03/2007 16:18

Re: Barra footer con esquinas redondeadas

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

07/03/2007 01:07

Re: Barra footer con esquinas redondeadas

¡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

07/03/2007 01:20

Re: Barra footer con esquinas redondeadas

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

07/03/2007 04:23

Re: Barra footer con esquinas redondeadas

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

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

La zona horaria es GMT -6. Ahora son las 10:55.