28172 sujets

CSS et mise en forme, CSS3

[Résolu]Page un peu trop grande (barre de scroll inutile)

Bonjour à tous,

Premier message ici, donc j'en profite pour vous remerciez pour ce site et forum qui m'est d'une grande aide dans mon apprentissage du dev web Smiley smile

Je ne suis pas sûr que le titre de ce topic soit très clair donc je vais reformuler :
pour m'entraîner au maniement du html/css j'ai recréé la page d'accueil de google (esthétiquement). Je suis plutôt satisfait du résultat mais j'ai quand même une petite chose qui m'embête et dont je ne trouve pas la source : l'ajout de barres de défilement horizontale et verticale, alors que mon contenu ne semble pas déborder de ma fenêtre.
La page en question

Le code : 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="css/style.css" />
    <title>Google</title>
  </head>

  <body>
    <div class="nav">
      <ul>
        <li><a href="#">+You</a></li>
        <li><a href="#">Gmail</a></li>
        <li><a href="#">Images</a></li>
        <li>
          <div id="sign_in"><a href="#">Sign In</a></div>
        </li>
      </ul>
    </div>

    <div id="content">
      <div id="logo_google"><img src="img/google_logo.png" alt="logo google" /></div>
      <p id="france">France</p>

      <form><input></form>

      <div class="bouton_recherche" id="search">Google Search</div>
      <div class="bouton_recherche" id="lucky">I'm feeling lucky</div>
    </div>

    <footer>
      <div id="footerL">
        <ul>
          <li><a href="#">Advertising</a></li>
          <li><a href="#">Business</a></li>
          <li><a href="#">About</a></li>
        </lu>
      </div>

      <div id="footerR">
        <ul>
          <li><a href="#">Privacy</a></li>
          <li><a href="#">Terms</a></li>
          <li><a href="#">Settings</a></li>
        </ul>
      </div>

    </footer>
  </body>

</html>


html {
  height: 100%;
}

* {-moz-box-sizing: border-box; box-sizing: border-box;}

body {
  position: relative;
  width: 100%;
  font-family: Arial, sans-serif;
  min-height: 100%;
  padding: 0;
  margin: 0;
  padding-bottom: 9em;
}

a {
  text-decoration: none;
  color: black;
}

a:hover {
  text-decoration: underline;
}
.nav {
  text-align: right;
}
.nav li {
  display: inline-block;
  list-style: none;
  margin-right: 15px;
}

#sign_in a {
  font-weight: bold;
  margin-right: 50px;
  margin-left: 25px;
  background-color: #4285F4;
  color: white;
  padding: 7px;
  border-radius: 2px;
}

#sign_in :hover {
  background: #1166f4;
}

#sign_in a:hover {
  text-decoration: none;
}

#logo_google {
  text-align: center;
  padding-top: 200px;
}

#logo_google img {
  width: 300px;
  height: auto;
}

#france {
  font-weight: bold;
  color: grey;
  text-align: center;
  position: relative;
  top: -45px;
  left: 120px;
  font-size: 18px;
}

form {
  text-align: center;
  position: relative;
  top: -30px;
}

input {
  width: 650px;
  height: 30px;
  border-radius: 0px;
  border: 1px solid #D3D3D3;
}

input:hover {
  border: 1px solid #757575;
}

input:focus {
  border: 1px solid DodgerBlue;
}

.bouton_recherche {
  display: inline-block;
  padding: 12px;
  background-color: #F2F2F2;
  color: #757575;
  font-weight: bold;
  margin: 0 15px;
  border-radius: 3px;
}

.bouton_recherche:hover {
  color: black;
  border: 1px solid #757575;
  padding: 11px;
}

#content {
  text-align: center;
}

footer {
  background-color: #F2F2F2;
  position: absolute;
  bottom: 0px;
  left: 0;
  right: 0;
  border-top: 1px solid #D3D3D3;
}

#footerL  {
  float:left;
}

#footerR {
    float: right;
}

#footerL li , #footerR li {
  display: inline-block;
    margin: 0 10px;
}

#footerR li a, #footerL li a {
  color: #757575;
}

#footerR ul {
  margin-right: 25px;
}


Une idée d'où cela peut venir ?

Et question bonus Smiley lol : est-ce normal que le visualisateur de page html github (par lequel j'ai partagé ma page google) ne réagisse pas de la même manière que mes navigateurs lorsque je lance la page de mon PC ?
En particulier le footer recouvre les boutons de recherche lorsque la fenêtre est trop petite, alors que j'ai suivi ce lien pour lui assurer de la place, et que cela fonctionne très bien hors github.

Merci et bonne journée à tous.
Modifié par Dewey (03 Sep 2015 - 12:19)
Modérateur
Bonjour,

Je te conseille l'utilisation d'un inspecteur de code (F12 sur Chrome et IE, FireBug à installer sur FF, clock droit + "inspecter l'élément" sur la plupart etc..). Ils peuvent, entre autre, mettre en surbrillance les blocs et tu aurais facilement pu repérer que :
<p id="france">France</p>

fait 100% de la largeur mais a un left: 120px; qui le pousse en dehors de l'écran et crée le scroll horizontal.

Pour le scroll vertical, c'est un probleme de fusion de marge (http://www.alsacreations.com/article/lire/629-fusion-des-marges.html) entre ton body qui est à 100% de haut et ton premier élément (le ul du div.nav) qui à un margin top (par défaut).

Bonne journée Smiley smile
Merci pour ta réponse Smiley smile

J'ai donc réglé le soucis de fusion de marge en supprimant le magin-top de ul (et en ajoutant un padding-top pour rééquilibrer).
J'ai aussi compris le "soucis" de github, il fallait juste que je nettoie mon cache Smiley biggol

Par contre pour l'élément "france", je ne sais pas comment modifier sa largeur, sans que cela ne pose de soucis de positionnement.
En l'état, lorsque je modifie la taille de la fenêtre il reste placé correctement par rapport à l'image google. Dès que je modifie sa largeur, ce n'est plus le cas (j'ai d'ailleurs du mal à comprend pourquoi Smiley sweatdrop ).

Edit : un overflow:hidden dans mon content semble avoir régler le soucis Smiley smile
Modifié par Dewey (03 Sep 2015 - 10:34)
Sujet clos
Aller à