Bonjour,
Le logo de mon site (une image: imagelogo1.png, imagelogo2.png, imagelogo3.png) est différent selon la taille de l'écran:
- cas1: ecran pc
- cas2: écran (screen) et handheld dont la résolution en largeur est comprise entre 100 et 499 pixels
@media screen and (min-width: 100px) and (max-width: 499px) , handheld and (min-width: 100px) and (max-width: 499px)
- cas3: écran (screen) et handheld dont la résolution en largeur est comprise entre 500 et 800 pixels
@media screen and (min-width: 500px) and (max-width: 800px) , handheld and (min-width: 500px) and (max-width: 800px)
J'utilise les media querrie pour faire apparaitre ou disparaitre l'image selon la taille de l'écran
Le codage fonctionne, sauf pour le cas 1 ou c'est la 3eme image qui est chargée
J'ai beau relire mon code je ne vois pas d’où vient l'erreur
Cordialement
html:
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17 <div id="ima1"> <a href="index.html" target="_self" title="Accueil du site"> <img class="tailleim" src="imagelogo1.png"/> </a> </div> <div id="ima2"> <a href="index.html" target="_self" title="Accueil du site"> <img class="tailleim" src="imagelogo2.png"/> </a> </div> <div id="ima3"> <a href="index.html" target="_self" title="Accueil du site"> <img class="tailleim" src="imagelogo3.png"/> </a> </div>
css:
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60 .tailleim{ border:0; position: absolute; top:0%; left:33%; width:643px; height:91px; } #ima1{ display;block; } #ima2{ display;none; } #ima3{ display;none; } @media screen and (min-width: 100px) and (max-width: 499px) , handheld and (min-width: 100px) and (max-width: 499px){ .tailleim{ border:0; position: absolute; top:0%; left:1%; width:287px; height:82px; } #ima1{ display: none !important; } #ima2{ display: none !important; } #ima3{ display: block; } } @media screen and (min-width: 500px) and (max-width: 800px) , handheld and (min-width: 500px) and (max-width: 800px){ .tailleim{ border:0; position: absolute; top:0%; left:10%; width:514px; height:73px; } #ima1{ display: none !important; } #ima2{ display: block; } #ima3{ display: none !important; } }
Partager