Foros del Web » Creando para Internet » CSS »

Alinear IMG y TXT en linea inferior

Estas en el tema de Alinear IMG y TXT en linea inferior en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 05/08/2010, 12:02
 
Fecha de Ingreso: julio-2010
Mensajes: 21
Antigüedad: 7 años, 5 meses
Puntos: 0
Alinear IMG y TXT en linea inferior

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> 
  #2 (permalink)  
Antiguo 05/08/2010, 12:22
 
Fecha de Ingreso: mayo-2010
Ubicación: Lima, Peru.
Mensajes: 176
Antigüedad: 7 años, 6 meses
Puntos: 6
Respuesta: Alinear IMG y TXT en linea inferior

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

Saludos-..
  #3 (permalink)  
Antiguo 05/08/2010, 12:29
 
Fecha de Ingreso: julio-2010
Mensajes: 21
Antigüedad: 7 años, 5 meses
Puntos: 0
Respuesta: Alinear IMG y TXT en linea inferior

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
  #4 (permalink)  
Antiguo 05/08/2010, 12:46
 
Fecha de Ingreso: mayo-2010
Ubicación: Lima, Peru.
Mensajes: 176
Antigüedad: 7 años, 6 meses
Puntos: 6
Respuesta: Alinear IMG y TXT en linea inferior

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
  #5 (permalink)  
Antiguo 05/08/2010, 13:09
 
Fecha de Ingreso: julio-2010
Mensajes: 21
Antigüedad: 7 años, 5 meses
Puntos: 0
Respuesta: Alinear IMG y TXT en linea inferior

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?
  #6 (permalink)  
Antiguo 05/08/2010, 13:15
 
Fecha de Ingreso: mayo-2010
Ubicación: Lima, Peru.
Mensajes: 176
Antigüedad: 7 años, 6 meses
Puntos: 6
Respuesta: Alinear IMG y TXT en linea inferior

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
  #7 (permalink)  
Antiguo 05/08/2010, 13:26
 
Fecha de Ingreso: julio-2010
Mensajes: 21
Antigüedad: 7 años, 5 meses
Puntos: 0
Respuesta: Alinear IMG y TXT en linea inferior

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...
  #8 (permalink)  
Antiguo 05/08/2010, 13:43
 
Fecha de Ingreso: mayo-2010
Ubicación: Lima, Peru.
Mensajes: 176
Antigüedad: 7 años, 6 meses
Puntos: 6
Respuesta: Alinear IMG y TXT en linea inferior

Cita:
Iniciado por preguntonto Ver Mensaje
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

Última edición por TheDark03; 05/08/2010 a las 13:49
  #9 (permalink)  
Antiguo 05/08/2010, 13:47
 
Fecha de Ingreso: julio-2010
Mensajes: 21
Antigüedad: 7 años, 5 meses
Puntos: 0
Respuesta: Alinear IMG y TXT en linea inferior

entonces no se puede hacer... porque se veria la mitad
  #10 (permalink)  
Antiguo 05/08/2010, 14:46
 
Fecha de Ingreso: julio-2010
Mensajes: 21
Antigüedad: 7 años, 5 meses
Puntos: 0
Respuesta: Alinear IMG y TXT en linea inferior

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
  #11 (permalink)  
Antiguo 06/08/2010, 15:47
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Alinear IMG y TXT en linea inferior

Hola:

¿has probado aplicar bottom:0; al texto?

Saludos.


Etiquetas: alinear, img, linea, txt
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 10:07.