Personalizando un Theme, ayuda con CSS

[xiscomax]

Hola compañer@s, bueno estoy modificando un theme concretamente de wordpress, y el problema que encuentro ahora es que me gustaria que los bloques de Posts se crearan de izquierda a derecha y hacia abajo en ese orden.
Os añado un grafico para que os hagais una idea.

Shot at 2007-06-29
La flecha roja es como actua el theme por defecto, que postea en sentido vertical, de arriba hacia abajo.
La linea Negra, en el sentido de los números rojos, es lo que quiero conseguir, que aparezcan los posts de izquierda a derecha y hacia abajo, en ese orden.

No se si me explico correctamente. xD

El CSS es este:

Código PHP:

  /* misc */
 
.clearer,.footer {
    clear: both;
}
.content,.footer {
    padding: 0 5px;
}
/* content CUADRO POST */
.item {
    width: 150px;
    padding: 6px;
    text-align: justify;
    background: #FFFFFF;
    border: 1px solid #0099FF; /* COLOR */
}
/* content TITULO POST - TITULO Nº COMENTARIOS */
.item h1 {
    padding:2px 3px 3px 8px;
    font: normal 11px Verdana, Arial, Tahoma;
    letter-spacing: 1px;
    color: #C36;
    background: url(img/bgtipost.gif);
    /*border: 1px solid #00FF66; /* COLOR */
}
/* content BLOQUE POSTS */
.left {
    float: left;
    width: 370px;
    border: 4px solid #00FF66; /* COLOR */
}
/* post INTERIOR POST */
.entry
{
    margin: 5px 0 5px 0;
    /*border: 1px solid #dadada; /* COLOR */
} 
   

Y el archivo PHP

Código PHP:

  <?php get_header(); ?>
<div class="content">
    <div class="left">
 
            <?php if (have_posts()) : ?>
 
            <?php while (have_posts()) : the_post(); ?>
 
            <div class="item" id="post-<?php the_ID(); ?>">
 
            <h1><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><span class="titulo"><?php the_title(); ?></span></a></h1> 
 
            <div class="entry">
 
            <?php the_content('Read the rest of this entry &raquo;'); ?>
 
            </div>
            
            <?php if(function_exists('the_ratings')) { the_ratings(); } ?>
            
            <p class="info">
            <img src="<?php bloginfo('template_directory'); ?>/images/comments.png" alt="Comments" border="0" align="top" /><strong> </strong><?php comments_popup_link('(0) Comentarios', '(1) Comentario', '(%) Comentarios'); ?>
            <img src="<?php bloginfo('template_directory'); ?>/images/bullet.png" alt="bullete" border="0" align="top" /><strong> </strong><?php the_category(', ') ?>
            <img src="<?php bloginfo('template_directory'); ?>/images/clock.png" alt="Filed" border="0" align="top" /><strong> </strong><?php the_time('d-m-Y') ?></p>
 
            </div>
 
            <?php comments_template(); ?>
 
            <?php endwhile; ?>
 
            <p align="center"><?php next_posts_link('&laquo; Pagina Anterior') ?> <?php previous_posts_link('Siguiente Pagina &raquo;') ?></p>
 
            <?php else : ?>
            <h2 align="center">Ningun Resultado</h2>
            <p align="center">Lo siento. Por favor intenta con terminos diferentes.</p>            
            <p align="center"><?php include (TEMPLATEPATH . "/searchform.php"); ?></p>
            
    <?php endif; ?>  
    </div>
    
    <?php get_sidebar(); ?>        
 
    <br class="clearer"/><span></span>
 
    </div>
<?php get_footer(); ?>
</div>
</body>
</html>  

Gracias desde ya por adelantado.
Salu2

[g05l21]

Podrías probar a cambiar la clase item por esto:

Código PHP:

  .item {
    float:left; /* Prueba a ver como lo dejaría poniendolos flotantes*/
    width: 40%; /* escoje el porcentaje q mejor te venga, pero ponlo en porcentaje*/
    padding: 6px;
    text-align: justify;
    background: #FFFFFF;
    border: 1px solid #0099FF; /* COLOR */
} 
   

Vamos, creas los post flotantes con un ancho del 40% de la página (no uses el 50% porque tienes q tener en cuanta los padding y margin) y rezas para que no se destroce mucho el diseño

[xiscomax]

Iniciado por g05l21

Podrías probar a cambiar la clase item por esto:

Código PHP:

  .item {
    float:left; /* Prueba a ver como lo dejaría poniendolos flotantes*/
    width: 40%; /* escoje el porcentaje q mejor te venga, pero ponlo en porcentaje*/
    padding: 6px;
    text-align: justify;
    background: #FFFFFF;
    border: 1px solid #0099FF; /* COLOR */
} 
   

Vamos, creas los post flotantes con un ancho del 40% de la página (no uses el 50% porque tienes q tener en cuanta los padding y margin) y rezas para que no se destroce mucho el diseño

Lol xDD eres un genio muchisimas gracias XD me a funcionado perfectamente.
Salu2

[g05l21]

Me alegro.
Un saludo!!

[xiscomax]

Iniciado por g05l21

Me alegro.
Un saludo!!

Jejeje de welta con mis dudas. Como d costumbre :P
Ahí alguna otra forma para realizarlo?
Lo digo porque si todas las entradas son igual de largas crea una tabla de Posts perfecta cuadriculada, Parece un tablero de Ajedrez xD pero si creas una entrada algo mas larga que otra, esta descuadra al resto creando incluso huecos vacíos en donde cabrían otras entradas.

Entonces abria alguna forma para que estas entradas se ajusten verticalmente a la que tenga arriba y debajo?
No quedaría tan cuadriculado pero así no quedarían huecos xD
La flecha roja es el orden que siguen todos los posts, con el metodo anterior, en cada fila todos estan a la misma altura, lo que me gustaria conseguir es el descompensado de las flechas azules, donde todos siguen al que les precede encima y abajo.

Salu2

[destor77]

mmm yo que vos me fijo la forma de que se muestre x nº de caracteres por ventana. O si no fíjate si el wordpress tiene algún plugin para eso.

[g05l21]

Pues lo que comentas es algo fácil y no lo es...

Me explico, para hacer eso, tendrías que tener, por ejemplo, tres columnas (divs flotantes con algún porcentaje) y luego ir metiendo los post en cada una de ellas, así crearías la independencia que quieres.

No es muy difícil, como ves, la cuestión es como meter esos tres divs en el wordpress. Y meter los correspondientes post en cada columna.


Sería algo del estilo

Código PHP:

   
<div class="columna">
 
  <div class="post">
  </div>
  ....
  <div class="post">
  </div>
 
</div>
 
 
<div class="columna">
 
  <div class="post">
  </div>
  ....
  <div class="post">
  </div>
 
</div>
 
 
<div class="columna">
 
  <div class="post">
  </div>
  ....
  <div class="post">
  </div>
 
</div> 
   

Un saludo y suerte!

PS: Otra opción, que se me ocurre que podrías intentar mirar son las "position relative" a ver si te hacen algún apaño.

[xiscomax]

lol, pues sip ya veo que es facil y dificil al mismo tiempo, "como decirle a wordpress que meta contenido en 3 columnas antes de pasar pagina ?? "
veo que ta chungo ya el tema.
Creo que me conformare con la solucion que me diste desde un prncipio, pk sera complicarme demasiado xD
Gracias d todas formas
Salu2
CHUNGO CHUNGO chuuuUUNGOH..

[g05l21]

Jeje... Me lo suponía

Un saludo!