Afficher un type de node sur 2 colonnes ???

Information importante

En raison d'un grand nombre d'inscriptions de spammers sur notre site, polluant sans relache notre forum, nous suspendons la création de compte via le formulaire de "sign up".

Il est néanmoins toujours possible de devenir adhérent•e en faisant la demande sur cette page, rubrique "Inscription" : https://www.drupal.fr/contact


De plus, le forum est désormais "interdit en écriture". Il n'est plus autorisé d'y écrire un sujet/billet/commentaire.

Pour contacter la communauté, merci de rejoindre le slack "drupalfrance".

Si vous voulez contacter le bureau de l'association, utilisez le formulaire disponible ici, ou envoyez-nous un DM sur twitter.

Submitted by jubjub on

Bonjour,
pour afficher un certain type de node sur 2 colonnes, j'ai utilisé la fonction float:left; mais cela ne fonctionne pas.

donc aulieu de :

node1

node2

je souhaite :

node1 | node2
node3 | node4
etc...

Quelle solution me proposez vous??
merci

Forum : 
Développement
Version de Drupal : 
4.7.x

Soumis par Damien Tournoud le 30 Avril, 2007 - 15:44

Il doit falloir que tu précise la taille du bloc le plus extérieur (normalement celui qui est div.node). Sinon, le navigateur choisira la taille en fonction du contenu. Une des approches est de préciser width: 50% pour deux colonnes ou width: 25% pour quatres colonnes, etc.

Soumis par jubjub le 30 Avril, 2007 - 16:03

le probleme est que si je fais 2 colonnes, et que je mets le code php qui affiche les nodes (ou une view) dans la premiere...je voisd pas comment les nodes vont se mettre dans la seconde !
Pour info, j'ai testé ca :
dans node.tpl, j'ai crée une table et j'ai placé les codes php correspondants a mon type de node qui m'interesse dedans.
J'ai donné la foncion float:left a cette table pour que les nodes se mettent cote a cote -> elles sont bien cote a cote, mais en ligne, en gros mon site fait 5000px de largeur du coup, c'est pas glop.
Sinon j'ai testé la meme chose dans un template via le module contemplate -> idem...
!??!

Soumis par Damien Tournoud le 30 Avril, 2007 - 16:53

Il te suffit normalement de mettre chaque node en float:left; width:50%, pas besoin de table ou d'autre chose. De cette façon là, les nodes s'afficheront comme ca :

node1 | node2
node3 | node4

En effet, la première "node1", est float: left, donc elle est bien alignée en haut à gauche. La deuxième, "node2", est alignée sur la même ligne et à droite de "node1". La troisième "node3", n'a pas assez de place pour rentrer à droite de "node2", donc elle va à la ligne, etc...

Ce comportement est celui décrit dans la spécification CSS2.1 (paragraphe 9.5.1) :

2. If the current box is left-floating, and there are any left-floating boxes generated by elements earlier in the source document, then for each such earlier box, either the left outer edge of the current box must be to the right of the right outer edge of the earlier box, or its top must be lower than the bottom of the earlier box. Analogous rules hold for right-floating boxes.

et

9. A left-floating box must be put as far to the left as possible, a right-floating box as far to the right as possible. A higher position is preferred over one that is further to the left/right.

Soumis par tostinni le 30 Avril, 2007 - 16:19

<div style="float:left;width:47%;padding-right:6%;">
ma col 1
</div>
<div  style="float:left;width:47%">
ma col 2
</div>

et a apres ca tu peux rajouter un <div style="clear: left;"></div> (ou n'importe quelle autre balise que div)

Voilou

Soumis par jubjub le 30 Avril, 2007 - 20:12

ok super les gars, ca commence a s'eclairer, mais a quel element dois-je appliquer les div?
par exemple pour appliquer cela au node type story!?
en sachant qu'il y a une class pour le titre, les termes, le contenu, les links et le nom et la date du user qui a crée la story !!???

Soumis par gagarine le 4 Septembre, 2007 - 13:00

Hello,
Ca fonctionne mais si un contenu est plus long qu'un autre, le bloc passe à la ligne suivante... un petit schéma:
bloc en float:left;

[bloc1]   [bloc2]
[bloc1]   [bloc2]
[bloc1]  
[bloc1]   [bloc3]
          [bloc3]
          [bloc3]
[bloc4]
[bloc4]
[bloc4]

Alors que le résultat voulu est:

[bloc1]   [bloc2]
[bloc1]   [bloc2]
[bloc1]  
[bloc1]  

[bloc3]   [bloc4]
[bloc3]   [bloc4]
[bloc3]   [bloc4]

Je sais je pourrais mettre un clear:both à chaque bloc paire... mais comment connaître les blocs paire (un bloc sur deux)?
J'utilise la taxo pour afficher ces bloc.
Merci :)

Soumis par gagarine le 4 Septembre, 2007 - 13:22

ok j'ai résolu le problème en modifiant node.tpl.php:

  <?php
  $node_id = 'node_interval_' . (1 + ($id%2));
  ?>
  <div class="node <?php print $node_id?><?php if ($sticky) { print " sticky"; } ?><?php if (!$status) { print " node-unpublished"; } ?>">
    <?php if ($picture) {
      print $picture;
    }?>
    <?php if ($page == 0) { ?>
  <h2 class="title">
     <?php if(node_access('update', $node)){?>
          <a href="<?php print $node_url?>"><?php print $title?></a>
   ?>   <?php }else{ ?>
          <?php print $title?>
     <?php }; ?>
  </h2>
  <?php }; ?>
    <span class="submitted"><?php //print $submitted?></span>
    <span class="taxonomy"><?php //print $terms?></span>
    <div class="content"><?php print $content?></div>
    <?php if ($links) { ?><div class="links">&raquo; <?php print $links?></div><?php }; ?>
  </div>

Soumis par gagarine le 4 Septembre, 2007 - 14:44

bah en faite je suis con.. sa change rien au problème..

EDIT:

Non pas si con en faite avec ce CSS sa fonctionne nickel :).

.node {
    width:50%;
  color:#333;
    margin-top:30px;
}

#main div.node_interval_1{
   float:left;
   clear:left;
}

#main div.node_interval_2{
   float:right;
   clear:right;
}