[Resolvido] Problema com float no WP

[chlins 1]

Pessoal,

Este código funcionou no html, mas quando o levei para WP com loop, o float:left e display:inline não funcionou.

O que meu css tem de errado?

 

<div id="destaque_sec">
   	<ul>
   	<li>
           <?php query_posts('showposts=2&cat=3');?>
       	<?php if (have_posts()): while (have_posts()) : the_post();?>
       	<a href="<?php the_Permalink()?>">
       	<img src="<?php  bloginfo('template_directory');?>/images/imagemteste_140x77.jpg"  widht="140" height="77"  alt="<?php the_title();?>"  /></a>
       	<p>Cadastre-se</p>
       	<a href="<?php the_Permalink()?>" title="<?php  the_title();?>" alt="<?php the_title();?>"><?php  the_title();?></a>
       	<?php endwhile; else:?>
       	<?php endif;?>
   	</li>
   	</ul>
</div>

 

#destaque_sec {

width:350px;

float:left;

margin-left:10px;

font-size:18px;

font-weight:bold;

background-color:#069;

}

 

#destaque_sec img{

padding:2px;

border: 1px solid #ccc;

}

 

#destaque_sec img:hover{

background-color:#F60;

}

 

#destaque_sec a{

text-decoration:none;

color:#F60;

}

 

#destaque_sec a:hover{

text-decoration: underline;

}

 

#destaque_sec p{

font-size:11px;

font-weight:bold;

text-transform:uppercase;

color:#333;

}

 

#destaque_sec ul{

width:350px;

float:left;

list-style:none;

}

 

#destaque_sec li{

width:160px;

display: inline;

float:left;

 

}

[Anderson Narciso 3]

Você poderia informar o que você quer fazer?

[chlins 1]

Você poderia informar o que você quer fazer?

 

Preciso que a imagem com o título abaixo dela, fiquem lado a lado.

Em html fica perfeito, mas quando transformei em WP usando o loop, perdeu a formatação e ficou uma embaixo da outra.

[Anderson Narciso 3]

Não precisa ser <ul> e <li> para listar lado a lado, simplesmente div com float:left; utilize uma div por fora assim:

 

<div id="looping-<?php the_ID(); ?>" <?php post_class(); ?>>

 

É bom utilizar post_class até mesmo por validação, ela cria uma div diferente para cada post, naõ duplicando a mesma dentro do loop.

 

Depois cr criar essa div que mostrei, rie outra dentro aonde vai estar o conteúdo ex:

 

<div id="looping-<?php the_ID(); ?>" <?php post_class(); ?>>
<div class="conteudo">
blablablablabla
</div>
</div>

 

Essa div conteúdo tera que ter float:left; para listar lado a lado e a div post_class sempre puxara o como classe .hentry- ou category- ficando category-nome-da-categoria-postada, ex: category-filmes

Então você vai estilizar ela de acordo com seu nome.

 

Um exemplo de loop pronto e lado a lado

 

<div class="workbox">
      <div class="title"><h3>OBRAS CONCLUÍDAS</h3></div>
       <?php $feature_post = get_posts('cat=5&showposts=4'); ?>           
             <?php if( $feature_post ) : ?>
             <?php foreach( $feature_post as $post ) : setup_postdata( $post ); ?>            
             <?php $feature_post_id = $post->ID; ?>
       <div id="looping-<?php the_ID(); ?>" <?php post_class(); ?>> // DIV CATEGORY-OBRAS

       <div class="project"> // DIV QUE LEVOU O FLOAT:LEFT;

             <h4><a href="<?php the_permalink() ?>"><?php the_title('', '', true, '25') ?>...</h4></a>

            <div class="thumbnail">
            <a href="<?php the_permalink() ?>"><?php 
                   if(has_post_thumbnail()) {
                      the_post_thumbnail('obras');
                 } else {
                  echo '<img src="'.get_bloginfo("template_url").'/images/thumbnail.png" />';
                 }
               ?></a>
            </div>
            <span>» <a href="<?php the_permalink() ?>">Visualizar</a></span>

       </div>
       </div>

     <?php endforeach; ?>    		 		 		
     <?php endif; ?>   

 </div>

<style>
#conclud-works .workbox .project { margin:10px 0px 10px 10px; float:left; width:213px; height:170px; }
.category-obras {margin-left:13px;} 
</style>

 

É um simples loop que fiz para um cliente que possui construtora, suas ultimas obras aparecem lado a lado na home page.

Não esqueça também de dar tamanho para a div...

Espero que entenda.

Abraço

[chlins 1]

Não precisa ser <ul> e <li> para listar lado a lado, simplesmente div com float:left; utilize uma div por fora assim:

 

<div id="looping-<?php the_ID(); ?>" <?php post_class(); ?>>

 

É bom utilizar post_class até mesmo por validação, ela cria uma div diferente para cada post, naõ duplicando a mesma dentro do loop.

 

Depois cr criar essa div que mostrei, rie outra dentro aonde vai estar o conteúdo ex:

 

<div id="looping-<?php the_ID(); ?>" <?php post_class(); ?>>
<div class="conteudo">
blablablablabla
</div>
</div>

 

Essa div conteúdo tera que ter float:left; para listar lado a lado e a div post_class sempre puxara o como classe .hentry- ou category- ficando category-nome-da-categoria-postada, ex: category-filmes

Então você vai estilizar ela de acordo com seu nome.

 

Um exemplo de loop pronto e lado a lado

 

<div class="workbox">
  	<div class="title"><h3>OBRAS CONCLUÍDAS</h3></div>
       <?php $feature_post = get_posts('cat=5&showposts=4'); ?>       	
             <?php if( $feature_post ) : ?>
             <?php foreach( $feature_post as $post ) : setup_postdata( $post ); ?>            
             <?php $feature_post_id = $post->ID; ?>
       <div id="looping-<?php the_ID(); ?>" <?php post_class(); ?>> // DIV CATEGORY-OBRAS

       <div class="project"> // DIV QUE LEVOU O FLOAT:LEFT;

             <h4><a href="<?php the_permalink() ?>"><?php the_title('', '', true, '25') ?>...</h4></a>

        	<div class="thumbnail">
        	<a href="<?php the_permalink() ?>"><?php 
                   if(has_post_thumbnail()) {
                     	the_post_thumbnail('obras');
                 } else {
                 	echo '<img src="'.get_bloginfo("template_url").'/images/thumbnail.png" />';
                 }
               ?></a>
        	</div>
        	<span>» <a href="<?php the_permalink() ?>">Visualizar</a></span>

       </div>
       </div>

     <?php endforeach; ?>    	     	     		
     <?php endif; ?>   

    </div>

<style>
#conclud-works .workbox .project { margin:10px 0px 10px 10px; float:left; width:213px; height:170px; }
.category-obras {margin-left:13px;} 
</style>

 

É um simples loop que fiz para um cliente que possui construtora, suas ultimas obras aparecem lado a lado na home page.

Não esqueça também de dar tamanho para a div...

Espero que entenda.

Abraço

 

 

Resolvido.

Como você falou, criei outra div para envolver o conteúdo e flotei.

	<div id="destaque_sec">
		<?php query_posts('showposts=2&cat=3');?>
		<?php if (have_posts()): while (have_posts()) : the_post();?>
		[b]<div class="destaque_sec_cont">[/b]
   	          <a href="<?php the_Permalink()?>">
      	   	<img src="<?php  bloginfo('template_directory');?>/images/imagemteste_140x77.jpg"  widht="140" height="77"  alt="<?php the_title();?>"  /></a>
	  	    <p>Cadastre-se</p>
	      	<a href="<?php the_Permalink()?>"  title="<?php the_title();?>" alt="<?php  the_title();?>"><?php the_title();?></a>
		[b]</div>[/b]
		<?php endwhile; else:?>
		<?php endif;?>
</div><!--DESTAQUE_SEC-->

 

Este loop é uma sequência de um outro acima com 2 posts, por isso não fiz desta forma deste o início, eu acho que eu já crio divs demais e vi um exemplo na net com listas, comigo funcionou enquanto html, quando no WP e com loop, nada.

 

Agradeço a orientação e com certeza ainda vou precisar de mais, já que estou + ou - em 30% do meu projeto.