Foros del Web

Foros del Web (http://www.forosdelweb.com/)
-   CSS (http://www.forosdelweb.com/f53/)
-   -   Alinear elementos en pie (footer) (http://www.forosdelweb.com/f53/alinear-elementos-pie-footer-715442/)

Reverberante 03/07/2009 10:38
Alinear elementos en pie (footer)
 
¿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 03/07/2009 10:39
Respuesta: Alinear elementos en pie (footer)
 
puedes probar con float y padding para las separaciones

Ronin46 03/07/2009 10:40
Respuesta: Alinear elementos en pie (footer)
 
¿text-align:center;?

kseso? 03/07/2009 10:51
Respuesta: Alinear elementos en pie (footer)
 
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 03/07/2009 11:31
Respuesta: Alinear elementos en pie (footer)
 
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 03/07/2009 11:39
Respuesta: Alinear elementos en pie (footer)
 
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 03/07/2009 11:47
Respuesta: Alinear elementos en pie (footer)
 
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? 03/07/2009 11:53
Respuesta: Alinear elementos en pie (footer)
 
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
  1. #footer .enlaces_pie {
  2. float:right /*left*/;
  3. padding: 0/* o los necesarios*/;
  4. margin: 0/* o los necesarios*/;
  5. text-align:right/*o left*/;
  6. }
  7. #footer a {
  8. color:#???;
  9. /*otras propiedades*/
  10. }

Código html: 
Ver original
  1. <p class="enlaces_pie">
  2.     <a title="Ir al inicio" href="#">Inicio</a> // <a title="contacto" href="#">Contacto</a> // <a title="Aviso legal" href="#">Aviso legal</a>
  3. </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 :-D

Un saludo

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

trasgukabi 03/07/2009 12:14
Respuesta: Alinear elementos en pie (footer)
 
Cita:
Iniciado por kseso? (Mensaje 2989862)
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
  1. #footer .enlaces_pie {
  2. float:right /*left*/;
  3. padding: 0/* o los necesarios*/;
  4. margin: 0/* o los necesarios*/;
  5. text-align:right/*o left*/;
  6. }
  7. #footer a {
  8. color:#???;
  9. /*otras propiedades*/
  10. }

Código html: 
Ver original
  1. <p class="enlaces_pie">
  2.     <a title="Ir al inicio" href="#">Inicio</a> // <a title="contacto" href="#">Contacto</a> // <a title="Aviso legal" href="#">Aviso legal</a>
  3. </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 :-D

Un saludo

Edito:
Me has ganado la mano Mik, pero si es por letras gano yo :-D
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 03/07/2009 12:18
Respuesta: Alinear elementos en pie (footer)
 
¿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 :borracho: )

Mikmoro 03/07/2009 12:24
Respuesta: Alinear elementos en pie (footer)
 
Mientras que esto los centra que es una preciosidad :-D
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"? :-D :risa:

trasgukabi 03/07/2009 13:00
Respuesta: Alinear elementos en pie (footer)
 
es que no ha pedido centrados, no? al menos yo no he entendido eso, vaya: "alinear horizontalmente"~="centrar"

kseso? 03/07/2009 13:03
Respuesta: Alinear elementos en pie (footer)
 
Señor juez :policia:, con su venia:
Yo sólo respondía a:
Cita:
Iniciado por Reverberante (Mensaje 2989757)
¿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 :borracho:
Pero he de reconocer la preciosidad de las 3 líneas de tu style :aplauso: :aplauso: y la manera tan colorista (amarilla) de hilar para mostrarla que has tenido :risa: :risa:

Mikmoro 03/07/2009 14:25
Respuesta: Alinear elementos en pie (footer)
 
Cita:
Iniciado por trasgukabi (Mensaje 2989976)
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 :patada: :borracho:

(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 ;-) :risa:

Mikmoro 03/07/2009 14:28
Respuesta: Alinear elementos en pie (footer)
 
Cita:
Iniciado por kseso? (Mensaje 2989982)
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? 03/07/2009 14:38
Respuesta: Alinear elementos en pie (footer)
 
Cita:
Iniciado por Mikmoro (Mensaje 2990122)
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:-D
Y hasta aquí puedo leer... :risa:

Mikmoro 03/07/2009 14:41
Respuesta: Alinear elementos en pie (footer)
 
Cita:
Iniciado por kseso? (Mensaje 2990137)
Y con esta rebaja de código me estás dando una idea como actividad distinta para css:-D
Y hasta aquí puedo leer... :risa:
No lees más pero huele hasta aquí :-D

Reverberante 04/07/2009 11:19
Respuesta: Alinear elementos en pie (footer)
 
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. :si:


La zona horaria es GMT -6. Ahora son las 19:30.

Desarrollado por vBulletin® Versión 3.8.7
Derechos de Autor ©2000 - 2024, Jelsoft Enterprises Ltd.