Foro de elhacker.net

Programación => Desarrollo Web => Mensaje iniciado por: gAb1 en 24 Junio 2014, 19:13 pm



Título: texto alineado con div y p style
Publicado por: gAb1 en 24 Junio 2014, 19:13 pm
Hola que tal, estoy intentado poner unas frases en la parte de abajo de la web, en el apartado footer.

Necesito unas frases una a cada lado y en el centro, este es el codigo actual:

Código
  1. <div style="position: absolute; bottom: 0px;">
  2.     <p style="position: fixed; width: 100%;">Frase a la izquierda.</p>
  3.     <p style="position: fixed; text-align: center; width: 100%;">©2014 Empresa All rights reserved.</p>
  4. </div>
  5.  

¿Cual es el problema? ¿Como haría para otro texto a la derecha?

Muchas gracias.


Título: Re: texto alineado con div y p style
Publicado por: #!drvy en 24 Junio 2014, 19:18 pm
Usa text-align:right; ?

PD1: CSS tiene sus propias clases para que no tengas que repetir el mismo codigo (position:fixed; width:100%;)

PD2: Si no vas a usar posicionamiento por pixeles o porcentajes, no uses position:fixed;.

Saludos


Título: Re: texto alineado con div y p style
Publicado por: gAb1 en 24 Junio 2014, 19:22 pm
Vale, el problema es que text-align: center no funciona cuando utilizo bottom... entonces tampoco funcionará para right :P

Ya, para probar que funciona lo hago asi todo en el html, pero luego lo paso a css todo lo posible.

Tenia pensado usar responsive para el diseño... hehehe


Título: Re: texto alineado con div y p style
Publicado por: #!drvy en 24 Junio 2014, 19:54 pm
No funciona, porque position:absolute; hace que el contenedor ocupe lo maximo que ocupen de ancho sus hijos.

Usa width:99%; sobre el div.

Alternativamente, si quieres que todo este alineado en la misma linea que es lo que supongo porque utilizas position:fixed...

Código
  1. <div style="position:absolute; bottom:0; width:99%;">
  2. <p style="text-align:left; float:left; width:33%; max-width:33%;">Texto a la izquierda</p>
  3. <p style="text-align:center; float:left; left:33%; width:33%; max-width:33%;">Texto al centro</p>
  4. <p style="text-align:right; float:left; left:66%;  width:33%; max-width:33%;">Texto a la derecha</p>
  5. <div style="clear:both;"></div>
  6. </div>

Citar
Ya, para probar que funciona lo hago asi todo en el html, pero luego lo paso a css todo lo posible.

Pues estas haciendo el doble de trabajo.. puedes probar directamente desde CSS.

Saludos


Título: Re: texto alineado con div y p style
Publicado por: gAb1 en 24 Junio 2014, 20:10 pm
Muchas gracias :)