View original (French)

How to create a colored header band?

Solved
Mr Ripley -  
 Noah -
Hello,

I'm looking to create a banner at the top of the page like the one on the website comment ça marche.com: a color band without borders at the top and sides of the page??

I've tried using divs/collapse but I can't manage to remove the white space that appears between the div and the webpage!

I found another example on this site: https://www.leetchi.com/

How can I also incorporate the logo by "cutting" into the color band, placing the logo over the band?

There you go ;)

I hope someone can help me!

Thank you very much in advance!

Mr Ripley
Configuration: Mac OS X Safari 531.9

2 réponses

Réponse 1 / 2
Ozareff
 
Hello,

A simple div is enough to create your colored "band."
To do this, simply assign a background color to your div in CSS and set a height if your div contains no elements.
To ensure it "sticks" right at the top of your page, you need to remove the default margin on the "body" element.

Thus, the following code should answer your questions:

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

CSS
body{
margin:0px;
}
#header{
height:120px;
background:#2F2F2E;
}
18
Mr Ripley
 
Great, thanks, that's exactly it! To then create menus like the footer of "commentçamarche," we can add div classes, right?

Regarding the logo that "cuts" the colored line like in the example from the other site, would you know how to do that?

Well, anyway, thank you very much for your help!

Mr Ripley
0
katryn
 
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
Noah
 

I tried it, it works well but as soon as there's text inside it shifts again.

Don't you have a command to fix that by any chance?

0