1486 sujets

Web Mobile et responsive web design

[Résolu] Images pas centrées dans la galerie

Bonjour,

Voilà j'ai un petit soucis avec ma galerie, quand je veux la rendre responsive les images ne sont plus centrées et je ne comprends pas pourquoi car mes margin sont en auto partout.... Du coup si vous pouviez m'éclairer ça serait super je vous laisse tout ce qu'il faut pour comprendre :

upload/1527159360-69591-sanstitre.png


Mon code CSS :

.row > .column {
  padding: 8px;
  margin: auto;
}

.row > .portrait {
  padding: 8px;
  margin: auto;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}
div p
{
	text-align: center;
	font-weight: normal;
	font-size: 0.8em;
}
.row
{
	width: 100%;
	margin: auto;
	display: inline-block;
	margin-top: 150px;
}
.row img
{
	width: 100%;
}
#credits
{
	font-size: 1em;
}
.column {
  display: inline-block;
  width: 23%;
  margin: auto;
}
.portrait
{
	display: inline-block;
	width: 12%;
	margin: auto;
}
@media all and (max-width: 1200px)
{
	.column 
	{
		display: inline-block;
		width: 43%;
		margin: auto;
	}
	.portrait
	{
		display: inline-block;
		width: 33%;
		margin: auto;
	}
	.row
	{ 
		margin-top: 120px;
	}
}
alex7 a écrit :
Te sert-tu des colonnes bootstrap ?
Fais voir ton HTML stp Smiley smile 



				<div class="row">
					<div class="column">
						<img src="Photos/01.jpg" onclick="openModal();currentSlide(1)" class="hover-shadow" title="cliquez pour agrandir">
						<p> Les calanques </p>
					</div>
					<div class="column">
						<img src="Photos/02.jpg" onclick="openModal();currentSlide(2)" class="hover-shadow" title="cliquez pour agrandir">
						<p> Autoportrait </p>
					</div>
					<div class="column">
						<img src="Photos/07.jpg" onclick="openModal();currentSlide(3)" class="hover-shadow" title="cliquez pour agrandir">
						<p> Budapest </p>
					</div>
					<div class="column">
						<img src="Photos/04.jpg" onclick="openModal();currentSlide(4)" class="hover-shadow" title="cliquez pour agrandir">
					<p> Port-Blanc </p>
					</div>
					<div class="column">
						<img src="Photos/05.jpg" onclick="openModal();currentSlide(5)" class="hover-shadow" title="cliquez pour agrandir">
						<p> Nantes </p>
					</div>
					<div class="portrait">
						<img src="Photos/08.jpg" onclick="openModal();currentSlide(6)" class="hover-shadow" title="cliquez pour agrandir">
						<p> Portrait </p>
					</div>
				</div>

				<!-- The Modal/Lightbox -->
				<div id="myModal" class="modal">
				  <span class="close cursor" onclick="closeModal()">&times;</span>
				  <div class="modal-content">

					<div class="mySlides">
					  <div class="numbertext">1 / 6</div>
					  <img src="Photos/01.jpg" style="max-width:100%">
					</div>

					<div class="mySlides">
					  <div class="numbertext">2 / 6</div>
					  <img src="Photos/02.jpg" style="max-width:100%">
					</div>

					<div class="mySlides">
					  <div class="numbertext">3 / 6</div>
					  <img src="Photos/07.jpg" style="max-width:100%">
					</div>

					<div class="mySlides">
					  <div class="numbertext">4 / 6</div>
					  <img src="Photos/04.jpg" style="max-width:100%">
					</div>
					
					<div class="mySlides">
					  <div class="numbertext">5 / 6</div>
					  <img src="Photos/05.jpg" style="max-width:100%">
					</div>
					
					<div class="mySlides">
					  <div class="numbertext">6 / 6</div>
					  <center>
					  <img src="Photos/08.jpg" style="width: 45%;">
					  </center>
					</div>
					
					<!-- Next/previous controls -->
					<a class="prev" onclick="plusSlides(-1)">&#10094;</a>
					<a class="next" onclick="plusSlides(1)">&#10095;</a>

				  </div>
				</div>

Modifié par Cadi09 (24 May 2018 - 19:18)
Bonsoir.

Margin : auto; ne fonctionne que dans un cas de figure :
- l'élément est de type bloc;
- ses dimensions sont connues. (Soit on a affaire à un 'élément remplacé', soit ses dimensions ont été définies.)

Écrire à la fois :
margin : auto;
et width : 100%;
est un non-sens car 'margin : auto;' veut dire 'on laisse autant d'espace à gauche qu'à droite' et 'width : 100%' , 'on prend la totalité de la largeur du conteneur'...

Pour le reste, il faut regarder plus en détail…
Smiley confus
Zelena a écrit :
Bonsoir.

Margin : auto; ne fonctionne que dans un cas de figure :
- l'élément est de type bloc;
- ses dimensions sont connues. (Soit on a affaire à un 'élément remplacé', soit ses dimensions ont été définies.)

Écrire à la fois :
margin : auto;
et width : 100%;
est un non-sens car 'margin : auto;' veut dire 'on laisse autant d'espace à gauche qu'à droite' et 'width : 100%' , 'on prend la totalité de la largeur du conteneur'...

Pour le reste, il faut regarder plus en détail…
Smiley confus


Ah d'accord... Comme j'ai appris toute seule à coder il y a pas longtemps je fais encore des erreurs bêtes... Merci pour ce commentaire je vais rectifier ça ! Et si vous trouvez une solution au reste merci de me dire Smiley smile
Essaye ça si tu as bootstrap 4 (je te mets quand meme le lien pour l'intégrer) :


<head>
<!-- Lien CSS Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<div class="row">
					<div class="col-sm-4">
						<img class="img-fluid" src="Photos/01.jpg" onclick="openModal();currentSlide(1)" class="hover-shadow" title="cliquez pour agrandir">
						<p class="text-center"> Les calanques </p>
					</div>
					<div class="col-sm-4">
						<img class="img-fluid" src="Photos/02.jpg" onclick="openModal();currentSlide(2)" class="hover-shadow" title="cliquez pour agrandir">
						<p class="text-center"> Autoportrait </p>
					</div>
					<div class="col-sm-4">
						<img class="img-fluid" src="Photos/07.jpg" onclick="openModal();currentSlide(3)" class="hover-shadow" title="cliquez pour agrandir">
						<p class="text-center"> Budapest </p>
					</div>
					<div class="col-sm-4">
						<img class="img-fluid" src="Photos/04.jpg" onclick="openModal();currentSlide(4)" class="hover-shadow" title="cliquez pour agrandir">
					<p class="text-center"> Port-Blanc </p>
					</div>
					<div class="col-sm-4">
						<img class="img-fluid" src="Photos/05.jpg" onclick="openModal();currentSlide(5)" class="hover-shadow" title="cliquez pour agrandir">
						<p class="text-center"> Nantes </p>
					</div>
					<div class="col-sm-4">
						<img class="img-fluid" src="Photos/08.jpg" onclick="openModal();currentSlide(6)" class="hover-shadow" title="cliquez pour agrandir">
						<p class="text-center"> Portrait </p>
					</div>
				</div>
</div>

<!-- Lien pour le JS et JQUERY -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>


Smiley smile
alex7 a écrit :
Essaye ça si tu as bootstrap 4 (je te mets quand meme le lien pour l'intégrer) :


&lt;head&gt;
&lt;!-- Lien CSS Bootstrap --&gt;
&lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"&gt;
&lt;/head&gt;
&lt;div class="row"&gt;
					&lt;div class="col-sm-4"&gt;
						&lt;img class="img-fluid" src="Photos/01.jpg" onclick="openModal();currentSlide(1)" class="hover-shadow" title="cliquez pour agrandir"&gt;
						&lt;p class="text-center"&gt; Les calanques &lt;/p&gt;
					&lt;/div&gt;
					&lt;div class="col-sm-4"&gt;
						&lt;img class="img-fluid" src="Photos/02.jpg" onclick="openModal();currentSlide(2)" class="hover-shadow" title="cliquez pour agrandir"&gt;
						&lt;p class="text-center"&gt; Autoportrait &lt;/p&gt;
					&lt;/div&gt;
					&lt;div class="col-sm-4"&gt;
						&lt;img class="img-fluid" src="Photos/07.jpg" onclick="openModal();currentSlide(3)" class="hover-shadow" title="cliquez pour agrandir"&gt;
						&lt;p class="text-center"&gt; Budapest &lt;/p&gt;
					&lt;/div&gt;
					&lt;div class="col-sm-4"&gt;
						&lt;img class="img-fluid" src="Photos/04.jpg" onclick="openModal();currentSlide(4)" class="hover-shadow" title="cliquez pour agrandir"&gt;
					&lt;p class="text-center"&gt; Port-Blanc &lt;/p&gt;
					&lt;/div&gt;
					&lt;div class="col-sm-4"&gt;
						&lt;img class="img-fluid" src="Photos/05.jpg" onclick="openModal();currentSlide(5)" class="hover-shadow" title="cliquez pour agrandir"&gt;
						&lt;p class="text-center"&gt; Nantes &lt;/p&gt;
					&lt;/div&gt;
					&lt;div class="col-sm-4"&gt;
						&lt;img class="img-fluid" src="Photos/08.jpg" onclick="openModal();currentSlide(6)" class="hover-shadow" title="cliquez pour agrandir"&gt;
						&lt;p class="text-center"&gt; Portrait &lt;/p&gt;
					&lt;/div&gt;
				&lt;/div&gt;
&lt;/div&gt;

&lt;!-- Lien pour le JS et JQUERY --&gt;
&lt;script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"&gt;&lt;/script&gt;
&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"&gt;&lt;/script&gt;
&lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"&gt;&lt;/script&gt;


Smiley smile


Je connais pas du tout bootstrap effectivement. Il suffit que je copie et colle ce que tu m'as envoyé ? Ou il y a d'autres manipulation ?
De plus j'ai vu pas mal de galerie plutôt avec un display en grid flexbox ne serait ce pas la meilleure solution ?
Merci en tout cas !
Cadi09 a écrit :


Je connais pas du tout bootstrap effectivement. Il suffit que je copie et colle ce que tu m'as envoyé ? Ou il y a d'autres manipulation ?
De plus j'ai vu pas mal de galerie plutôt avec un display en grid flexbox ne serait ce pas la meilleure solution ?
Merci en tout cas !


Bootstrap est génial pour le front ça fait gagner du temps !
Oui copie colle et essaye, si ça ne marche pas je vois pas pk.. Derien en tout cas. Smiley smile


PS : J'ai mis un </div> en trop à la fin
Modifié par alex7 (25 May 2018 - 10:00)
Il y a un gros souci avec ton site : c'est le poids des photos :
Il y a une photo qui ne pèse que 13Mo, c'est ENOOORME.
$ > ls -l
-rw-rw-r-- 1 jpierre jpierre  13M mai   14 14:37 01.jpg
-rw-rw-r-- 1 jpierre jpierre 2,6M mai   14 14:37 02.jpg
-rw-rw-r-- 1 jpierre jpierre 1,8M mai   14 14:37 03.jpg
-rw-rw-r-- 1 jpierre jpierre 4,8M mai   14 14:37 04.jpg
-rw-rw-r-- 1 jpierre jpierre 4,1M mai   14 14:37 05.jpg
-rw-rw-r-- 1 jpierre jpierre 9,2M mai   14 14:37 06.jpg
-rw-rw-r-- 1 jpierre jpierre 5,8M mai   14 14:37 07.jpg
-rw-rw-r-- 1 jpierre jpierre 4,9M mai   14 14:37 08.jpg
Au dela de 2Mo c'est déjà lourd.

6000px de large c'est beaucoup trop pour la plupart des écrans qui ont une résolution de 1920x1060px
Ta page de galerie en conséquence prend au moins 24secondes pour charger avec une bonne connexion ADSL et un PC. Et je ne parle pas de smartphone.

Avec des outils comme ImageMagick, on peut réduire la taille des photos pour une hauteur maxi de 1060px. On en profite également pour créer des vignettes avec toutes la même hauteur de 200px et en virant toutes les infos Exif :
#  https://lephotographelibre.wordpress.com/2016/07/29/tuto-preparer-ses-images-pour-le-web-redimensionner-en-batch/
 
mkdir vignettes
mogrify -resize x1060\> -quality 80% -path . archives/*.jpg
mogrify -strip -resize x200\> -quality 80% -path vignettes/ archives/*.jpg

Tu peux largement simplifier ton code HTML et CSS en révisant un peu le script Javascript
les codes sources html, js, et css sont visibles ici :
https://gist.github.com/bazooka07/ada932cc5452fcf271f2315a4a0e5f88
La démo est visible en ligne ici
http://jeveuxpartir.free.fr/mydeardiary/
Te prends pas la tête avec Bootstrap, il n'y a pas besoin ici.

Plutôt que de manipuler les attributs style, il vaut ajouter/retirer des class pour avoir l'effet escompté.
Modifié par bazooka07 (25 May 2018 - 12:39)
bazooka07 a écrit :
Il y a un gros souci avec ton site : c'est le poids des photos :
Il y a une photo qui ne pèse que 13Mo, c'est ENOOORME.
$ &gt; ls -l
-rw-rw-r-- 1 jpierre jpierre  13M mai   14 14:37 01.jpg
-rw-rw-r-- 1 jpierre jpierre 2,6M mai   14 14:37 02.jpg
-rw-rw-r-- 1 jpierre jpierre 1,8M mai   14 14:37 03.jpg
-rw-rw-r-- 1 jpierre jpierre 4,8M mai   14 14:37 04.jpg
-rw-rw-r-- 1 jpierre jpierre 4,1M mai   14 14:37 05.jpg
-rw-rw-r-- 1 jpierre jpierre 9,2M mai   14 14:37 06.jpg
-rw-rw-r-- 1 jpierre jpierre 5,8M mai   14 14:37 07.jpg
-rw-rw-r-- 1 jpierre jpierre 4,9M mai   14 14:37 08.jpg
Au dela de 2Mo c'est déjà lourd.

6000px de large c'est beaucoup trop pour la plupart des écrans qui ont une résolution de 1920x1060px
Ta page de galerie en conséquence prend au moins 24secondes pour charger avec une bonne connexion ADSL et un PC. Et je ne parle pas de smartphone.

Avec des outils comme ImageMagick, on peut réduire la taille des photos pour une hauteur maxi de 1060px. On en profite également pour créer des vignettes avec toutes la même hauteur de 200px et en virant toutes les infos Exif :
#  https://lephotographelibre.wordpress.com/2016/07/29/tuto-preparer-ses-images-pour-le-web-redimensionner-en-batch/
 
mkdir vignettes
mogrify -resize x1060\&gt; -quality 80% -path . archives/*.jpg
mogrify -strip -resize x200\&gt; -quality 80% -path vignettes/ archives/*.jpg

Tu peux largement simplifier ton code HTML et CSS en révisant un peu le script Javascript
les codes sources html, js, et css sont visibles ici :
https://gist.github.com/bazooka07/ada932cc5452fcf271f2315a4a0e5f88
La démo est visible en ligne ici
http://jeveuxpartir.free.fr/mydeardiary/
Te prends pas la tête avec Bootstrap, il n'y a pas besoin ici.

Plutôt que de manipuler les attributs style, il vaut ajouter/retirer des class pour avoir l'effet escompté.


Génial merci beaucoup !!
upload/1527258435-69591-sanstitre.jpg Par contre je vois que même en mettant un width 25% aux div à ce que vous venez de me proposer je ne peux pas avoir 4 images sur l'ensemble de la page, il y a t'il une solution à ça ?
Modifié par Cadi09 (25 May 2018 - 17:38)
Finalement j'ai opté pour redimensionner les images et ne pas faire de miniatures (car la résolution devenait exécrable) mais plutôt de faire un max-height à 190px pour avoir 4 jolies vignettes et vu que les photos ne sont plus aussi grosses cela ne prend pas de temps à charger ! Par contre c'est le javascript du coup qui ne fonctionne plus, il ne trouve sûrement pas les photos.... Si vous pouvez à nouveau m'aider je ne suis absolument pas connaisseuse en js.... Je vous remets le nouveau html et le js :

<div id="gallery" title="Cliquez sur l'image pour l'agrandir">
					<div>
						<img src="Photos/01.jpg" />
						<p>Les calanques</p>
					</div>
					<div>
						<img src="Photos/02.jpg" />
						<p>Autoportrait</p>
					</div>
					<div>
						<img src="Photos/07.jpg" />
						<p>Budapest</p>
					</div>
					<div>
						<img src="Photos/04.jpg" />
						<p>Port-Blanc</p>
					</div>
					<div>
						<img src="Photos/05.jpg" />
						<p>Nantes</p>
					</div>
					<div>
						<img src="Photos/08.jpg" />
						<p>Portrait</p>
					</div>
				</div>

				<!-- The Modal/Lightbox -->
				<input id="gallery-open" type="checkbox" />
				<div>
				  <div id="modal-content">
					<div id="caption"></div>

					<div id="controls">
					  	<label for="gallery-open" title="Quitter">&times;</label>
						<a data-direction="-1" title="Précèdent">&#10094;</a>
						<a data-direction="1" title="Suivant">&#10095;</a>
					</div>
		
				  </div>
				</div>


(function() {
	'use strict';

	const POSITION_ATTR = 'data-position';
	const ACTIVE_CLASS = 'active';
	var slides = new Array();
	var position = 0;

	function showSlide(index) {
		if(typeof index != 'undefined') {
			position = parseInt(index);
		}
		// On vérifie que position est bien un index du tableau vignettes
		if(position < 0) { position = slides.length -1; }
		if(position >= slides.length) { position = 0; }

		// on cache l'image actuellement affichée si besoin
		const current = document.querySelector('.slide.' + ACTIVE_CLASS);
		if(current != null) {
			current.classList.remove(ACTIVE_CLASS)
		}

		// On affiche l'image demandée avec la bonne class
		slides[position].classList.add(ACTIVE_CLASS);
	}

	const gallery = document.getElementById('gallery');
	const content = document.getElementById('modal-content');
	const vignettes = gallery.querySelectorAll('img[src]');
	const vignettesCount = vignettes.length;
	for(var i=0; i<vignettesCount; i++) {
		const slide = document.createElement('DIV');
		slide.className = 'slide';

		const img = document.createElement('IMG');
		img.src = vignettes[i].src.replace(/vignettes\//, '');
		slide.appendChild(img);
		const title = vignettes[i].parentElement.querySelector('p');
		const caption = document.createElement('P');
		caption.textContent = (title != null) ? title.textContent : 'Sans titre'
		slide.appendChild(caption);
		const num  = document.createElement('P')
		num.textContent = (i+1) + ' / ' + vignettesCount;
		num.className = 'numbertext';
		slide.appendChild(num);

		content.appendChild(slide);

		slides.push(slide);

		// Pour gérer l'évènement click sur les vignettes
		vignettes[i].setAttribute(POSITION_ATTR, i);
	}

	// Gestion boutons avance/recule
	const controls = document.getElementById('controls');
	controls.addEventListener('click', function(event) {
		if(event.target.tagName == 'A' && event.target.hasAttribute('data-direction')) {
			position += parseInt(event.target.getAttribute('data-direction'));
			showSlide();
			// On évite de propager l'évènement aux parents
			event.preventDefault();
		}
	});

	gallery.addEventListener('click', function(event) {
		if(event.target.tagName == 'IMG' && event.target.hasAttribute(POSITION_ATTR)) {
			event.preventDefault();
			showSlide(event.target.getAttribute(POSITION_ATTR));
			// on affiche la modal
			document.getElementById('gallery-open').checked = true;
		}
	});
})();

Modifié par Cadi09 (25 May 2018 - 20:08)
Normal, il y a la largeur de la gouttière.
Quand on fait un retour à la ligne avec la balise de fermeture pour #gallery > div, il s'affiche comme un espace.
Il faut donc les enlever en écrivant comme ceci :
<div id="gallery" title="Cliquez sur l'image pour l'agrandir">
	<div>
		<img src="photos/vignettes/01.jpg" />
		<p>Les calanques</p>
	</div><div>
		<img src="photos/vignettes/02.jpg" />
		<p>Autoportrait</p>
	</div><div>
		<img src="photos/vignettes/07.jpg" />
		<p>Budapest</p>
	</div><div>
		<img src="photos/vignettes/04.jpg" />
		<p>Port-Blanc</p>
	</div><div>
		<img src="photos/vignettes/03.jpg" />
		<p>Plateau n°03</p>
	</div><div>
		<img src="photos/vignettes/05.jpg" />
		<p>Nantes</p>
	</div><div>
		<img src="photos/vignettes/06.jpg" />
		<p>Muraille n°06</p>
	</div><div>
		<img src="photos/vignettes/08.jpg" />
		<p>Portrait</p>
	</div>
</div>

Par contre plus de gouttière => photos bord à bord.
Il faut rajouter un padding dans le div.
Sauf que la photo que j'ai appelé "plateau n°6" est plus large que les autres. Donc, il faut retailler la vignette à la main pour qu'elle rentre dans la boite sans mettre le bazar.
Plutôt que de régler le div à 25%, autant faire des vignettes plus petites pour en avoir 4 sur une largeur de 1200px en tenant compte d'un peu d'espace pour chaque gouttière.
En passant d'une hauteur de 200 à 195px, on passe à une largeur de 293px au lieu de 303.

Mais avec des gouttières, c'est plus sympa. Donc on va utilise "display: flex" qui va bien pour cela et évite de mettre div.slide à "display: inline-block". En plus avec un "justify-content: space-between" on a une répartition harmonieuse des largeurs de gouttières

P.S.: En plus, il vaut mieux partir sur un "max-width: 25%" pour conserver la même hauteur de vignettes. Mais en dimensionnant correctement les vignettes, ce n'est plus utile.

Version finale :
http://jeveuxpartir.free.fr/mydeardiary/4.html

les gists chez github.com :
https://gist.github.com/bazooka07/ada932cc5452fcf271f2315a4a0e5f88
Modifié par bazooka07 (25 May 2018 - 18:27)
bazooka07 a écrit :
Normal, il y a la largeur de la gouttière.
Quand on fait un retour à la ligne avec la balise de fermeture pour #gallery &gt; div, il s'affiche comme un espace.
Il faut donc les enlever en écrivant comme ceci :
&lt;div id="gallery" title="Cliquez sur l'image pour l'agrandir"&gt;
	&lt;div&gt;
		&lt;img src="photos/vignettes/01.jpg" /&gt;
		&lt;p&gt;Les calanques&lt;/p&gt;
	&lt;/div&gt;&lt;div&gt;
		&lt;img src="photos/vignettes/02.jpg" /&gt;
		&lt;p&gt;Autoportrait&lt;/p&gt;
	&lt;/div&gt;&lt;div&gt;
		&lt;img src="photos/vignettes/07.jpg" /&gt;
		&lt;p&gt;Budapest&lt;/p&gt;
	&lt;/div&gt;&lt;div&gt;
		&lt;img src="photos/vignettes/04.jpg" /&gt;
		&lt;p&gt;Port-Blanc&lt;/p&gt;
	&lt;/div&gt;&lt;div&gt;
		&lt;img src="photos/vignettes/03.jpg" /&gt;
		&lt;p&gt;Plateau n°03&lt;/p&gt;
	&lt;/div&gt;&lt;div&gt;
		&lt;img src="photos/vignettes/05.jpg" /&gt;
		&lt;p&gt;Nantes&lt;/p&gt;
	&lt;/div&gt;&lt;div&gt;
		&lt;img src="photos/vignettes/06.jpg" /&gt;
		&lt;p&gt;Muraille n°06&lt;/p&gt;
	&lt;/div&gt;&lt;div&gt;
		&lt;img src="photos/vignettes/08.jpg" /&gt;
		&lt;p&gt;Portrait&lt;/p&gt;
	&lt;/div&gt;
&lt;/div&gt;

Par contre plus de gouttière =&gt; photos bord à bord.
Il faut rajouter un padding dans le div.
Sauf que la photo que j'ai appelé "plateau n°6" est plus large que les autres. Donc, il faut retailler la vignette à la main pour qu'elle rentre dans la boite sans mettre le bazar.
Plutôt que de régler le div à 25%, autant faire des vignettes plus petites pour en avoir 4 sur une largeur de 1200px en tenant compte d'un peu d'espace pour chaque gouttière.
En passant d'une hauteur de 200 à 195px, on passe à une largeur de 293px au lieu de 303.

Mais avec des gouttières, c'est plus sympa. Donc on va utilise "display: flex" qui va bien pour cela et évite de mettre div.slide à "display: inline-block". En plus avec un "justify-content: space-between" on a une répartition harmonieuse des largeurs de gouttières

P.S.: En plus, il vaut mieux partir sur un "max-width: 25%" pour conserver la même hauteur de vignettes. Mais en dimensionnant correctement les vignettes, ce n'est plus utile.

Version finale :
http://jeveuxpartir.free.fr/mydeardiary/4.html

les gists chez github.com :
https://gist.github.com/bazooka07/ada932cc5452fcf271f2315a4a0e5f88


Alors du coup j'ai utilisé une autre version de html et css et la c'est très bien cadrée je n'ai plus de soucis de ce côté. C'est juste mon javascript maintenant qui est problématique comme tu peux voir dans mon dernier post....
Problème résolu j'avais mis le script js au mauvais endroit ! Merci à tous pour votre aide et désolé pour mon noobism !!!
Je t'encourage quand même à créer des vignettes.
L'objectif est d'avoir le temps de téléchargement de la page le plus court possible.
C'est une donnée qui est prise en compte par Google pour le référencement.

Le script javascript n'est qu'une première version. L'étape suivante est de passer au "lazy loading". En clair, une fois que le visiteur a cliqué sur une vignette pour voir la photo en taille réelle, pendant qu'il la regarde, on télécharge dans son dos, la photo suivante en taille réelle. Ni vu, ni connu, il croit qu'il visite un site super rapide alors qu'on télécharge en temps masqué.

Pense à retailler tes icônes Instagram, perso, FB. partir d'une taille de 450px pour d'en afficher que 33px, c'est pas top.

Et oui, mettre des images sur un site demande plus de boulot que d'écrire du baratin Smiley biggrin
bazooka07 a écrit :
Je t'encourage quand même à créer des vignettes.
L'objectif est d'avoir le temps de téléchargement de la page le plus court possible.
C'est une donnée qui est prise en compte par Google pour le référencement.

Le script javascript n'est qu'une première version. L'étape suivante est de passer au "lazy loading". En clair, une fois que le visiteur a cliqué sur une vignette pour voir la photo en taille réelle, pendant qu'il la regarde, on télécharge dans son dos, la photo suivante en taille réelle. Ni vu, ni connu, il croit qu'il visite un site super rapide alors qu'on télécharge en temps masqué.

Pense à retailler tes icônes Instagram, perso, FB. partir d'une taille de 450px pour d'en afficher que 33px, c'est pas top.

Et oui, mettre des images sur un site demande plus de boulot que d'écrire du baratin Smiley biggrin


Merci pour les tips. Je vais essayer de trouver un meilleur moyen de faire des vignettes que celui que j'avais alors.
Pour le "lazy loading" je t'avoue être absolument pas calée en javascript du coup faudrait que je me renseigne pour savoir comment ça peut fonctionner avec ce que j'ai déjà fait.

Oui c'est vrai pour les logos faut absolument que je les redimensionne, mais comme ça marchait bien comme ça je t'avoue que je les avais un peu zappé au détriment des autres choses plus complexes !!

En tout cas mon site est enfin vivant donc si vous voulez y aller c'est avec plaisir Smiley cligne
Sujet clos
Aller à