Un tableau HTML sans tableau

grid ou flex ?

a marqué ce sujet comme résolu.

Bonsoir tout le monde !

Je travaille sur mon générateur de CV, et je pense qu’il est temps pour moi de régler un petit détail. Mais comme c’est de la mise en page, ben c’est toujours pas mon truc, et du coup me voilà.

Dans l’idée, j’aimerais réaliser une mise en page avec une structure comme le tableau ci-dessus — mais sans utiliser de tableau, afin de pouvoir faire joujou avec du responsive à l’occasion.

Dates (à aligner en haut de "cellule", mais ça ne devrait pas poser de problème)

L’entreprise

Le lieu

Intitulé de poste

Réalisations

Réalisation #

(De 1 à 5 réalisations)

Pour l’instant, j’ai la structure HTML et le CSS disponibles dans ce fiddle, qui fait pratiquement ce que je souhaite, à grands renforts de marges et de positionnements flottants — probablement que certains sont inutiles d’une part parce que pas concernés par ce code, et d’autre part parce que, ma foi, ça date…
Je dis "pratiquement", parce que justement les données d’exemple pour la date font que, quand celle-ci prend deux lignes, l’intitulé de poste est décalé d’une ligne, alors que je trouverais plus logique que la date sur deux lignes n’ait pas d’influence à ce niveau et que l’intitulé de poste reste sous le nom de l’entreprise.

Comme j’ai réalisé l’exemple sous forme de tableau ci-dessus, j’ai tenté de jouer un peu avec display: grid, mais ça me pose problème parce que je ne sais pas à l’avance le nombre de réalisations, et si je les mets toutes dans une même zone, elles se superposent. Et en même temps, je ne suis pas certain que grid soit la meilleure solution dans mon cas, je suppose que flex pourrait aider, mais là je ne connais pas vraiment, et les exemples ne semblent pas montrer ce que je souhaiterais. Bon, mon squelette n’est peut-être pas complet non-plus.

Les largeurs en pixels sont prévues pour une mise en page A4 en évitant de tout mettre en !important dans la feuille de style @media print.

Est-ce que quelqu’un pourrait me dire comment il serait mieux de faire ?

Merci d’avance  :)

+0 -0

Hello ! :)

Voici un exemple de ce que ça peut donner avec du flex : https://codepen.io/Luuka/pen/ZEJVpYO?editors=1100. J’ai adapté ta structure HTML pour faciliter le positionnement.

Pour éviter que tes deux colonnes n’interagissent le plus simple reste encore de les isoler dans la structure de ton HTML.

Un élément par colonne (deux divs, .left et .right) placées en flex. (J’ai utilisé le même procédé pour aligner le nom d’entreprise et le lieu, avec un justify-content: space-between; pour les espacer.)

<div class="vevent">
  <div class="left">
    Colonne gauche
  </div>
  <div class="right">
    Colonne droite
  </div>
</div>
.vevent {
  display: flex;
  flex-direction: row;
}

.left {
  width: 130px;
}

.right {
  width: 400px;
}

Edit : Dans ce message, je n’avais pas vu le lien que tu donne. Le résultat ici se base donc sur le tableau… Oups ^^

Hello !

Effectivement, Flexbox peut t’aider.

En m’inspirant des classes de Tailwind, voici un début de rendu de positionnement : https://jsfiddle.net/sgpce1kL/

Quand tu utilise Flex, essaye de voir le résultat que tu veux avoir, et découpe le en ligne et colonne.

Dans ton exemple, on peut voir une première ligne qui à deux colonnes : Celle de gauche, qui prend quasiment toute la place, et celle de droite, qui contient plusieurs autre ligne.

Tu as donc un flex-row qui englobe le tout, puis un flex-col dans le bloc de droite.

Ensuite, dans le bloc de droite, tu as une première ligne qui comporte deux colonnes : C’est donc un flex-row.

Voilà, le reste se fait tout seul ! :)

+2 -0

Merci à vous deux, je pense que j’ai réussi à avoir l’affichage que je souhaitais à l’écran ! :D
Ne vous inquiétez pas, j’ai mis tout le CSS que j’utilise et pas seulement ce qui intéresserait dans notre cas comme je l’avais fait pour le premier. De toute façon, ce n’est pas nécessairement encore propre, je pense notamment à la partie nom de l’entreprise — lieu.

Et c’est là que je remarque qu’avec Firefox, j’ai des bizarreries à l’impression : des parties qui se chevauchent sans vraiment de raison apparente (des <details> qui mangent sur celui qui suit, voire même sur une toute autre partie après), flex n’étant apparemment pas super bien géré pour ce média. >_<
Je vais devoir utiliser un navigateur WebKit juste pour générer les PDFs…

+1 -0
Connectez-vous pour pouvoir poster un message.
Connexion

Pas encore membre ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte