Sujet Précédent Sujet Suivant

Modale non centrée

Résolu
valttt Messages postés 279 Date d'inscription mercredi 7 mars 2012 Statut Membre Dernière intervention 27 octobre 2024 - Modifié le 14 oct. 2024 à 13:14
valttt Messages postés 279 Date d'inscription mercredi 7 mars 2012 Statut Membre Dernière intervention 27 octobre 2024 - 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:

3 réponses

Réponse 1 / 3
jordane45 Messages postés 38263 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 28 octobre 2024 4 693
14 oct. 2024 à 13:37

Bonjour 

question déplacée dans le forum Css...
1
valttt Messages postés 279 Date d'inscription mercredi 7 mars 2012 Statut Membre Dernière intervention 27 octobre 2024 16
Modifié le 14 oct. 2024 à 13:59

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
jordane45 Messages postés 38263 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 28 octobre 2024 4 693 > valttt Messages postés 279 Date d'inscription mercredi 7 mars 2012 Statut Membre Dernière intervention 27 octobre 2024
14 oct. 2024 à 18:37

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
Réponse 2 / 3
valttt Messages postés 279 Date d'inscription mercredi 7 mars 2012 Statut Membre Dernière intervention 27 octobre 2024 16
Modifié le 14 oct. 2024 à 19:17

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
Réponse 3 / 3
valttt Messages postés 279 Date d'inscription mercredi 7 mars 2012 Statut Membre Dernière intervention 27 octobre 2024 16
14 oct. 2024 à 19:16 
/***************************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

Message d'erreur INDESIGN
CC1513 -
CC1513 -

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

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

8 réponses