formations web alsacréations
Auteur
yellowleader
#
3 Posts
Bonjour à tous Smiley biggrin
débutant dans le domaine du HTML et CSS, j'essaye divers choses pour voir ce que ça donne, et là, je bute sur le centrage verticale et horizontale d'une div dans une div.
Le problème d'affichage se produit que sur safari.
Ci-dessous mauvais affichage safari:

previews/63636-Capture2.PNG

Et dessous, le bon affichage:

previews/63636-Capture1.PNG

Donc, si quelqu'un peut me donner une astuce ou un conseil, je suis preneur Smiley biggrin
Mon HTML:


        <div id="conteneur">
            <div id="conteneur2"></div>
        </div>


Mon CSS:


#conteneur{
    background-color: #2E4053;
    height: 1000px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#conteneur2{
    background-color: #AEB6BF;
    height: 920px;
    width: 940px;
    display: flex;
    justify-content: center;
    align-items: center;
}


Merci d'avance pour vos réponses Smiley cligne

^
Olivier C
#
Tant pis ça marche...
2416 Posts
Je n'ai pas de quoi tester sous la main. Vous avez essayé avec les différents préfixes ?

J'ai arrangé un peu le code pour qu'il soit responsive :
#conteneur{
    background-color: #2E4053;
    height: 1000px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    padding: 1rem; /* pour le responsive, mais ce n'est pas obligatoire */
}

#conteneur2{
    background-color: #AEB6BF;
    height: 920px;
    width: 100%; /* Il est là le truc pour le responsive */
    max-width: 940px; /* Et là aussi */
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}


En plus des civilités, l'orthographe et la syntaxe d'un post renseignent sur le sérieux de leur auteur. Pourquoi se donner la peine de répondre à un post ne respectant pas ce minimum syndical ?

^
yellowleader
#
3 Posts
Bonjour Olivier C
Je viens de tester votre code et miracle, ça fonctionne.
Je n'est pas tester différents préfixes par ce que je ne me suis pas encore penché sur le sujet.
Je sais désormais ce qu'il me reste a faire. Idem pour le responsive Smiley ohwell
j'en suis encore qu'au début du début et il me reste tellement de choses à voir.
En tout cas merci à vous pour votre réponse rapide et je sais maintenant grâce a vous, que je peux compter sur ce forum ainsi que ses membres pour mes futures questions.
encore merci Smiley cligne
Modifié par yellowleader (10 Jan 2017 - 19:41)

^
Olivier C
#
Tant pis ça marche...
2416 Posts
Alors, honnêtement, ces préfixes je ne les connais pas par cœur. J'utilise un script qui me permet de les générer en fonction des navigateurs les plus utilisés : Autoprefixer.

En plus des civilités, l'orthographe et la syntaxe d'un post renseignent sur le sérieux de leur auteur. Pourquoi se donner la peine de répondre à un post ne respectant pas ce minimum syndical ?

^
yellowleader
#
3 Posts
Olivier C a écrit :
Alors, honnêtement, ces préfixes je ne les connais pas par cœur. J'utilise un script qui me permet de les générer en fonction des navigateurs les plus utilisés : Autoprefixer.


Merci pour l'info.
je vais tester.

^