Bonjour,
Ceci est mon premier post, et j’espère être assez clair pour être compris et peut-être même aidé.
Merci d’avance si vous prenez le temps de me lire, et mes excuses pour le chargement un peu long du site — je n’ai pas encore optimisé le poids des images.
Voici l’adresse du site qui pose problème : http://www.robinbantigny.com/LAST/
Une version allégée des codes qui posent problèmes :
HTML
CSS
Le problème est le suivant :
J’ai diviser mon site internet en blocs en position relative, superposés les uns sur les autres, dont la class est à chaque fois la même, à savoir .bloc.
Dans chacun de ces bloc, j’ai disposé à chaque fois une class .vue_g (image aligné à gauche) ou .vue_d (image alignée à droite) contenant une image occupant tout le bloc, en relative.
Par dessus ces images, j’ai disposé dans un z-index supérieur, et en fixed, 4 class différentes contenant chacune une image : ecran_hg (hautgauche), ecran_hd (haut droit), ecran_bg (bas gauche), ecran_bd (bas droit)
L’idée était d’obtenir, lors du scroll vers le bas, un changement de contenu de ces dernières class à chaque frontière entre les blocs disposés les uns sur les autres. C’est un code très simple sans js (à part pour le scrollto) et, pendant tout le développement de ce site, tout ce passait très bien en local sur Chrome, Safari et Firefox — je ne m’occupe pas de IE, puisque ce site s’adresse essentiellement à des galeries & des personnes équipées de produits Apple.
Or, lorsque j’ai mis en ligne le site, l’ensemble des class fixed était superposé en haut du site comme si l’overflow hidden n’était pas respectée par les navigateurs ou qu’ils ne savaient plus quel contenu prendre en compte dans le code html. À part sur safari où le site se comporte comme prévu.
J’ai fait des recherches sur les contextes d’empilement avec le z-index, mais je ne trouve pas l’origine du problème. Selon vous, quel est l’origine du bug ? Pensez-vous que la meilleure solution soit de refondre le site en utilisant javascript pour changer le contenu des class fixed ?
Merci pour votre temps
Cordialement,
Robin
Ceci est mon premier post, et j’espère être assez clair pour être compris et peut-être même aidé.
Merci d’avance si vous prenez le temps de me lire, et mes excuses pour le chargement un peu long du site — je n’ai pas encore optimisé le poids des images.
Voici l’adresse du site qui pose problème : http://www.robinbantigny.com/LAST/
Une version allégée des codes qui posent problèmes :
HTML
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Large.Anthropological.Simulation.Trial</title>
<meta name="author" content="Adel Cersaque" />
<meta http-equiv="Content-Language" content="en" />
<!-- Les styles CSS liés -->
<link href="CSS/reset.css" rel="stylesheet" type="text/css" />
<link href="CSS/styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!-------------------------------------------------------------L.A.S.T.----------------------------------------------------------------------------->
<!--BLOC_img_01-->
<div class="bloc">
<div class="bloc-texte-fixe">
</div>
<div class="ecran-hg"><img src="documents/ecrans-last/ecran-last-01.png" width="400" height="333" /></div>
<div class="ecran-hd"><img src="documents/ecrans-last/ecran-last-00.png" width="400" height="333" /></div>
<div class="ecran-bg"><img src="documents/ecrans-last/ecran-last-00.png" width="400" height="333" /></div>
<div class="ecran-bd"><img src="documents/ecrans-last/ecran-last-02.png" width="400" height="333" /></div>
<div class="vue_g"><img src="documents/vues/vue-last-01.jpg" width="inherit" height="inherit" /></div>
</div>
<!--BLOC_img_02-->
<div class="bloc">
<div class="bloc-texte-fixe">
View of the center of the installation in which was gathered : the subwoofer, connected to the speakers set under each of the five tables ; topped with the bluray player connected to the two beamers, as well as the recording devices linked to the microphones set on each tables.
</div>
<div class="ecran-hg"><img src="documents/ecrans-last/ecran-last-03.png" width="400" height="333" /></div>
<div class="ecran-hd"><img src="documents/ecrans-last/ecran-last-04.png" width="400" height="333" /></div>
<div class="ecran-bg"><img src="documents/ecrans-last/ecran-last-05.png" width="400" height="333" /></div>
<div class="ecran-bd"><img src="documents/ecrans-last/ecran-last-00.png" width="400" height="333" /></div>
<div class="vue_d"><img src="documents/vues/vue-last-02.jpg" width="inherit" height="inherit" /></div>
</div>
<!--BLOC_img_03-->
<div class="bloc">
<div class="bloc-texte-fixe">
Each of the five tables was equipped with its marbled tablecloth, its microphone as well as informations on its occupant.
</div>
<div class="ecran-hg"><img src="documents/ecrans-last/ecran-last-00.png" width="400" height="333" /></div>
<div class="ecran-hd"><img src="documents/ecrans-last/ecran-last-06.png" width="400" height="333" /></div>
<div class="ecran-bg"><img src="documents/ecrans-last/ecran-last-07.png" width="400" height="333" /></div>
<div class="ecran-bd"><img src="documents/ecrans-last/ecran-last-00.png" width="400" height="333" /></div>
<div class="vue_g"><img src="documents/vues/vue-last-03.jpg" width="inherit" height="inherit" /></div>
</div>
<!--BLOC_img_04-->
<div class="bloc">
<div class="bloc-texte-fixe">
Guests seated at the fictional character’s table, listening to the discussions while following the story thanks to two mirroring video projections on the walls.
</div>
<div class="ecran-hg"><img src="documents/ecrans-last/ecran-last-08.png" width="400" height="333" /></div>
<div class="ecran-hd"><img src="documents/ecrans-last/ecran-last-10.png" width="400" height="333" /></div>
<div class="ecran-bg"><img src="documents/ecrans-last/ecran-last-09.png" width="400" height="333" /></div>
<div class="ecran-bd"><img src="documents/ecrans-last/ecran-last-00.png" width="400" height="333" /></div>
<div class="vue_d"><img src="documents/vues/vue-last-04.jpg" width="inherit" height="inherit" /></div>
</div>
<!--BLOC_img_05-->
<div class="bloc">
<div class="bloc-texte-fixe">
</div>
<div class="ecran-hg"><img src="documents/ecrans-last/ecran-last-00.png" width="400" height="333" /></div>
<div class="ecran-hd"><img src="documents/ecrans-last/ecran-last-11.png" width="400" height="333" /></div>
<div class="ecran-bg"><img src="documents/ecrans-last/ecran-last-12.png" width="400" height="333" /></div>
<div class="ecran-bd"><img src="documents/ecrans-last/ecran-last-13.png" width="400" height="333" /></div>
<div class="vue_g"><img src="documents/vues/vue-last-05.jpg" width="inherit" height="inherit" /></div>
</div>
</body>
</html>CSS
/*------------------ACTUAL FOR ALL width */
/* adaptabilité des médias selon la taille de l’écran */
iframe, img, object, embed, canvas, video, audio, picture {
max-width: 100%;
height: auto;
}
/* tous les a de base */
a {
text-decoration: none;
}
a:link {
color: inherit;
text-decoration: underline;
}
a:hover {
color: inherit;
text-decoration: line-through;
}
a:active {
color: inherit;
text-decoration: line-through;
}
a:visited {
color: inherit;
text-decoration: none;
}
/* les petites choses qui font plaisir */
em {
font-style: italic;
}
sup {
font-family: "Arial Black", sans-serif;
font-size: 0.75em;
vertical-align: super;
}
strong {
font-family: "Arial Black", sans-serif;
letter-spacing: normal;
word-spacing: -0.1em;
padding-left: 25%
}
/* surlignage */
::-moz-selection { /* Pour firefox */
background: #000;
color: #F00;
}
::selection { /* Pour les autres */
background-color: #000;
color: #F00;
}
/* toutes les ancres */
#ancre-1 {
diplay: inherit;
}
#ancre-2 {
diplay: inherit;
}
#ancre-3 {
diplay: inherit;
}
#ancre-4 {
diplay: inherit;
}
#ancre-5 {
diplay: inherit;
}
/*------------------ACTUAL for ordinateur min-width: 1100px; (version 8 du html)--------------------------------------------------------------------ordi*/
@media screen and (min-width:1100px) {
/*HTML/BODY - hyper important !*/
body {
font-size: 16px; /*=1em dans tout le document*/
height: 100%;
min-height: 100%;
width: 100%;
position: absolute;
/*pas de césures sinon j’aurais justifié*/
word-wrap: normal;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
-o-hyphens: none;
hyphens: none;
}
/*------------------VUES */
.bloc {
box-shadow: 0px 0px 40px #FF0000;
background-color: #FFF;
border-top: none;
overflow: hidden;
width: 100%;
height: auto;
line-height: 0px;
position: relative;
z-index: 0
}
.vue_g {
margin-top: 0%;
margin-bottom: 0%;
left: 7.8%;
right: 23.4%;
width: 68.8%;
position: relative;
}
.vue_d {
margin-top: 0%;
margin-bottom: 0%;
left: 23.4%;
right: 7.8%;
width: 68.8%;
position: relative;
}
/*-----------------ECRANS */
.ecran-hg {
top: 12.5%;
left: 15.6%;
width: 15.6%;
height: auto;
box-shadow: 0px 0px 60px #FF0000;
position: fixed;
z-index: 5
}
.ecran-hd {
top: 12.5%;
left: auto;
right: 15.6%;
width: 15.6%;
height: auto;
box-shadow: 0px 0px 60px #FF0000;
position: fixed;
z-index: 5
}
.ecran-bg {
bottom: 12.5%;
left: 15.6%;
width: 15.6%;
height: auto;
box-shadow: 0px 0px 60px #FF0000;
position: fixed;
z-index: 5;
}
.ecran-bd {
display: block;
bottom: 12.5%;
right: 15.6%;
width: 15.6%;
height: auto;
box-shadow: 0px 0px 60px #FF0000;
position: fixed;
z-index: 5
}
.ecran-texte {
display: block;
bottom: 12.5%;
left: auto;
right: 15.6%;
width: 23.3%;
height: auto;
box-shadow: 0px 0px 60px #FF0000;
position: fixed;
z-index: 15
}
/*------------------TEXTE */
.bloc-texte-fixe {
display: block;
top: 0%;
padding-top: 19.5%;
padding-left: 31.6%;
padding-right: 50%;
font-family: "Arial Black", sans-serif;
font-weight: normal;
font-size: 0.75em;
line-height: 1.8em;
color: #FFF;
text-shadow: 1px 1px 5px #FF0000;
position: fixed;
z-index: 3
}
p {
text-indent: 3%;
}
}Le problème est le suivant :
J’ai diviser mon site internet en blocs en position relative, superposés les uns sur les autres, dont la class est à chaque fois la même, à savoir .bloc.
Dans chacun de ces bloc, j’ai disposé à chaque fois une class .vue_g (image aligné à gauche) ou .vue_d (image alignée à droite) contenant une image occupant tout le bloc, en relative.
Par dessus ces images, j’ai disposé dans un z-index supérieur, et en fixed, 4 class différentes contenant chacune une image : ecran_hg (hautgauche), ecran_hd (haut droit), ecran_bg (bas gauche), ecran_bd (bas droit)
L’idée était d’obtenir, lors du scroll vers le bas, un changement de contenu de ces dernières class à chaque frontière entre les blocs disposés les uns sur les autres. C’est un code très simple sans js (à part pour le scrollto) et, pendant tout le développement de ce site, tout ce passait très bien en local sur Chrome, Safari et Firefox — je ne m’occupe pas de IE, puisque ce site s’adresse essentiellement à des galeries & des personnes équipées de produits Apple.
Or, lorsque j’ai mis en ligne le site, l’ensemble des class fixed était superposé en haut du site comme si l’overflow hidden n’était pas respectée par les navigateurs ou qu’ils ne savaient plus quel contenu prendre en compte dans le code html. À part sur safari où le site se comporte comme prévu.
J’ai fait des recherches sur les contextes d’empilement avec le z-index, mais je ne trouve pas l’origine du problème. Selon vous, quel est l’origine du bug ? Pensez-vous que la meilleure solution soit de refondre le site en utilisant javascript pour changer le contenu des class fixed ?
Merci pour votre temps
Cordialement,
Robin