[CSS] Header sur toute la page

Callie33 Messages postés 150 Statut Membre -
prosthetiks Messages postés 1309 Statut Membre - 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!

Afficher la suite

5 réponses

prosthetiks Messages postés 1309 Statut Membre 431

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>

prosthetiks Messages postés 1309 Statut Membre 431

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 1309 Statut Membre 431

Hello,

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

Callie33 Messages postés 150 Statut Membre 8

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 150 Statut Membre 8

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é ?
0

[CSS] Header sur toute la page

5 réponses

Discussions similaires

Newsletters