28234 sujets

CSS et mise en forme, CSS3

[Résolu] Footer pas pris en compte

Salut, tout est dans le titre, mon footer en css veut pas être prit en compte et ça m'embête un peu car je ne peux pas modifier son fond par exemple ^^


    <footer>

        <div class="middle">
            <a class="btn" href="#">
                <i class="fab fa-facebook-f"></i>
            </a>
            <a class="btn" href="#">
                <i class="fab fa-twitter"></i>
            </a>
            <a class="btn" href="#">
                <i class="fab fa-pinterest"></i>
            </a>
            <a class="btn" href="#">
                <i class="fab fa-instagram"></i>
            </a>

        </div>

    </footer>


et mon css

footer{
    background-repeat: no-repeat;
    background-size: 100%;
    background-color: #f1f1f1;
    max-width: auto;
    height: 100%;
    margin: 0px;
    padding: 0px;
    line-height: 1;
}
.middle{
    position: absolute;
    transform: translateY(50%);
    width: 100%;
    text-align: center;
    
}

.btn{
    display: inline-block;
    width: 90px;
    height: 90px;
    background: #f1f1f1;
    margin: 10px;
    border-radius: 30%;
    box-shadow: 0 5px 15px -5px #00000070;
    color: #3498db;
    overflow: hidden;
    position: relative;
}

.btn i{
    line-height: 90px;
    font-size: 26px;
    transition: 0.2s linear;
}

.btn:hover i{
    transform: scale(1.3);
    color: #f1f1f1;
}

.btn::before{
    content: "";
    position: absolute;
    width: 120%;
    height: 120%;
    background: #3498db;
    transform: rotate(45deg);
    left: -110%;
    top: 90%
}

.btn:hover::before{
    animation: aaa 0.7s 1;
    top: -10%;
    left: -10%;
}

@keyframes aaa{
    0%{
        left: -110%;
        top: 90%;
    }50%{
        left: 10%;
        top: -30%;
    }100%{
        top: -10%;
        left: -10%;
    }
}


j'ai défini une couleur pour mon body{ et c'est celui-là qui prends sur celui du footer :

body{
    font-family: Sunday, sans-serif;
    margin: 0px;
    padding: 0px;
    background-image: url(../img/marry.png);
    background-color: #555555;
    background-repeat: no-repeat;
    background-size: 100%;
    max-width: auto;
    height: 100%;
    line-height: 1;
    
}


une idée de pourquoi ça fonctionne pas ?
Administrateur
Bonjour,

L'explication est simple : elle est due au position absolute sur ton élément .middle.

La hauteur d'un élément dans une page web est calculée à partir du contenu (dans le flux) au sein de cet élément. Or avec position absolute, tu retires du flux tout le contenu (.middle) de ton footer, il n'occupe donc plus aucune hauteur. Il suffit d'utiliser l'inspecteur d'élément pour s'en assurer.

Le positionnement absolu est à utiliser en dernier recours, uniquement lorsqu'il est souhaitable de sortir du flux, ce qui ne me semble pas être le cas ici (tout ce que tu veux est de déplacer .middle à droite dans le footer, non ?)

Bonne chance Smiley smile
Modifié par Raphael (14 Nov 2019 - 10:37)
Raphael a écrit :
Bonjour,

L'explication est simple : elle est due au position absolute sur ton élément .middle.

La hauteur d'un élément dans une page web est calculée à partir du contenu (dans le flux) au sein de cet élément. Or avec position absolute, tu retires du flux tout le contenu (.middle) de ton footer, il n'occupe donc plus aucune hauteur. Il suffit d'utiliser l'inspecteur d'élément pour s'en assurer.

Le positionnement absolu est à utiliser en dernier recours, uniquement lorsqu'il est souhaitable de sortir du flux, ce qui ne me semble pas être le cas ici (tout ce que tu veux est de déplacer .middle à droite dans le footer, non ?)

Bonne chance Smiley smile


Hello, merci de ta réponse. Hélas ça a rien changé. J'ai décidé de supprimer le footer et de juste placer mon code en fin de page html et je l'ai arrangé comme je le voulais.
Merci d'avoir essayé de régler mon soucis j'ai supprimé l'absolute dcp ^^.
Modifié par Efeelios (14 Nov 2019 - 19:13)
Jean-Pierre-Bruneau a écrit :
Comment juger ?? tu ne nous donnes pas ton début de code, as-tu bien démarré ta page en HTML5 ?

&lt;!DOCTYPE html&gt;&lt;html lang='fr'&gt;
&lt;head&gt;
&lt;meta charset="UTF-8"&gt;
&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
&lt;!--[if IE]&gt;
&lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
&lt;![endif]--&gt;
ETC...


Oui ^^
Sujet clos
Aller à