CSS : je ne m'y retrouve pas !

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 socabonito on

Bonjour,
mon site quasiment finalisé, je souhaiterais pour peaufiner mes pages. Seulement, j'ai créée une vue qui regroupe un type de contenu "atelier" dans une grille 2 colonnes, et le soucis que je rencontre est que chaque atelier n'ont pas la même hauteur.
Je voudrais donc qu'ils fassent la même hauteur ou du moins la même que la plus grande des deux et je voudrais pouvoir mettre le "lire la suite" en bas.
Je ne m'y retrouve pas dans le css avec firebug, je ne vois sur quelle classe affecté un clear both pour le bloc "lire la suite".

Pouvez-vous éclairer ma lanterne et peut-être m'expliquer comment travailler le css sur un élément précis ?

Voici le lien de la page concernée.
http://artplume.org/content/présentation-des-ateliers

Merci d'avance.

Forum : 
Développement
Version de Drupal : 
7.x
Tags : 
css

Soumis par a.boulier le 18 Septembre, 2012 - 15:51

Tu vas t'embêter à vouloir tout aligner. Le plus simple ne serait-il pas de t'imposer un format de titre (nombre de caractères maximum, minimum), un format d'image (OK) et un format de texte ?

Du coup, toutes tes views auront la même "hauteur". Je ne trouve pas ça gênant dans la lecture, les infos sont là. À moins que je n'ai pas compris ce que tu recherches.

Tu devrait plutôt penser à modifier les valeurs de ton bloc de droite pour éviter que ça dépasse de ton bloc (text wrap : http://www.alsacreations.com/tuto/lire/1038-gerer-debordement-contenu-et...).

Soumis par NetOctet le 18 Septembre, 2012 - 20:23

Bonjour,

Vu que tu utilises un tableau déjà pour afficher tes ateliers, il te suffirait de réussir à faire passer tes "lire la suite" dans une nouvelle ligne du tableau (un nouveau tr) pour les aligner. Ça sera plus simple que des clear:both etc.

Soumis par NetOctet le 19 Septembre, 2012 - 12:56

Je dois y réfléchir.
J'ai encore un ou deux soucis psychologies avec le système de décentralisation des templates sur Drupal.

L'idée serait d'afficher chaque vue de façon normale, mais de garder les champs "en savoir plus" en mémoire pour les affiches plus loin dans la vue mère. Mais bon, je vois pas de solution simple pour le faire là.

Soumis par socabonito le 19 Septembre, 2012 - 13:20

Ah oui. Je vois que ça à l'air corsé ! Je pensait qu'il aurait une solution plus simple que ça. Si tu vois une solution dans les temps à venir, pense à moi ;)
Je vais essayé de mon côté d'étudier le problème.

Soumis par NetOctet le 19 Septembre, 2012 - 15:23

Je suppose que tu as utilisé "grid" dans views, si je ne me trompe pas en regardant rapidement.
Du coup, dans tes fichiers de theming, tu peux modifier :
views-view-grid.tpl.php

Notamment :

<?php foreach ($rows as $row_number => $columns): ?>
      <tr <?php if ($row_classes[$row_number]) { print 'class="' . $row_classes[$row_number] .'"';  } ?>>
        <?php foreach ($columns as $column_number => $item): ?>
          <td <?php if ($column_classes[$row_number][$column_number]) { print 'class="' . $column_classes[$row_number][$column_number] .'"';  } ?>>
            <?php print $item; ?>
          </td>
        <?php endforeach; ?>
      </tr>
    <?php endforeach; ?>

Là faut se débrouiller pour faire ça autrement. Le seul souci c'est que $item a juste l'air d'être du code html dirty, et pas un tableau d'éléments. Donc même là-dessus je bloque. (Purée ce que Drupal peut m'énerver par certains aspects).

Soumis par socabonito le 28 Septembre, 2012 - 09:33

J'attends avec impatience ton idée parce que là je m'arrache les cheveux rien qu'à vouloir mettre le "lire la suite" en bas et je voudrais aussi pouvoir aligner de gauche à droite les photos dans mes articles comme celui ci : http://artplume.org/content/dessin-peinture-huile-acrylique-aquarelle .
Quelle prise de tête pour un truc aussi simple en css !

Soumis par socabonito le 28 Septembre, 2012 - 15:38

J’attends avec impatience ton idée parce que là je m’arrache les cheveux rien qu’à vouloir mettre le «lire la suite» en bas et je voudrais aussi pouvoir aligner de gauche à droite les photos dans mes articles comme celui ci : http://artplume.org/content/dessin-peinture-huile-acrylique-aquarelle .
Quelle prise de tête pour un truc aussi simple en css !

Soumis par NetOctet le 28 Septembre, 2012 - 19:16

Désolé, je n'ai absolument pas le temps en ce moment de m'occuper de tout ça.
Mon idée en gros est de créer un field spécial qui va lier vers le contenu, puis de récupérer ce field grâce au tableau $view dans ton template grid. Et de réafficher le field plus loin. Désolé, c'est très succinct, mais ça nécessiterait pas mal de temps et je dois partir là.

Si tu n'as toujours pas réussi la semaine prochaine, j'essaye de faire un petit article de blog pour résumer la situation. ;)

Soumis par NetOctet le 3 Octobre, 2012 - 10:01

Bon, je m'énerve côté PHP depuis le début de ton problème, alors que ça se résout super bien en HTML et CSS, proprement. (Oui, parce que je veux quand même trouver une solution côté métier Drupal).

Bon, si tu veux le faire proprement en CSS :

td // toutes les cases de ton tableau en question
{
vertical-align:top;
position:relative;
}

a.views-field-view-node // Le lien "en savoir plus"
{
position:absolute;
bottom:0;
right:0;
}

En changeant éventuellement les valeurs de bottom et right pour espacer un peu.

Soumis par socabonito le 3 Octobre, 2012 - 13:23

Merci. J'essaie de rentrer ce code mais sans changement sur mes pages.
Où dois-je travailler le css? Dans html-element.css, dans le css de mon thème tma.css ou dans un template particulier ?
Comment fais tu pour savoir pour connaître les noms des classes des blocs choisis à savoir "a.views-field-view-node". Avec Firebug je ne retrouve pas ça ! :s

Soumis par NetOctet le 3 Octobre, 2012 - 13:35

Avec firebug, tu retrouves le nom de ton tableau, et tu retrouves le nom de ton champ que tu veux aligner en bas des cellules. Ça dépend vraiment de ce que tu as fait et de ce que tu as appliqué. Et vu que tu as mis ton site en maintenance je peux vraiment pas regarder.

Tu travailles le CSS dans ton thème, dans un fichier style. Je sais pas comment tu as choisi de t'organiser ni avec quoi tu travailles, une fois de plus...

Soumis par socabonito le 4 Octobre, 2012 - 08:59

Je le mets en ligne si tu peux regarder pour m'aiguiller un peu.
J'ai réussi à aligner le "lire la suite sur la droite mais pour le mettre en bas impossible.
J'ai également un soucis pour aligner les photos pour ce genre de contenu : http://artplume.org/content/dessin-peinture-huile-acrylique-aquarelle

Je travaille dans le ccs de mon thème.

Merci d'avance. Je répond que maintenant parce qu'il y'avait un problème avec le captcha pour valider mon message hier je pense.

Soumis par NetOctet le 4 Octobre, 2012 - 16:34

Excuse-moi, j'ai pas vraiment le temps de refaire des cours de CSS et tout, avec firebug retrouve les champs lire la suite, et applique leur la position absolute. Retrouve également les td et applique leur la position relative.

Je t'ai donné tous les éléments, après si je dois le faire moi-même, ça devient de la prestation, plus de l'aide sur un forum. :)