Forum Pplware / Mais Tech / Programação e Web v / Colunas em php

Colocar Resposta 
 
Avaliação do Tópico:
  • 0 votos - 0 Média
  • 1
  • 2
  • 3
  • 4
  • 5
Colunas em php
16-11-2012, 21:20
Mensagem: #1
cibernauta Offline
Membro Júnior
**
 		Mensagens: 6
Registado: Dec 2010
Colunas em php
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]

E o que está a acontecer é isto: Confused
[Imagem: 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 &raquo;');
        
        
        $counter ++;
    }
?>
Será que alguem me pode dar uma ajuda? Confused
Procurar todas as mensagens deste utilizador
Citar esta mensagem numa resposta
17-11-2012, 10:52
Mensagem: #2
Bruno Bernardino Ausente
Defensor da Liberdade!
*****
 		Mensagens: 1.084
Registado: Aug 2008
RE: Colunas em php
Podes mostrar algum código HTML e mais CSS? A verdade é que parecem existir alguns problemas, não só nesse código.
BrunoBernardino.com
Visitar Website de este utilizador Procurar todas as mensagens deste utilizador
Citar esta mensagem numa resposta
17-11-2012, 13:57
Mensagem: #3
cibernauta Offline
Membro Júnior
**
 		Mensagens: 6
Registado: Dec 2010
RE: Colunas em php
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 Confused

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 &raquo;');
          
        $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 &raquo;');
          
        $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 &raquo;');
        
        
        $counter ++;
    }
?>

</div>



    

    <div id="navigation">

            <div class="fleft"><?php next_posts_link('&laquo; Older') ?></div>

                    <div class="fright"> <?php previous_posts_link('Newer &raquo;') ?></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;

}
Procurar todas as mensagens deste utilizador
Citar esta mensagem numa resposta
Colocar Resposta 


Saltar Fórum:


Utilizadores a ver este tópico: 3 Visitante(s)

Contacte-nos | Pplware | Voltar ao Topo | Voltar ao conteúdo | Modo (Arquivo) Leve | RSS conteúdo