Foros del Web » Creando para Internet » CSS »

Ubicar un texto siempre al final de la pagina (no flotante)

Estas en el tema de Ubicar un texto siempre al final de la pagina (no flotante) en el foro de CSS en Foros del Web. Buenas tardes: ¿Hay alguna forma con CSS para que un texto este siempre al final mismo de una página, sin importar el tamaño de esta?. ...
  #1 (permalink)  
Antiguo 20/03/2012, 13:35
Avatar de freesoftwarrior  
Fecha de Ingreso: marzo-2006
Mensajes: 362
Antigüedad: 18 años, 8 meses
Puntos: 10
Ubicar un texto siempre al final de la pagina (no flotante)

Buenas tardes:
¿Hay alguna forma con CSS para que un texto este siempre al final mismo de una página, sin importar el tamaño de esta?. Y no me refiero a textos flotantes de esos que aunque uno scrole la página siempre se muestra, sino que, si por ejemplo la página ocupa con texto e imágenes la mitad de la pantalla de alto, el texto se muestre al final de la pantalla.

Espero haberme explicado bien.

Un saludo desde Lima, Perú
  #2 (permalink)  
Antiguo 20/03/2012, 14:02
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 15 años, 5 meses
Puntos: 269
Respuesta: Ubicar un texto siempre al final de la pagina (no flotante)

Podrías probar con position:absolute; o text-align:right;
No se entiende bien lo de "al final", supongo será a la derecha, o abajo.
PD: En css por lo general se lee de arriba hacia abajo y de izquierda a derecha (flujo de documento) y todo es tratado como una caja por lo que tal vez "al final" debería ser expresado en términos de "arriba, abajo, izquierda, derecha".
Si podes aportar código o alguna imagen/captura va a ser más fácil ayudarte.

Saludos.
  #3 (permalink)  
Antiguo 20/03/2012, 15:37
Avatar de freesoftwarrior  
Fecha de Ingreso: marzo-2006
Mensajes: 362
Antigüedad: 18 años, 8 meses
Puntos: 10
Respuesta: Ubicar un texto siempre al final de la pagina (no flotante)

Muchas gracias por la respuesta. Si, es cierto, revisando mi post no es muy claro. Lo que pasa es que quiero ubicar en la parte baja de una página, un mensaje con el tiempo de carga. Pero sucede que a veces esta página (creadas en ASP) ocupan apenas la mitad de alto y obviamente el mensaje de "tiempo de carga" aparece al final de todo, y lo que busco es que siempre este en la parte baja de la pantalla, por eso dije al final de la página.

Un saludo desde Lima, Perú
  #4 (permalink)  
Antiguo 20/03/2012, 17:11
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 15 años, 5 meses
Puntos: 269
Respuesta: Ubicar un texto siempre al final de la pagina (no flotante)

Probablemente necesites un "pie pegadizo" o "sticky footer"

http://www.elwebmaster.com/articulos...on-estilos-css
http://www.cssblog.es/sticky-footer-con-css/
http://www.araudi.net/ (enlace:"pie siempre abajo")
o con algo de javascript/jquery: http://www.drupalcoder.com/blog/cros...t-using-jquery
... y mucho más en google.

También podes hacerlo más fácil, usando solo posicion absoluta o fija y bottom:0; pero deberás considerar que esta caja tarde o temprano podrá apilarse si redimensionamos en alto la ventana del navegador. Para lo cual debes controlar la caja con la propiedad z-index
http://es.html.net/tutorials/css/lesson15.php

Saludos
  #5 (permalink)  
Antiguo 20/03/2012, 17:26
Avatar de freesoftwarrior  
Fecha de Ingreso: marzo-2006
Mensajes: 362
Antigüedad: 18 años, 8 meses
Puntos: 10
Respuesta: Ubicar un texto siempre al final de la pagina (no flotante)

Muchas gracias por tu respuesta. En realidad lo que no deseo es algo como el sticky footer (tal cual lo mencioné en mi post inicial). El tema del bottom=0 me parece más interesante. Voy a revisar por ese lado pues me has dado una idea. Afortunadamente el tema de redimencionamiento de ventanas no se llegará a dar porque todas las ventanas creadas no son redimencionables.

Un saludo desde Lima, Perú
  #6 (permalink)  
Antiguo 21/03/2012, 13:32
Avatar de freesoftwarrior  
Fecha de Ingreso: marzo-2006
Mensajes: 362
Antigüedad: 18 años, 8 meses
Puntos: 10
Respuesta: Ubicar un texto siempre al final de la pagina (no flotante)

SOLUCIONADO:

No era con CSS sino con JavaScript

Cita:
<%
If Session("setupTC") Then
endTime = Timer()
varTextoTime = "La carga se completo en " & endtime-starttime & " segundos = " & " (" & (endtime-starttime)*1000 & " milliseconds)."
Response.Write ("<div style='position:absolute; width:100%; bottom=1px;' align='right' class='tiempoCarga'>" & varTextoTime & "</div>")
End If
%>
  #7 (permalink)  
Antiguo 21/03/2012, 14:29
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 15 años, 5 meses
Puntos: 269
Respuesta: Ubicar un texto siempre al final de la pagina (no flotante)

bottom=1px; (atributo) esta mal, debe ser: bottom:1px (propiedad)

No hace falta javascript.
Quedará más prolijo si das un id y colocas los estilos en una hoja de estilos externa.

Código:
<!-- html -->
<div id="esto"></div>

/* css */
#esto{position:absolute; bottom:1px; width:100%;  text-align:right; }
pd: http://www.librosweb.es/
  #8 (permalink)  
Antiguo 23/03/2012, 06:29
Avatar de freesoftwarrior  
Fecha de Ingreso: marzo-2006
Mensajes: 362
Antigüedad: 18 años, 8 meses
Puntos: 10
Respuesta: Ubicar un texto siempre al final de la pagina (no flotante)

Ups!, tienes razón, escribí mal el código (aquí, porque en el original esta con los :).
Sin embargo encontré un "pero". Al poner position:absolute lo único que logro es que se muestre siempre al final de la ventana PERO no de la página.

Las páginas que uso se muestran o bien en un iframe o bien en una ventana adicional (de las creadas con windows.open). Imagina que el iframe tiene 800x600, entonces con el position:absolute lo ubico al final mismo de dicho iframe, sin embargo, si la pagina que muestra el iframe es más larga que 600px, el texto, por tener position:absolute, se muestra siempre a la altura que corresponde al final del iframe y no al final de la página.

Este es el código final que estoy usando:

Cita:
<div style='position:absolute; width:100%; bottom=1px;' align='right' class='tiempoCarga'>
Si cambio a position:relative si logro que se muestre al final del contenido mostrado en el iframe indistinto si es más largo que los 600px que tiene dicho iframe, sin embargo, si el contenido tiene un largo de 300px (por ejemplo), se muestra justo a continuación del final del contenido y no en la posición 600 (o 590 aproximadamente).

Sigo probando código, si por ahí se te ocurre alguna idea sería genial para ver si al final se puede hacer lo que busco.

Mil gracias
Saludos desde Lima, Perú
  #9 (permalink)  
Antiguo 23/03/2012, 10:50
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 15 años, 5 meses
Puntos: 269
Respuesta: Ubicar un texto siempre al final de la pagina (no flotante)

Cita:
Iniciado por freesoftwarrior Ver Mensaje
Al poner position:absolute lo único que logro es que se muestre siempre al final de la ventana PERO no de la página.
Te va a servir estudiar este capítulo: http://www.librosweb.es/css/capitulo..._absoluto.html

las cotas o distancias (top/right/bottom/left) de las cajas absolutas dependen de su ancestro relativo inmediato. En caso de no encontrarse ninguno la caja absoluta y sus cotas pasan a depender de body.

Las cajas fijas (position:fixed), en cambio, no dependen de su padre relativo. Sino que toman el origen de sus cotas respecto de la ventana del navegador.
(tal vez necesites usar este tipo de posicionamiento)

Un ejemplo:
http://jsfiddle.net/cristian_cena/X2XhB/

pd: seguís colocándo como atributos (bottom=1px;' align='right' ) lo que debes pasar como propiedades dentro del atributo style:
<div style="position:absolute; width:100%; bottom: 1px; text-align: right;" class='tiempoCarga'>
Esto es poco profesional y poco práctico, mas bien aprovecha la clase (o incluí una id) para separar el contenido de los estilos.

Última edición por cristian_cena; 23/03/2012 a las 10:58

Etiquetas: final, siempre, tamaño, ubicar
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 12:11.