[CSS] Header sur toute la page

Fermé

Callie33 Messages postés 139 Date d'inscription jeudi 14 avril 2011 Statut Membre Dernière intervention 4 novembre 2014 - 29 déc. 2011 à 12:01
prosthetiks Messages postés 1189 Date d'inscription dimanche 7 octobre 2007 Statut Membre Dernière intervention 12 juin 2020 - 30 déc. 2011 à 14:26

Bonjour tout le monde!

Voilà, j'essaye de faire un header qui prendrait toute la largeur de la page, mais quand je lui mets une couleur de background, j'ai une marge autour.
Une idée?
Merci d'avance!

A voir également:

Header css
Taille bouton css - Forum HTML
Css retour à la ligne - Forum CSS
Css exposant ✓ - Forum CSS
Request header or cookie too large ✓ - Forum Réseaux sociaux
Css premier plan ✓ - Forum CSS

5 réponses

Réponse 1 / 5

prosthetiks Messages postés 1189 Date d'inscription dimanche 7 octobre 2007 Statut Membre Dernière intervention 12 juin 2020 431
30 déc. 2011 à 12:21

Hello,

voila:

<html>
  <head>
    <style type="text/css">
      body{
        margin:0;
        padding:0;
      }
      header{
        display:block;
        width:100%;
        background-color:#888;
        height:140px;
      }
    </style>
  </head>
  <body>
    <header>
      &nbsp;
    </header>
  </body>
</html>

Réponse 2 / 5

prosthetiks Messages postés 1189 Date d'inscription dimanche 7 octobre 2007 Statut Membre Dernière intervention 12 juin 2020 431
30 déc. 2011 à 14:26

Re,

Voici pour la nav:

<html>
  <head>
  	<meta charset="utf-8" />
    <style type="text/css">
      body{
        margin:0;
        padding:0;
      }
      .centreur{
        position:relative;
        width:960px;
        margin:0 auto;
      }
      header{
        display:block;
        width:100%;
        background-color:#888;
        height:140px;
      }
      header .centreur{
        height:140px;
      }
      nav{
        display:block;
        width:100%;
        background-color:#444;
        height:40px;
        line-height:40px;
        position:absolute;
        bottom:-20px;
        -moz-border-radius:5px;
        -webkit-border-radius:5px;
        -o-border-radius:5px;
        border-radius:5px;
      }
      nav ul{
        list-style:none;
        margin:0;
        padding-left:10px;
      }
      nav ul li{
        display:inline;
        margin:0 10px;
      }
      nav ul li a{
        text-decoration:none;
        color:#fff;
        font-size:1.1em;
        font-variant:small-caps;
        padding:5px;
        /*Juste pour rendre le tout plus zôôôôli*/
        /*Bords arrondis*/
        -moz-border-radius:5px;
        -webkit-border-radius:5px;
        -o-border-radius:5px;
        border-radius:5px;
        /*Effet de transition au survol de la souris*/
        -webkit-transition: all .3s ease-in;
	    -moz-transition: all .3s ease-in;
	    -o-transition: all .3s ease-in;
	    transition: all .3s ease-in;
      }
      nav ul li a:hover{
        background-color:#222;
      }
    </style>
  </head>
  <body>
    <header>
      <div class="centreur">
        <nav>
          <ul>
            <li>
              <a href="#">Blog</a>
            </li>
            <li>
              <a href="#">Formation</a>
            </li>
            <li>
              <a href="#">Expériences</a>
            </li>
            <li>
              <a href="#">Compétences</a>
            </li>
            <li>
              <a href="#">Loisirs</a>
            </li>
            <li>
              <a href="#">Liens</a>
            </li>
            <li>
              <a href="#">Contact</a>
            </li>
          </ul>
        </nav>
      </div>
    </header>
  </body>
</html>

Réponse 3 / 5

prosthetiks Messages postés 1189 Date d'inscription dimanche 7 octobre 2007 Statut Membre Dernière intervention 12 juin 2020 431
29 déc. 2011 à 13:05

Hello,

Peux-tu nous donner ton code HTML/CSS actuel pour qu'on puisse te dire les modifs a effectuer dessus stp ?

Réponse 4 / 5

Callie33 Messages postés 139 Date d'inscription jeudi 14 avril 2011 Statut Membre Dernière intervention 4 novembre 2014 8
30 déc. 2011 à 09:45

Le code CSS :

/** BODY **/
body {
  background-color: #FFEAEA;
  font-family: 'Trebuchet MS', Arial, sans-serif;
  color: #181818;
}
header {
  height: 250px;
  display: block;
  background-color: #E0CDA9;
}

Le code HTML :

  <body>
      <header>
      </header>
 </body>
      <!-- END HEADER --

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question

Réponse 5 / 5

Callie33 Messages postés 139 Date d'inscription jeudi 14 avril 2011 Statut Membre Dernière intervention 4 novembre 2014 8
30 déc. 2011 à 13:48

Merci beaucoup prosthetiks!

Une autre question :
J'aimerais faire un menu de navigation comme ici:
http://piju.villoud.free.fr/site/?p=301
Comment fait pour qu'il soit au-dessus, et centré ?

Discussions similaires

debloquer le code 400 bad request qui s'affiche à google

GPT header corruption has been detected please check sata mode setting

trait horizontal avec du css

Enlever le soulignement sous les liens en HTML/CSS

Ecran bleu bad pool header