Alinear elementos en pie (footer)

Reverberante · #1 (**permalink**) 03/07/2009, 10:38

¿Cómo se alinean horizontalmente los elementos -enlaces, imágenes o lo que sean- en el footer de una página? ¿Hay que usar algún tipo de posicionamiento en particular?

trasgukabi · #2 (**permalink**) 03/07/2009, 10:39

puedes probar con float y padding para las separaciones

Ronin46 · #3 (**permalink**) 03/07/2009, 10:40

¿text-align:center;?

kseso? · #4 (**permalink**) 03/07/2009, 10:51

Los enlaces del footer no dejan de ser un menú (secundario) y sin desplegables normalmente, pero menú al fin y al cabo.
Para eso vienen al pelo las listas (ul/li), así que bastaría con asignar un 'display: inline' a cada li y a la lista (ul) "flotarla" a derecha o izquierda, o si la quieres centrar horizontalmente, aplicar la técnica oportuna.

Un saludo

Reverberante · #5 (**permalink**) 03/07/2009, 11:31

Cita:

Los enlaces del footer no dejan de ser un menú (secundario) y sin desplegables normalmente, pero menú al fin y al cabo.

En efecto, kseso?, pensaba en el e-mail de contacto y el aviso legal, que normalmente suelen ubicarse en el footer.

Gracias a todos y empezaré a probar la cuestión.

Un saludo

art33 · #6 (**permalink**) 03/07/2009, 11:39

yo cuando tengo pereza... no es una forma correcta pero... al div del footer le pongo relativo y al ul absoluto con los li en display inline como dice kseso? y le doy la posicion jeje... pero bueno ojala lo soluciones

Mikmoro · #7 (**permalink**) 03/07/2009, 11:47

Yo creo que lo más normal es dar al UL un ancho del 100% (width: 100%), y ponerle text-align: center, dando después un "display:inline a los LI y listo; se centran solitos.

Casi lo mismo que dice kseso? pero con un pequeño matiz.

P.D.: el problema de lo que propones, art33, además de otros posibles, suele ser cuando cambias el tamaño de la ventana.

kseso? · #8 (**permalink**) 03/07/2009, 11:53

Reverberante, si los enlaces van a ser un par o tres de elos, quizás no quieras complicarte con listas.

Puedes intentarlo de otra forma:

Código css:

Ver original#footer .enlaces_pie {
float:right /*left*/;
padding: 0/* o los necesarios*/;
margin: 0/* o los necesarios*/;
text-align:right/*o left*/;
}
#footer a {
color:#???;
/*otras propiedades*/
}

Código html:

Ver original<p class="enlaces_pie">
    <a title="Ir al inicio" href="#">Inicio</a> // <a title="contacto" href="#">Contacto</a> // <a title="Aviso legal" href="#">Aviso legal</a>
</p>

Si te preguntas el porqué de los '//' es para que al validar la página no te salte un error por dos enlaces adyacentes sin ningún elemento que haga evidente que son dos y no uno sólo

Un saludo

Edito:
Me has ganado la mano Mik, pero si es por letras gano yo

trasgukabi · #9 (**permalink**) 03/07/2009, 12:14

Cita:

Iniciado por kseso?

Reverberante, si los enlaces van a ser un par o tres de elos, quizás no quieras complicarte con listas.

Puedes intentarlo de otra forma:

Código css:

Ver original#footer .enlaces_pie {
float:right /*left*/;
padding: 0/* o los necesarios*/;
margin: 0/* o los necesarios*/;
text-align:right/*o left*/;
}
#footer a {
color:#???;
/*otras propiedades*/
}

Código html:

Ver original<p class="enlaces_pie">
    <a title="Ir al inicio" href="#">Inicio</a> // <a title="contacto" href="#">Contacto</a> // <a title="Aviso legal" href="#">Aviso legal</a>
</p>

Si te preguntas el porqué de los '//' es para que al validar la página no te salte un error por dos enlaces adyacentes sin ningún elemento que haga evidente que son dos y no uno sólo

Un saludo

Edito:
Me has ganado la mano Mik, pero si es por letras gano yo

pues eso, lo que yo decía. Lo que pasa que lo he puesto así por lo del hombre, y la caña, y el pescar y el tiempo que comen peces (¿Cómo era? no me acuerdo

)

Mikmoro · #10 (**permalink**) 03/07/2009, 12:18

¿Sí? Pues apuntaros una amarilla cada uno, porque eso no centra los enlaces en el pié (o no pedía lo de centrar y me lo he imaginado yo

)

Mikmoro · #11 (**permalink**) 03/07/2009, 12:24

Mientras que esto los centra que es una preciosidad

Cita:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es-es">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
ul {display: block; margin: 0;
text-align: center;}
ul li {display: inline;}
</style>
</head>
<body>
<ul>
<li><a title="Ir al inicio" href="#">Inicio</a> |</li>
<li><a title="contacto" href="#">Contacto</a> |</li>
<li><a title="Aviso legal" href="#">Aviso legal</a></li>
</ul>
</body>
</html>

¿Se dice "crossbrowser"?

trasgukabi · #12 (**permalink**) 03/07/2009, 13:00

es que no ha pedido centrados, no? al menos yo no he entendido eso, vaya: "alinear horizontalmente"~="centrar"

kseso? · #13 (**permalink**) 03/07/2009, 13:03

Señor juez

, con su venia:
Yo sólo respondía a:

Cita:

Iniciado por Reverberante

¿Cómo se alinean horizontalmente los elementos -enlaces, imágenes o lo que sean- en el footer de una página? ¿Hay que usar algún tipo de posicionamiento en particular?

Autorespuesta a lo anterior:
Excusatio non petita, accusatio manifesta

Pero he de reconocer la preciosidad de las 3 líneas de tu style

y la manera tan colorista (amarilla) de hilar para mostrarla que has tenido

Mikmoro · #14 (**permalink**) 03/07/2009, 14:25

Cita:

Iniciado por trasgukabi

es que no ha pedido centrados, no? al menos yo no he entendido eso, vaya: "alinear horizontalmente"~="centrar"

Vaya, lo sabía, me lo he inventado

(era una excusa para poner ese centradito, que queda muy mono)

¿Y le recomendáis una lista de enlaces fuera de una lista de elementos, herejes? Suerte que me pilláis de buen humor

Mikmoro · #15 (**permalink**) 03/07/2009, 14:28

Cita:

Iniciado por kseso?

Pero he de reconocer la preciosidad de las 3 líneas de tu style

Bueno, de hecho son casi dos, porque en realidad el display block del UL no es necesario:

Cita:

ul {margin: 0;text-align: center;}
ul li {display: inline;}

kseso? · #16 (**permalink**) 03/07/2009, 14:38

Cita:

Iniciado por Mikmoro

Bueno, de hecho son casi dos, porque en realidad el display block del UL no es necesario:

Y con esta rebaja de código me estás dando una idea como actividad distinta para css

Y hasta aquí puedo leer...

Mikmoro · #17 (**permalink**) 03/07/2009, 14:41

Cita:

Iniciado por kseso?

Y con esta rebaja de código me estás dando una idea como actividad distinta para css

Y hasta aquí puedo leer...

No lees más pero huele hasta aquí

Reverberante · #18 (**permalink**) 04/07/2009, 11:19

Cita:

Reverberante, si los enlaces van a ser un par o tres de elos, quizás no quieras complicarte con listas.

Sí, en efecto, kseso? la idea es disponer horizontalmente dos o tres enlaces, aunque a uno de ellos le corresponde ir centrado, con lo que la aportación de Mikmoro también me resulta útil.