28172 sujets

CSS et mise en forme, CSS3

Décalage du body lors d'un clic sur Fancybox

Bonjour à tous,
J'ai un problème récurent dont on a déjà parlé sur de nombreux forums, avec des solutions à la clef mais que je n'arrive pas à appliquer dans mon cas. Lors d'un clic sur une vignette (galerie Fancybox), le body se décale de qq pixels en bas et à droite. En refermant le diaporama, le body "revient à sa place", et donc se décale en haut à gauche. J'ai tenté de modifier les CSS (positions et width/height) : pas d'effet (excepté catastrophiques pour le diaporama).
La structure de la page ressemble à ça :
<div id="main">
<div id="menu"></div>
<div id="filters" class="button-group"></div>
<div class="isotope" id="diaporama">
</div></div>

Les CSS internes :
body {
    /* [disabled]max-width: 100%; */
    margin: auto;
    width: 100%;
    height: auto;
    text-align: center;
    padding: 0px;
    background-color: #993366;
}
a img{
border:none;
}
#main {
    width: 100%;
    text-align: center;
    float: none;
    clear: none;
    height: auto;
    top: 100%;
    position: absolute;
    background-color: #FFFFFF;
    left: 0px;
    right: 0px;
    margin-left: auto;
    margin-right: auto;
}
h1 {
    color:#069;
}
h3 {
    color: #66FF33;
    font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
}
div {
    text-align: center;
}
ul {
    display:table;
    margin:1em auto;
    padding:0;
    list-style:none;
    text-align:center;
    width: 100%;
}
/*---- button ----*/
.button {
    display: inline;
    line-height: 2em;
    background: #EEE;
    text-shadow: none;
    cursor: pointer;
    width: 1144px;
    text-align: center;
    font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
    height: auto;
    margin-bottom: 0px;
    margin-top: 0px;
    padding-left: 10px;
    padding-right: 10px;
    position: relative;
    top: 0px;
}
/*-- effet sur bouton --*/
.button:hover {
    background-color:#8CF;
    text-shadow:none;
}
.button:active,.button.is-checked {
    background-color:#28F;
}
.button.is-checked {
    color: white;
    text-shadow: none;
    font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
}
.button:active {
    box-shadow: none;
}
/*---- conteneur isotope ----*/
.isotope {
    width: 1144px;
    /* [disabled]float: left; */
    margin: 0px auto auto;
    position: relative;
    top: 0px;
    left: auto;
    right: auto;
    text-align: center;
    height: auto;
}
/* ---- .vignette ---- */
.vignette {
  position: relative;
  float:left;
  display:block;
  overflow:hidden;
  height: 175px;
  width: 270px;
  border:5px solid transparent;
  text-align: center;
  padding: 0;
  margin: 0;
}
.vignette:hover {
  background:rgba( 0,0,0,0);
}
.vignette span{  /* concerne le texte à afficher */
    position: absolute;
    display: block;
    transition: all 0.4s ease-in-out;
    background: rgba( 0,0,0,0);
    width: 100%;
    height: 175px;
    bottom: -100%;   /* rend invisible le texte */
    left: 0;
    color: #FF0066;
}
.vignette:hover span{
    bottom: 0%;   /* rend visible le texte */
    background-color: #6666CC;
}
.fancybox-custom .fancybox-skin {
    box-shadow: 0 0 50px #;
        }
#diaporama {
    overflow: hidden;
    -webkit-box-shadow: 0px 0px;
    box-shadow: 0px 0px;
    position: relative;
    height: auto;
    margin: 0px auto;
    left: auto;
    right: auto;
}
#diaporama :hover {
    opacity:0.8;
}
#entete {
    /* [disabled]width: 100%; */
    /* [disabled]height: 100%; */
    margin: 0px;
    padding: 0px;
}
#img2 {
    width: 100%;
    height: auto;
    padding-top: 40px;
}
 
#logo {
    margin-top: 2%;
    position: relative;
    margin-left: 2%;
    margin-right: auto;
    width: 80%;
    text-align: left;
    float: left;
}
.logo {
    width: 20%;
    margin-left: auto;
    margin-right: auto;
}
.titre_un {
    text-shadow: 0px 0px;
    /* [disabled]text-align: center; */
    color: #FFFFFF;
    border-spacing: 0px 0px;
    border-collapse: collapse;
    position: static;
    font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
}
h1 {
    font-size: 20%;
}
.portrait {
    width: 50%;
}  
h1,h2,h3,h4,h5,h6 {
    font-size:100%;
    font-weight:normal;
}
 
/*------ menu -------*/
.logo_menu {
    width: 80px;
    margin-left: 0px;
    left: 0px;
    text-align: left;
    position: absolute;
}
#menu {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    text-align: center;
    background-color: #CC3333;
    height: 40px;
    z-index: 1000;
}
#menu>a {
    padding: 10px 15px;
    font-family: 'PT Sans', sans-serif;
    color: #000;
    background-color: #c03;
    text-align: center;
    width: 100%;
    margin-left: 0px;
    margin-right: 0px;
    line-height: 40px;
    margin-bottom: 40px;
}
#menu>a:hover {
    background-color: rgba(0, 0, 0, 0.1);
    color: #fff;
    text-align: center;
    margin-left: 0px;
    margin-right: 0px;
    width: 100%;
}
#menu>a.selected {
    background-color: rgba(0, 0, 0, 0.1);
    color: #fff;
    text-align: center;
    margin-left: 0px;
    margin-right: 0px;
    width: 100%;
}
 
/*----- ombre image -------*/
.image-ombre {
    height: auto;
    width: 100%;
    margin: 150px 0px 0px;
    padding: 0px;
}
 
/* je definis ici des tailles pour les div img1, img2, etc afin de pouvoir dŽcaler la photo du haut */
 
#img1, #img2, #img3, #img4, #img5, #img6 {
    height: auto;
    width: 100%;
    margin: 0px;
    padding-top: 0px;
    padding-left: 0px;
    padding-bottom: 0px;
}
#img1 {
    width: 100%;
    padding: 0px;
    margin-bottom: 20px;
    margin-left: 0px;
    margin-right: 0px;
}
#img2 {
    width: 100%;
    height: auto;
    margin: 0px;
    padding: 40px 0px 0px;
}
#img3 {
    width: 100%;
    padding-top: 80px;
    background-image: url(../LDDC/img/dummy-640x310-2.jpg);
}
#img5 {
    background-position: center center;
    background-size: cover;
    background-attachment: scroll;
    width: 100%;
    height: 800px;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    padding-right: 0px;
    border-top: 80px solid #CC0033;
}
#img6 {
    background-image: url(../LDDC/img/dummy-640x310-3.jpg);
    background-position: center top;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    width: 100%;
    height: 800px;
    border-top-width: 40px;
    border-bottom-width: 40px;
    border-color: #FFFFFF;
    border-top-style: solid;
    border-bottom-style: solid;
}
 
#espace-bas {
    height: 240px;
    width: 100%;
    background-color: #990033;
}
    #footer {
    width: 100%;
    height: 80px;
    background-color: #FF0033;
    bottom: 0px;
    left: 0px;
    right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    padding-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
}

et les CSS Fancybox :
/
*! fancyBox v2.1.5 fancyapps.com | fancyapps.com/fancybox/#license */
.fancybox-wrap,
.fancybox-skin,
.fancybox-outer,
.fancybox-inner,
.fancybox-image,
.fancybox-wrap iframe,
.fancybox-wrap object,
.fancybox-nav,
.fancybox-nav span,
.fancybox-tmp
{
    padding: 0;
    margin: 0;
    border: 0;
    outline: none;
    vertical-align: top;
}
 
.fancybox-image, .fancybox-iframe {
    display: block;
    width: 100%;
    height: 100%;
}
 
.fancybox-image {
    max-width: 100%;
    max-height: 100%;
}
 
#fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span {
    background-image: url('fancybox_sprite.png');
}
 
#fancybox-loading {
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -22px;
    margin-left: -22px;
    background-position: 0 -108px;
    cursor: pointer;
    z-index: 8060;
    background-color: #000000;
}
 
#fancybox-loading div {
    width: 44px;
    height: 44px;
    background: url('fancybox_loading.gif') center center no-repeat;
}
 
.fancybox-close {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 36px;
    height: 36px;
    cursor: pointer;
    z-index: 8040;
}
 
.fancybox-nav {
    position: absolute;
    top: 0;
    width: 40%;
    height: 100%;
    cursor: pointer;
    text-decoration: none;
    z-index: 8040;
}
 
.fancybox-prev {
    left: 0;
}
 
.fancybox-next {
    right: 0;
}
 
.fancybox-nav span {
    position: absolute;
    top: 50%;
    width: 36px;
    height: 34px;
    margin-top: 0px;
    cursor: pointer;
    z-index: 8040;
    visibility: hidden;
}
 
.fancybox-prev span {
    left: 0px;
    background-position: 0 -36px;
}
 
.fancybox-next span {
    right: 0px;
    background-position: 0 -72px;
}
 
.fancybox-nav:hover span {
    visibility: visible;
}
 
.fancybox-tmp {
    position: absolute;
    top: -99999px;
    left: -99999px;
    visibility: hidden;
    max-width: 99999px;
    max-height: 99999px;
    overflow: visible !important;
}
 
/* Overlay helper */
 
.fancybox-lock {
    overflow: hidden !important;
    width: auto;
}
 
.fancybox-lock body {
    overflow: hidden !important;
}
 
.fancybox-lock-test {
    overflow-y: hidden !important;
}
 
.fancybox-overlay {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    display: none;
    z-index: 8010;
    background: url('fancybox_overlay.png');
}
 
.fancybox-overlay-fixed {
    position: fixed;
    bottom: 0;
    right: 0;
}
 
.fancybox-lock .fancybox-overlay {
    overflow: auto;
    overflow-y: scroll;
}
 
/* Title helper */
 
.fancybox-title {
    visibility: hidden;
    font: normal 16px "Helvetica Neue",Helvetica,Arial,sans-serif;
    position: relative;
    text-shadow: none;
    z-index: 8050;
}
 
.fancybox-opened .fancybox-title {
    visibility: visible;
}
 
.fancybox-title-float-wrap {
    position: absolute;
    bottom: 0;
    right: 50%;
    margin-bottom: -20px;
    z-index: 8050;
    text-align: center;
}
 
.fancybox-title-float-wrap .child {
    display: inline-block;
    margin-right: -100%;
    padding: 2px 20px;
    background: transparent; /* Fallback for web browsers that doesn't support RGBa */
    color: #FFF;
    font-weight: bold;
    line-height: 32px;
    white-space: nowrap;
}
 
.fancybox-title-outside-wrap {
    position: relative;
    margin-top: 10px;
    color: #fff;
}
 
.fancybox-title-inside-wrap {
    padding-top: 10px;
}
 
.fancybox-title-over-wrap {
    position: absolute;
    bottom: 0;
    left: 0;
    color: #fff;
    padding: 10px;
    background: #000000;
}
 
/*Retina graphics!*/
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
       only screen and (min--moz-device-pixel-ratio: 1.5),
       only screen and (min-device-pixel-ratio: 1.5){
 
    #fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span {
        background-image: url('fancybox_sprite@2x.png');
        background-size: 44px 152px; /*The size of the normal image, half the size of the hi-res image*/
    }
 
    #fancybox-loading div {
        background-image: url('fancybox_loading@2x.gif');
        background-size: 24px 24px; /*The size of the normal image, half the size of the hi-res image*/
    }
}

Si quelqu'un à une idée du problème...

Merci pour votre aide et bonne soirée.
Hello,

Difficile de t'apporter une aide sans une vraie démo en ligne.
As-tu cherché du côté du débordement sur html/body ?
Possible qu'il ne s'agisse en fait que de l'apparition des ascenseurs (scrollbars) vertical et horizontal qui provoquent ce décalage.

Bonne recherche Smiley cligne
Slt Geoffrey,
Au passage, merci pour tes tutos (et donc ton blog... TOP) !!!
J'ai mis les CSS d'origine lors du précédent message. Entre temps (avant de revenir à 0), j'avais viré pas mal de width:100% et autres cotes "inutiles", sans résultat (enfin si, ne restait que le décalage horizontal).
Comment la div qui pose problème (#diaporama) ou ses classes (.isotope, .fancybox) peut causer un décalage avec une scrollbar (qui serait donc invisible) ?
Pour info, j'ai beau supprimer les width des ces derniers, le soucis demeure Smiley ohwell
Vu que ma page peut paraître (à juste titre) alambiquée Smiley rolleyes , j'ai tenté de supprimer les div précédent et suivant #diaporama : le prob persiste avec le body Smiley bawling
Mais merci pour ton aide (et tes tutos) Smiley cligne
Sujet clos
Aller à