[Résolu] Avoir plusieurs blocs avec contenu différent avec et à la mêm

Bonjour à tous et à toutes,

Désolé si mon titre n'est pas clair, mais ce n'est pas évident de résumer en 70 caractères

Je sollicite votre aide et vos compétences, car les miennes sont un peu limitées.
Voici (une partie de) mon code HTML :

<div class="title-h3">Nos dossiers documentaires</div>
<div class="dossiers-documentaires">
    <div class="container-fluid">
        <div class="row">
            <col-md-4>
                <div class="dossier1">
                    <div class="clear"></div>
                    <h3>Le mois de la bande-dessinée</h3>
                    <hr>
                    <div class="node-item-content node-item-content-">
                        <div class="node-item-thumb"><img
                                src="https://example.fr/data/example.fr/application/node/3677/thumb.jpg?v=1573548673">
                        </div>
                        <div class="node-item-teaser">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eleifend fringilla magna
                            vitae consequat. Aenean accumsan ligula nisl, ut vestibulum libero tempus eu. Donec in justo
                            vehicula, pulvinar lorem eget, mollis ante. Phasellus id eros congue, fermentum nibh vitae,
                            auctor dui. Vivamus gravida tortor id nisl mattis tempor. Donec et porta ligula.
                            Pellentesque habitant morbi tristique senectus... </div>
                        <div class="node-item-readmore">
                            <a href="https://example.fr/node/content/nid/3677">
                                <i class="fa fa-link"></i> Lire la suite </a>
                        </div>
                    </div>
                </div>
            </col-md-4>
            <col-md-4>
                <div class="dossier2">
                    <div class="clear"></div>
                    <h3>Des robots et des hommes dans les livres</h3>
                    <hr>
                    <div class="node-item-content node-item-content-">
                        <div class="node-item-thumb"><img
                                src="https://example.fr/data/example.fr/application/node/3678/thumb.jpg?v=1573548838">
                        </div>
                        <div class="node-item-teaser">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas faucibus leo sem, ut
                            fermentum elit condimentum sit amet. Pellentesque ullamcorper metus vitae accumsan volutpat.
                            Etiam fermentum, elit nec suscipit malesuada, purus lectus tempus velit, non egestas massa
                            ipsum quis turpis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur quis
                            tortor at tortor vehicula efficitur quis... </div>
                        <div class="node-item-readmore">
                            <a href="https://example.fr/node/content/nid/3678">
                                <i class="fa fa-link"></i> Lire la suite </a>
                        </div>
                    </div>
                </div>
            </col-md-4>
            <col-md-4>
                <div class="dossier3">
                    <div class="clear"></div>
                    <h3>La folie dans l'art</h3>
                    <hr>
                    <div class="node-item-content node-item-content-">
                        <div class="node-item-thumb"><img
                                src="https://example.fr/data/example.fr/application/node/3679/thumb.jpg?v=1573548959">
                        </div>
                        <div class="node-item-teaser">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vitae sapien in orci sagittis
                            ultrices sit amet id lacus. Etiam imperdiet eget elit eleifend feugiat. Vivamus nec diam
                            augue. Fusce est sem, egestas eget nulla varius, malesuada hendrerit erat. Sed quis eros mi.
                            Mauris in auctor ipsum. Nam nec felis id est aliquam venenatis nec in nulla. Orci varius
                            natoque penatibus et magnis dis parturient... </div>
                        <div class="node-item-readmore">
                            <a href="https://example.fr/node/content/nid/3679">
                                <i class="fa fa-link"></i> Lire la suite </a>
                        </div>
                    </div>
                </div>
            </col-md-4>
        </div>
    </div>
</div>

Et (une partie de) mon code CSS :

/* Dossiers documentaires */
.dossiers-documentaires {
    position: relative;
}
.dossier1, .dossier2, .dossier3 {
	width: 30%;
	display: inline-block;
	border: solid 1px #e6e6e6;
	border-radius: 10px;
    position: absolute;
    top: 0;
    height: 163px;
}
.dossiers-documentaires h3 {
	font-size: 0.7em;
	display: block;
}
.dossiers-documentaires .node-item-teaser {
    display: none;
}
.dossiers-documentaires .pull-right {
    position: absolute;
    z-index: 1;
}
.dossiers-documentaires .node-item-thumb img {
	width: 100%;
	position: absolute;
	top: 0;
	border-radius: 10px 10px 0 0;
	margin-bottom: 0 !important;
}
.dossiers-documentaires h3 {
	font-size: 12px;
	margin-top: 107px;
	font-family: "RobotoSlab-Regular";
	margin-bottom: 0;
}
.dossier1 {
    left: 2%;
  }
.dossier2 {
    left: 35%;
}
.dossier3 {
    right: 2%;
}
.mediatheque {
    height: 521px;
}

Voici ce que ça donne en résolution 2560px :

Voici ce que ça donne en résolution 1920px (rassurez-vous, je vais pas vous faire toutes les résolutions) :

Voici la maquette (autrement dit ce que je souhaiterais dans l'idéal) :


Bref...
Comme vous pouvez le voir, c'est pas super propre, dans le sens où pour arriver à ce résultat j'ai dû passer par des positions relative (sur la div .dossiers-documentaires) et absolute (sur .dossier1 .dossier2 et .dossier3). En effet, j'ai dû faire ça pour avoir les 3 blocs/dossiers à la même hauteur. Sans ça, j'avais le bloc du milieu plus haut que les 2 autres.
Comment obtenir le même résultat (voir comme sur la maquette dans l'idéal) en faisant différemment (sans passer par des positions relatives et absolute) et en plus propre, sans (trop) bidouiller ?
Autrement dit, comment avoir plusieurs blocs avec contenu différent avec la même hauteur et à la même hauteur ?

Il y a 2 choses à prendre en compte :
- Les 3 dossiers sont appelés dynamiquement et vont (donc) changer => faire comme si les 3 dossier avaient le même nombre de caractères que le dossier2 (celui du milieu)
- (Dans le HTML) Comme ces 3 dossiers sont appelés dynamiquement, je n'ai pas la main (et c'est pas moi qui l'ait écrit ) sur le code HTML entre les balises .dossier1, .dossier2 et .dossier3

Je vous remercie pour votre aide
Bonne journée

P.S : Pour ceux que ça intéresse, je peux leur envoyer en MP l'adresse du site. Je préfère qu'elle ne soit pas publique, vis à vis de notre client, désolé

spip93 a écrit :

Comment obtenir le même résultat (voir comme sur la maquette dans l'idéal) en faisant différemment (sans passer par des positions relatives et absolute) et en plus propre, sans (trop) bidouiller ?
Autrement dit, comment avoir plusieurs blocs avec contenu différent avec la même hauteur et à la même hauteur ?

Je vais faire quelques tests sur Codepen, mais la réponse à ces questions qui me vient immédiatement à l'esprit est : Flexbox et Grid Layout car c'est le comportement naturel des éléments d'y avoir la même hauteur.
Modifié par Raphael (14 Nov 2019 - 10:44)

J'en profite pour te poser quelques questions et pour commencer... quel est donc cette étrange balise <col-md-4> ?
Ce ne serait pas une classe que tu voulais ? Est-ce que cet élément (non valide et parasite) est vraiment nécessaire ?


PS : rattraper une architecture HTML "à la Bootstrap" est vraiment une plaie
Modifié par Raphael (14 Nov 2019 - 10:50)

Tu devrais utiliser la grille bootstrap que tu as disposition pour faire ton code (et éventuellement changer la row en display flex si tu es sur bootstrap 3). En utilisant les positions absolues, hauteur fixes ton design va casser de partout lors du redimensionnement.

Aussi tes colonnes devrait être comme ceci :

<div class="col-md-4">
...
</div>

J'aime bien "display: flex" aussi.
En général je rajoute avec un "justify-content" avec un des valeurs suivantes : center, space-around ou space-between, pour avoir une présentation un peu plus propre sans se compliquer la vie.
Et si cela risque de déborder de l'écran un " flex-wrap: wrap" règle le problème facilement.

Pour tester on peut utiliser l'inspecteur de code de Firefox ou Chrome ( touche F12).
Modifié par bazooka07 (14 Nov 2019 - 14:14)

Bonjour à tous et à toutes,

Désolé de ne vous répondre que maintenant, mais depuis jeudi soir, plus de courant chez moi.
Merci à vous pour vos réponses, notamment à Raphael. Il est vrai que je n'ai pas encore le ré"flex" des display flex
Désolé aussi pour ces fausses balises <col-md-4>. En fait, je voulais faire 3 div avec la CLASSE "col-md-4". Je ne sais pas ce qu'il s'est passé. J'ai voulu imbriquer des div avec des classes en passant par les abréviations Emmet de Visual Studio Code et... ça a m... quelque part. Bref...

Je vais jouer les casses-pieds mais, je souhaiterai passer les titres h3 de mes dossiers, APRÈS (sous) mes images.
Voici mon code CSS :

/* Dossiers documentaires */
.dossiers-documentaires {
    padding: 1rem;
}
.dossiers-documentaires .row {
padding: 1rem;
}
.dossiers-documentaires [class^="dossier"] {
border: solid 1px #e6e6e6;
    border-radius: 10px;
}
.dossiers-documentaires .node-item-teaser {
    display: none;
}
.dossiers-documentaires h3 {
    font-size: 0.7em;
    font-family: "RobotoSlab-Regular";
}
.dossiers-documentaires .node-item-thumb img {
	width: 222%;
    border-radius: 10px 10px 0 0;
    margin-bottom: 0 !important;
}

@media (min-width: 576px) {
    .dossiers-documentaires .row {
        display: flex; /* on passe en modèle Flexbox */
    }
    .dossiers-documentaires [class^="dossier"] {
        flex: 1; /* on répartit équitablement les enfants */
    }
    .dossiers-documentaires [class^="dossier"]:not(:first-child) {
        margin-left: 1rem; /* marge à gauche de tous sauf le premier enfant */
    }
}

J'ai tenté de faire un margin-top négatif (parce qu'un margin-bottom m'agrandissait la hauteur de mes blocs), mais à la base (avant de faire quoi que ce soit) j'ai un décalage (voir ci-dessous).

Je peux aussi faire un transform:translateY mais mes images ne seront pas alignées, quelle que soit la taille de mes h3.
Ou alors, je fais un position:absolute avec un top:qqch sur les images, mais je tombe dans le même travers qu'au départ.

Comment faire pour 1) passer les images au-dessus de mon texte et 2) qu'elles soient alignées (grâce au CSS voire au JS) sans toucher au HTML ?

Je vous remercie par avance pour votre aide.
Bonne journée

Tu pourras changer l'ordre avec flexbox

Merci Bacasable.
J'y avais pensé car je l'avais lu quelque part, mais impossible de me souvenir comment faire (comme j'ai pas l'habitude de le faire).
Je viens de retrouver.
Voici mon code CSS de mes 3 éléments (pour ceux que ça intéresse) :
- le bloc .dossier1[2 et 3]
- le titre h3
- l'image

.dossiers-documentaires [class^="dossier"] {
	flex: 1;
	display: flex;
	flex-direction: column; /*Bien mettre column et pas row autrement, le titre et l'image sont côte à côte*/
}
.dossiers-documentaires h3 {
	font-size: 0.7em;
	font-family: "RobotoSlab-Regular";
	order: 0;
	margin-top: 0;
}
[class^="dossier"] .node-item-content.node-item-content- {
	order: 1;
}

Encore merci de votre aide

Tu pourrais faire un codepen(https://codepen.io/) ? Ce serait plus simple pour t'aider

Excusez-moi, je reviens à la charge parce que j'ai essayé d'appliquer le code de Raphael.
J'ai appliqué display:flex sur 3 blocs en col-md-3 de bootsrap. Mais voici ce que ça donne :

Alors que ça devrait ressembler à ça :

Quand j'applique display:flex sur le parent (à savoir <div class="row">), ça me masque toute la ligne (les 3 blocs en somme).

J'ai essayé de faire un codepen comme le proposait bacasable en simplifiant au max, mais ça rend pas top top, désolé

Du coup, peut-on appliquer un display:flex sur des blocs col-md-3 de Bootstrap ? Si oui, comment faire pour avoir la même hauteur de bloc/div quelle que soit la résolution ?

D'avance, merci pour votre aide
Bonne journée

J'ai ajouté :
- display:flex; et (surtout) flex-wrap: wrap; (flex-flow:column; fonctionne aussi) au sélecteur col-md-3
- un width:100%; au sélecteur title-section
- un flex:1; aux sélecteurs conservatoire, mediatheque et infos-pratiques
Cependant, ça ne fonctionne pas, les 3 blocs n'ont pas la même hauteur.
Une idée ?
Modifié par spip93 (19 Nov 2019 - 19:33)