Foros del web, para los que viven de bits

floren · 06-mar-2007, 06: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 · 06-mar-2007, 13: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 · 06-mar-2007, 15: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 · 07-mar-2007, 00: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 · 07-mar-2007, 00: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 · 07-mar-2007, 03:23

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

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

06-mar-2007, 06:32	#1 (permalink)
floren Fecha de Ingreso: febrero-2005 Ubicación: Málaga Mensajes: 134	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!

06-mar-2007, 13:39	#2 (permalink)
floren Fecha de Ingreso: febrero-2005 Ubicación: Málaga Mensajes: 134	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.

07-mar-2007, 00:07	#4 (permalink)
floren Fecha de Ingreso: febrero-2005 Ubicación: Málaga Mensajes: 134	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!

07-mar-2007, 00:20	#5 (permalink)
Mikmoro Colaborador Fecha de Ingreso: octubre-2006 Ubicación: A tu espalda Mensajes: 3.961	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.

07-mar-2007, 03:23	#6 (permalink)
MikiBroki Fecha de Ingreso: noviembre-2002 Mensajes: 848	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/ __________________ Aprendiz en mucho, maestro en nada. Si por cada solución recibida aportas otra, ganamos todos.

Herramientas
Mostrar Versión Imprimible Enviar por Correo
Desplegado
Mode Lineal Cambiar a Modo Hibrido Cambiar a Modo Hilado