Background color css
Résoluernblp -
Bonjour,
je vois qu'il n'y a pas de forum HTML, je me suis peut-être trompée de forum..?
Bref, je viens vers vous car j'ai un soucis avec mon code html et css
je suis en train de coder mon footer et j'aurais souhaité lui mettre une couleur de fond.
Sauf que, ça ne fonctionne pas et seulement la couleur de la police du footer est prise en compte mais pas le background.
Voici les photos (code html) et mon code css à l'écrit :
.footer1{
display: inline;
text-align: left;
width: 60%;
float: left;
}
.footer2{
display: inline;
text-align: right;
width: 40%;
float: left;
}
footer{
color: brown;
background-color: blueviolet !important;
}
.text1{
width: 40%;
text-align: justify;
float: left;
padding: 5px;
}
.text2{
width: 16%;
text-align: center;
float: left;
padding: 5px;
}
.text3{
width: 40%;
text-align: justify;
float: left;
padding: 5px;
}
.text6{
width: 30%;
text-align: right;
float: right;
padding: 5px;
}
.text5{
width: 30%;
text-align: right;
float: right;
padding: 5px;
}
.text4{
width: 30%;
text-align: right;
float: right;
padding: 5px;
}
footer a{
text-decoration: none;
}
Y'a t il un conflit quelque part ?
Merci à vous
Macintosh / Safari 17.1.2
- Css background color
- Windows 7 logon background changer - Télécharger - Thèmes & Fonds d'écran
- Avis kobo clara color - Accueil - Tablettes
- Color pix - Télécharger - Divers Photo & Graphisme
- Starter background changer - Télécharger - Thèmes & Fonds d'écran
- John's background switcher - Télécharger - Suite bureautique
3 réponses
Salut à tous,
Il aurait été intéressant de montrer l'url de ton site (s'il est en ligne évidement !).
Ou alors une capture d'écran de celui-ci.
Il y a longtemps que je n'ai pas codé mais une chose m'intrigue:
Peut-tu montrer ta "classe footer" car footer est un élément HTML.
Il est donc maladroit de nommer une classe au même nom qu'un élément html.
<div class="footer">
Bon réveillon et heureuse année 2024 à tous !
.footer1{
display: inline;
text-align: left;
width: 60%;
float: left;
}
.footer2{
display: inline;
text-align: right;
width: 40%;
float: left;
}
footer{
color: brown;
background-color: blueviolet !important;
}
.text1{
width: 40%;
text-align: justify;
float: left;
padding: 5px;
}
.text2{
width: 16%;
text-align: center;
float: left;
padding: 5px;
}
.text3{
width: 40%;
text-align: justify;
float: left;
padding: 5px;
}
.text6{
width: 30%;
text-align: right;
float: right;
padding: 5px;
}
.text5{
width: 30%;
text-align: right;
float: right;
padding: 5px;
}
.text4{
width: 30%;
text-align: right;
float: right;
padding: 5px;
}
footer a{
text-decoration: none;
color: violet;
}
footer a:hover{
color: crimson;
}
voici le code css
Salut
Essayer de remplacer
footer{
color: brown;
background-color: blueviolet !important;
}
par
.footer{
color: brown;
background-color:blueviolet !important;
overflow: auto;
}
ça devrait mieux passer ! Hésite pas à me donner un retour
Lorsque tu utilises float dans les éléments .footer1 et .footer2, ça peut causer des problèmes de mise en page pour le parent .footer. Les éléments flottants sortent du flux normal du document, et le parent peut ne pas reconnaître correctement la hauteur de ces éléments, ce qui peut conduire à un problème d'affichage du fond.
En ajoutant overflow: auto; à ton .footer, tu indiques au navigateur de gérer correctement le placement et la hauteur des éléments flottants à l'intérieur. Cela résout souvent les problèmes liés à l'utilisation de float dans les mises en page.
Cdt,
.nxh_
