Organizar div correctamente

[aguila_393]

Tengo un problema, necesito organizar un div para que muestre unos textos. El div mencionado lo pueden ver en la web:
http://powerpoints.admaz.com.ar/

El div es el de los items donde se muestra la imagen, lo que tengo que hacer es que quede la imagen a la izquierda, y el titulo, descripcion y las estrellitas a la derecha de la imagen como esta ahora, el problema es que ahora lo tengo armado pero con saltos de linea, por lo que si agrego una descripcion larga se sale del div. Quiero hacer que la descripcion sea de dos lineas y el titulo y las estrellas de una sola, y con overflow hidden para que no se deforme la div. Alguien me ayuda con un poco de codigo para amar eso? Es que pruebo y no me sale.

[GAST0N]

mejor seria que el texto se corte , haciendolo con php

o sea...

que cada tantos caracteres corte la palabra y agregue los puntos suspensivos ....

es una sugerencia

de todas formas hay algo mal armado y maquetado, ya que no deberia haber problemas con la longitud y 2 lineas del texto...

como es algo ya armado , habria q revisarlo completo para volver a acomodar todo lo q sea necesario..

[aguila_393]

Claro, yo el codigo lo tengo asi:

Código HTML:

<div class='left post'>
                        <img src='".$pps->thumbnail."' class='img_powerpoint' width='130' height='100' />
                        <span class='title'>".$pps->ppsName."</span><br/><br/>
                        <p style='overflow:hidden;'>".$pps->description."</p><br/><br/>
                        <div class='rate'>".$ratingManager->drawStars($pps->id)."</div>
 
                    </div>
 

Y supongo que tener uqe meter cada cosa en un div con ancho definido, y darle float left, o no se como, por eso pregunto.

[aguila_393]

Aca les dejo una imagen de como deberia quedar :



Se hacerlo con tablas, pero no logro que funcione con las divs.

[gVenom]

puedes definirle un ancho especifico a los <p> para que el largo sea el que ocupas.
con line-height le das la separación y tamaño al <p>

[ositopicaron]

Iniciado por aguila_393

Aca les dejo una imagen de como deberia quedar :



Se hacerlo con tablas, pero no logro que funcione con las divs.

Hola hermano yo tuve una situación similar y me arme una estructura en CSS, el contenido (tanto la imagen como el texto), me lo traigo de una base de datos y queda de 10 !!!

A ver si te puedo ayudar con esto:

el HTML es el siguiente:
---------------------------------------------------------------------------------------

<div class="left-article"><a href="#"> <img class="blog-img" src="images/flyers/<?php echo $obj_evento->getFotomin();?>" alt="blogimg1" /></a>

<div class="title">
<div class="fecha"><?php echo $obj_evento->getFechaevento();?></div>
<div class="barrita">|</div>
<div class="titulo"><a href="#"><?php echo $obj_evento->getTitulo(); ?></a></div>
</div>

<div class="subtitulo"><?php echo $obj_evento->getSubtitulo();?></div>
<div class="desc"><?php echo $obj_evento->getIntro();?></div>

<div class="infobubble">
<div class="textofooter"><?php echo $obj_evento->getTextofooter();?></div>
<div class="leerMas"><a href="./evento" target="_blank">leer más</a></div> <div class="inscribirme"><a href="#">inscribirme</a></div>
</div>


</div> <!-- left-article -->

---------------------------------------------------------------------------------------
Fijate que en donde están las etiquetas PHP tenés que reemplazarlas por el texto el vos le querés colocar
----------------------------------------------------------------------------------------

El CSS es el siguiente:
---------------------------------------------------------------------------------------
#wrapper .left-article {
float: left;
width: 740px;
height:230px;
padding : 0px 0 10px 0;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #ccc;
}
.left-article .title {
float: right;
width: 480px;
height: 25px;

}

.left-article .blog-img {
width:240px;
height:210px;
}

.left-article .title .fecha {
width:110px;
height:25px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 18px;
color:#8CD50B;
overflow:hidden;
padding-top:2px;
float:left;
}

.left-article .title .titulo {
width:350px;
height:25px;
float:left;
font-family: Arial, Helvetica, sans-serif;
font-size: 24px;
color:#414141;
overflow:hidden;

}

#content .left-article .title .titulo a {
font-family: Arial, Helvetica, sans-serif;
font-size: 24px;
color:#414141;
text-decoration:none;
overflow:hidden;
margin-top:5px;

}

#content .left-article .title .titulo a:hover {
color: #8CD50B;
font-family: Arial, Helvetica, sans-serif;
overflow:hidden;
}

.left-article .title .barrita {
float:left;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 18px;
color:#8CD50B;
width:1px;
height:25px;
margin-right:15px;
}

#content {
float: left;
width:940px;
}
#content .left-article .subtitulo {
width:480px;
height:27px;
display:block;
margin-bottom:3px;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
color: #414141;
font-size: 20px;
overflow:hidden;
}


#content .left-article .infobubble {
background-image: url(../images/infobubble.png);
height: 25px;
width: 480px;
background-repeat: no-repeat;
margin-top:3px;
float: right;

}
#content .left-article .infobubble .textofooter{
width: 305px;
height:15px;
color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
text-align: left;
padding-left:5px;
padding-top:5px;
float: left;
overflow:hidden;
}

.left-article .desc {
float: right;
width: 480px;
height:122px;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
text-align:justify;
color: #414141;
margin-bottom:0px;
margin-top:5px;
overflow:hidden;
}

#content .left-article .contenido a {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
text-decoration:none;
font-size: 12px;
color: #414141;
margin-top: 12px;
}

#content .left-article .contenido a:hover {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 12px;
color: #fff;
margin-top: 12px;
text-decoration: underline;
}

.left-article .leerMas {
width:65px;
height:20px;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
text-align: left;
margin-top:5px;
margin-left:12px;
float: left;
color:#414141;
text-decoration:none;
}

.left-article .leerMas a{
color:#414141;
text-decoration:none;
}

.left-article .leerMas a:hover {
text-decoration:underline;
}

.left-article .inscribirme {
width:75px;
height:20px;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
text-align: left;
margin-top:5px;
margin-left:10px;
float: left;
color:#414141;
text-decoration:none;
}

.left-article .inscribirme a {
color:#414141;
text-decoration:none;
}

.left-article .inscribirme a:hover {
text-decoration:underline;
}
---------------------------------------------------------------------------------------

Solo tenes que buscarte unas imágenes para reemplazar las mías (los botones, el infobubble, etc).

Fijate que hay más elementos que en tu estructura, ya que tenes una imagen a la izquierda, después tenés una fecha (arriba a la izquierda), inmediatamente hay una línea vertical de separación y luego viene un título corto (a la derecha de la fecha). Abajo vas a encontrar el subtítulo, y por debajo de este, el contenido. Por debajo del contenido vas a encontrar una barra que se llama infobubble con un pequeño texto y dos botones (inscribirme y leer mas).

Acá te adjunto la imagen de como se vería:



Espero que te sirva. Mi e-mail es: [email protected]