Discussion :

[laffarguee]

Bonjour,

J'ai récupéré ce petit script que j'ai inclus à la racine de Wordpress. L'affichage des deux images et correcte sous safari mais la deuxième image ne s'affiche pas lorsque j'ouvre le site avec un iphone. Quelqu'un peut-il m'aider ?

http://www.s-lab.co

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
<!--?php
/*
Template Name: Splash
*/
?-->
    <title>Splash Page</title>
    <style>img.splash{min-height:100%;min-width:512px;width:50%;height:auto;position:fixed;top:0;right:0;}@media screen and (max-width: 1024px){img.splash{left:50%;margin-left:-512px;}}</style>
<a href="http://www.s-lab.co/xxxxxxxx"><img class="splash" src="http://xxxx.jpg"></a>
    <style>img.splash2{min-height:100%;min-width:512px;width:50%;height:auto;position:fixed;top:0;left:0;}@media screen and (max-width: 1024px){img.splash2{left:50%;margin-left:-512px;}}</style>
<a href="http://www.s-lab.co/xxxxxx"><img class="splash2" src="http://xxxxxxxxx.jpg"></a>

[Bisûnûrs]

Elle doit être masquée par la première.

[laffarguee]

Merci pour votre réponse.
Je ne suis pas développeur et je souhaiterai que les deux images s'affichent une à gauche, une à droite l'ensemble étant centré sur la fenêtre du navigateur et s'adaptant quelque soit les dimensions de la fenêtre du navigateur. Le rapport hauteur / largeur restant identique

[NoSmoking]

Elle doit être masquée par la première.

La seule chose que tu ais besoin est d'un min-width:50% pour les écrans jusqu'à 1024px?

[laffarguee]

ça ne permet de résoudre mon problème? En dessous d'une certaine taille de fenêtre, la seconde partie (à droite) disparait.

[NoSmoking]

Si l'on reprend ton code CSS, soit dit en passant illisible, le fait de mettre un min-width:50% annule la directive min-width:512px.

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
img.splash {
    min-height: 100%;
    min-width:512px;
    width:50%;
    height:auto;
    position:fixed;
    top:0;
    right:0;
}
img.splash2 {
    min-height:100%;
    min-width:512px;
    width:50%;
    height:auto;
    position:fixed;
    top:0;
    left:0;
}
@media screen and (max-width:1024px) {
    img.splash, img.splash2{
      min-width:50%;
    }
/*
    img.splash {
        left:50%;
        margin-left:-512px;
    }
    img.splash2 {
        left:50%;
        margin-left: -512px;
    }
*/
}

c'est quand même factorisable .

Une question se pose néanmoins, pourquoi passer par 2 images?

[laffarguee]

Click sur image de gauche > on accède à une certaine partie du site
Click sur l'image de droite > on accède à une autre partie du site

Je ne sais absolument pas programmé. C'est un code que j'ai récupéré et que j'ai essayé d'adapter

En tout cas, merci ça fonctionne