27547 sujets

CSS et mise en forme, CSS3

Salut

Soit un petit slider de photos très simple horizontal :
<div id="real" class="photos">
	<img src="image1.jpg" alt="" />
	<span>légende1</span>
	<img src="image2.jpg" alt="" />
	<span>légende2</span>
	<img src="image3.jpg" alt="" />
	<span>légende3</span>
	<img src="photo.jpg" alt="R" />
	<span>unephoto</span>
	<img src="img_3982.jpg" alt="" />
	<span>et voila</span>
</div>

et son css :
	.photos {
		position: relative;
		width: 100%;
		height: 90%;
		overflow-x: scroll;
		overflow-y: hidden;
		white-space: nowrap;
		}
	.photos img { height: 90vh; width: auto; z-index: 0; }
	.photos span {
		position: absolute;
		width: 67.5vh;
		padding-top: 5px;
		padding-bottom: 5px;
		bottom: 4px;
		z-index: 1;
		background-color: #676767;
		background-color: hsla(0, 0%, 60%, 0.50);
		text-shadow: 1px 1px 1px #000000;
		display: none;
		}
	.photos:hover > span { display: inline-block; }


Le problème : l'étiquette span commence sur la deuxième photo !!!

Pourquoi ?
Que faire ?
du coup tu nous as pas partager tout ton code, parce que avec ce que tu m'a partagé et ce que j'ai fais dans l'exemple tout fonctionne.

Si il y du code que tu n'a pas partagé... je peux pas le deviner Smiley smile

ton site est en ligne? on peut tester ?
Si je vais sur ton codepen et que j'intègre, comme suggéré,
position: absolute;
à
.photos img {}
le slideshow disparait aussi !!
Bonsoir,

J'avoue ne pas etre tres bon en CSS.

mais en faisant quelques tests avec ton code CSS, je ne pense pas que ca commence à l'image 2 comme tu le dis, mais plutot que le span s'affiche à droite de l'image. Donc le span1 va s'afficher sur l'image 2 ...

En faisant le test apres avoir modifier 2 lignes du span :
- left=-100 %
- en supprimant width
ca peut peut etre te donner une idee.


.photos{
    position: relative;
    width: 50%;
    height: 50%;
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
}

.photos img { height: 50vh; width: 50vw;  }

.photos span{
    position: relative;
    /* width: 67.5vh; */
    left: -100%;
    padding-top: 5px;
    padding-bottom: 5px;
    bottom: 4px;
    z-index: 1; 
    background-color: #676767;
    background-color: hsla(0, 10%, 60%, 0.50);
    text-shadow: 1px 1px 1px #000000;
    /* display: none; */
}

/*  .photos:hover span { display: inline-block; }  */


les span s'affichent bien sur leur image.

Si ca peut t'aider dans tes recherches.

NB : voir aussi : https://www.creativejuiz.fr/blog/tutoriels/css3-creer-slideshow-automatique-controlable-transition
Modifié par alain_47 (20 May 2021 - 19:46)
La hauteur de mes img a besoin d'être de la hauteur que j'avais choisi et la largeur des span était calculé pour être pile poil la largeur des images (images 4/3 verticales).

Là je ne vois pas comment les span vont pouvoir être pile de la largeur des images.
Modifié par kerlutinoec (20 May 2021 - 21:39)
J'ai tenté un
.photos span { margin-left: -67.5vh;
mais ça fait dégueu à cause d'un décalage progressif du span, probablement à cause des quelques pixels de marges entre les images* (que je préfère toutefois garder pour l'esthétique).
J'en suis pas loin !

(*d'ailleurs pourquoi elles sont espacées alors que je n'ai rien demandé et qu'un margin:0;padding:0 n'y change rien ?)
Modifié par kerlutinoec (21 May 2021 - 10:21)
Tadam !

MAGIE !

En lisant ça https://forum.alsacreations.com/topic-2-15609-1-RESOLU-Comment-mettre-3-images-cotes-a-cotes-sans-espace-entre-.html j'ai compris le problème...

Le décalage est simplement du à un espace qui s'insère lors du retour à la ligne !!!

Je suis passé à :
<div id="real" class="photos">
	<img src="image1.jpg" alt="" /><span>légende1</span>
	<img src="image2.jpg" alt="" /><span>légende2</span>
	<img src="image3.jpg" alt="" /><span>légende3</span>
	<img src="photo.jpg" alt="R" /><span>unephoto</span>
	<img src="img_3982.jpg" alt="" /><span>et voila</span>
</div>
(sans retour à la ligne entre le img et le span), en gardant mon
.photos span { margin-left: -67.5vh;
, et tout marche impec maintenant !
Meilleure solution
Ouaip. Merci. En fait parfois je suis capable de passer 48h à chercher une solution bidouillée plutôt que de refaire une structure propre !