Alinear IMG y TXT en linea inferior

preguntonto · #1 (**permalink**) 05/08/2010, 11:02

Ese es mi simple y gran problema. no puedo alinear el texto en la linea inferior de una imagen

Miren les pongo una captura de como me sale ami MAL y como tiene que ser BIEN

[url=http://www.subirimagenes.com/privadas-css-1116686.html]Ver Imagen: http://s3.subirimagenes.com:81/privadas/previo/thump_1116686css.jpg[/url]

Aqui esta el css son varias cajas que se reìten de un sitio dinamico

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>X_x</title>
<style type="text/css">
<!--
body,td,th {
	color: #000000;
}

#contenedor {
	width:300px;
	height: auto;
	border:1px #00CC99 solid;
	margin:50px 50px 50px 50px;
	float:left;
}

#img {
	width:100px;
	height: auto;
	color:#330033;
	border:1px #999999 solid;
	float:left;
}

#txt{
	width:190px;
	height:100%;
	background-color:#33FF99;
	float:right;
}

-->
</style>
</head>

<body>

<div id="contenedor">
	<div id="img">
    <img src="http://img.teoriza.com/messenger/iconos-gestuales-gratis-para-descargar-messenger-msn.jpg"/>
    </div>
    <div id="txt">
    Este es el texto el cual se muestra en dos lineas
    </div>
</div>



<div id="contenedor">
	<div id="img">
    <img src="http://img.teoriza.com/messenger/iconos-gestuales-gratis-para-descargar-messenger-msn.jpg"/>
    </div>
    <div id="txt">
    Este es el texto el cual se muestra en dos lineas
    </div>
</div>


<div id="contenedor">
	<div id="img">
    <img src="http://img.teoriza.com/messenger/iconos-gestuales-gratis-para-descargar-messenger-msn.jpg"/>
    </div>
    <div id="txt">
    Este es el texto el cual se muestra en dos lineas
    </div>
</div>


<div id="contenedor">
	<div id="img">
    <img src="http://img.teoriza.com/messenger/iconos-gestuales-gratis-para-descargar-messenger-msn.jpg"/>
    </div>
    <div id="txt">
    Este es el texto el cual se muestra en dos lineas
    </div>
</div>



</body>
</html>

TheDark03 · #2 (**permalink**) 05/08/2010, 11:22

#txt{
width:190px;
height:100%;
background-color:#33FF99;
float:right;
margin-top:30px;
}

Saludos-..

preguntonto · #3 (**permalink**) 05/08/2010, 11:29

No.

Me sale centrado verticalmente al medio. aparte hay que tener en cuenta que el texto en este caso tiene dol lineas pero hay casos que solo tiene una. tiene que alinear tanto con una linea de texto o dos

por eso el problema tambien

TheDark03 · #4 (**permalink**) 05/08/2010, 11:46

plop!

no me fije bien...

#txt{width:190px;height:100%;background-color:#33FF99;float:right;margin-top:30px;}

mira si notas el height:dice 100%... esto hace q adopte la altura de su padre q seria 96px por el tamaño de tu imagen...tendria q ser height:auto y si le pones height:100% dale un padding-top:30px (juega con las medidas)

ahora cuando puse margin-top:30px solo era una referencia pense q ya sabrias resolverlo tu solo... bueno en fin

Saludos

preguntonto · #5 (**permalink**) 05/08/2010, 12:09

Hola Dark03

Mira por que te digo que no

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>X_x</title>
<style type="text/css">
<!--
body,td,th {
	color: #000000;
	font-family:Verdana;
	font-size:12px;
	font-weight:bold;
	
}

#contenedor {
	width:300px;
	height: auto;
	border:1px #00CC99 solid;
	margin:50px 50px 50px 50px;
	float:left;
}

#img {
	width:100px;
	height: auto;
	color:#330033;
	border:1px #999999 solid;
	float:left;
}

#txt{
width:190px;
height:100%;
background-color:#33FF99;
float:right;
margin-top:70px;
}

-->
</style>
</head>

<body>

<div id="contenedor">
	<div id="img">
    <img src="http://img.teoriza.com/messenger/iconos-gestuales-gratis-para-descargar-messenger-msn.jpg"/>
    </div>
    <div id="txt">
    Este es el texto el cual se muestra en dos lineas
    </div>
</div>



<div id="contenedor">
	<div id="img">
    <img src="http://img.teoriza.com/messenger/iconos-gestuales-gratis-para-descargar-messenger-msn.jpg"/>
    </div>
    <div id="txt">
    Este es el texto el cual se </div>
</div>


<div id="contenedor">
	<div id="img">
    <img src="http://img.teoriza.com/messenger/iconos-gestuales-gratis-para-descargar-messenger-msn.jpg"/>
    </div>
    <div id="txt">
    Este es el texto el cual se </div>
</div>


<div id="contenedor">
	<div id="img">
    <img src="http://img.teoriza.com/messenger/iconos-gestuales-gratis-para-descargar-messenger-msn.jpg"/>
    </div>
    <div id="txt">
    Este es el texto el cual se muestra en dos lineas
    </div>
</div>



</body>
</html>

El texto del titulo es dinamico. Hay casos que tendre dos lineas y casos que tendre una linea

en el ejemplo puse con casos de una linea y casos de dos lineas

Te das cuenta?

TheDark03 · #6 (**permalink**) 05/08/2010, 12:15

pero men no te compliques crea otro css para tus titulos de una sola linea y de dos lineas....

lo q yo haria es darle un height presstablecido y de acuerdo al texto q tenga darle un padding a tu contenedor de tu titulo y asi tener un standar

Saludos

PD: No te copliques la vida

preguntonto · #7 (**permalink**) 05/08/2010, 12:26

Es un sitio dinamico...

consulto a una base de datos y extraigo el titulo. no ingreso los titulos de forma manual.

podria hacer desde php un contador de caracteres y que cuando pase un limite muestre otro css de dos lineas pero es medio raro que esto no se pueda hacer desde css...

OSea esto no se puede hacer? alinear de forma vertical para que siempre se posicione en la linea inferior?

que porqueria...

TheDark03 · #8 (**permalink**) 05/08/2010, 12:43

Cita:

Iniciado por preguntonto

Es un sitio dinamico...

consulto a una base de datos y extraigo el titulo. no ingreso los titulos de forma manual.

podria hacer desde php un contador de caracteres y que cuando pase un limite muestre otro css de dos lineas pero es medio raro que esto no se pueda hacer desde css...

OSea esto no se puede hacer? alinear de forma vertical para que siempre se posicione en la linea inferior?

que porqueria...

men si se podria hacer aunque pongas la cantidad de texto q quieras..pero el detalle es q solo se veria una parte,esto es con la propiedad overflow...

ahora yo creo q esto no te sirve pero igual te lo menciono...

Saludos

y respondiendo a tu pregunta... si es dinamica los titulos pueden variar y x eso anteriormente te dije q crees un standar en el cual q tenga prioridad el de dos lineas...

Saludos... opino q la mejor solucion es la de tener dos css y tener una funcion q si se pasa de un numero definido de caracteres te reescriba el codigo

preguntonto · #9 (**permalink**) 05/08/2010, 12:47

entonces no se puede hacer... porque se veria la mitad

preguntonto · #10 (**permalink**) 05/08/2010, 13:46

bueno ya... termine contando caracteres desde php y dejando que decida php cual css mostrar si 1 linea 2 lineas o 3 lineas...

pero estoy muy desepcionado de css... no entiendo como no va dejar hacer eso

si alguien sabe por favor que me lo diga

jomaruro · #11 (**permalink**) 06/08/2010, 14:47

Hola:

¿has probado aplicar bottom:0; al texto?

Saludos.