Comment faire bande de couleur haut de page?

Résolu/Fermé
Mr Ripley - 12 nov. 2009 à 01:40
 Noah - 16 juin 2023 à 06:06
Bonjour,

je cherche à faire une bande en haut de page comme celle du site comment ça marche.com : une bande de couleur sans bordure avec le haut et les côtés de la page??

J'ai essayé avec des divs/collpase mais je ne parviens pas à enlever l'espace blanc qui se crée entre le div et la page internet!

J'ai trouvé un autre exemple sur ce site : https://www.leetchi.com/

Comment aussi incorporer le logo en "coupant" la bande de couleur, en mettant le logo par-dessus la bande?

Voilà ;)

J'espère que quelqu'un pourra m'aider!

Merci beaucoup par avance!

Mr Ripley

2 réponses

Bonjour,

Un simple div suffit à faire ta "bande" de couleur.
Pour cela, il te suffit d'assigner une couleur de fond à ton div en CSS ainsi qu'une hauteur si ton div ne contient aucun élément.
Pour qu'il se "colle" bien en haut de ta page, il faut enlever la marge par défaut sur l'élément "body".

Ainsi, le code suivant devrait répondre à tes questions :

HTML
<div id="header"></div>

CSS
body{
margin:0px;
}
#header{
height:120px;
background:#2F2F2E;
}
18
Super merci, c'est exactement ça! Pour ensuite faire des menus comme le bas de page de "commentçamarche" on peut rajouter des div class c'est bien ça?

Concernant le logo qui "coupe" la ligne de couleur comme sur l'exemple de l'autre site, saurais-tu comment faire?

Bon mais en tout cas merci beaucoup pour ton aide!

Mr Ripley
0
merci çà c'est un bon code. Mais si je veux que mon bandeau soit sur toute ma largeur de page à l'infini... qu'est ce que je dois rajouter comme code dans mon css. Parce qu'il reste à la taille de ma page ?
2

J'ai essayé ça fonctionne bien mais dès qu'il y a du texte à l'intérieur ça se re décale.

T'aurais pas une commande pour arranger ça par hasard ?

0