Appliquer un style ou une classe à un <li>

Ok, j’ai donc un résultat qui me semble correct en nettoyant un peu ton code.

Quel problème reste-t-il pour toi ?

En passant, attention en chargeant des images aussi lourdes si elles ne sont pas affichées dans leur taille d’origine : tu charges plus de pixels (consommant donc de la bande passante et du stockage pour tes utilisateurs) que nécessaire pour rien. Il faudra penser à utiliser des versions alternatives selon les dimensions nécessaires, au besoin à l’aide d'un srcset.

Yes !!!! C’est exactementça le souci

J’aimerais que te texte passe au dessus de la photo

Dans ce cas la solution est plutôt simple :

1. utiliser position: absolute; right: 0; sur l’image pour la forcer à sortir du flux et ne pas interférer avec le positionnement des autres éléments.
2. ajouter position: relative; sur les ul pour qu’ils passent sur un calque supérieur (sans cela il ne changent pas de calque et l’image restera au-dessus du fait de son positionnement absolu)

https://codepen.io/viki53/pen/NWBBoGB

SUPER… J’ai eu du mal, ça ne marchait pas avec tes indications (dont je te remercie)… trop de conflits. Cela ne serait pas arrivé avec un code propre (je ne vous ai pas tout envoyé).

J’ai nettoyé une grosse partie et ça fonctionne… cela aurait pu fonctionner avant

TOP !!!!!! Merci viki53

Salut viki53,

OUI, SUPER… sauf que mes images, je ne sais pas pourquoi, ne sont plus homothétiques (alors que si sur ton codepen). Je ne sais pas pourquoi, je n’ai pas pu déceler les CSS responsables (je te promets, j’ai cherché des heures). Que puis-je faire ?

Il est vrai que je désire du max-height:100vh et du max-width: 100vw un peu partout; mais en y allant par élimination, je n’ai rien trouvé… Problème que j’ai depuis le week-end dernier (j’ai lancé la discussion lundi . Je bloque Bonne soirée, P.

Alors, encore une fois : sans un code minimal qui permet de reproduire le problème, ça va être compliqué.

On ne peut pas deviner ton code, ni l’origine du bug.

je vais tenter de faire un codepen. Merci à toi.

Sans ces CSS là :

#textasiat2b li a:hover {
	font-size: 20vw;
	color: #fafad2;
}
#textasiat3 {
	padding: 0;
	margin-left: 50px;
	font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black",
		sans-serif;
	text-align: left;
	font-size: 8vw;
	line-height: 8vw;
margin-top:0px;}
#imagasiat {
	bottom: 0;
	transition: transform 0.3s ease-out;
}

.imagasiat {
	height: 100vh;
	position: absolute;
	right: 0;
	max-width: 100%;
	vertical-align: middle;
	border: 1vw solid #000000;
	margin-right: 10vw;
	transition: transform 0.3s ease-out;
  position: absolute; right: 0;
}
.article { height: 100vh;
position:relative;}

Les images ne sont plus déformées MAIS ne sont plus responsives. C’est tout ce que j’ai trouvé. Je vais encore faire des tests.

Bonne soirée

Bonjour viki53,

Tu n’avais pas accès à tout mon code et j’en suis désolé. Après bcp BCP de test, j’en ai conclus que ta solution (réponse idéale à ma question) ne s’appliquait pas à mon slider.

Je sais, j’aurais dû commencer par ça

Je t’ai fais un code pen pour que tu puisses juger par toi même.

https://codepen.io/herde2/pen/PoBgpoK

MERCI et Bonne journée

Salut,

Tu parles de l’image à droite ? Chez moi elle a l’air de s’adapter au viewport…

Tu as un exemple de procédure pour reproduire le problème dont tu parles ?

Bonjour viki53,

Si tu réduis ta fenêtre, tu verras que tout s’empile. Les "slides" suivants sont les uns au dessus des autres. Pour ce qui est de la première photo, elle ne s’affiche pas chez moi… impossible de voir le prob sur codepen

C’est bien compliqué

Merci et bonne journée,

P.

Tes "slides" (.article) n’ont pas de styles personnalisés appliqués, ils se mettent donc naturellement les uns à la suite des autres puisque ce sont des éléments de type bloc (<div>).

Pour l’image vérifie bien que ton chemin est valide en local.

Au passage, tu risques d’avoir des problèmes d'overflow avec des <ul> :

Merci pour toutes ces explications viki53. Je suis parti d’un "slider" existant, je n’ai pas les compétences pour en créer un. Malheureusement, mais j’ai compris le problème

Merci pour tout

Comme déjà dit plus tôt : au lieu de bricoler sans comprendre, il vaut mieux t’assurer d’avoir les bases pour comprendre ce que tu fais.