1427 sujets

Web Mobile et responsive web design

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


<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;
}
Modérateur
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
Meilleure solution
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
Modérateur
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
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
Merci Laurent pour ton aide Smiley cligne

Bon weekend à toi !
Modifié par C9987 (31 Oct 2020 - 13:17)
Modérateur
Désolé pour le bug IOS, j'ai rien pour tester sous le coude et comme ça ca me dit rien... Smiley ohwell
J'espère que tu t'en sortira !
Bone weekend !