Foros del Web » Diseño web » CSS »

Alinear elementos en pie (footer)

Estas en el tema de Alinear elementos en pie (footer) en el foro de CSS en Foros del Web. ¿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 ...
  #1 (permalink)  
Antiguo 03/07/2009, 10:38
 
Fecha de Ingreso: junio-2009
Mensajes: 138
Antigüedad: 4 años, 10 meses
Puntos: 5
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?
  #2 (permalink)  
Antiguo 03/07/2009, 10:39
Avatar de trasgukabi  
Fecha de Ingreso: septiembre-2004
Mensajes: 2.750
Antigüedad: 9 años, 7 meses
Puntos: 18
Respuesta: Alinear elementos en pie (footer)

puedes probar con float y padding para las separaciones
  #3 (permalink)  
Antiguo 03/07/2009, 10:40
Avatar de Ronin46  
Fecha de Ingreso: junio-2009
Mensajes: 398
Antigüedad: 4 años, 9 meses
Puntos: 8
Respuesta: Alinear elementos en pie (footer)

¿text-align:center;?
  #4 (permalink)  
Antiguo 03/07/2009, 10:51
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.810
Antigüedad: 6 años, 10 meses
Puntos: 535
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
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #5 (permalink)  
Antiguo 03/07/2009, 11:31
 
Fecha de Ingreso: junio-2009
Mensajes: 138
Antigüedad: 4 años, 10 meses
Puntos: 5
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
  #6 (permalink)  
Antiguo 03/07/2009, 11:39
 
Fecha de Ingreso: agosto-2008
Mensajes: 272
Antigüedad: 5 años, 8 meses
Puntos: 4
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
  #7 (permalink)  
Antiguo 03/07/2009, 11:47
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.243
Antigüedad: 7 años, 6 meses
Puntos: 278
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.
__________________
Visita mi nueva web idplus.org
  #8 (permalink)  
Antiguo 03/07/2009, 11:53
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.810
Antigüedad: 6 años, 10 meses
Puntos: 535
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

Un saludo

Edito:
Me has ganado la mano Mik, pero si es por letras gano yo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #9 (permalink)  
Antiguo 03/07/2009, 12:14
Avatar de trasgukabi  
Fecha de Ingreso: septiembre-2004
Mensajes: 2.750
Antigüedad: 9 años, 7 meses
Puntos: 18
Respuesta: Alinear elementos en pie (footer)

Cita:
Iniciado por kseso? Ver Mensaje
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

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 )
  #10 (permalink)  
Antiguo 03/07/2009, 12:18
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.243
Antigüedad: 7 años, 6 meses
Puntos: 278
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 )
__________________
Visita mi nueva web idplus.org
  #11 (permalink)  
Antiguo 03/07/2009, 12:24
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.243
Antigüedad: 7 años, 6 meses
Puntos: 278
Respuesta: Alinear elementos en pie (footer)

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"?
__________________
Visita mi nueva web idplus.org
  #12 (permalink)  
Antiguo 03/07/2009, 13:00
Avatar de trasgukabi  
Fecha de Ingreso: septiembre-2004
Mensajes: 2.750
Antigüedad: 9 años, 7 meses
Puntos: 18
Respuesta: Alinear elementos en pie (footer)

es que no ha pedido centrados, no? al menos yo no he entendido eso, vaya: "alinear horizontalmente"~="centrar"
  #13 (permalink)  
Antiguo 03/07/2009, 13:03
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.810
Antigüedad: 6 años, 10 meses
Puntos: 535
Respuesta: Alinear elementos en pie (footer)

Señor juez , con su venia:
Yo sólo respondía a:
Cita:
Iniciado por Reverberante Ver Mensaje
¿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
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++

Última edición por kseso?; 03/07/2009 a las 13:23
  #14 (permalink)  
Antiguo 03/07/2009, 14:25
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.243
Antigüedad: 7 años, 6 meses
Puntos: 278
Respuesta: Alinear elementos en pie (footer)

Cita:
Iniciado por trasgukabi Ver Mensaje
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
__________________
Visita mi nueva web idplus.org
  #15 (permalink)  
Antiguo 03/07/2009, 14:28
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.243
Antigüedad: 7 años, 6 meses
Puntos: 278
Respuesta: Alinear elementos en pie (footer)

Cita:
Iniciado por kseso? Ver Mensaje
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;}
__________________
Visita mi nueva web idplus.org
  #16 (permalink)  
Antiguo 03/07/2009, 14:38
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.810
Antigüedad: 6 años, 10 meses
Puntos: 535
Respuesta: Alinear elementos en pie (footer)

Cita:
Iniciado por Mikmoro Ver Mensaje
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...
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #17 (permalink)  
Antiguo 03/07/2009, 14:41
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.243
Antigüedad: 7 años, 6 meses
Puntos: 278
Respuesta: Alinear elementos en pie (footer)

Cita:
Iniciado por kseso? Ver Mensaje
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í
__________________
Visita mi nueva web idplus.org
  #18 (permalink)  
Antiguo 04/07/2009, 11:19
 
Fecha de Ingreso: junio-2009
Mensajes: 138
Antigüedad: 4 años, 10 meses
Puntos: 5
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.
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 11:35.
SEO by vBSEO 3.3.2