Modale non centrée

Résolu

valttt Messages postés 293 Date d'inscription Statut Membre Dernière intervention -
valttt Messages postés 293 Date d'inscription Statut Membre Dernière intervention - 14 oct. 2024 à 19:16

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

A voir également:

Modale non centrée
Tabulation centrée word - Guide

3 réponses

Réponse 1 / 3

jordane45 Messages postés 38472 Date d'inscription Statut Modérateur Dernière intervention 4 745

Bonjour

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

valttt Messages postés 293 Date d'inscription Statut Membre Dernière intervention 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

jordane45 Messages postés 38472 Date d'inscription Statut Modérateur Dernière intervention 4 745 > valttt Messages postés 293 Date d'inscription Statut Membre Dernière intervention

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)

Réponse 2 / 3

valttt Messages postés 293 Date d'inscription Statut Membre Dernière intervention 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.

Réponse 3 / 3

valttt Messages postés 293 Date d'inscription Statut Membre Dernière intervention 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;
    }
}

Discussions similaires

Message d'erreur INDESIGN

Word 2010 - Page non centrée

PowerPoint 2013, Win8: zone de travail non centrée

Votre réponse

Discussions similaires