High-Tech Santé Médecine Droit-Finances

Auto-Entrepreneur

Comment faire ?

Rechercher : dans
Par :

Comment faire bande de couleur haut de page?

Dernière réponse le 12 nov 2009 à 19:31:24 Mr Ripley, le 12 nov 2009 à 01:40:01 
 Signaler ce message aux modérateurs

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 : http://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

Configuration: Mac OS X
Safari 531.9

Posez votre question Répondre

1

Ozareff, le 12 nov 2009 à 08:02:03
  • +1

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;
}

   
Répondre à Ozareff

2

Mr Ripley, le 12 nov 2009 à 19:15:46

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

   
Répondre à Mr Ripley

3

 Mr Ripley, le 12 nov 2009 à 19:31:24

Pardon je voulais dire "comme le haut de la page : avec les onglets"

Merci ;)

   
Répondre à Mr Ripley
Posez votre question Répondre
Ils ont besoin de votre aide
Collection CommentÇaMarche.net