Pour le design de mon site pour une vue index.ctp au lieu que les infos soit dans une table horizontale du style: id name content ---------------------------------------------------------------------------------------------------- 1 première info du contenu - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 2 deuxième info au autre contenu - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - etc J'ai besoin de voir chaque information de la base de donnée dans des 6 carrés 200px par 200px de 6 couleurs différentes pour les info en ligne avec pagination en dessous et 6 carrés 200px par 200px de 6 couleurs différentes pour les info hors-ligne avec pagination en dessous . Pouvez vous svp me donner une ligne de conduite pour que j'arrive à ce résultat. Infos en ligne [url=http://uprapide.com/image/737766-image\_13199][img]http://uprapide.com/images/invite/image\_13199.png[/img][/url] Pagination Dont name: première info Content: du contenu 1 name: 2ème info content: un autre contenu etc. Merci d'avance :)

4 réponses


mimosa21
Auteur

Bonjour à tous!
En cherchant autre chose, je suis tombé sur ce site.
La présentation de ces posts est exactement celle que je souhaiterai faire (avec beaucoup moins de choses quand même):
correspondance de ses posts sur son site => ce que je veux pour le mien:
1er post:
utilisateur (ex:Pavol Fulop) => info (ex: info1)
Titre (ex: CakePHP 2.x - 6 mars 2014) => Titre (le titre de l'info 1)
Contenu (ex: Hi folks... Lire la suite) => Contenu (le blabla de l'info 1)
2em post: la même chose à droite,
3em post: la même chose en dessous.
Lui le fait avec tous ses posts, moi j'aimerai en avoir que 6 (avec 6 couleurs différentes de background pour chaque post) et le restant avec une pagination.
Pour me compliquer encore un peu plus la vie, sur la même page index, il faudrait qu'il y ait 6 cubes du côté gauche pour les infos actives et du côté droit les 6 cubes pour les infos inactives (avec pagination aussi pour les suivantes).

J'espère avoir été assez clair ce coup-ci et HELP ME PLEASE !!!

Je comprends pas tellement ou se trouve la difficulté, il y a peut-etre quelque chose qui m'échappe dans ton explication.

Si je pige bien: tu veux diviser ta page en deux colonnes, chacune contenant 6 bloques les uns en dessous des autres. Et dans chaque bloque il y aura ton contenu, ceux de droite pour une thématique particulière, ceux de gauche pour une autre ...

  • Déja utiliser le bootstrap et demander 200px de coté, ce n'est pas ce que je ferais. L'interet du bootstrap est qu'il est responsive, si tu met tes tailles en dure tu perds cette modularité.

  • Ensuite utiliser le bootstrap ou n'importe quel systeme de grill me semble plutot simple: faire deux colonnes, et les remplir chacune avec tes cubes:

    <div class="container">
    <div class="col-xs-6">
    <div class="container">
    <div class="col-xs-12"></div>
    <div class="col-xs-12"></div>
    <div class="col-xs-12"></div>
    <div class="col-xs-12"></div>
    <div class="col-xs-12"></div>
    <div class="col-xs-12"></div>
    </div>
    </div>
    <div class="col-xs-6">
    <div class="container">
    <div class="col-xs-12"></div>
    <div class="col-xs-12"></div>
    <div class="col-xs-12"></div>
    <div class="col-xs-12"></div>
    <div class="col-xs-12"></div>
    <div class="col-xs-12"></div>
    </div>
    </div>
    </div>

Tu peux aussi faire en sorte que pour les petits écrans tout soit en pleine largeur en jouant avec les classes.

ensuite pour populer tes bloques, ben cake ou pas cake, ca reste une boucle simple. Récupère les posts (2 fois 6) dont tu as besoins, et boucle a travers eux pour créer les 6 div ...

Ou alors j'ai pas compris ta question ?

mimosa21
Auteur

bonjour Vallyan, merci de prêter attention à mon problème!

ce n'est pas 6 en dessous les uns des autres puis 6 de l'autre côté. C'est 2 colonnes de 3 (donc 6 cubes) d'un côté (gauche) pours les infos en ligne, puis 2 autres colonnes de 3 à droite pour les infos hors ligne. Puis après l'autre dificulté c'est qu' il doit y avoir 6 couleurs de cubes différentes.

Ils auraient été les uns en dessous des autres; effectivement je créais une classe pour la création d'une div au format de mon cube et je l'entourait autour de mon foreach et un limit et le tour est jouer. C'était facile mais là en plus d'être sur 2 colonnes de 3 il faut 6 couleurs de cube différentes.

Au lieu de faire 2 colonnes de 6 comme te dis Vallyan, fait 2 colonnes de 3, mais le code reste le même.

Pour les couleurs de tes cubes aléatoires, tu peux choisir une couleur sur un tableau prédéfini :

$colors = array('#FF0000', '#00FF00', '#0000FF', '#444444', '#FF00FF', '#FFFF00');
// HG = haut gauche, MD = milieu droit ....
$blocs = array('HG', 'MG', 'BG', 'HD', 'MD', 'BD');
foreach($blocs as $bloc) {
    $color = array_rand($colors, 1);
    echo "<div style='width:200px;height:200px;background-color:". $colors$color] ."'></div><br/>"; 
    unset($colors$color]);
}