Foros del Web » Creando para Internet » CSS »

Barra footer con esquinas redondeadas

Estas en el tema de Barra footer con esquinas redondeadas en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 06/03/2007, 07:32
Avatar de floren  
Fecha de Ingreso: febrero-2005
Ubicación: Málaga
Mensajes: 134
Antigüedad: 12 años, 10 meses
Puntos: 0
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!
  #2 (permalink)  
Antiguo 06/03/2007, 14:39
Avatar de floren  
Fecha de Ingreso: febrero-2005
Ubicación: Málaga
Mensajes: 134
Antigüedad: 12 años, 10 meses
Puntos: 0
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.
  #3 (permalink)  
Antiguo 06/03/2007, 16:18
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
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.
  #4 (permalink)  
Antiguo 07/03/2007, 01:07
Avatar de floren  
Fecha de Ingreso: febrero-2005
Ubicación: Málaga
Mensajes: 134
Antigüedad: 12 años, 10 meses
Puntos: 0
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!
  #5 (permalink)  
Antiguo 07/03/2007, 01:20
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
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.
  #6 (permalink)  
Antiguo 07/03/2007, 04:23
 
Fecha de Ingreso: abril-2002
Mensajes: 1.013
Antigüedad: 15 años, 7 meses
Puntos: 8
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/
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 23:59.