Colunas em php

cibernauta · Nov 17, 2012

Boa noite, desde já peço desculpa pois o título do post não sei se será o mais apropriado mas aqui vai: eu ando a fazer um site e estou a usar o CMS wordpress. Neste momento estou a editar o tema para que na primeira página apareçam 4 posts de cada categoria numa especie de "tabela".
Algo deste género:

E o que está a acontecer é isto: :s

O código é este:

Código:

<style type="text/css">
    .columns-2 {
        float:left;
        width:46%;
        margin-left:4%;
    }
    .first {
        clear:both;
        margin-left:0;
    }
</style>


<div id="main">
<h1>Videos</h1>
<div class="separador"></div>
<?php
    // Custom loop that adds a clearing class to the first item in each row
    $args = array('numberposts' => -1, 'order' => 'ASC', 'cat' => 10 ); //For this example I am setting the arguments to return all posts in reverse chronological order. Odds are this will be a different query for your project
    $allposts = get_posts($args);
    $numCol = 2; // Set number of columns
 
    // Start Counter
    $counter = 0;
    foreach ($allposts as $post) {
		
        $content = '<div class="columns-'.$numCol.($counter % $numCol == 0 ? ' first' : '').'">'; // Add class to first column
		
        $content .= '<h3><a href="'.$post->guid.'">'.$post->post_title.'</a><b></h3><b>';
		$video_thumbnail = the_post_thumbnail();
		$content .=  "<img src='$video_thumbnail'/>"; 
		$content .= '</div>';
        //$content .= $post->post_content;
		
		
        echo $content;
		//echo the_content('Read more »');
		
		
        $counter ++;
    }
?>

Será que alguem me pode dar uma ajuda? :s

maar3amt · Nov 17, 2012

Boas,

Não estou a encontra nenhum problema no código!

Olha vê lá se em algum momento no css da página não se encontra instânciado um H3.

Dá-me a impressão que o problema possa vir de algum conflito no estilo.

cibernauta · Nov 17, 2012

Nessa página "chamei" uma css e o código referente ao h3 é o seguinte:

Código:

h1, h2, h3, h4, h5, h6 {

font-family: 'Lucida Grande', 'Lucida Sans Unicode', Tahoma, Arial, san-serif; 

}

E ainda:

Código:

h3{

	font-size: 120%;

}

maar3amt · Nov 17, 2012

Podes disponibilizar a página?

É que testei o código que colocas-te acima e deu tudo com pretendes.

cibernauta · Nov 17, 2012

Aqui está todo o código da página index e ainda as css (o código do index está um bocado desorganizado porque ainda nao olhei bem para ele, nos ultimos dias tenho estado a partir a cabeça com este pequeno problema :s), se for preciso mais alguma coisa avisa.

Código:

<?php get_header(); ?>





<div id="content">

	<div id="content-inner">



<div id="main">

<style type="text/css">
    .columns-2 {
        float:left;
        width:46%;
        margin-left:4%;
    }
    .first {
        clear:both;
        margin-left:0;
    }
</style>




<?php
 
if (have_posts()) : ?>
<h1>Tecnologia</h1>
<div class="separador"></div>
<?php
    // Custom loop that adds a clearing class to the first item in each row
    $args = array('numberposts' => -1, 'order' => 'ASC', 'cat' => 4 ); //For this example I am setting the arguments to return all posts in reverse chronological order. Odds are this will be a different query for your project
    $allposts = get_posts($args);
    $numCol = 2; // Set number of columns
 
    // Start Counter
    $counter = 0;
    foreach ($allposts as $post) {
        $content = '<div class="columns-'.$numCol.($counter % $numCol == 0 ? ' first' : '').'">'; // Add class to first column
        $content .= '<h3><a href="'.$post->guid.'">'.$post->post_title.'</a></h3>';
        //$content .= $post->post_content;
		$content = '<div class="columns-'.$numCol.($counter % $numCol == 0 ? ' first' : '').'">';
		$content .= '<h3><a href="'.$post->guid.'">'.$post->post_title.'</a></h3>';
		$content .= the_post_thumbnail();
		$content .= '</div>';
        
        echo $content;
		echo the_content('Read more »');
		  
        $counter ++;
    }
?>
</div>
<div id="main">
<h1>Crónicas</h1>
<div class="separador"></div>
<?php
    // Custom loop that adds a clearing class to the first item in each row
    $args = array('numberposts' => -1, 'order' => 'ASC', 'cat' => 9 ); //For this example I am setting the arguments to return all posts in reverse chronological order. Odds are this will be a different query for your project
    $allposts = get_posts($args);
    $numCol = 2; // Set number of columns
 
    // Start Counter
    $counter = 0;
    foreach ($allposts as $post) {
        $content = '<div class="columns-'.$numCol.($counter % $numCol == 0 ? ' first' : '').'">'; // Add class to first column
        $content .= '<h3><a href="'.$post->guid.'">'.$post->post_title.'</a></h3>';
        //$content .= $post->post_content;
		$content .= '<p>';
		$content .= the_post_thumbnail();
		$content .= '</p>';
        $content .= '</div>';
        echo $content;
		echo the_content('Read more »');
		  
        $counter ++;
    }
?>
</div>
<div id="main">
<h1>Videos</h1>
<div class="separador"></div>
<?php
    // Custom loop that adds a clearing class to the first item in each row
    $args = array('numberposts' => -1, 'order' => 'ASC', 'cat' => 10 ); //For this example I am setting the arguments to return all posts in reverse chronological order. Odds are this will be a different query for your project
    $allposts = get_posts($args);
    $numCol = 2; // Set number of columns
 
    // Start Counter
    $counter = 0;
    foreach ($allposts as $post) {
		
        $content = '<div class="columns-'.$numCol.($counter % $numCol == 0 ? ' first' : '').'">'; // Add class to first column
		
        $content .= '<h3><a href="'.$post->guid.'">'.$post->post_title.'</a><b></h3><b>';
		$video_thumbnail = the_post_thumbnail();
		$content .=  "<img src='$video_thumbnail'/>"; 
		$content .= '</div>';
        //$content .= $post->post_content;
		
		
        echo $content;
		//echo the_content('Read more »');
		
		
        $counter ++;
    }
?>
 
</div>



	

	<div id="navigation">

			<div class="fleft"><?php next_posts_link('« Older') ?></div>

					<div class="fright"> <?php previous_posts_link('Newer »') ?></div>

	</div>

			

	



	<?php else : ?>

	

	<div class="post">

	<div class="entry">

		<h2>Não encontrado!</h2>

		<p>Desculpe, aquilo que está a procura não existe.</p>

	</div>

	</div>

		

	<?php endif; ?>

	

	



	

	</div> <!-- eof main -->



<?php get_sidebar(); ?>



<?php get_footer(); ?>

As css estão aqui:

Código:

/*

Theme Name: alibi

Theme URI: http://www.blogchemistry.com/2008/07/28/free-wordpress-theme-alibi/

Description: 2 column, with RHS widget sidebar, GPL v3 licence 

Version: 1.2

Tags: fixed width, two columns, black, valid HTML, simple, custom header

Author: BlogChemistry

Author URI: http://www.blogchemistry.com/

*/







body {

margin: 0;
padding: 0;  
text-align:center;
font-size: 14px;
font-family: 'Lucida Grande', 'Lucida Sans Unicode', Tahoma, Arial, san-serif;


}





#wrapper2{

border-left: 0px ;
border-right: 0px ;

}



#wrapper3{

border-left: 0px;
border-right: 0px;

}



#wrapper4{



}





#wrapper{

width: 1020px;

margin: 0px auto;

padding: 0px;

text-align:left;

font-size: 85%;

line-height:20px;





}





#header{

padding: 1px 0px;

margin: 0;



}	





#header-inner{

margin:0;

padding:0;

}





		

#content{

clear:both;

margin: 0;

padding: 5px 5px 5px 0px;

/* background:#fff; */

}	



#content-inner{



}



#main {

width: 730px; 

float:left;

margin: 0;

padding: 5px 0 10px 0;

overflow:hidden;




}





#sidebar {

padding: 0;

margin: 0 0 0 735px;

/* background: #fff; */

}





#footer {

clear: both;

margin: 0;

padding: 0px 0px; /* padding: 10px 16px; */

text-align: center;

font-size: 85%;

position:relative;
float:left;

}





#footer-inner{

background:transparent url("http://rmtest.hostei.com/wp-content/themes/alibi/images/bgnav.png");
width:1020px;
position:relative;
float:left;
height:42px;
font-size:11px;
font-weight:bold;
font-family:Verdana, Geneva, sans-serif;

color:#fff;

/*
background:transparent url("http://rmtest.hostei.com/wp-content/themes/alibi/images/bgnav.png") repeat-x top left;
width:1020px;
position:relative;
display:block;
height:42px;
font-size:11px;
font-weight:bold;
font-family:Verdana, Geneva, sans-serif;
float:left;
color:#fff;
*/
}



#footer p{

margin:0;

padding:15px 0;

}



#navigation{

padding: 5px 15px;



}



#navigation div.fleft{

float:left;

}



#navigation div.fright{ 

float:right;

}



#credit{

text-align:right;

padding: 0 15px;

}



#credit p{

margin:0;

color:#777;

font-size:85%;

}



#credit p a, #credit p a:hover{

color:#999;

font-weight:100;

}



/*  ********** default styles *********** */



p, h1, h2, h3, h4, h5, h6{

margin: 10px 0;

padding: 0;

}



h1, h2, h3, h4, h5, h6 {

font-family: 'Lucida Grande', 'Lucida Sans Unicode', Tahoma, Arial, san-serif; 

}



h1{

	/* font-size: 190%; */
	display: block;
	font-size: 2em;
	-webkit-margin-before: 0.67em;
	-webkit-margin-after: 0.67em;
	-webkit-margin-start: 0px;
	-webkit-margin-end: 0px;
	font-weight: bold;
}

h2{

	font-size: 160%;

}

h3{

	font-size: 120%;

}

h4{

	font-size: 130%;

}

h5{

	font-size: 100%;

}

h6{

	font-size: 70%;

}





a{

color:blue;

font-weight:800;

text-decoration:none;

}

a:hover{

color:blue;

text-decoration:underline;

}



a img{

border:0px;

}



hr{

height:2px;

margin:5px 0;

border-bottom: 1px solid #ccc;

border-top: 1px solid #ccc;

}



blockquote{

background: #f4f4f4;

padding: 5px 15px;

margin: 3px 30px;

}



form{

margin: 0;

padding:0;

}



fieldset{

padding:10px;

margin:0;

border:none;

}



legend{

font-weight:800;

}



code{

	font-size: 90%;

	font-family: "Courier New", Courier, monospace;

	white-space: pre;

}



td{

 vertical-align:top;

}



.aligncenter,

div.aligncenter {

   display: block;

   margin-left: auto;

   margin-right: auto;

}



.alignleft {

   float: left;

}



.alignright {

   float: right;

}



.wp-caption {

   border: 1px solid #ddd;

   text-align: center;

   background-color: #f3f3f3;

   padding-top: 4px;

   margin: 10px;

   /* optional rounded corners for browsers that support it */

   -moz-border-radius: 3px;

   -khtml-border-radius: 3px;

   -webkit-border-radius: 3px;

   border-radius: 3px;

}



.wp-caption img {

   margin: 0;

   padding: 0;

   border: 0 none;

}



.wp-caption p.wp-caption-text {

   font-size: 11px;

   line-height: 17px;

   padding: 0 4px 5px;

   margin: 0;

}

/* ---------------------- Menu de Navegação ---------------------- */
    .blue #slatenav{
    position:relative;
	display:block;
	width:1020px;
	height:42px;
	font-size:11px;
	font-weight:bold;
	background:transparent url("http://rmtest.hostei.com/wp-content/themes/alibi/images/bgnav.png") repeat-x top left;
	font-family:Verdana, Geneva, sans-serif;
	text-transform:uppercase;
	float:left;
}
    
	.blue #slatenav ul{
	margin:0px;
	padding:0;
	list-style-type:none;
	width:auto;
}
    .blue #slatenav ul li{
	display:block;
	float:left;
	margin:0 0 0 0;
}

    .blue #slatenav ul li a{
    display:block;
	float:left;
	color:#fff;
	text-decoration:none;
	padding:14px 22px 0 22px;
	height:28px;
}

	.blue #slatenav ul li a:hover,.blue #slatenav ul li a.current{
	color:#fff;
	background:transparent url("http://rmtest.hostei.com/wp-content/themes/alibi/images/buttonhover.png") no-repeat top center;
}
/* ---------------------- FIM Menu de Navegação ---------------------- */

/* ---------------------- Caixa de Noticias ---------------------- */

.newsbox{
	text-align: justify;
	font-size: 13px;
	font-family: Arial, Verdana, Helvitica, sans-serif;
	padding-right: 15px;
	position: relative;
	width: 355px;
	display: inline;
	float: left;
	font-weight: bold;
}
/* ---------------------- FIM Caixa de Noticias ---------------------- */

.separador{
	position: relative;
	margin-bottom: 10px;
	width: 725px;
	height: 2px;
	background: #CCC;
	color: #333;
	float: left;
}

/*#tabs {

  float:left;

  width:100%;

  font-size:90%;

	background:#000;

  line-height:18px;

	

	border-top: 1px solid white;

}





    #tabs ul {

	  margin:0;

	  padding:4px 10px 0 10px;

	  list-style:none;

      }

    #tabs li {

      display:inline;

      margin:0;

      padding:0;

      }

    #tabs a {

      float:left;

      margin:0;

      padding:0 0 0 4px;

      text-decoration:none;

      }

    #tabs a span {

      float:left;

      display:block;

      padding:5px 15px 3px 6px;

      color:#FFF;

      }

   Commented Backslash Hack hides rule from IE5-Mac 
    #tabs a span {float:none;}

    /* End IE5-Mac hack 

    #tabs a:hover span {

      color:#FFF;

     

    #tabs a:hover {

      background-position:0% -42px;

      }

    #tabs a:hover span {

      background-position:100% -42px;

      }  

	

	
*/




/* Headings */ 



form#searchform2{

display: block;

float:right;

margin: 55px 10px 0px 5px;

}



#header h3{

margin:  0;

padding: 30px 0 0 10px;

}



#header h3 a{

font-weight:100;

color: #fff;

text-decoration: none;

font-size: 220%;

letter-spacing: 1px;

}



#header h2{

margin: 0;

padding: 10px 0 5px 10px;

font-weight:100;

font-style:italic;

color: #fff;

font-size: 130%;

letter-spacing: 1px;

}



h2#sectiontitle{

font-size:100%;

font-weight: 800;

font-family: arial, verdana, sans-serif;

padding:6px 6px 6px 10px;

margin:8px 10px 5px 10px;

background: #f2f2f2;

color: #444;



}



/* post styles */



.post{

margin: 0 0 10px 0;

/* padding: 0 5px 5px 5px; */

}



.entry{

margin: 0;

padding: 0px 10px 3px 10px;

}



.post h2 {

color: #333;

font-size: 150%;

font-weight:100;

padding: 7px 0 2px 2px;

margin: 10px 0 15px 0;

}





.post h2 a{

color: #333;

text-decoration:none;

font-weight:100;

}



.post h2 a:hover{

text-decoration:none;

color: #333;

}



.postmetadata{

font-size:80%;

padding: 1px 8px 1px 5px;

margin: 0;

border-top: 1px solid #ccc;

}



.postmetadata p{

line-height: 18px;

padding: 0;

margin: 2px 0;

}





.date{

float:left;

text-align:center;

font-weight:800;

margin: 0 10px 0 0;

padding: 0 10px;

border-right: 1px solid #ccc;

color: #444;

}





.dateDay{

display:block;

font-size: 16px;

line-height: 16px;

text-align:center;

}

.dateMonth, .dateYear{

display:block;

font-size: 11px;

padding:0;

line-height: 12px;

}









/*  Comments   */



h3#comments, h3#postcomment{

	font-size: 100%;

	font-family:verdana, sans-serif;

}	



ol#commentlist{

padding: 0 0 0 20px;

font-size: 90%;

list-style-type: none;

}



ol#commentlist li{

	padding: 0px 3px;

	margin: 0;

}



ol#commentlist li p.commentheader{

margin: 0px 0 0px 0;

display: block;

padding: 1px 5px;

}







ul#commentlist{

padding: 0;

margin:0;

list-style-type:none;

}



ul#commentlist li{

	display: block;

	padding: 0;

	margin: 0 15px 5px 15px;

	font-size:90%;

	background: #f2f2f2;

}



ul#commentlist p{

margin: 6px 0;

}



ul#commentlist li div.comm{

margin: 1px;

padding: 1px;

}



ul#commentlist li div.gravatar {

	width:50px;

	float:left;

	padding: 10px 0 0 10px;

}



ul#commentlist li div.gravatar img{

border: 2px solid #ccc;

}









ul#commentlist li div.commenttext{

padding: 0;

margin:5px 10px 5px 65px;

}



ul#commentlist li div.commenttext div.commentwrapper{

margin:0 0 0 5px;

padding: 3px 8px;

}





/*  sidebar styles */





#subscribe p{

font-size: 85%;

margin: 3px 0 10px 0;

}







.menu{

padding:0;

font-size:90%;

}



.menu a{

font-weight: 100;

}



.menu a:hover{

text-decoration:none;

}



.menu ul{

margin:0;

padding:0;

list-style-type:none;

}



.menu ul li.widget{

padding:2px;

margin:0 0 0px 0px;

}



.menu ul li.widget ul{

	margin: 0;

	padding:0;

}



.menu ul li.widget ul li{

border-bottom:1px dotted #ccc;

background: #f2f2f2;

padding: 2px 0 2px 15px;

margin:0;

}



.menu ul li.widget ul li ul{

}



.menu ul li.widget ul li ul li{

border-top: 1px dotted #ccc;

border-bottom: none !important;

padding: 2px 0 2px 15px;

}







.menu ul li.widget h3{

font-family: arial;

font-size:120%;

padding:2px 0 1px 4px;

margin:0;

border-top: 3px solid blue;

border-bottom: 1px solid #bbb;

color: #333;

font-weight: 800;

font-variant:small-caps;

}



.menu ul li h3 a{

color: #333;

font-weight: 800;

}

.menu ul li h3 a:hover{

color: #333;

text-decoration: none;

}



.menu form{

display:block;

margin:0px;

padding:4px;

}



.menu input{

margin:3px 0;

font-size:90%;

}



li.widget .textwidget, li.widget #search {

padding: 2px 5px;

}



/* Calendar styles */

#wp-calendar {

empty-cells: show;

margin: 10px auto 0;

width: 155px;

}



#wp-calendar #next a {

padding-right: 10px;

text-align: right;

}



#wp-calendar #prev a {

padding-left: 10px;

text-align: left;

}



#wp-calendar a {

display: block;

}



#wp-calendar caption {

text-align: center;

width: 100%;

}



#wp-calendar td {

padding: 3px 0;

text-align: center;

}





#footer a{

font-weight: 100;

}

maar3amt · Nov 18, 2012

Tenta isolar no estilo o h3.

.columns-2 {
float:left;
width:46%;
margin-left:4%;
}
.columns-2 h3 {
float:left;
width:100%;
}
.columns-2 img {
float:left;
clear:both;
}
.first {
clear:both;
margin-left:0;
}

cibernauta · Nov 18, 2012

Acabei de tentar fazer isso e nada, sem qualquer tipo de resultado :s

maar3amt · Nov 18, 2012

Tens a página online que nos possas fornecer o endereço?

cibernauta · Nov 18, 2012

O link é este: RmsCreative (é um dominio de testes)

maar3amt · Nov 18, 2012

Já descobri o erro...

Tem em atenção que o script está a fazer print das imagens fora da <div class="columns-2...

Um exemplo:

Como está a imprimir o html actualmente:

Código:

<img width="200" height="150" src="http://rmtest.hostei.com/wp-content/uploads/2012/11/01-e1353008608404.jpg" class="attachment-post-thumbnail wp-post-image" alt="Gangnam Style" title="Gangnam Style" /><div class="columns-2 first"><h3><a href="http://rmtest.hostei.com/?p=57">Gangnam Style</a><b></h3><b></div>

Como deveria estar a ser:

Código:

<div class="columns-2 first"><h3><a href="http://rmtest.hostei.com/?p=57">Gangnam Style</a><b></h3><b><img width="200" height="150" src="http://rmtest.hostei.com/wp-content/uploads/2012/11/01-e1353008608404.jpg" class="attachment-post-thumbnail wp-post-image" alt="Gangnam Style" title="Gangnam Style" /></div>

Outra observação...
Sugiro que reformules todo o teu html pois está bastante confuso.

cibernauta · Nov 19, 2012

Pois, ja percebi, só não percebi porque é que está a ocorrer esse erro visto que estou a referenciar a imagem antes de fechar a div, como podes ver no código: (já andei a fazer umas alteraçoes ao que esta no principal)

Código:

<?php
 
if (have_posts()) : ?>
<h1>Tecnologia</h1>
<div class="separador"></div>
<?php
   
    $args = array('numberposts' => -1, 'order' => 'ASC', 'cat' => 4 ); 
    $allposts = get_posts($args);
    $numCol = 2; 
 
    // Start Counter
    $counter = 0;
    foreach ($allposts as $post) {
        $content = '<div class="columns-'.$numCol.($counter % $numCol == 0 ? ' first' : '').'">'; 
        $content .= '<h3><a href="'.$post->guid.'">'.$post->post_title.'</a></h3>';
        $content .= the_post_thumbnail();
		$content .= '</div>';
        echo $content;
		echo the_content('Read more »');
		  
        $counter ++;
    }
?>

Em relação ao código, eu sei que sim, neste momento estou mais preocupado em adaptar este visual ao antigo, depois trato dessa parte :S

Colunas em php

cibernauta

GF Bronze

maar3amt

Administrator

cibernauta

GF Bronze

maar3amt

Administrator

cibernauta

GF Bronze

maar3amt

Administrator

cibernauta

GF Bronze

maar3amt

Administrator

cibernauta

GF Bronze

maar3amt

Administrator

cibernauta

GF Bronze