Modale non centrée

Résolu
valttt Messages postés 321 Statut Membre -  
valttt Messages postés 321 Statut Membre -

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.
    jordane45 Messages postés 30426 Date d'inscription   Statut Modérateur Dernière intervention   4 830
     

    Bonjour 

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

    1
    1. valttt Messages postés 321 Statut Membre 15
       

      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

      0
      1. jordane45 Messages postés 30426 Date d'inscription   Statut Modérateur Dernière intervention   4 830 > valttt Messages postés 321 Statut Membre
         

        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)

        0
  2. valttt Messages postés 321 Statut Membre 15
     

    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.

    0
  3. valttt Messages postés 321 Statut Membre 15
     
    /***************************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;
    }
}
    0

Discussions similaires

Caméra mal centrée
luckygirl63 -
CCMBot -

1 réponse
Word 2010 - Page non centrée
Regarde pas mon pseudo :p -
Anonyme 2 -

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

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

8 réponses