texto alineado con div y p style

Iniciado por gAb1, 24 Junio 2014, 19:13 PM

0 Miembros y 1 Visitante están viendo este tema.

gAb1

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 (html5) [Seleccionar]

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


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

Muchas gracias.

#!drvy

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

gAb1

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

#!drvy

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 (html4strict) [Seleccionar]
<div style="position:absolute; bottom:0; width:99%;">
<p style="text-align:left; float:left; width:33%; max-width:33%;">Texto a la izquierda</p>
<p style="text-align:center; float:left; left:33%; width:33%; max-width:33%;">Texto al centro</p>
<p style="text-align:right; float:left; left:66%;  width:33%; max-width:33%;">Texto a la derecha</p>
<div style="clear:both;"></div>
</div>


CitarYa, 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

gAb1