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

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

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é.

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é.

Merci beaucoup pour votre aide !

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

Lord Morpheus a écrit:

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