[Résolu] Mozaique div qui sautent

Question

C9987

30 Oct 2020 à 11:28

Bonjour à tous,

Je me permets de vous écrire afin d'avoir quelques pistes afin de pouvoir solutionner mon problème.

Je suis en train de coder mon site web afin d'y présenter mes projets de graphisme.
J'ai donc créé un index visuel des différents projets.

Il s'agit d'une mozaïque de 5 images par lignes + 5 textes associés par lignes

Soit une balise globale <span> de width =100%
5 <img> de width= 20%
5 <div> de width = 20%

5 <img> de width= 20%
5 <div> de width = 20%

5 <img> de width= 20%
5 <div> de width = 20%

etc

Mon problème est que lorsque que je réduis la taille de la fenêtre de mon navigateur, certaines images sautent à causes de la hauteur variable de la div du dessus.

Je vous joins une capture d'écran ou sinon mon site est actuellement en ligne sur www.charlymanceau.fr

Merci d'avance pour votre aide,
Charly upload/1604053655-81497-capturedaeacran2020-10-30aa10.png

upload/1604053655-81497-capturedaeacran2020-10-30aa10.png


<span class="miniatureIndex">
<a href="projects/escadaYucatan.html" class="imageMosaique"><img src="images/PROJECTS/EscadaYucatan/oeil.jpg" style="width: 100%;" class="bnw"></a>
<a href="projects/annunaki.html" class="imageMosaique"><img src="images/PROJECTS/Annunaki/annunaki4.jpg" style="width: 100%;" class="bnw"></a>
<a href="projects/loccitanestamps.html" class="imageMosaique"><img src="images/PROJECTS/L'Occitane/LOccitane1.jpg" style="width: 100%;" class="bnw"></a>
<a href="projects/hermesemployer.html" class="imageMosaique"><img src="images/PROJECTS/Hermès/1.jpg" style="width: 100%;" class="bnw"></a>
<a href="projects/narcisorodriguez.html" class="imageMosaique"><img src="images/PROJECTS/Narciso Rodriguez/NarcissoRodriguez2.jpg" style="width: 100%;" class="bnw"></a>

<div class="texteMozaique"><p>GIPSY TRIP<br>CLIENT: ESCADA<br>YEAR: 2020</p></div>
<div class="texteMozaique"><p>LEATHER GOODS LOGO<br>CLIENT: ANNUNAKI<br>YEAR: 2020</p></div>	
<div class="texteMozaique"><p>FLORAL STAMPS<br>CLIENT: L'OCCITANE<br>YEAR: 2019</p></div>	
<div class="texteMozaique"><p>JOBS ILLUSTRATIONS<br>CLIENT: HERMÈS EMPLOYER<br>YEAR: 2019</p></div>	
<div class="texteMozaique"><p>JOURNEY#PURECONTRAST<br>CLIENT: NARCISO RODRIGUEZ<br>YEAR: 2019</p></div>
</span>


.miniatureIndex{
	position: absolute;
	top: 40px;
	width: 100%;
	text-align: center;
	padding-bottom: 50px;
}
.imageMosaique{
	float: left;
	width: 20%;
}
.texteMozaique{
	float:left;
	width: 20%;
	font-family: Helvetica," sans-serif";
	font-size: 15px;
	font-weight: 600;
	vertical-align: top;
	overflow-wrap: anywhere;
}

_laurent

Modérateur

30 Oct 2020 à 12:14

Salut,

Pour une telle mise ne forme tu peux utiliser un tableau ( https://www.w3schools.com/html/html_tables.asp ) ou le display grid ( https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Grid_Layout ). Tout deux permettront a tes lignes d'avoir la même hauteur (celle de a case la plus haute) sans a avoir à la fixer. Le seul avantage du grid que je vois ici c'est qu'il te permettra facilement de changer le nombre de colonne en fonction de la largeur de l'écran si jamais tu veux.

.miniatureIndex {
    display: grid;
    grid-template-columns: repeat(5,1fr);
}
.imageMosaique {}
.texteCellule {
    font-family: Helvetica," sans-serif";
    font-size: 15px;
    font-weight: 600;
    overflow-wrap: anywhere;
    vertical-align: top;
    text-align: center;
}

il faut virer les taille les float etc. Et le absolute sur miniatureIndex aussi, c'est une mauvaise idée je pense.

Bonne journée

C9987

30 Oct 2020 à 13:38

Hello Laurent,

Merci pour ta réponse,

Alors j'ai modifié hier la structure de mon site, avant j'étais parti sur un tableau, comme tu me l'indiques. Cela fonctionnait très bien sur chrome, safari. En revanche sur mozilla et sur portable, mes 5 colonnes (qui de base on un width de 20%) n'étaient pas réparties équitablement, chacune était défini par la largeur du texte situé sous son image. Même en utilisant un word-break: break-word; la description des projets définissait toujours la largeur.

Je m'excuse d'avance si je code de façon absurde ou inapproprié, je dois avouer que j'essaie de m'en sortir sans vraiment avoir toutes les bases.

J'essaie la piste des grilles alors Smiley smile

_laurent

Modérateur

30 Oct 2020 à 14:46

Oui les table sont un peu rigides parfois.. Avec le grid ca sera plus simple normalement tu as juste a remplacer le CSS que tu avait mis par celui que je t'ai donné, le html ne bouge pas. Smiley smile

C9987

30 Oct 2020 à 15:07

Top super cela fonctionne !

Au début j'étais parti pour faire comme sur le cours que tu m'as envoyé à savoir, une div pour chaque image + sa description, mais ensuite j'ai compris que ton grid-template-columns: repeat(5,1fr); permettait "d'automatiser" le placement !

Je te remercie de m'avoir éclairé et montré cet outil.

J'ai juste une dernière question, si je peux me permettre, pourquoi cette mise en forme équilibrée ne s'applique pas correctement sur portable ?

upload/1604066834-81497-img1663.jpg