Foros del Web » Creando para Internet » CSS »

Organizar div correctamente

Estas en el tema de Organizar div correctamente en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 11/03/2011, 11:11
Avatar de aguila_393  
Fecha de Ingreso: septiembre-2007
Ubicación: Argentina
Mensajes: 406
Antigüedad: 9 años, 5 meses
Puntos: 1
Organizar div correctamente

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.
  #2 (permalink)  
Antiguo 11/03/2011, 11:24
Avatar de GAST0N  
Fecha de Ingreso: agosto-2010
Ubicación: Buenos Aires
Mensajes: 680
Antigüedad: 6 años, 7 meses
Puntos: 64
Respuesta: Organizar div correctamente

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..
__________________
Twitter: @GastonArnedo

Muerte a los <tr> y <td>
  #3 (permalink)  
Antiguo 11/03/2011, 11:27
Avatar de aguila_393  
Fecha de Ingreso: septiembre-2007
Ubicación: Argentina
Mensajes: 406
Antigüedad: 9 años, 5 meses
Puntos: 1
Respuesta: Organizar div correctamente

Claro, yo el codigo lo tengo asi:

Código HTML:
Ver original
  1. <div class='left post'>
  2.                         <img src='".$pps->thumbnail."' class='img_powerpoint' width='130' height='100' />
  3.                         <span class='title'>".$pps->ppsName."</span><br/><br/>
  4.                         <p style='overflow:hidden;'>".$pps->description."</p><br/><br/>
  5.                         <div class='rate'>".$ratingManager->drawStars($pps->id)."</div>
  6.  
  7.                     </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.
  #4 (permalink)  
Antiguo 11/03/2011, 11:33
Avatar de aguila_393  
Fecha de Ingreso: septiembre-2007
Ubicación: Argentina
Mensajes: 406
Antigüedad: 9 años, 5 meses
Puntos: 1
Respuesta: Organizar div correctamente

Aca les dejo una imagen de como deberia quedar :



Se hacerlo con tablas, pero no logro que funcione con las divs.
  #5 (permalink)  
Antiguo 11/03/2011, 11:58
Avatar de gVenom  
Fecha de Ingreso: julio-2008
Ubicación: Costa Rica
Mensajes: 1.455
Antigüedad: 8 años, 8 meses
Puntos: 53
Respuesta: Organizar div correctamente

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>
__________________
"Al que venciere y guardare mis obras hasta el fin, yo le daré autoridad sobre las naciones."
Apocalipsis 2: 26
Servicios para Pymes http://dst.co.cr
  #6 (permalink)  
Antiguo 10/07/2011, 14:06
Avatar de ositopicaron  
Fecha de Ingreso: diciembre-2006
Mensajes: 11
Antigüedad: 10 años, 3 meses
Puntos: 0
Respuesta: Organizar div correctamente

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

Etiquetas: correctamente, organizar
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 07:56.