Modale non centrée

Résolu
valttt -  

Bonjour,

J’hallucine ou alors je dois me réveiller......
 

J'applique une copie du code de "modale" trouvé sur 3schools.com (https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_modal), qui fonctionne parfaitement pour une balise <p>.

Sur mon site, j'ai remplacé la balise <p> par une balise <img>, mais cela bug.

Je ne comprends pas pourquoi ma modale n'est plus centrée à partir d'une certaine taille d'écran malgré un "margin: auto" (voir photo).

L'inspecteur du navigateur affiche des données contradictoires.

Merci d'avance pour votre aide...

Windows / Firefox 131.0

3 réponses

  1. valttt Auteur 
    /***************************BODY**************************/
body {
    margin: 0;
    background-image: url('../images/Tondeuse.png');
    background-size: cover;
}

/*************************MAIN*****************************/
a {
    color: #000
}

/* Article (right side) */

#article {

    width: 64%;
    height: 760px;
    margin-top: 1.5%;
}
#BlocArticle {
    background-color: #e0e0e0;
    height: 750px;
    margin-top: 0.75%;
    border: none;
    border-radius: 20px 20px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

/* BlocBenefit*/
.BlocBenefit {
    width: 100%;
}

/* BlocBefore and BlacAfter */

.BlocBefore, .BlocAfter {
    width: 70%;
}

.BlocBefore {
    border-right-width: 1px;
    border-right-color: #000;
    border-right-style: solid;
}

/* Before and After */
.Before, .After {
    margin-top: -1px;
}

/* Title */
.Before .title1, .After .title1 {
    width: 92%;
    padding-top: 1.5%;
    padding-left: 45%;
}

.Always .title1 {
    width: 92%;
    padding-top: 1.5%;
    padding-left: 35%;
}

.title2 {
    width: 100%;
    margin-top: 10px;
    margin-bottom: 5px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.title2 h2 {
    margin-bottom: 8px;
}

/* Cards */
.totalactivite {
    width: 100%;
    padding-bottom: 40px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    flex-wrap: wrap;
    gap: 30px;
}

.activite {
    width: 85%;
    height: 140px;
    background-color: #FFF;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    border: none;
    border-radius: 20px;
}

.job {
    width: 85%;
    height: 197px;
    background-color: #FFF;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    border: none;
    border-radius: 20px;
}

.figure {
    width: 60%;
    height: 100%;
    overflow: hidden;
    margin: 0;
    border: 5px solid #FFF;
    border-radius: 20px 0 0 20px;
}

.figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.picture {
    width: 100%;
    height: 140px;
    overflow: hidden;
    margin: 0;
    border: 5px solid #FFF;
    border-radius: 20px;
}

.picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: zoom-in;
}

.t1 p {
    font-family: 'Comic_Bold';
    font-size: 15px;
    padding-left: 4%;
    padding-right: 4%;
}

.detail2 {
    width: 100%;
}

.detail2 p {
margin-top: 5px;
margin-bottom: 5px;
font-family: 'Comic';
font-size: 15px;
text-align: center;
}

/* Title */
h2 {
    font-family: 'Comic';
    font-weight: bold;
    font-size: 18px;
}

/* Cards */
.photo {
    margin: 0;
}

.photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 5px solid #FFF;
    border-radius: 20px 20px 0 0;
}

.detail {
    width: 100%;
}


#cache, #cache2, #cache3, #cache4, #cache5, #cache6 {
    position:absolute;
    background:rgba(0,0,0,0);
    top:0;
    right:0;
    bottom:0;
    left:0;
    z-index: -1;
    transition: background .5s
}
#cache:target, #cache2:target, #cache3:target, #cache4:target, #cache5:target, #cache6:target {
    background:rgba(0,0,0,.5);
    z-index: 1;
    height: auto;
}
.popup, .popup2, .popup3, .popup4, .popup5, .popup6 {
    position:absolute;
    z-index: 1000;
    display:none;
    top: 70px;
    left: 24%;
}
.popup a, .popup2 a, .popup3 a, .popup4 a, .popup5 a, .popup6 a {
    position:absolute;
    background: #333;
    color:#fff;
    border-radius: 50%;
    width:20px;
    line-height: 20px;
    text-align: center;
    font-family:arial;
    right:0;
    text-decoration: none;
}
#cache:target ~ .popup, #cache2:target ~ .popup2, #cache3:target ~ .popup3, #cache4:target ~ .popup4, #cache5:target ~ .popup5, #cache6:target ~ .popup6 {
    display:block;
}

/***************** END !!! ***************/

/* Media Querie >1350px */
@media (max-width: 1350px) {
    .logo img {
        width: 82%;
    }
    h1 {
        font-size: 20px;
    }
    .paragraph1 p {
        font-size: 18px;
    }
    .nav a {
        font-size: 20px;
    }
    h2 {
        font-size: 16px;
    }

    #BlocAside {
        height: 680px;
    }
    #BlocArticle {
        height: 680px;
    }
    .job {
        height: 170px;
    }
    .foot {
        margin-top: 0;
    }

.detail2 p {
    font-size: 14px;
}
.activite {
    height: 120px;
}
    .t1 p {
        font-size: 14px;
        padding-left: 3%;
    }
    .figure
{
    width: 65%;
}
}

/* Media Querie >1350px */
@media (max-width: 1250px) {
    .logo img {
        width: 84%;
    }
    h1 {
        font-size: 18px;
    }
    .paragraph1 p {
        font-size: 16px;
    }
    .nav a {
        font-size: 18px;
    }
    h2 {
        font-size: 15px;
    }

    #BlocAside {
        height: 680px;
    }
    #BlocArticle {
        height: 680px;
    }
    .job {
        height: 170px;
    }
    .foot {
        margin-top: 0;
    }

.detail2 p {
    font-size: 14px;
}
.activite {
    height: 120px;
}
    .t1 p {
        font-size: 14px;
        padding-left: 3%;
    }
    .figure
{
    width: 65%;
}
}

/* Media Querie >1350px */
@media (max-width: 1100px) {
    h1 {
        font-size: 16px;
    }
    .paragraph1 p {
        font-size: 15px;
    }
    .nav a {
        font-size: 16px;
    }
    h2 {
        font-size: 14px;
    }
}
/* Media Querie >1350px */
@media (max-width: 1000px) {
    h1 {
        font-size: 14px;
    }
    .paragraph1 p {
        font-size: 13px;
    }
    .nav a {
        font-size: 15px;
    }
    h2 {
        font-size: 14px;
    }
    .info {
        font-size: 13px;
    }
}
    1. valttt Auteur

      Merci pour ton aide.

      J'utilise le même code (adapté à mon site) que celui de w3schools (voir lien ci-dessus).

      J'ai tellement bidouillé pour arriver à mes fins que je suis totalement perdu (bah oui, je fais de nombreux essais et recherches avant de poser une question

      <!DOCTYPE html>
<html lang="fr">

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css">
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/index.css">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>TITIS Espace Vert</title>
    <link rel="icon" type="image/x-icon" href="/images/logo/favicon.ico">
</head>
<body>
            <article id="article">
                <div id="BlocArticle">
                    <div class="BlocBefore">
                        <div class="Before">
                            <div class="title1">
                                <div class="title2">
                                    <h2>Avant</h2>
                                </div>
                            </div>

                            <!--Cards-->
                            <div class="totalactivite">
                                <div class="job">
                                    <figure class="picture">
                                        <div id="myBtn">
                                            <img src="images/Img/1.jpg" alt="000000">
                                        </div>
                                        <!-- The Modal -->
                                        <div id="myModal" class="modal">
                                            <!-- Modal content -->
                                            <div class="modal-content">
                                                <span class="close">×</span>
                                                <img src="images/Img/2.jpg" alt="000000">
                                            </div>
                                        </div>
                                    </figure>
                                    <div class="detail2">
                                        <p><strong>000000</strong></p>
                                        <p>date</p>
                                    </div>
                                </div>
                                <div class="job">
                                    <figure class="picture">
                                        <div id="cache2"></div>
                                        <a href="#cache2" title="111111"><img src="images/Img/3.jpg"
                                                alt="111111"></a>
                                        <div class="popup2"><img src="images/Img/4.jpg"><a href="#">X</a></div>
                                    </figure>
                                    <div class="detail2">
                                        <p><strong>111111</strong></p>
                                        <p>date</p>
                                    </div>
                                </div>
                                <div class="job">
                                    <figure class="picture">
                                        <div id="cache3"></div>
                                        <a href="#cache3" title="222222"><img src="images/Img/5.jpg"
                                                alt="222222"></a>
                                        <div class="popup3"><img src="images/Img/6.jpg"><a href="#">X</a></div>
                                    </figure>
                                    <div class="detail2">
                                        <p><strong>222222</strong></p>
                                        <p>date</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
            </article>

        <script>
            // Get the modal
            var modal = document.getElementById("myModal");

            // Get the button that opens the modal
            var btn = document.getElementById("myBtn");

            // Get the <span> element that closes the modal
            var span = document.getElementsByClassName("close")[0];

            // When the user clicks the button, open the modal 
            btn.onclick = function () {
                modal.style.display = "block";
            }

            // When the user clicks on <span> (x), close the modal
            span.onclick = function () {
                modal.style.display = "none";
            }

            // When the user clicks anywhere outside of the modal, close it
            window.onclick = function (event) {
                if (event.target == modal) {
                    modal.style.display = "none";
                }
            }
        </script>
</body>

</html>

      ... ;-)).

      Voilà le code html (avec script pour la modale) et css sur le post suivant.

      1.  jordane45 Modérateur

        Bonjour 

        question déplacée dans le forum Css...

        1. valttt Auteur

          Merci, mais je viens de m’apercevoir que c'est un problème de Firefox car cela fonctionne très bien sur Chrome.

          Je ne sais pas comment déplacer finalement ce post sur le bon forum (webmaster)...

          Merci

        2.  jordane45 Modérateur
          @valttt

          le forum concerné reste css ... chaque navigateur pouvant disposer de règles spécifiques et/ou les interpréter à sa façon..

          l'idéal pour avancer, serait que tu postes ici, le code CSS utilisé (sans qu'on ait besoin d'aller voir ton lien)

      Discussions similaires

      Word 2010 - Page non centrée
      Regarde pas mon pseudo :p

      6 réponses
      Probleme d'affichage de page modale
      aichatou

      1 réponse
      PowerPoint 2013, Win8: zone de travail non centrée
      brice3d

      8 réponses