+- Forum Pplware (http://forum.pplware.com)
+-- Fórum: Mais Tech (/forumdisplay.php?fid=11)
+--- Fórum: Programação e Web (/forumdisplay.php?fid=16)
+--- Tópico: Colunas em php (/showthread.php?tid=13161)
Colunas em php - cibernauta - 16-11-2012 21:20
Boa tarde, 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:
![[Imagem: Suposto.png]](http://s13.postimage.org/77kky01lx/Suposto.png)
E o que está a acontecer é isto:
![[Imagem: Real.png]](http://s12.postimage.org/emirr3daj/Real.png)
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 ++;
}
?>
RE: Colunas em php - Bruno Bernardino - 17-11-2012 10:52
Podes mostrar algum código HTML e mais CSS? A verdade é que parecem existir alguns problemas, não só nesse código.
RE: Colunas em php - cibernauta - 17-11-2012 13:57
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
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;
}