Partage

Décalage de div sur la hauteur

Sujet résolu
20 avril 2017 à 23:13:48

Bonsoir,

J'ai surement fait un erreur tr-s stupide mais je n'arrive pas à la trouver, c'est pour cela que je viens vous voir.

L'image du problème :

Comme vous pouvez le voir en bas à droite, il y a une marge sur le haut du bouton. (Ou sur le bas de la iframe du tchat).

Voici le code en question :

<div class="container-fluid text-center">
    <div class="middle">
        <div class="live">
            <iframe
                    src="http://player.twitch.tv/?channel=eclypsiatvlol"
                    class="embedLive"
                    frameborder="0"
                    scrolling="no"
                    allowfullscreen="true">
            </iframe>
        </div>
        <div class="live">
            <iframe frameborder="0"
                    class="embedTchat"
                    scrolling="no"
                    id="chat_embed"
                    src="https://www.twitch.tv/eclypsiatvlol/chat?darkpopout">
            </iframe>
        </div>
    </div>
    <div class="middle">
        <button type="button" class="btn btn-primary btn-block followButton">Follow us !</button>
        <button type="button" class="btn btn-primary btn-block darkButton">Mode cinéma</button>
    </div>
</div>

Le CSS : 

.middle{
    margin: 0;
    padding: 0;
    font-size: 0;
    display: flex;
    justify-content: center;
}

.embedLive{
    width: 1024px;
    height: 576px;
}

.embedTchat{
    height: 576px;
    width: 300px;
    margin: 0;
}

.followButton{
    width: 1024px;
    border-radius: 0%;
    border: 0px;
    height: 64px;
    padding: 0;
    margin: 0;
}

.darkButton{
    padding: 0;
    margin: 0;
    width: 300px;
    height: 64px;
    border-radius: 0%;
    border: 0px;
    background-color: black;
}

PS : J'utilise bootstrap (En apprentissage)

En espérant avoir une réponse bien expliqué;

Martin

 

-
Edité par Martin PAUCOT 20 avril 2017 à 23:21:17

Jeune développeur Web | Développeur Full-Stack chez I-Closion
21 avril 2017 à 9:12:13

Hello,

Retire le margin-top sur ton deuxième bouton en que bootstrap lui met lorsque deux .btn-block se suivent.

Utilise l'inspecteur d'élément présent sur tous les navigateurs avec par défaut la touche F12 de ton clavier! Ainsi tu trouvera tout seul la plupart des choses!

-
Edité par Lord Morpheus 21 avril 2017 à 9:42:08

Lord Morpheus, Seigneur Morphée, Dieu Grecs des Songes, Fils de la Nuit et du Sommeil
21 avril 2017 à 9:24:26

Salut, tu sais tu peux inspecter ton élément avec l'inspecteur en faisant click droit -> examiner / inspecter l'élément et on voit que cette règle CSS de bootstrap est ton problème :

.btn-block + .btn-block {
    margin-top: .5rem;
}

pour cela tu dois mettre une règle avec une importance plus forte qui la remplacera  : moi je mets un ancêtre dans la règle ça marche bien :

.middle .btn-block + .btn-block {
    margin-top: 0;
}

Je suis curieux c'est pour quoi faire ton player ?

Un exemple vaut mieux que rien : https://codepen.io/Darkman75/pen/KmzBRd

J'espère t'avoir aidé.


Designer and developer
21 avril 2017 à 9:41:19

Darkman75ful a écrit:

Salut, tu sais tu peux inspecter ton élément avec l'inspecteur en faisant click droit -> examiner / inspecter l'élément et on voit que cette règle CSS de bootstrap est ton problème :

.btn-block + .btn-block {
    margin-top: .5rem;
}

pour cela tu dois mettre une règle avec une importance plus forte qui la remplacera  : moi je mets un ancêtre dans la règle ça marche bien :

.middle .btn-block + .btn-block {
    margin-top: 0;
}

Je suis curieux c'est pour quoi faire ton player ?

Un exemple vaut mieux que rien : https://codepen.io/Darkman75/pen/KmzBRd

J'espère t'avoir aidé.


Lis les réponses la prochaine fois avant de répondre en doublon ^^

Lord Morpheus, Seigneur Morphée, Dieu Grecs des Songes, Fils de la Nuit et du Sommeil
21 avril 2017 à 11:13:34

Merci beaucoup pour votre aide !

J'ai jeter un oeuil avec l'inspecteur m'a rien ne m'avais paru bizarre, merci pour tout.

Jeune développeur Web | Développeur Full-Stack chez I-Closion
22 avril 2017 à 10:00:44

Lord Morpheus a écrit:

Lis les réponses la prochaine fois avant de répondre en doublon ^^


Désolé ce message je l'ai écrit en même temps que toi xD c'est pas la guerre on est là pour aider xD
Designer and developer

Décalage de div sur la hauteur

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
  • Editeur
  • Markdown