Foros del Web » Creando para Internet » CSS »

Alinear texto verticalmente en un div con altura variable

Estas en el tema de Alinear texto verticalmente en un div con altura variable en el foro de CSS en Foros del Web. Buenas noches ante todo, este es mi primer post y me registré despues de tiempo de ver el foro para buscar soluciones. Lo que yo ...
  #1 (permalink)  
Antiguo 23/12/2010, 18:22
 
Fecha de Ingreso: diciembre-2010
Mensajes: 4
Antigüedad: 7 años
Puntos: 0
Pregunta Alinear texto verticalmente en un div con altura variable

Buenas noches ante todo, este es mi primer post y me registré despues de tiempo de ver el foro para buscar soluciones.

Lo que yo necesito no lo encontré (quizas no sé buscar, pido disculpas si ya existe) y es alinear verticalmente abajo un texto en un div de altura variable.

Ví que hay varias soluciones a este problema pero siempre con una altura fija, ya probé con height:100% pero no me funciona.

Acá pongo mi CSS

Código:
#foto_foto{
	float:left;
	width:900px;
	margin:0 auto;
}
#foto_caption{
	float:right;
	width:180px;
	position:relative;
}
#foto_caption div{
	position:absolute;
	bottom:0;
	right:0;
}
Y acá mi HTML

Código:
<div id="foto_post">
    <div id="foto_foto"><img src="test.jpg" width="900" height="400" /></div>
    <div id="foto_caption">
        <div>Texto texto texto</div>
    </div>
</div>
La idea es tener una imagen a la izquierda y que el texto que la describe quede a la derecha y alineado al "bottom".

Espero no ser molestia y agradezco cualquier ayuda.

Saludos
  #2 (permalink)  
Antiguo 23/12/2010, 18:39
Avatar de GAST0N  
Fecha de Ingreso: agosto-2010
Ubicación: Buenos Aires
Mensajes: 680
Antigüedad: 7 años, 4 meses
Puntos: 64
Respuesta: Alinear texto verticalmente en un div con altura variable

es necesario que tengas 2 div ??

<div id="foto_caption">
<div>Texto texto texto</div>
</div>


seria mejor

<div id="foto_post">
<div id="foto_foto"><img src="direcciondetuimagen" width="900" height="400" />
<p>Texto</p>
</div>
</div>


ahi le das estilo al P para ubicarlo bien,
__________________
Twitter: @GastonArnedo

Muerte a los <tr> y <td>
  #3 (permalink)  
Antiguo 25/12/2010, 13:04
 
Fecha de Ingreso: diciembre-2010
Mensajes: 4
Antigüedad: 7 años
Puntos: 0
Respuesta: Alinear texto verticalmente en un div con altura variable

gracias gaston, aunque queda un poco mas limpio, no me soluciona el problema
  #4 (permalink)  
Antiguo 25/12/2010, 15:06
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 5 meses
Puntos: 137
Respuesta: Alinear texto verticalmente en un div con altura variable

Intenta con:
http://css.devillasbuenas.es/alineacion_multiple.html
  #5 (permalink)  
Antiguo 25/12/2010, 15:39
Avatar de Webs_DS  
Fecha de Ingreso: diciembre-2010
Ubicación: España
Mensajes: 62
Antigüedad: 7 años
Puntos: 0
Respuesta: Alinear texto verticalmente en un div con altura variable

Buenas!!
Haber según lo que te entendí es que quieres que aparezca a la izquierda la imagen y a la derecha el texto no? y que quede asi siempre independiente dle tamaño de la ventana y navegador no? Entonces, donde estas los atributos del div "foto_post"??

Bueno si es asi te dejo lo que yo haría:


código CSS:

#foto_post{
width:1000px;
height:500px;}


#foto_foto{
float:left;
width:900px;
height:400px;}

#foto_caption{
float:right;
width:100px;
height:400px;}


Y el código Html:

<div id="foto_post">
<div id="foto_foto"><img src="webnew/img/bg.jpg" width="900" height="400" /></div>
<div id="foto_caption">
<div>Texto texto texto</div>
</div>
</div>


Y si no es lo que buscas, avisame,, y te ayudaré en lo posible,, ;)

Suerte!!

D.S.
  #6 (permalink)  
Antiguo 25/12/2010, 15:40
Avatar de Webs_DS  
Fecha de Ingreso: diciembre-2010
Ubicación: España
Mensajes: 62
Antigüedad: 7 años
Puntos: 0
Respuesta: Alinear texto verticalmente en un div con altura variable

Perdón,, el código Html sería asi,,: (eliminar un div)

Html

<div id="foto_post">
<div id="foto_foto"><img src="webnew/img/bg.jpg" width="900" height="400" /></div>
<div id="foto_caption">
Texto texto texto
</div>
</div>

Saludos....
  #7 (permalink)  
Antiguo 25/12/2010, 16:30
 
Fecha de Ingreso: diciembre-2010
Mensajes: 77
Antigüedad: 7 años
Puntos: 11
Respuesta: Alinear texto verticalmente en un div con altura variable

prueba con el atributo css vertical-align, pone el texto en la posicion que desees sin depender de la altura del idv

un ejemplo:

css:

Código PHP:
.div p {
   
vertical-alignbottom;

html:

Código PHP:
<div id="div1" class="div">
      <
p>Esto es un texto alineado verticalmente abajo :D</p>
</
div
saludos :)

http://versinlimites.com.ar/
  #8 (permalink)  
Antiguo 25/12/2010, 19:19
 
Fecha de Ingreso: diciembre-2010
Mensajes: 4
Antigüedad: 7 años
Puntos: 0
Respuesta: Alinear texto verticalmente en un div con altura variable

Web_DS, mi tema es que no puedo asignar un alto fijo, asi que tu respuesta no me sirve lamentablemente =(

Lo que estoy ahciendo es un theme para tumblr, y depende lo que el usuario suba, el alto del div va a cambiar, por eso no puedo asignarle un alto fijo.

Yo necesito algo así

  #9 (permalink)  
Antiguo 25/12/2010, 19:33
 
Fecha de Ingreso: noviembre-2010
Ubicación: On a world of Anime & Web.
Mensajes: 137
Antigüedad: 7 años
Puntos: 4
Respuesta: Alinear texto verticalmente en un div con altura variable

Mira aqui, en este sitio tengo una recopilacion de muchos links.
http://www.recopilacionweb.tk/

y aqui habla sobre la alineacion del texto, respecto la imagen.
http://creatuweb.espaciolatino.com/tutorhtml/tema10.html#alineacion
  #10 (permalink)  
Antiguo 27/12/2010, 12:51
 
Fecha de Ingreso: diciembre-2010
Mensajes: 4
Antigüedad: 7 años
Puntos: 0
Respuesta: Alinear texto verticalmente en un div con altura variable

no me anda eso :(

alguna otra idea?

Etiquetas: alinear, altura, variables
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 08:33.