28172 sujets

CSS et mise en forme, CSS3

[Résolu] Css qui marche sur JSFiddle mais pas chez moi

Bonjour à tous,

Je suis nouveau ici, mais je code depuis quelque temps, en amateur, sans jamais avoir réellement appris les bases.
Bref, j'ai réalisé plusieurs projets sans trop de soucis mais je butte actuellement sur une question.

J'essaye d'adapter un design pour qu'il soit lisible sur téléphone, ce que j'aimerai réaliser uniquement en CSS si possible.
Je voudrais que quand l'utilisateur appuie sur une image avec son doigt, un div de légende s'affiche.

J'ai réussi, en cherchant un peu, à faire ca :
http://jsfiddle.net/3p6Kz/318/

ce qui marche exactement comme je le souhaite depuis mon iphone 5

cependant lorsque je crée une page avec exactement le même code sur mon serveur, cela ne fonctionne plus depuis le même téléphone !

Par contre, les deux fonctionnent depuis mon PC, ce qui ne m’intéresse pas, mais peut peut être vous donner un indice !

Voici le code de ma page test :


<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">


  <style type="text/css">
    
.display1 {
	background-color:#F00;
	z-index:0;
	position:absolute;
	height: 530px;
	width: 320px;
	display: flex;
	}
.display2{
	background-color: rgba(255, 255, 255, 0.5);
	z-index:1;
	position:absolute;
	height: 530px;
	width: 320px;
	display: flex;
	opacity:0;
	}
.display2:hover, .displayright:active {opacity:1;}

.info {
	margin: auto;
	width: 280px;
	}
  </style>

  <title></title>
 
</head>

<body>
  <div class="display1">
contenu (image)
</div>
<div class="display2">
<div class="info">
légende
</div>
</div>

</body>

</html>


Quelqu'un pourrait-il m'expliquer la raison et comment résoudre le probleme ?
Merci d'avance
Modifié par officieum (12 Jan 2018 - 15:20)
officieum a écrit :

Je suis nouveau ici, mais je code depuis quelque temps, en amateur, sans jamais avoir réellement appris les bases.


Bonjour Smiley smile bienvenue Smiley smile

Tu le dis toi même tu n'as pas les bases, et du coup tu ne penses pas au "requis" Smiley cligne

JSFiddle charge en presque automatique le fichier jquery.js Smiley smile

Si tu regardes dans fiddle la fenêtre en bas à gauche te l'indique Smiley smile
là le fichier jquery.1.11.0.js

Si tu ne met pas ce fichier dans ton code à toi et bien cela ne fonctionnera peut être pas, non pas que tu écrives du code en jQuery, mais celui-ci crée de lui même des transformations invisibles au css, html, js etc

Du coup je déduirai que dans ton cas certaines classes CSS que tu utilises ne doivent pas être native sur ton Iphone et c'est JQuery qui les fait fonctionner sur fiddle...
Il faut tester pour le savoir Smiley smile
merci pchlj pour ton aide

je viens de rajouter un lien vers le fichier jquery.js

<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  <script type="text/javascript" src="scripts/jquery-1.11.0.js"></script>


que j'ai uploadé,

que ce soit la version 3.2.1 ou la 1.11,
ca ne semble pas résoudre le problème...

y aurait-il une version specifique mobile ?
Ca semble marcher désormais,
aucune idée d'où venait le probleme,
peut etre histoire de cache dans le navigateur ?

merci pour ton aide
Sujet clos
Aller à