3239 sujets

Critiques de vos sites: code et design

Mon site web

Bonjour à tous,
Voilà je suis en pleine refonte de mon site et surtout je débute donc soyez sympa [ Smiley biggrin
Actuellement je travail mon image de fond (background) le tout en CSS
Mon soucis, c'est que sur mes écrans (21,5")tout est ok par contre sur les écrans de plus petite taille, la tête du brocard se confond avec la partie du milieu.
Existe t'il une solution afin que l'ensemble s'adapte en fonction de la taille de l'écran ?
D'avance merci

Mon site en question, www.jerome-watel.fr
Salut,

Que veux-tu faire ? Voir toujours l'intégralité de la tête de ce (joli) brocard ?
Si c'est ça, il faut lui laisser l'espace nécessaire en estimant le pourcentage de la largeur de la page occupée par cette tête et décaler la colonne centrale vers la gauche.
Sinon, tu peux prévoir des apparences différentes selon la taille des écrans grâce aux media-queries CSS.
Modifié par MatthieuR (30 Aug 2015 - 22:37)
Je ferais comme ça : http://codepen.io/korell/full/pjvwvd
Le code est à suivre, je te laisse le décortiquer et voir le principe (la tête du brocard occupe 32% de la largeur de ton image de fond...)
<body>
  <div id="content-wrapper">
    <header>
      <h1><img src="baniere.jpg" alt="Flore et faune photographie"></h1>
      <blockquote>"Une photographie, c'est un fragment de temps qui ne reviendra pas."</blockquote>
    </header>
    <nav>
      <ul id="menu">
        <li><a href="#">Accueil</a></li>
        <li><a href="Albums.html">Albums</a></li>
        <li><a href="recit.html">Récit</a></li>
        <li><a href="livre dor.html">Livre d'or</a></li>
        <li><a href="Liens.html">Liens</a></li>
        <li><a href="contact.html">Contact</a></li>
      </ul>
    </nav>
    <main>
      <div class="diaporama">
        <img src="diapo-accueil-7.jpg" alt="">
      </div>
    </main>
    <footer>
      <p>"Les images de ce site ne sont pas libres de droit merci de bien vouloir respecter l'auteur sur ce point."©Jérôme Watel 2015.</p>
    </footer>
  </div>

</body>

html, body{
  margin:0;
  box-sizing: border-box;
  padding-bottom: 20px;
}
body{
  background-image: url(brocard.jpg);
  background-size: cover;
  background-attachment: fixed;
}
#content-wrapper{
  float: right;
  width: 63%;
  max-width: 800px;
  min-width: 400px;
  margin: 0 32% 0 5%;
}
h1{
  margin: 0;
  margin-top: 20px;
}
h1 img{
  width: 100%;
}
blockquote{
  margin: 20px 0;
  font-size: 16px;
  text-align: center;
  color: #444444;

}
nav ul#menu{
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0;
  text-align: center;
}
nav ul#menu li{
  font-size: 16px;
  display: inline-block;
  padding: 0 30px;
}
nav #menu li a{
  color: #444444;
}
main{
  border-top: 1px white solid;
  border-bottom: 1px white solid;
  padding: 20px 0;
  margin: 20px 0;
}

main .diaporama img{
  width: 100%;
}
footer p{
  text-align: center;
  font-style: italic;
  font-size: 14px;
  color: #444;
}
@media only screen and (min-width: 2200px){
  #content-wrapper{
    margin: 0 auto;
    float: none;
  }
}
@media only screen and (max-width: 635px){
  #content-wrapper{
    float: left;
  }
}
@media only screen and (max-width: 1050px){
  nav ul#menu{
    width: 400px;
    margin-left: auto;
    margin-right: auto;
  }
  nav ul#menu li{
    margin-bottom: 10px;
  }
}

Modifié par MatthieuR (04 Sep 2015 - 00:29)
Sujet clos
Aller à