Veuillez vous connecter ou créer un compte pour suivre ce topic
Ce topic est suivi par: Jerem971, TheOldNoob
Ce topic a été résolu
Auteur Sujet: Responsive Design + Menu hamburger

Jerem971

Messages: 808

Bonjour la communauté ! 😄

Je voudrais que mon site soit adapté pour les smartphones et les tablettes et obtenir un menu hamburger lorsque la taille est celle du smartphone, pour cela je fais donc appel au Responsive Design et au tutoriel de Grafikart. Au début, plusieurs choix m'était offert sur OpenClassrooms. Je pense pouvoir réussir à adapter mon site pour les smartphones et les tablettes mais je galère pour le menu de mon site. Je souhaite qu’il fasse exactement pareil que cet exemple. Je suis donc un peu perdu même avoir replay la vidéo de Grafikart plusieurs fois… J’ai donc besoin de communiquer avec une personne pour faire exactement étape par étape pour réaliser ce chef-d’œuvre 😄

Voici donc le code source de mon menu :

<!DOCTYPE html">
<html lang="fr">
  <head>
    <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0"/>
    <title>Titre onglet</title>

<style type="text/css">
body
{
   margin: 10px 0 ;
   padding: 0 ;
   text-align: left ;
   font: 0.8em "Trebuchet MS", helvetica, sans-serif ;
   background: #FFFFFF ;
}

.nav
{
   padding: 0 ;
   margin: 2.5em 0 ;
   text-align: left ;
}

.nav li 
{
   display: inline ;
   list-style: none ;
}

.nav a
{
   display: inline-block ;
   margin: 0 30px ;
}

#menu .nav
{
   border-top-color: #339526 ;
   background-color: #339526 ;
   background: -moz-linear-gradient(bottom , #339526 0pt, #339526 50%, #339526 51%, #339526 100%) repeat scroll 0 0 transparent ;
   background: -webkit-linear-gradient(bottom , #339526 0pt, #339526 50%, #339526 51%, #339526 100%) repeat scroll 0 0 transparent ;
   background: -ms-linear-gradient(bottom , #339526 0pt, #339526 50%, #339526 51%, #339526 100%) repeat scroll 0 0 transparent ;
   background: -o-linear-gradient(bottom , #339526 0pt, #339526 50%, #339526 51%, #339526 100%) repeat scroll 0 0 transparent ;
   background: linear-gradient(bottom , #339526 0pt, #339526 50%, #339526 51%, #339526 100%) repeat scroll 0 0 transparent ;
   text-align: left ;
   height: 38px ;
}

#menu .nav a
{
   height: 38px ;
   margin: 0 ;
   padding: 0 35px ;
   line-height: 38px ;
   border-right: 4px solid #FFFFFF ;
   text-decoration: none ;
   color: white ;
   font-family: Helvetica, Arial, Verdana, sans-serif ;
   font-size: 1.3em ;
   font-weight : bold ;
}

#menu .nav a:hover
{
   background-color: #A0CE4E ;
   background: -moz-linear-gradient(bottom , #A0CE4E 0pt, #A0CE4E 50%, #A0CE4E 51%, #A0CE4E 100%) repeat scroll 0 0 transparent ;
   background: -webkit-linear-gradient(bottom , #A0CE4E 0pt, #A0CE4E 50%, #A0CE4E 51%, #A0CE4E 100%) repeat scroll 0 0 transparent ;
   background: -ms-linear-gradient(bottom , #A0CE4E 0pt, #A0CE4E 50%, #A0CE4E 51%, #A0CE4E 100%) repeat scroll 0 0 transparent ;
   background: -o-linear-gradient(bottom , #A0CE4E 0pt, #A0CE4E 50%, #A0CE4E 51%, #A0CE4E 100%) repeat scroll 0 0 transparent ;
   background: linear-gradient(bottom , #A0CE4E 0pt, #A0CE4E 50%, #A0CE4E 51%, #A0CE4E 100%) repeat scroll 0 0 transparent ;
}
</style>

<div class="menu" id="menu">

   <ul class="nav"><!--
      --><li><a href="#">Accueil</a></li><!--
      --><li><a href="#">Blog</a></li><!--
      --><li><a href="#">Social</a></li><!--
      --><li><a href="#">Contact</a></li><!--
      --><li><a href="#">À propos</a></li>
   </ul>
   </div>
  </div>
  </body>
</html>

Merci à tous ceux qui prendront un temps précieux pour moi (ils pourront obtenir une désinfection informatique gratuite 😄)
Publicité

TheOldNoob

Messages: 909

Salut Jerem,

Il faut simplement utilisé les media queries. Qui vont te permettre de définir des valeurs différentes a une ou plusieurs class en fonction de la taille de ton ecran.

Si tu veux pas trop galérer a faire tout tout seul, je t'invite a visité se thème bootstrap que tu n'aura plus qu'a custom.

Tu dézip, et tu t'amuse 😀

https://startbootstrap.com/template-overviews/logo-nav/

Jerem971

Messages: 808

Re :

Je ne souhaite pas utiliser Bootstrap, je souhaite uniquement que mon menu ou j'ai donner le code soit exactement comme sur cet exemple c'est-à-dire que lorsque l'on redimensionne la fenêtre du navigateur, "Accueil", "Blog", "Contact", "Social" et "A propos" disparaissent (la barre du menu reste verte) et apparait après qu'on ai cliquer sur l’icône hamburger avec les mêmes effets hover (vert clair lorsque l'on survol avec le pointeur). Je souhaite que tu me donnes les étapes pour réaliser cela ou le coder et ensuite me l'expliquer.
Je précise que cet exemple a été pris sur ce site.

TheOldNoob

Messages: 909

Comme dit plus haut, tu va devoir utilisé les media queries.

Je fait pas un cours sur les media queries, c'est assez long et il y a plein de tuto vraiment bien fait. 
Pour plus de simplicité, je te conseil aussi d'utilisé le display : flex; qui dans l'était d'origine de ta nav sera en justify-content : space-between; puis grâce au media queries passera en column.

Je te laisse chercher tout ça, c'est très long a faire un jolie menu responsive avec menu burger 😀

Balatharas

Messages: 672

J'ai trop galérer sur ça je t'avoue. Et encore j'ai finis par mettre ça de côté ^.^'
Sinon, pour comprendre les media queries, chercher sur YouTube: PrimFX les media queries 😉

TheOldNoob

Messages: 909

Bah c'est pas évident parce que le résultat est visuellement pas énorme comparé au code que cela demande.
Personnellement, j'ai fait mon menu burger responsive, adaptable a tout les navigateur, a tout les formats d'écran et tablette ou smartphone... en 30h la première fois, j'était pas top a l'époque en css et je découvrais les medai queries. Aujourd'hui je pense qu'en 15/16h j'arrive au même résultat. Du coup, très franchement maintenant je me prend plus la tête, j'utilise bootstrap. ça me prend 5 minutes -_-

Jerem971

Messages: 808

Re:

Je suis aller voir de nombreux tutoriels que ce soit PrimFX, Grafikart...etc mais mon problème c'est que je ne connais pas les emplacements pour le mettre dans mon code si je n'ai pas les étapes.
C'est par étape par étape qu'on y arrive.
Je ne souhaite pas encore une fois utiliser des choses qui sont déjà fait comme Bootstrap... Je souhaite juste qu'on me dise comment procéder étape par étape...

TheOldNoob

Messages: 909

Bah en gros, tu fait ton html... puis ton css.
Tu a deux possibilité, soit mobile first, soit desktop first. Le choix se faire assez rapidement en fonction du public ciblé.

Dans les deux cas, tu créer ton css complet puis tu ajoute les media queries.
Tu peu même faire tout tes media queries dans on css a part.

Pour info, le dernier menu que j'ai fait m'a pris 293 ligne de css uniquement pour les media queries (puisque j'ai tout mis dans un fichiers différent ).

Je te donne un exemple d'une partie de mon code :

.dropdown-menu {
  margin-top: -1px;
  min-width: 180px;
}
/* lg */ 
@media (min-width: 1200px) {
  .dropdown:hover .dropdown-menu {
      display: block;
      -webkit-animation: fadeInUp 400ms;
      animation: fadeInUp 400ms;
  }
}
/* md */
@media (min-width: 992px) and (max-width: 1199px) {
    .dropdown:hover .dropdown-menu {
      display: block;
      -webkit-animation: fadeInUp 400ms;
      animation: fadeInUp 400ms;
  }
}
/* sm */
@media (min-width: 768px) and (max-width: 991px) {
  .dropdown:hover .dropdown-menu {
      display: block;
      -webkit-animation: fadeInUp 400ms;
      animation: fadeInUp 400ms;
  }
}


Jerem971

Messages: 808

Re:

Voici le menu responsive, c'est celui qui s'adapte à la largeur du smartphone que j'ai modifier :

<!DOCTYPE html">
<html>
   <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0"/>
   <title>Titre onglet</title>
<style class="cp-pen-styles">
/* VARIABLES */
/* BASE */


html,
body {
  font: 0.8em "Trebuchet MS", helvetica, sans-serif ;
  font-size: 1.1em;
  line-height: 1.4;
  height: 100%;
  margin: 0;
  padding: 0;
  font-weight : bold ;
}

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

.container {
  overflow: hidden;
 *zoom: 1;
  margin: 0 20px;
}

.site-content { padding-top: 0px; }

/* HEADER */

.header {
  left: 0;
  right: 0;
  height: 66px;
  line-height: 66px;
  color: #FFFFFF;
  background-color: #339526;
}

.header__logo {
  font-weight: 700;
  padding: 0 25px;
  float: left;
}

/* MENU */

.menu { float: left; }

.menu a { padding: 0 10px; }

.menu a:hover { color: #A0CE4E; }

/* RESPONSIVE */
@media only screen and (max-width: 768px) {

.site-pusher,
 .site-container { height: 100%; }

.site-container { overflow: hidden; }

.site-pusher {
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -ms-transform: translateX(0px);
  -webkit-transform: translateX(0px);
  transform: translateX(0px);
}

.site-content {
  position: absolute;
  top: 66px;
  right: 0;
  left: 0;
  bottom: 0;
  padding-top: 0;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}

.header { position: static; }

.header__icon {
  position: relative;
  display: block;
  float: left;
  width: 50px;
  height: 66px;
  cursor: pointer;
}

.header__icon:after {
  content: '';
  position: absolute;
  display: block;
  width: 1rem;
  height: 0;
  top: 16px;
  left: 15px;
  box-shadow: 0 10px 0 1px #FFFFFF, 0 16px 0 1px #FFFFFF, 0 22px 0 1px #FFFFFF;
}

.menu {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background-color: #339526;
  /*    overflow-y: scroll;
        -webkit-overflow-scrolling: touch;*/
  width: 250px;
  -ms-transform: translateX(-250px);
  -webkit-transform: translateX(-250px);
  transform: translateX(-250px);
}

.menu a {
  display: block;
  height: 40px;
  text-align: center;
  line-height: 40px;
  border-bottom: 1px solid #339526;
}

.with--sidebar .site-pusher {
  -ms-transform: translateX(250px);
  -webkit-transform: translateX(250px);
  transform: translateX(250px);
}

.with--sidebar .site-cache {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.6);
}
}
</style>
</head>

<body>
<div class="site-container">
  <div class="site-pusher">
    <header class="header"> <a href="#" class="header__icon" id="header__icon"></a> <a href="#" class="header__logo"></a>
        <nav class="menu">
         <a href="#">Accueil</a></li>
         <a href="#">Blog</a></li>
         <a href="#">Social</a></li>
         <a href="#">Contact</a></li>
         <a href="#">À propos</a></li>
   </ul>
    </header>
    <div class="site-content">
      <div class="container">
        <div class="jquery-script-ads"><script type="text/javascript"><!--
google_ad_client = "ca-pub-2783044520727903";
/* jQuery_demo */
google_ad_slot = "2780937993";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></div>
      </div>
      <!-- END container --> 
    </div>
    <!-- END site-content -->
    <div class="site-cache" id="site-cache"></div>
  </div>
  <!-- END site-pusher --> 
</div>
<!-- END site-container --> 
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> 
<script>
$(document).ready(function(){

   (function($) {

      $('#header__icon').click(function(e){
         e.preventDefault();
         $('body').toggleClass('with--sidebar');
      });
    
    $('#site-cache').click(function(e){
      $('body').removeClass('with--sidebar');
    });

   })(jQuery);

});
</script>
<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-36251023-1']);
  _gaq.push(['_setDomainName', 'jqueryscript.net']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>
</body>
</html>

A l'aide de Firefox, clique sur "Outils" > "Développement web" > "Vue adaptive" pour voir l'effet.
Le seul problème qui me reste est de le fusionner dans mon menu basique.

Jerem971

Messages: 808

Re:

Bonne nouvelle ! 😄 J'ai finalement réussi par moi-même d'obtenir le résultat que je voulais, je commence à me rapprocher du résultat mais il a encore quelques trucs à modifier. Cette fois-ci j'ai mis les 2 menus (basique et responsive) dans le code pour que vous puissiez voir ce que je souhaite exactement avoir. 😄

Voici le code avec les 2 menus :

<!DOCTYPE html">
<html lang="fr">
  <head>
    <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0"/>
    <title>Titre onglet</title>

<style type="text/css">
body
{
   margin: 10px 0 ;
   padding: 0 ;
   text-align: left ;
   font: 0.8em "Trebuchet MS", helvetica, sans-serif ;
   background: #FFFFFF ;
}

.nav
{
   padding: 0 ;
   margin: 2.5em 0 ;
   text-align: left ;
}

.nav li 
{
   display: inline ;
   list-style: none ;
}

.nav a
{
   display: inline-block ;
   margin: 0 30px ;
}

#menu .nav
{
   border-top-color: #339526 ;
   background-color: #339526 ;
   background: -moz-linear-gradient(bottom , #339526 0pt, #339526 50%, #339526 51%, #339526 100%) repeat scroll 0 0 transparent ;
   background: -webkit-linear-gradient(bottom , #339526 0pt, #339526 50%, #339526 51%, #339526 100%) repeat scroll 0 0 transparent ;
   background: -ms-linear-gradient(bottom , #339526 0pt, #339526 50%, #339526 51%, #339526 100%) repeat scroll 0 0 transparent ;
   background: -o-linear-gradient(bottom , #339526 0pt, #339526 50%, #339526 51%, #339526 100%) repeat scroll 0 0 transparent ;
   background: linear-gradient(bottom , #339526 0pt, #339526 50%, #339526 51%, #339526 100%) repeat scroll 0 0 transparent ;
   text-align: left ;
   height: 38px ;
}

#menu .nav a
{
   height: 38px ;
   margin: 0 ;
   padding: 0 35px ;
   line-height: 38px ;
   border-right: 4px solid #FFFFFF ;
   text-decoration: none ;
   color: white ;
   font-family: Helvetica, Arial, Verdana, sans-serif ;
   font-size: 1.3em ;
   font-weight : bold ;
}

#menu .nav a:hover
{
   background-color: #A0CE4E ;
   background: -moz-linear-gradient(bottom , #A0CE4E 0pt, #A0CE4E 50%, #A0CE4E 51%, #A0CE4E 100%) repeat scroll 0 0 transparent ;
   background: -webkit-linear-gradient(bottom , #A0CE4E 0pt, #A0CE4E 50%, #A0CE4E 51%, #A0CE4E 100%) repeat scroll 0 0 transparent ;
   background: -ms-linear-gradient(bottom , #A0CE4E 0pt, #A0CE4E 50%, #A0CE4E 51%, #A0CE4E 100%) repeat scroll 0 0 transparent ;
   background: -o-linear-gradient(bottom , #A0CE4E 0pt, #A0CE4E 50%, #A0CE4E 51%, #A0CE4E 100%) repeat scroll 0 0 transparent ;
   background: linear-gradient(bottom , #A0CE4E 0pt, #A0CE4E 50%, #A0CE4E 51%, #A0CE4E 100%) repeat scroll 0 0 transparent ;
}

a
{
   height: 38px ;
   margin: 0 ;
   padding: 0 24px;
   line-height: 38px ;
   border-right: 4px solid #FFFFFF ;
   text-decoration: none ;
   color: white ;
   font-family: Helvetica, Arial, Verdana, sans-serif ;
   font-size: 1.3em ;
   font-weight : bold ;
}

.container {
  overflow: hidden;
 *zoom: 1;
  margin: 0 20px;
}

.site-content { padding-top: 0px; }

/* HEADER */

.header {
  left: 0;
  right: 0;
  height: 38px;
  line-height: 38px;
  color: #FFFFFF;
  background-color: #339526;
}

.header__logo {
  font-weight: 700;
  float: left;
}

/* MENU */

.menu_mobile { float: left; }

.menu_mobile a { padding: 0 35px; }

.menu_mobile a:hover { color: #A0CE4E; }

/* RESPONSIVE */
@media only screen and (max-width: 768px) {

.site-pusher,
 .site-container { height: 100%; }

.site-container { overflow: hidden; }

.site-pusher {
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -ms-transform: translateX(0px);
  -webkit-transform: translateX(0px);
  transform: translateX(0px);
}

.site-content {
  position: absolute;
  top: 66px;
  right: 0;
  left: 0;
  bottom: 0;
  padding-top: 0;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}

.header { position: static; }

.header__icon {
  position: relative;
  display: block;
  float: left;
  height: 38px;
  cursor: pointer;
}

.header__icon:after {
  content: '';
  position: absolute;
  display: block;
  width: 1rem;
  height: 0;
  top: 3px;
  left: 15px;
  box-shadow: 0 10px 0 1px #FFFFFF, 0 16px 0 1px #FFFFFF, 0 22px 0 1px #FFFFFF;
}

.menu_mobile {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background-color: #339526;
  /*    overflow-y: scroll;
        -webkit-overflow-scrolling: touch;*/
  width: 250px;
  -ms-transform: translateX(-250px);
  -webkit-transform: translateX(-250px);
  transform: translateX(-250px);
}

.menu_mobile a {
  display: block;
  height: 38px;
  text-align: center;
  line-height: 38px;
  border-right: 4px solid #FFFFFF;
}

.with--sidebar .site-pusher {
  -ms-transform: translateX(250px);
  -webkit-transform: translateX(250px);
  transform: translateX(250px);
}

.with--sidebar .site-cache {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.6);
}
}
</style>

<div class="menu" id="menu">

   <ul class="nav"><!--
      --><li><a href="#">Accueil</a></li><!--
      --><li><a href="#">Blog</a></li><!--
      --><li><a href="#">Social</a></li><!--
      --><li><a href="#">Contact</a></li><!--
      --><li><a href="#">À propos</a></li>
   </ul>
   </div>
  </div>

  <!-- Menu mobile -->
 
<div class="site-container">
  <div class="site-pusher">
    <header class="header"> <a href="#" class="header__icon" id="header__icon" style="border-right-width: 0px"></a> <a href="#" class="header__logo"></a>
        <nav class="menu_mobile">
         <a href="#">Accueil</a></li>
         <a href="#">Blog</a></li>
         <a href="#">Social</a></li>
         <a href="#">Contact</a></li>
         <a href="#">À propos</a></li>
   </nav>
    </header>
    <div class="site-content">
      <div class="container">
        <div class="jquery-script-ads"><script type="text/javascript"><!--
google_ad_client = "ca-pub-2783044520727903";
/* jQuery_demo */
google_ad_slot = "2780937993";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
</div>
      </div>
      <!-- END container --> 
    </div>
    <!-- END site-content -->
    <div class="site-cache" id="site-cache"></div>
  </div>
  <!-- END site-pusher --> 
</div>
<!-- END site-container --> 
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> 
<script>
$(document).ready(function(){

   (function($) {

      $('#header__icon').click(function(e){
         e.preventDefault();
         $('body').toggleClass('with--sidebar');
      });
    
    $('#site-cache').click(function(e){
      $('body').removeClass('with--sidebar');
    });

   })(jQuery);

});
</script>
<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-36251023-1']);
  _gaq.push(['_setDomainName', 'jqueryscript.net']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>
</body>
  </body>
</html>

Donc dans votre navigateur, vous verrez 2 menus, le 1er est le menu basique, le 2ème est le menu responsive qui s'adapte aux smartphones.
Je voudrais que lorsque la taille de la fenêtre est celle d'un PC le menu 2 ressemble exactement au menu 1 et lorsque la taille de la fenêtre est celle d'un smartphone, vous verrez une petite barre blanche, je souhaite quelle disparaisse et lorsqu'on ouvre le menu et que l'on passe le curseur, je veux que cela fasse le même effet "hover" avec le menu 1 c'est-à-dire le remplissage vert clair avec des bandes blanches pour séparer les catégories.

Si vous pouviez me guidez pour supprimer les éléments inutiles, mais attention, mon code est assez long donc méfiez-vous car cela peut modifier d'autres éléments.

TheOldNoob

Messages: 909

Je comprend pas bien l’Intérêt des deux menus en même temps.

Par contre, rassure moi, tu met pas ton css dans ton html?

Jerem971

Messages: 808

Re:

Les 2 menus vous permettent, cher communauté de PrimFX de visualiser le comportement de celui-ci sur la taille de la fenêtre.
Je met des fois mon CSS dans mon HTML mais sinon je fais mon code HTML et je l'appelle vers un fichier CSS cela dépend. Pourquoi cette question ? Car si tu regarde le code source de la page Google, tu verras que eux ils n'ont pas fait cela comme ça.

Alors cher communauté de PrimFX, pouvez-vous m'aidez à résoudre ce problème sur le 2ème menu ?

TheOldNoob

Messages: 909

Prendre exemple sur google est un mauvais exemple, c'est pas un simple html/css comme on fait a notre niveau. 

De nos jours, on ne met plus le css dans le html, car si tu a plusieurs page, tu va devoir refaire le même css pour faire des pages très similaire et te retrouver avec des valeurs inutiles pour la page en cours. 
De plus, tu va gagner en lisibilité en homogénéisant la présentation. Ça facilite vraiment le travail et ça allège la visibilité de ton code.
L'objectif principal des feuilles de style est de séparer autant que possible la présentation et le contenu d'une page !


Pour ton problème : 

Tu doit créer 2 fois le même menu, tu fait un copier/coller du 1er menu.

Ensuite, tu change le nom de tes class. Si ton premier menu s'appel "menu" ou "nav" comme c'est le cas actuellement. Ton menu responsive tu l'appel par exemple "menuR" et "navR"

Pour ton css, tu fait 2 feuilles de styles pour bien séparé ton code proprement, tu fait une feuille de style par exemple nommé style.css et une autre nommé responsive.css

Dans ta feuille de style responsive, tu recopi le premier css en modifient le nom des menuR et navR et tu ajoute tes media queries.

Du coup, avec les mêmes valeurs sur les deux feuilles de style le premier menu ne bougera pas, mais le second sera responsive.

Voilà, sinon tu a un problème d'ouverture et fermeture de balise div. C'est du a un autre problème lié a l'indentation 😀

Ligne 207 tu ouvre une div, qui se ferme ligne 216, et il y a une seconde fermeture a la ligne suivante.

2 fermeture de balise body...


Sinon, je vois pas pour l'instant l'utilité des script AdSense et Google Analytique alors que tu en est encore a faire ton css 😀

Jerem971

Messages: 808

Re:

J'ai corriger les erreurs, c'est-à-dire que j'ai supprimer une fermeture de balise en trop et supprimer le code JavaScript de Adsense et Google Analytics... En effet bien vu, je ne voulais pas effectivement...

Je voudrais que lorsque la taille de la fenêtre est celle d'un PC le menu 2 ressemble exactement au menu 1 et lorsque la taille de la fenêtre est celle d'un smartphone, vous verrez une petite barre blanche, je souhaite quelle disparaisse et lorsqu'on ouvre le menu et que l'on passe le curseur, je veux que cela fasse le même effet "hover" avec le menu 1 c'est-à-dire le remplissage vert clair avec des bandes blanches pour séparer les catégories.
Est-ce que cela résous mon problème citer au-dessus ou c'est simplement une mise en page correcte du code ?
Publicité

TheOldNoob

Messages: 909

non, ça résoudra pas ton problème. 
Pour moi, tu doit avoir 2 fois le même menu, avec 2 css identique. La différences ça va être dans le nom des class du menu responsive afin de pouvoir utilisé les media queries dessus et uniquement sur se menu

Jerem971

Messages: 808

Re:

J'ai finalement réussi à obtenir ce que je voulais ! 😄 C'est moi-même qui l'ai trouvé mais je remercie quand même 'TheOldNoob' de m'avoir trouvé des trucs inutile dans le code et des fautes de programmation.

Donc voici le code final avec les 2 menus :

<!DOCTYPE html">
<html lang="fr">
  <head>
    <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0"/>
    <title>Titre onglet</title>

<style type="text/css">
body
{
   margin: 10px 0 ;
   padding: 0 ;
   text-align: left ;
   font: 0.8em "Trebuchet MS", helvetica, sans-serif ;
   background: #FFFFFF ;
}

.nav
{
   padding: 0 ;
   margin: 2.5em 0 ;
   text-align: left ;
}

.nav li 
{
   display: inline ;
   list-style: none ;
}

.nav a
{
   display: inline-block ;
   margin: 0 30px ;
}

#menu .nav
{
   border-top-color: #339526 ;
   background-color: #339526 ;
   background: -moz-linear-gradient(bottom , #339526 0pt, #339526 50%, #339526 51%, #339526 100%) repeat scroll 0 0 transparent ;
   background: -webkit-linear-gradient(bottom , #339526 0pt, #339526 50%, #339526 51%, #339526 100%) repeat scroll 0 0 transparent ;
   background: -ms-linear-gradient(bottom , #339526 0pt, #339526 50%, #339526 51%, #339526 100%) repeat scroll 0 0 transparent ;
   background: -o-linear-gradient(bottom , #339526 0pt, #339526 50%, #339526 51%, #339526 100%) repeat scroll 0 0 transparent ;
   background: linear-gradient(bottom , #339526 0pt, #339526 50%, #339526 51%, #339526 100%) repeat scroll 0 0 transparent ;
   text-align: left ;
   height: 38px ;
}

#menu .nav a
{
   height: 38px ;
   margin: 0 ;
   padding: 0 35px ;
   line-height: 38px ;
   border-right: 4px solid #FFFFFF ;
   text-decoration: none ;
   color: white ;
   font-family: Helvetica, Arial, Verdana, sans-serif ;
   font-size: 1.3em ;
   font-weight : bold ;
}

#menu .nav a:hover
{
   background-color: #A0CE4E ;
   background: -moz-linear-gradient(bottom , #A0CE4E 0pt, #A0CE4E 50%, #A0CE4E 51%, #A0CE4E 100%) repeat scroll 0 0 transparent ;
   background: -webkit-linear-gradient(bottom , #A0CE4E 0pt, #A0CE4E 50%, #A0CE4E 51%, #A0CE4E 100%) repeat scroll 0 0 transparent ;
   background: -ms-linear-gradient(bottom , #A0CE4E 0pt, #A0CE4E 50%, #A0CE4E 51%, #A0CE4E 100%) repeat scroll 0 0 transparent ;
   background: -o-linear-gradient(bottom , #A0CE4E 0pt, #A0CE4E 50%, #A0CE4E 51%, #A0CE4E 100%) repeat scroll 0 0 transparent ;
   background: linear-gradient(bottom , #A0CE4E 0pt, #A0CE4E 50%, #A0CE4E 51%, #A0CE4E 100%) repeat scroll 0 0 transparent ;
}

a
{
   height: 38px ;
   margin: 0 ;
   padding: 0 35px;
   line-height: 38px ;
   border-right: 4px solid #FFFFFF ;
   text-decoration: none ;
   color: white ;
   font-family: Helvetica, Arial, Verdana, sans-serif ;
   font-size: 1.3em ;
   font-weight : bold ;
   display: inline-block ;
   margin: 0 0px ;
}

.container {
  overflow: hidden;
 *zoom: 1;
  margin: 0 10px;
}

.site-content { padding-top: 0px; }

/* HEADER */

.header {
  left: 0;
  right: 0;
  height: 38px;
  line-height: 38px;
  color: #FFFFFF;
  background-color: #339526;
}

.header__logo {
  font-weight: 700;
  float: left;
}

/* Menu mobile */

.menu_mobile
{    
   float: left;
}
.menu_mobile a:hover
{
   background-color: #A0CE4E ;
   background: -moz-linear-gradient(bottom , #A0CE4E 0pt, #A0CE4E 50%, #A0CE4E 51%, #A0CE4E 100%) repeat scroll 0 0 transparent ;
   background: -webkit-linear-gradient(bottom , #A0CE4E 0pt, #A0CE4E 50%, #A0CE4E 51%, #A0CE4E 100%) repeat scroll 0 0 transparent ;
   background: -ms-linear-gradient(bottom , #A0CE4E 0pt, #A0CE4E 50%, #A0CE4E 51%, #A0CE4E 100%) repeat scroll 0 0 transparent ;
   background: -o-linear-gradient(bottom , #A0CE4E 0pt, #A0CE4E 50%, #A0CE4E 51%, #A0CE4E 100%) repeat scroll 0 0 transparent ;
   background: linear-gradient(bottom , #A0CE4E 0pt, #A0CE4E 50%, #A0CE4E 51%, #A0CE4E 100%) repeat scroll 0 0 transparent ;
}


/* RESPONSIVE */
@media only screen and (max-width: 768px) {

.site-pusher,
 .site-container { height: 100%; }

.site-container { overflow: hidden; }

.site-pusher {
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -ms-transform: translateX(0px);
  -webkit-transform: translateX(0px);
  transform: translateX(0px);
}

.site-content {
  position: absolute;
  top: 66px;
  right: 0;
  left: 0;
  bottom: 0;
  padding-top: 0;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}

.header { position: static; }

.header__icon {
  position: relative;
  display: block;
  float: left;
  height: 38px;
  cursor: pointer;
}

.header__icon:after {
  content: '';
  position: absolute;
  display: block;
  width: 1rem;
  height: 0;
  top: 3px;
  left: 18px;
  box-shadow: 0 10px 0 1px #FFFFFF, 0 16px 0 1px #FFFFFF, 0 22px 0 1px #FFFFFF;
}

.menu_mobile 
{
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background-color: #339526;
  /*    overflow-y: scroll;
        -webkit-overflow-scrolling: touch;*/
  width: 250px;
  -ms-transform: translateX(-250px);
  -webkit-transform: translateX(-250px);
  transform: translateX(-250px);
}

.menu_mobile a {
  display: block;
  height: 38px;
  text-align: center;
  line-height: 38px;
  border-bottom: 4px solid #FFFFFF;
  border-right : none
}

.with--sidebar .site-pusher {
  -ms-transform: translateX(250px);
  -webkit-transform: translateX(250px);
  transform: translateX(250px);
}

.with--sidebar .site-cache {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.6);
}
}
</style>

<div class="menu" id="menu">

   <ul class="nav"><!--
      --><li><a href="#">Accueil</a></li><!--
      --><li><a href="#">Blog</a></li><!--
      --><li><a href="#">Social</a></li><!--
      --><li><a href="#">Contact</a></li><!--
      --><li><a href="#">À propos</a></li>
   </ul>
   </div>

  <!-- Menu mobile -->
 
<div class="site-container">
  <div class="site-pusher">
    <header class="header"> <a href="#" class="header__icon" id="header__icon" style="border-right-width: 0px; padding-right: 18px"></a> <a href="#" class="header__logo" style="padding-left: 0px; padding-right: 0px; border-right-width: 0px;"></a>
        <nav class="menu_mobile"><!--
         --><a href="#">Accueil</a></li><!--
         --><a href="#">Blog</a></li><!--
         --><a href="#">Social</a></li><!--
         --><a href="#">Contact</a></li><!--
         --><a href="#">À propos</a></li>
   </nav>
    </header>
    <div class="site-content">
      <div class="container">
        <div class="jquery-script-ads"><script type="text/javascript"><!--
google_ad_client = "ca-pub-2783044520727903";
/* jQuery_demo */
google_ad_slot = "2780937993";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
</div>
      </div>
      <!-- fin "container" --> 
    </div>
    <!-- fin "site-content" -->
    <div class="site-cache" id="site-cache"></div>
  </div>
  <!-- fin "site-pusher" --> 
</div>
<!-- fin "site-container" --> 
<script src="javascript\jquery-1.11.1.min.js"></script> 
<script>
$(document).ready(function(){

   (function($) {

      $('#header__icon').click(function(e){
         e.preventDefault();
         $('body').toggleClass('with--sidebar');
      });
    
    $('#site-cache').click(function(e){
      $('body').removeClass('with--sidebar');
    });

   })(jQuery);

});
</script>
  </body>
</html>

Pour voir l'effet à l'aide de Firefox, cliquez sur "Outils" > "Développement web" > "Vue adaptive"

Donc 'TheOldNoob', il me reste plus qu'a supprimer le 1er menu, et le remplacer par le 2ème vu que le 2ème fait les 2 objectifs que je voulais qu'il fasse c'est-à-dire lorsque la taille de la fenêtre est celle d'un PC le menu 2 ressemble exactement au menu 1 et lorsque la taille de la fenêtre est celle d'un
smartphone, tout les onglets "Accueil", "Blog", "Social", "Contact", "À propos" disparaisse laissant ainsi le menu vert et l'apparition d'une icône hamburger à gauche. Lorsque l'utilisateur cliquera sur celle-ci, c'est alors que le menu s'ouvrira sous forme de panneau avec "Accueil", "Blog", "Social", "Contact", "À propos" l'un en dessous de l'autre avec le même design (barre blanche et effet "hover").

J'ai donc réussi à avoir le même design du 1er menu au 2ème menu, ce que je voulais.

Mais ce n'est pas tout, il faut comme l'a dit 'TheOldNoob' organiser le code, c'est-à-dire que le CSS ne doit pas être dans le code HTML et je suis d'accord avec lui sur ce point.

Je vais donc sur ce pat, le faire mais je ne met pas le topic en "Résolu" car dans le titre il y a "Responsive Design + Menu hamburger"
Il me reste donc à vérifier si le contenu de la page est correct. Je posterais alors une nouvelle réponse si j'ai encore besoin d'aide.

Merci 'TheOldNoob' pour ton aide, 'Beignet', je te conseille de récupérer le code final vu que tu as galérer toi aussi. Tu pourras le modifier comme tu veux. Je te conseille aussi ce site ou des développeurs on déjà coder de magnifique menu responsive 😉

TheOldNoob

Messages: 909

Pour ceux/celles qui sont réticent a Bootstrap pour avoir du contenu responsive il y a schnaps.it qui est fait par Alsacréation. Leur miniframework nommé Knask est pas mal est assez léger. Ils ont surtout un grid terriblement efficace et facile a prendre en main et on trouve toute la doc nécessaire sur leur site 😀

J'aime particulièrement schnaps.it parce qu'il fait un gros boulot de préparation de mes fichiers et de mon html ^^

Jerem971

Messages: 808

Re:

Hé hé, alors je vous avais bien dit que j'aurais surement un autre problème, voilà pourquoi j'ai préféré ne pas me précipiter sur le bouton "Marquer ce topic comme résolu" 😉

J'ai adapter mon menu sur une page web HTML, il fonctionne bien, il est bien placé, la transition fonctionne, impeccable ! 😉
J'ai 2 problèmes : Mon premier est le suivant : comme j'avais créé cette fameuse page HTML, au départ je n'avais pas découvert le Responsive Design. Je l'ai donc inclus sur cette page et je rencontre un problème. Premièrement il faut savoir qu'il y a une bannière, un logo et des petites images au début de chaque gros titre (h1, h2...etc). Sur chaque titre, je fais appel à une petite image de 25 de hauteur et 25 de largeur pour les menus h1, en revanche pour les menus h2 c'est toujours une petite image, cette fois-ci 22 de hauteur et 22 de largeur. Je fais appel à un logo de 160 de hauteur et 160 de largeur. Ces images dont je fais appel ne s'affiche pas sauf la bannière.

Ensuite mon deuxième est le suivant : lorsque la taille de la fenêtre est cette d'un smartphone, le site s'adapte correctement mais je voudrais que le menu ne soit pas fixe, c'est-à-dire que ça soit toute la page qui soit scrollable. Et j'ai vu aussi que mon "footer" n'était pas adapter lorsqu'on ouvrait le menu responsive en cliquant sur l'icône hamburger. Je souhaite aussi que la page ne soit pas scrollable à ce moment.

Alors pouvez-vous m’aidez à repérer mes erreurs dans le code ci-dessous ? Merci d'avance 😉

<!DOCTYPE html">
<html lang="fr">
  <head>
    <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0"/>
    <title>Titre onglet</title>


<style type="text/css">
body
{
   margin: 10px 0 ;
   padding: 0 ;
   text-align: left ;
   font: 0.8em "Trebuchet MS", helvetica, sans-serif ;
   background: #FFFFFF ;
}

div#conteneur
{
   width: 100% ;
   margin: 0 auto ;
   text-align: left ;
   border: 0px solid ;
   background: ;
}

h1#header
{
   height: 200px ;
   margin: 8 ;
   background: url("./images/logo.png") no-repeat left top ;
}

.nav
{
   padding: 0 ;
   margin: 2.5em 0 ;
   text-align: left ;
}

.nav li 
{
   display: inline ;
   list-style: none ;
}

.nav a
{
   display: inline-block ;
   margin: 0 30px ;
}

#menu .nav
{
   border-top-color: #339526 ;
   background-color: #339526 ;
   background: -moz-linear-gradient(bottom , #339526 0pt, #339526 50%, #339526 51%, #339526 100%) repeat scroll 0 0 transparent ;
   background: -webkit-linear-gradient(bottom , #339526 0pt, #339526 50%, #339526 51%, #339526 100%) repeat scroll 0 0 transparent ;
   background: -ms-linear-gradient(bottom , #339526 0pt, #339526 50%, #339526 51%, #339526 100%) repeat scroll 0 0 transparent ;
   background: -o-linear-gradient(bottom , #339526 0pt, #339526 50%, #339526 51%, #339526 100%) repeat scroll 0 0 transparent ;
   background: linear-gradient(bottom , #339526 0pt, #339526 50%, #339526 51%, #339526 100%) repeat scroll 0 0 transparent ;
   text-align: left ;
   height: 38px ;
}

#menu .nav a
{
   height: 38px ;
   margin: 0 ;
   padding: 0 35px ;
   line-height: 38px ;
   border-right: 4px solid #FFFFFF ;
   text-decoration: none ;
   color: white ;
   font-family: Helvetica, Arial, Verdana, sans-serif ;
   font-size: 1.3em ;
   font-weight : bold ;
}

#menu .nav a:hover
{
   background-color: #A0CE4E ;
   background: -moz-linear-gradient(bottom , #A0CE4E 0pt, #A0CE4E 50%, #A0CE4E 51%, #A0CE4E 100%) repeat scroll 0 0 transparent ;
   background: -webkit-linear-gradient(bottom , #A0CE4E 0pt, #A0CE4E 50%, #A0CE4E 51%, #A0CE4E 100%) repeat scroll 0 0 transparent ;
   background: -ms-linear-gradient(bottom , #A0CE4E 0pt, #A0CE4E 50%, #A0CE4E 51%, #A0CE4E 100%) repeat scroll 0 0 transparent ;
   background: -o-linear-gradient(bottom , #A0CE4E 0pt, #A0CE4E 50%, #A0CE4E 51%, #A0CE4E 100%) repeat scroll 0 0 transparent ;
   background: linear-gradient(bottom , #A0CE4E 0pt, #A0CE4E 50%, #A0CE4E 51%, #A0CE4E 100%) repeat scroll 0 0 transparent ;
}

div#contenu
{
   padding: 0px 0px ;
   background: url("./images/bg_page.gif") no-repeat left 15px 15px ;
}

div#contenu h1
{
   padding-left: 25px ;
   line-height: 25px ;
   font-size: 2em ;
   background: url("./images/little_logo.png") no-repeat left ;
   color: #339526 ;
}

div#contenu h2
{
   padding-left: 25px ;
   line-height: 25px ;
   font-size: 1.8em ;
   background: url("./images/little_logo2.png") no-repeat left ;
   color: #339526 ;
}

div#contenu h3
{
   margin-left: 15px ;
   padding-left: 5px ;
   border-bottom: 1px solid #339526 ;
   border-left: 3px solid #339526 ;
   color: #339526 ;
}

div#contenu p
{
   text-align: justify ;
   text-indent: 0em ;
   line-height: 1.8em ;
}

div#contenu a
{
   color: #A0CE4E ;
}

div#contenu a:hover
{
   color: #339526 ;
}

p#footer
{
   margin: 0 ;
   padding-right: 10px ;
   line-height: 30px ;
   text-align: right ;
   color: #339526 ;
}

p#footer a
{
   color: #339526 ;
}

p#footer a:hover
{
   color: #A0CE4E ;
}

pre
{
   overflow: auto ;
   background: #339526 ;
   border: 2px solid #339526 ;
   padding: 5px 0 0 5px ;
   font-size: 1.2em ;
}

* html pre
{
   width: 636px ;
}

pre span
{
   color: #560 ;
}

pre span.comment
{
   color: #339526 ;
}

.menu_mobile a
{
   height: 38px ;
   margin: 0 ;
   padding: 0 35px;
   line-height: 38px ;
   border-right: 4px solid #FFFFFF ;
   text-decoration: none ;
   color: white ;
   font-family: Helvetica, Arial, Verdana, sans-serif ;
   font-size: 1.3em ;
   font-weight : bold ;
   display: inline-block ;
   margin: 0 0px ;
}

.container {
  overflow: hidden;
 *zoom: 1;
  margin: 0 10px;
}

.site-content { padding-top: 0px; }

/* HEADER */

.header {
  left: 0;
  right: 0;
  height: 38px;
  line-height: 38px;
  color: #FFFFFF;
  background-color: #339526;
}

/* MENU MOBILE */

.menu_mobile
{    
   float: left;
}
.menu_mobile a:hover
{
   background-color: #A0CE4E ;
   background: -moz-linear-gradient(bottom , #A0CE4E 0pt, #A0CE4E 50%, #A0CE4E 51%, #A0CE4E 100%) repeat scroll 0 0 transparent ;
   background: -webkit-linear-gradient(bottom , #A0CE4E 0pt, #A0CE4E 50%, #A0CE4E 51%, #A0CE4E 100%) repeat scroll 0 0 transparent ;
   background: -ms-linear-gradient(bottom , #A0CE4E 0pt, #A0CE4E 50%, #A0CE4E 51%, #A0CE4E 100%) repeat scroll 0 0 transparent ;
   background: -o-linear-gradient(bottom , #A0CE4E 0pt, #A0CE4E 50%, #A0CE4E 51%, #A0CE4E 100%) repeat scroll 0 0 transparent ;
   background: linear-gradient(bottom , #A0CE4E 0pt, #A0CE4E 50%, #A0CE4E 51%, #A0CE4E 100%) repeat scroll 0 0 transparent ;
}


/* RESPONSIVE */
@media only screen and (max-width: 768px) {

.site-pusher,
 .site-container { height: 100%; }

.site-container { overflow: hidden; }

.site-pusher {
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -ms-transform: translateX(0px);
  -webkit-transform: translateX(0px);
  transform: translateX(0px);
}

.site-content {
  position: absolute;
  top: 40px;
  right: 0;
  left: 0;
  bottom: 0;
  padding-top: 0;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}

.header { position: static; }

.header__icon {
  position: relative;
  display: block;
  float: left;
  height: 38px;
  cursor: pointer;
}

.header__icon:after {
  content: '';
  position: absolute;
  display: block;
  width: 1rem;
  height: 0;
  top: 3px;
  left: 18px;
  box-shadow: 0 10px 0 1px #FFFFFF, 0 16px 0 1px #FFFFFF, 0 22px 0 1px #FFFFFF;
}

.menu_mobile 
{
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background-color: #339526;
  /*    overflow-y: scroll;
        -webkit-overflow-scrolling: touch;*/
  width: 250px;
  -ms-transform: translateX(-250px);
  -webkit-transform: translateX(-250px);
  transform: translateX(-250px);
}

.menu_mobile a {
  display: block;
  height: 38px;
  text-align: center;
  line-height: 38px;
  border-bottom: 4px solid #FFFFFF;
  border-right : none
}

.with--sidebar .site-pusher {
  -ms-transform: translateX(250px);
  -webkit-transform: translateX(250px);
  transform: translateX(250px);
}

.with--sidebar .site-cache {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.6);
}
}
body {background:url(./images/banniere.jpg) no-repeat top center;}
</style>

<div class="menu" id="menu">

<div class="site-container">
  <div class="site-pusher">
    <header class="header" style="margin-top: 230px"> <a href="#" class="header__icon" id="header__icon" style="border-right-width: 0px; padding-right: 54px"></a>
        <nav class="menu_mobile"><!--
         --><a href="#">Accueil</a><!--
         --><a href="#">Blog</a><!--
         --><a href="#">Social</a><!--
         --><a href="#">Contact</a><!--
         --><a href="#">À propos</a>
   </nav>
    </header>
    <div class="site-content">
      <div class="container">
      <h1 style="color: green;">TITRE PRINCIPALE</h1>
      <div class="jquery-script-ads"><script type="text/javascript"><!--
google_ad_client = "ca-pub-2783044520727903";
/* jQuery_demo */
google_ad_slot = "2780937993";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
      <h2>Resize your browser window see it in action.</h2>
        <p><font size="4"><font face="Calibri">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae convallis ipsum. Nam pharetra, massa id placerat posuere, ante odio tempor leo, et egestas justo neque id lorem. Morbi a gravida mi. Etiam ligula nunc, tristique nec risus tincidunt, elementum luctus arcu. Donec sed suscipit diam, quis cursus ex. Nam in hendrerit nunc. Praesent sed elit hendrerit felis cursus condimentum faucibus eget magna. Phasellus sed tortor vel magna laoreet rutrum. Pellentesque tincidunt ante id ligula scelerisque fermentum. Vivamus non diam ut ante finibus tincidunt. Sed pellentesque sollicitudin lorem, sed vehicula eros laoreet nec. Mauris quis efficitur nulla. Maecenas bibendum justo mi, vel maximus ante tristique at.</font></font></p>
        <p><font size="4"><font face="Calibri">Praesent vitae risus pretium, lacinia ligula eu, porttitor elit. Donec rhoncus malesuada odio id egestas. Nam pharetra velit nec egestas eleifend. Ut a mollis mauris, nec scelerisque lorem. Morbi placerat lacinia tortor, in tincidunt lacus viverra sed. Donec sem erat, congue eget pharetra nec, ultrices eget mi. Sed sit amet blandit mauris, id porttitor ante. Proin at tellus vel mauris aliquet convallis semper eget dui. Vivamus vitae sapien a est dapibus cursus ac ut felis. Cras iaculis diam et ligula vulputate scelerisque. Aliquam tristique nisl turpis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean at auctor tortor, sed feugiat ante. Duis quis sem ut dui ultricies consectetur.</font></font></p>
        <p><font size="4"><font face="Calibri">Mauris consequat bibendum diam, vel ultrices elit fermentum eu. Curabitur et ullamcorper metus. Curabitur commodo est id enim elementum vulputate. Integer eleifend facilisis velit ac hendrerit. Phasellus tristique a augue at commodo. Integer egestas neque a risus dapibus tempor. Sed volutpat dictum mi. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec egestas tortor vel ultrices viverra.</font></font></p>
        <p><font size="4"><font face="Calibri">Aenean gravida leo lorem, eu blandit sapien porta non. Cras at eros imperdiet, suscipit diam vel, feugiat turpis. In cursus blandit varius. Suspendisse scelerisque lectus tortor, et luctus ligula varius id. Nullam molestie elementum odio porttitor pretium. Donec eu felis ut mauris facilisis suscipit eu ut elit. Proin posuere mauris non bibendum egestas. In vitae lorem et metus rutrum scelerisque. Donec molestie velit ut justo semper accumsan. Praesent placerat metus ut nunc efficitur ultricies. Pellentesque eu massa eros. Curabitur non consequat nibh, nec maximus magna.</font></font></p>
        <p><font size="4"><font face="Calibri">Curabitur id tristique quam, ac viverra erat. Phasellus sed tincidunt leo, faucibus aliquam enim. Morbi varius enim sit amet enim consequat suscipit. Integer accumsan ipsum et tempor dictum. Maecenas malesuada, augue nec cursus placerat, lacus neque finibus diam, non efficitur nisi quam porta mauris. Pellentesque finibus consectetur diam, faucibus fringilla orci vehicula sed. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla malesuada ligula mattis libero commodo sodales.</font></font></p>
        <p><font size="4"><font face="Calibri">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae convallis ipsum. Nam pharetra, massa id placerat posuere, ante odio tempor leo, et egestas justo neque id lorem. Morbi a gravida mi. Etiam ligula nunc, tristique nec risus tincidunt, elementum luctus arcu. Donec sed suscipit diam, quis cursus ex. Nam in hendrerit nunc. Praesent sed elit hendrerit felis cursus condimentum faucibus eget magna. Phasellus sed tortor vel magna laoreet rutrum. Pellentesque tincidunt ante id ligula scelerisque fermentum. Vivamus non diam ut ante finibus tincidunt. Sed pellentesque sollicitudin lorem, sed vehicula eros laoreet nec. Mauris quis efficitur nulla. Maecenas bibendum justo mi, vel maximus ante tristique at.</font></font></p>
        <p><font size="4"><font face="Calibri">Praesent vitae risus pretium, lacinia ligula eu, porttitor elit. Donec rhoncus malesuada odio id egestas. Nam pharetra velit nec egestas eleifend. Ut a mollis mauris, nec scelerisque lorem. Morbi placerat lacinia tortor, in tincidunt lacus viverra sed. Donec sem erat, congue eget pharetra nec, ultrices eget mi. Sed sit amet blandit mauris, id porttitor ante. Proin at tellus vel mauris aliquet convallis semper eget dui. Vivamus vitae sapien a est dapibus cursus ac ut felis. Cras iaculis diam et ligula vulputate scelerisque. Aliquam tristique nisl turpis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean at auctor tortor, sed feugiat ante. Duis quis sem ut dui ultricies consectetur.</font></font></p>
        <p><font size="4"><font face="Calibri">Mauris consequat bibendum diam, vel ultrices elit fermentum eu. Curabitur et ullamcorper metus. Curabitur commodo est id enim elementum vulputate. Integer eleifend facilisis velit ac hendrerit. Phasellus tristique a augue at commodo. Integer egestas neque a risus dapibus tempor. Sed volutpat dictum mi. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec egestas tortor vel ultrices viverra.</font></font></p>
        <p><font size="4"><font face="Calibri">Aenean gravida leo lorem, eu blandit sapien porta non. Cras at eros imperdiet, suscipit diam vel, feugiat turpis. In cursus blandit varius. Suspendisse scelerisque lectus tortor, et luctus ligula varius id. Nullam molestie elementum odio porttitor pretium. Donec eu felis ut mauris facilisis suscipit eu ut elit. Proin posuere mauris non bibendum egestas. In vitae lorem et metus rutrum scelerisque. Donec molestie velit ut justo semper accumsan. Praesent placerat metus ut nunc efficitur ultricies. Pellentesque eu massa eros. Curabitur non consequat nibh, nec maximus magna.</font></font></p>
        <p><font size="4"><font face="Calibri">Curabitur id tristique quam, ac viverra erat. Phasellus sed tincidunt leo, faucibus aliquam enim. Morbi varius enim sit amet enim consequat suscipit. Integer accumsan ipsum et tempor dictum. Maecenas malesuada, augue nec cursus placerat, lacus neque finibus diam, non efficitur nisi quam porta mauris. Pellentesque finibus consectetur diam, faucibus fringilla orci vehicula sed. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla malesuada ligula mattis libero commodo sodales.</font></font></p>
        <p><font size="4"><font face="Calibri">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae convallis ipsum. Nam pharetra, massa id placerat posuere, ante odio tempor leo, et egestas justo neque id lorem. Morbi a gravida mi. Etiam ligula nunc, tristique nec risus tincidunt, elementum luctus arcu. Donec sed suscipit diam, quis cursus ex. Nam in hendrerit nunc. Praesent sed elit hendrerit felis cursus condimentum faucibus eget magna. Phasellus sed tortor vel magna laoreet rutrum. Pellentesque tincidunt ante id ligula scelerisque fermentum. Vivamus non diam ut ante finibus tincidunt. Sed pellentesque sollicitudin lorem, sed vehicula eros laoreet nec. Mauris quis efficitur nulla. Maecenas bibendum justo mi, vel maximus ante tristique at.</font></font></p>
        <p><font size="4"><font face="Calibri">Praesent vitae risus pretium, lacinia ligula eu, porttitor elit. Donec rhoncus malesuada odio id egestas. Nam pharetra velit nec egestas eleifend. Ut a mollis mauris, nec scelerisque lorem. Morbi placerat lacinia tortor, in tincidunt lacus viverra sed. Donec sem erat, congue eget pharetra nec, ultrices eget mi. Sed sit amet blandit mauris, id porttitor ante. Proin at tellus vel mauris aliquet convallis semper eget dui. Vivamus vitae sapien a est dapibus cursus ac ut felis. Cras iaculis diam et ligula vulputate scelerisque. Aliquam tristique nisl turpis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean at auctor tortor, sed feugiat ante. Duis quis sem ut dui ultricies consectetur.</font></font></p>
        <p><font size="4"><font face="Calibri">Mauris consequat bibendum diam, vel ultrices elit fermentum eu. Curabitur et ullamcorper metus. Curabitur commodo est id enim elementum vulputate. Integer eleifend facilisis velit ac hendrerit. Phasellus tristique a augue at commodo. Integer egestas neque a risus dapibus tempor. Sed volutpat dictum mi. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec egestas tortor vel ultrices viverra.</font></font></p>
        <p><font size="4"><font face="Calibri">Aenean gravida leo lorem, eu blandit sapien porta non. Cras at eros imperdiet, suscipit diam vel, feugiat turpis. In cursus blandit varius. Suspendisse scelerisque lectus tortor, et luctus ligula varius id. Nullam molestie elementum odio porttitor pretium. Donec eu felis ut mauris facilisis suscipit eu ut elit. Proin posuere mauris non bibendum egestas. In vitae lorem et metus rutrum scelerisque. Donec molestie velit ut justo semper accumsan. Praesent placerat metus ut nunc efficitur ultricies. Pellentesque eu massa eros. Curabitur non consequat nibh, nec maximus magna.</font></font></p>
        <p><font size="4"><font face="Calibri">Curabitur id tristique quam, ac viverra erat. Phasellus sed tincidunt leo, faucibus aliquam enim. Morbi varius enim sit amet enim consequat suscipit. Integer accumsan ipsum et tempor dictum. Maecenas malesuada, augue nec cursus placerat, lacus neque finibus diam, non efficitur nisi quam porta mauris. Pellentesque finibus consectetur diam, faucibus fringilla orci vehicula sed. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla malesuada ligula mattis libero commodo sodales.</font></font></p>
        <p><font size="4"><font face="Calibri">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae convallis ipsum. Nam pharetra, massa id placerat posuere, ante odio tempor leo, et egestas justo neque id lorem. Morbi a gravida mi. Etiam ligula nunc, tristique nec risus tincidunt, elementum luctus arcu. Donec sed suscipit diam, quis cursus ex. Nam in hendrerit nunc. Praesent sed elit hendrerit felis cursus condimentum faucibus eget magna. Phasellus sed tortor vel magna laoreet rutrum. Pellentesque tincidunt ante id ligula scelerisque fermentum. Vivamus non diam ut ante finibus tincidunt. Sed pellentesque sollicitudin lorem, sed vehicula eros laoreet nec. Mauris quis efficitur nulla. Maecenas bibendum justo mi, vel maximus ante tristique at.</font></font></p>
        <p><font size="4"><font face="Calibri">Praesent vitae risus pretium, lacinia ligula eu, porttitor elit. Donec rhoncus malesuada odio id egestas. Nam pharetra velit nec egestas eleifend. Ut a mollis mauris, nec scelerisque lorem. Morbi placerat lacinia tortor, in tincidunt lacus viverra sed. Donec sem erat, congue eget pharetra nec, ultrices eget mi. Sed sit amet blandit mauris, id porttitor ante. Proin at tellus vel mauris aliquet convallis semper eget dui. Vivamus vitae sapien a est dapibus cursus ac ut felis. Cras iaculis diam et ligula vulputate scelerisque. Aliquam tristique nisl turpis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean at auctor tortor, sed feugiat ante. Duis quis sem ut dui ultricies consectetur.</font></font></p>
        <p><font size="4"><font face="Calibri">Mauris consequat bibendum diam, vel ultrices elit fermentum eu. Curabitur et ullamcorper metus. Curabitur commodo est id enim elementum vulputate. Integer eleifend facilisis velit ac hendrerit. Phasellus tristique a augue at commodo. Integer egestas neque a risus dapibus tempor. Sed volutpat dictum mi. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec egestas tortor vel ultrices viverra.</font></font></p>
        <p><font size="4"><font face="Calibri">Aenean gravida leo lorem, eu blandit sapien porta non. Cras at eros imperdiet, suscipit diam vel, feugiat turpis. In cursus blandit varius. Suspendisse scelerisque lectus tortor, et luctus ligula varius id. Nullam molestie elementum odio porttitor pretium. Donec eu felis ut mauris facilisis suscipit eu ut elit. Proin posuere mauris non bibendum egestas. In vitae lorem et metus rutrum scelerisque. Donec molestie velit ut justo semper accumsan. Praesent placerat metus ut nunc efficitur ultricies. Pellentesque eu massa eros. Curabitur non consequat nibh, nec maximus magna.</font></font></p>
        <p><font size="4"><font face="Calibri">Curabitur id tristique quam, ac viverra erat. Phasellus sed tincidunt leo, faucibus aliquam enim. Morbi varius enim sit amet enim consequat suscipit. Integer accumsan ipsum et tempor dictum. Maecenas malesuada, augue nec cursus placerat, lacus neque finibus diam, non efficitur nisi quam porta mauris. Pellentesque finibus consectetur diam, faucibus fringilla orci vehicula sed. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla malesuada ligula mattis libero commodo sodales.</font></font></p>
        <p><font size="4"><font face="Calibri">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae convallis ipsum. Nam pharetra, massa id placerat posuere, ante odio tempor leo, et egestas justo neque id lorem. Morbi a gravida mi. Etiam ligula nunc, tristique nec risus tincidunt, elementum luctus arcu. Donec sed suscipit diam, quis cursus ex. Nam in hendrerit nunc. Praesent sed elit hendrerit felis cursus condimentum faucibus eget magna. Phasellus sed tortor vel magna laoreet rutrum. Pellentesque tincidunt ante id ligula scelerisque fermentum. Vivamus non diam ut ante finibus tincidunt. Sed pellentesque sollicitudin lorem, sed vehicula eros laoreet nec. Mauris quis efficitur nulla. Maecenas bibendum justo mi, vel maximus ante tristique at.</font></font></p>
        <p><font size="4"><font face="Calibri">Praesent vitae risus pretium, lacinia ligula eu, porttitor elit. Donec rhoncus malesuada odio id egestas. Nam pharetra velit nec egestas eleifend. Ut a mollis mauris, nec scelerisque lorem. Morbi placerat lacinia tortor, in tincidunt lacus viverra sed. Donec sem erat, congue eget pharetra nec, ultrices eget mi. Sed sit amet blandit mauris, id porttitor ante. Proin at tellus vel mauris aliquet convallis semper eget dui. Vivamus vitae sapien a est dapibus cursus ac ut felis. Cras iaculis diam et ligula vulputate scelerisque. Aliquam tristique nisl turpis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean at auctor tortor, sed feugiat ante. Duis quis sem ut dui ultricies consectetur.</font></font></p>
        <p><font size="4"><font face="Calibri">Mauris consequat bibendum diam, vel ultrices elit fermentum eu. Curabitur et ullamcorper metus. Curabitur commodo est id enim elementum vulputate. Integer eleifend facilisis velit ac hendrerit. Phasellus tristique a augue at commodo. Integer egestas neque a risus dapibus tempor. Sed volutpat dictum mi. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec egestas tortor vel ultrices viverra.</font></font></p>
        <p><font size="4"><font face="Calibri">Aenean gravida leo lorem, eu blandit sapien porta non. Cras at eros imperdiet, suscipit diam vel, feugiat turpis. In cursus blandit varius. Suspendisse scelerisque lectus tortor, et luctus ligula varius id. Nullam molestie elementum odio porttitor pretium. Donec eu felis ut mauris facilisis suscipit eu ut elit. Proin posuere mauris non bibendum egestas. In vitae lorem et metus rutrum scelerisque. Donec molestie velit ut justo semper accumsan. Praesent placerat metus ut nunc efficitur ultricies. Pellentesque eu massa eros. Curabitur non consequat nibh, nec maximus magna.</font></font></p>
        <p><font size="4"><font face="Calibri">Curabitur id tristique quam, ac viverra erat. Phasellus sed tincidunt leo, faucibus aliquam enim. Morbi varius enim sit amet enim consequat suscipit. Integer accumsan ipsum et tempor dictum. Maecenas malesuada, augue nec cursus placerat, lacus neque finibus diam, non efficitur nisi quam porta mauris. Pellentesque finibus consectetur diam, faucibus fringilla orci vehicula sed. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla malesuada ligula mattis libero commodo sodales.</font></font></p>
        <p><font size="4"><font face="Calibri">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae convallis ipsum. Nam pharetra, massa id placerat posuere, ante odio tempor leo, et egestas justo neque id lorem. Morbi a gravida mi. Etiam ligula nunc, tristique nec risus tincidunt, elementum luctus arcu. Donec sed suscipit diam, quis cursus ex. Nam in hendrerit nunc. Praesent sed elit hendrerit felis cursus condimentum faucibus eget magna. Phasellus sed tortor vel magna laoreet rutrum. Pellentesque tincidunt ante id ligula scelerisque fermentum. Vivamus non diam ut ante finibus tincidunt. Sed pellentesque sollicitudin lorem, sed vehicula eros laoreet nec. Mauris quis efficitur nulla. Maecenas bibendum justo mi, vel maximus ante tristique at.</font></font></p>
        <p><font size="4"><font face="Calibri">Praesent vitae risus pretium, lacinia ligula eu, porttitor elit. Donec rhoncus malesuada odio id egestas. Nam pharetra velit nec egestas eleifend. Ut a mollis mauris, nec scelerisque lorem. Morbi placerat lacinia tortor, in tincidunt lacus viverra sed. Donec sem erat, congue eget pharetra nec, ultrices eget mi. Sed sit amet blandit mauris, id porttitor ante. Proin at tellus vel mauris aliquet convallis semper eget dui. Vivamus vitae sapien a est dapibus cursus ac ut felis. Cras iaculis diam et ligula vulputate scelerisque. Aliquam tristique nisl turpis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean at auctor tortor, sed feugiat ante. Duis quis sem ut dui ultricies consectetur.</font></font></p>
        <p><font size="4"><font face="Calibri">Mauris consequat bibendum diam, vel ultrices elit fermentum eu. Curabitur et ullamcorper metus. Curabitur commodo est id enim elementum vulputate. Integer eleifend facilisis velit ac hendrerit. Phasellus tristique a augue at commodo. Integer egestas neque a risus dapibus tempor. Sed volutpat dictum mi. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec egestas tortor vel ultrices viverra.</font></font></p>
        <p><font size="4"><font face="Calibri">Aenean gravida leo lorem, eu blandit sapien porta non. Cras at eros imperdiet, suscipit diam vel, feugiat turpis. In cursus blandit varius. Suspendisse scelerisque lectus tortor, et luctus ligula varius id. Nullam molestie elementum odio porttitor pretium. Donec eu felis ut mauris facilisis suscipit eu ut elit. Proin posuere mauris non bibendum egestas. In vitae lorem et metus rutrum scelerisque. Donec molestie velit ut justo semper accumsan. Praesent placerat metus ut nunc efficitur ultricies. Pellentesque eu massa eros. Curabitur non consequat nibh, nec maximus magna.</font></font></p>
        <p><font size="4"><font face="Calibri">Curabitur id tristique quam, ac viverra erat. Phasellus sed tincidunt leo, faucibus aliquam enim. Morbi varius enim sit amet enim consequat suscipit. Integer accumsan ipsum et tempor dictum. Maecenas malesuada, augue nec cursus placerat, lacus neque finibus diam, non efficitur nisi quam porta mauris. Pellentesque finibus consectetur diam, faucibus fringilla orci vehicula sed. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla malesuada ligula mattis libero commodo sodales.</font></font></p>
        <p><font size="4"><font face="Calibri">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae convallis ipsum. Nam pharetra, massa id placerat posuere, ante odio tempor leo, et egestas justo neque id lorem. Morbi a gravida mi. Etiam ligula nunc, tristique nec risus tincidunt, elementum luctus arcu. Donec sed suscipit diam, quis cursus ex. Nam in hendrerit nunc. Praesent sed elit hendrerit felis cursus condimentum faucibus eget magna. Phasellus sed tortor vel magna laoreet rutrum. Pellentesque tincidunt ante id ligula scelerisque fermentum. Vivamus non diam ut ante finibus tincidunt. Sed pellentesque sollicitudin lorem, sed vehicula eros laoreet nec. Mauris quis efficitur nulla. Maecenas bibendum justo mi, vel maximus ante tristique at.</font></font></p>
        <p><font size="4"><font face="Calibri">Praesent vitae risus pretium, lacinia ligula eu, porttitor elit. Donec rhoncus malesuada odio id egestas. Nam pharetra velit nec egestas eleifend. Ut a mollis mauris, nec scelerisque lorem. Morbi placerat lacinia tortor, in tincidunt lacus viverra sed. Donec sem erat, congue eget pharetra nec, ultrices eget mi. Sed sit amet blandit mauris, id porttitor ante. Proin at tellus vel mauris aliquet convallis semper eget dui. Vivamus vitae sapien a est dapibus cursus ac ut felis. Cras iaculis diam et ligula vulputate scelerisque. Aliquam tristique nisl turpis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean at auctor tortor, sed feugiat ante. Duis quis sem ut dui ultricies consectetur.</font></font></p>
        <p><font size="4"><font face="Calibri">Mauris consequat bibendum diam, vel ultrices elit fermentum eu. Curabitur et ullamcorper metus. Curabitur commodo est id enim elementum vulputate. Integer eleifend facilisis velit ac hendrerit. Phasellus tristique a augue at commodo. Integer egestas neque a risus dapibus tempor. Sed volutpat dictum mi. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec egestas tortor vel ultrices viverra.</font></font></p>
        <p><font size="4"><font face="Calibri">Aenean gravida leo lorem, eu blandit sapien porta non. Cras at eros imperdiet, suscipit diam vel, feugiat turpis. In cursus blandit varius. Suspendisse scelerisque lectus tortor, et luctus ligula varius id. Nullam molestie elementum odio porttitor pretium. Donec eu felis ut mauris facilisis suscipit eu ut elit. Proin posuere mauris non bibendum egestas. In vitae lorem et metus rutrum scelerisque. Donec molestie velit ut justo semper accumsan. Praesent placerat metus ut nunc efficitur ultricies. Pellentesque eu massa eros. Curabitur non consequat nibh, nec maximus magna.</font></font></p>
        <p><font size="4"><font face="Calibri">Curabitur id tristique quam, ac viverra erat. Phasellus sed tincidunt leo, faucibus aliquam enim. Morbi varius enim sit amet enim consequat suscipit. Integer accumsan ipsum et tempor dictum. Maecenas malesuada, augue nec cursus placerat, lacus neque finibus diam, non efficitur nisi quam porta mauris. Pellentesque finibus consectetur diam, faucibus fringilla orci vehicula sed. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla malesuada ligula mattis libero commodo sodales.</font></font></p>
        <p><font size="4"><font face="Calibri">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae convallis ipsum. Nam pharetra, massa id placerat posuere, ante odio tempor leo, et egestas justo neque id lorem. Morbi a gravida mi. Etiam ligula nunc, tristique nec risus tincidunt, elementum luctus arcu. Donec sed suscipit diam, quis cursus ex. Nam in hendrerit nunc. Praesent sed elit hendrerit felis cursus condimentum faucibus eget magna. Phasellus sed tortor vel magna laoreet rutrum. Pellentesque tincidunt ante id ligula scelerisque fermentum. Vivamus non diam ut ante finibus tincidunt. Sed pellentesque sollicitudin lorem, sed vehicula eros laoreet nec. Mauris quis efficitur nulla. Maecenas bibendum justo mi, vel maximus ante tristique at.</font></font></p>
        <p><font size="4"><font face="Calibri">Praesent vitae risus pretium, lacinia ligula eu, porttitor elit. Donec rhoncus malesuada odio id egestas. Nam pharetra velit nec egestas eleifend. Ut a mollis mauris, nec scelerisque lorem. Morbi placerat lacinia tortor, in tincidunt lacus viverra sed. Donec sem erat, congue eget pharetra nec, ultrices eget mi. Sed sit amet blandit mauris, id porttitor ante. Proin at tellus vel mauris aliquet convallis semper eget dui. Vivamus vitae sapien a est dapibus cursus ac ut felis. Cras iaculis diam et ligula vulputate scelerisque. Aliquam tristique nisl turpis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean at auctor tortor, sed feugiat ante. Duis quis sem ut dui ultricies consectetur.</font></font></p>
        <p><font size="4"><font face="Calibri">Mauris consequat bibendum diam, vel ultrices elit fermentum eu. Curabitur et ullamcorper metus. Curabitur commodo est id enim elementum vulputate. Integer eleifend facilisis velit ac hendrerit. Phasellus tristique a augue at commodo. Integer egestas neque a risus dapibus tempor. Sed volutpat dictum mi. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec egestas tortor vel ultrices viverra.</font></font></p>
        <p><font size="4"><font face="Calibri">Aenean gravida leo lorem, eu blandit sapien porta non. Cras at eros imperdiet, suscipit diam vel, feugiat turpis. In cursus blandit varius. Suspendisse scelerisque lectus tortor, et luctus ligula varius id. Nullam molestie elementum odio porttitor pretium. Donec eu felis ut mauris facilisis suscipit eu ut elit. Proin posuere mauris non bibendum egestas. In vitae lorem et metus rutrum scelerisque. Donec molestie velit ut justo semper accumsan. Praesent placerat metus ut nunc efficitur ultricies. Pellentesque eu massa eros. Curabitur non consequat nibh, nec maximus magna.</font></font></p>
        <p><font size="4"><font face="Calibri">Curabitur id tristique quam, ac viverra erat. Phasellus sed tincidunt leo, faucibus aliquam enim. Morbi varius enim sit amet enim consequat suscipit. Integer accumsan ipsum et tempor dictum. Maecenas malesuada, augue nec cursus placerat, lacus neque finibus diam, non efficitur nisi quam porta mauris. Pellentesque finibus consectetur diam, faucibus fringilla orci vehicula sed. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla malesuada ligula mattis libero commodo sodales.</font></font></p>
      
</div>
      </div>
      <!-- fin "container" --> 
    </div>
    <!-- fin "site-content" -->
    <div class="site-cache" id="site-cache"></div>
  </div>
  <!-- fin "site-pusher" --> 
</div>
<!-- fin "site-container" --> 
<script src="javascript\jquery-1.11.1.min.js"></script> 
<script>
$(document).ready(function(){

   (function($) {

      $('#header__icon').click(function(e){
         e.preventDefault();
         $('body').toggleClass('with--sidebar');
      });
    
    $('#site-cache').click(function(e){
      $('body').removeClass('with--sidebar');
    });

   })(jQuery);

});
</script>

   <p id="footer"><font size="3"><font face="Calibri">© Copyright 2016 | All Rights Reserved | Design by <style type="text/css"><!-- a {text-decoration: none;}//--></style><a href="#" target="_blank">Auteur</a></font></font></p>
  </body>
</html>

N'oubliez pas que j'ai inclus le CSS dans la page HTML pour regrouper tout sur le même code mais sur une autre version, je fait appel à mes fichiers CSS. Ce code la est donc un code de test. 😉

Jerem971

Messages: 808

Re:

Je pense avoir réussi à résoudre mon problème lorsque l'on clique sur l'icône hamburger pour ouvrir le menu.
J'ai apporter 2 petites modifications :

-À la ligne 12 :
margin: 0px 0 ;
Puis j'ai déplacer mon "footer" (© Copyright 2016 | All Rights Reserved | Design by Auteur) en dessous de mon texte.

Le seul problème qui me reste maintenant, c'est de pouvoir afficher les images et lorsque le site est responsive (lorsque le menu responsive est fermé), je souhaite que toute la page du site soit scrollable.

Pour info, je me suis baser sur la vidéo de Grafikart.

Jerem971

Messages: 808

Re:

J'ai apporter de nouvelles modifications à mon code mais je n'ai toujours pas trouver pour régler mon problème de scroll... 😤
J'ai pu résoudre mon problème d'affichage pour les images et le contenu de la page.

Voici le code où j'ai apporter de grosses modifications :

<!DOCTYPE html">
<html lang="fr">
  <head><link rel="shortcut icon" href="images\favicon.ico" type="image/x-icon" />
    <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0"/>
    <title>Titre onglet</title>
   
   <link type="text/css" rel="stylesheet" href="css\returnOnTop.css" media="all" />
        <script type="text/javascript" src="javascript\jquery.js"></script>
        <script type="text/javascript" src="javascript\returnOnTop.js"></script>
      <link rel="stylesheet" href="css\zoom.css" type="text/css" media="all"/>


<style type="text/css">
body
{
   margin: 10px 0 ;
   padding: 0 ;
   text-align: left ;
   font: 0.8em "Trebuchet MS", helvetica, sans-serif ;
   background: #FFFFFF ;
}

div#conteneur
{
   width: 100% ;
   margin: 0 auto ;
   text-align: left ;
   border: 0px solid ;
   background: ;
}

h1#header
{
   height: 200px ;
   margin: 0 ;
   background: url("./images/logo.png") no-repeat left top ;
}

.header
{
   padding: 0 ;
   margin: 2.5em 0 ;
   text-align: left ;
}

.nav li 
{
   display: inline ;
   list-style: none ;
}

.nav a
{
   display: inline-block ;
   margin: 0 30px ;
}

#menu .nav
{
   border-top-color: #339526 ;
   background-color: #339526 ;
   background: -moz-linear-gradient(bottom , #339526 0pt, #339526 50%, #339526 51%, #339526 100%) repeat scroll 0 0 transparent ;
   background: -webkit-linear-gradient(bottom , #339526 0pt, #339526 50%, #339526 51%, #339526 100%) repeat scroll 0 0 transparent ;
   background: -ms-linear-gradient(bottom , #339526 0pt, #339526 50%, #339526 51%, #339526 100%) repeat scroll 0 0 transparent ;
   background: -o-linear-gradient(bottom , #339526 0pt, #339526 50%, #339526 51%, #339526 100%) repeat scroll 0 0 transparent ;
   background: linear-gradient(bottom , #339526 0pt, #339526 50%, #339526 51%, #339526 100%) repeat scroll 0 0 transparent ;
   text-align: left ;
   height: 38px ;
}

#menu .nav a
{
   height: 38px ;
   margin: 0 ;
   padding: 0 35px ;
   line-height: 38px ;
   border-right: 4px solid #FFFFFF ;
   text-decoration: none ;
   color: white ;
   font-family: Helvetica, Arial, Verdana, sans-serif ;
   font-size: 1.3em ;
   font-weight : bold ;
}

#menu .nav a:hover
{
   background-color: #A0CE4E ;
   background: -moz-linear-gradient(bottom , #A0CE4E 0pt, #A0CE4E 50%, #A0CE4E 51%, #A0CE4E 100%) repeat scroll 0 0 transparent ;
   background: -webkit-linear-gradient(bottom , #A0CE4E 0pt, #A0CE4E 50%, #A0CE4E 51%, #A0CE4E 100%) repeat scroll 0 0 transparent ;
   background: -ms-linear-gradient(bottom , #A0CE4E 0pt, #A0CE4E 50%, #A0CE4E 51%, #A0CE4E 100%) repeat scroll 0 0 transparent ;
   background: -o-linear-gradient(bottom , #A0CE4E 0pt, #A0CE4E 50%, #A0CE4E 51%, #A0CE4E 100%) repeat scroll 0 0 transparent ;
   background: linear-gradient(bottom , #A0CE4E 0pt, #A0CE4E 50%, #A0CE4E 51%, #A0CE4E 100%) repeat scroll 0 0 transparent ;
}

div#contenu
{
   padding: 0px 0px ;
   background: url("./images/bg_page.gif") no-repeat left 15px 15px ;
}

div#contenu h1
{
   padding-left: 25px ;
   line-height: 25px ;
   font-size: 2em ;
   background: url("./images/little_logo.png") no-repeat left ;
   color: #339526 ;
}

div#contenu h2
{
   padding-left: 25px ;
   line-height: 25px ;
   font-size: 1.8em ;
   background: url("./images/little_logo2.png") no-repeat left ;
   color: #339526 ;
}

div#contenu h3
{
   margin-left: 15px ;
   padding-left: 5px ;
   border-bottom: 1px solid #339526 ;
   border-left: 3px solid #339526 ;
   color: #339526 ;
}

div#contenu p
{
   text-align: justify ;
   text-indent: 0em ;
   line-height: 1.8em ;
}

div#contenu a
{
   color: #A0CE4E ;
}

div#contenu a:hover
{
   color: #339526 ;
}

p#footer
{
   margin: 0 ;
   padding-right: 10px ;
   line-height: 30px ;
   text-align: right ;
   color: #339526 ;
}

p#footer a
{
   color: #339526 ;
}

p#footer a:hover
{
   color: #A0CE4E ;
}

pre
{
   overflow: auto ;
   background: #339526 ;
   border: 2px solid #339526 ;
   padding: 5px 0 0 5px ;
   font-size: 1.2em ;
}

* html pre
{
   width: 636px ;
}

pre span
{
   color: #560 ;
}

pre span.comment
{
   color: #339526 ;
}

.menu_mobile a
{
   height: 38px ;
   margin: 0 ;
   padding: 0 35px;
   line-height: 38px ;
   border-right: 4px solid #FFFFFF ;
   text-decoration: none ;
   color: white ;
   font-family: Helvetica, Arial, Verdana, sans-serif ;
   font-size: 1.3em ;
   font-weight : bold ;
   display: inline-block ;
   margin: 0 0px ;
}

.container {
  overflow: hidden;
 *zoom: 1;
}

.site-content { padding-top: 0px; }

/* HEADER */

.header {
  left: 0;
  right: 0;
  height: 38px;
  color: #FFFFFF;
  background-color: #339526;
}

/* MENU MOBILE */

.menu_mobile
{    
   float: left;
}
.menu_mobile a:hover
{
   background-color: #A0CE4E ;
   background: -moz-linear-gradient(bottom , #A0CE4E 0pt, #A0CE4E 50%, #A0CE4E 51%, #A0CE4E 100%) repeat scroll 0 0 transparent ;
   background: -webkit-linear-gradient(bottom , #A0CE4E 0pt, #A0CE4E 50%, #A0CE4E 51%, #A0CE4E 100%) repeat scroll 0 0 transparent ;
   background: -ms-linear-gradient(bottom , #A0CE4E 0pt, #A0CE4E 50%, #A0CE4E 51%, #A0CE4E 100%) repeat scroll 0 0 transparent ;
   background: -o-linear-gradient(bottom , #A0CE4E 0pt, #A0CE4E 50%, #A0CE4E 51%, #A0CE4E 100%) repeat scroll 0 0 transparent ;
   background: linear-gradient(bottom , #A0CE4E 0pt, #A0CE4E 50%, #A0CE4E 51%, #A0CE4E 100%) repeat scroll 0 0 transparent ;
}


/* RESPONSIVE */
@media only screen and (max-width: 768px) {

.site-pusher,
 .site-container { height: 100%; }

.site-container { overflow: hidden; }

.site-pusher {
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -ms-transform: translateX(0px);
  -webkit-transform: translateX(0px);
  transform: translateX(0px);
}

.site-content {
  position: absolute;
  top: 38px;
  right: 8;
  left: 8;
  bottom: 0;
  padding-top: 15;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}

.header { position: static; }

.header__icon {
  position: relative;
  display: block;
  float: left;
  height: 38px;
  cursor: pointer;
}

.header__icon:after {
  content: '';
  position: absolute;
  display: block;
  width: 1rem;
  height: 0;
  top: 3px;
  left: 18px;
  box-shadow: 0 10px 0 1px #FFFFFF, 0 16px 0 1px #FFFFFF, 0 22px 0 1px #FFFFFF;
}

.menu_mobile 
{
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background-color: #339526;
  /*    overflow-y: scroll;
        -webkit-overflow-scrolling: touch;*/
  width: 250px;
  -ms-transform: translateX(-250px);
  -webkit-transform: translateX(-250px);
  transform: translateX(-250px);
}

.menu_mobile a {
  display: block;
  height: 38px;
  text-align: center;
  line-height: 38px;
  border-bottom: 4px solid #FFFFFF;
  border-right : none
}

.with--sidebar .site-pusher {
  -ms-transform: translateX(250px);
  -webkit-transform: translateX(250px);
  transform: translateX(250px);
}

.with--sidebar .site-cache {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.6);
}
}
body {background:url(./images/banniere.jpg) no-repeat top center;}
</style>

  <body style="border-left-style: solid; border-left-width: 0px; margin-top: 0px; margin-bottom: 0px;"></body>
  <div id="conteneur">
  <div class="container">
   <h1 id="header" 0px;"="" margin-top:="" 0px;="" style"margin-left:="" style="margin-top: 0px;"></h1>

<div class="menu" id="menu">

<div class="site-container">
  <div class="site-pusher">
    <header class="header"> <a href="#" class="header__icon" id="header__icon" style="border-right-width: 0px; padding-right: 54px"></a>
        <nav class="menu_mobile"><!--
         --><a href="#">Accueil</a><!--
         --><a href="#">Blog</a><!--
         --><a href="#">Social</a><!--
         --><a href="#">Contact</a><!--
         --><a href="#">À propos</a>
   </nav>
    </header>
   <div id="contenu" style="margin-right: 8px; margin-left: 8px;">
    <div class="site-content">
      <div class="jquery-script-ads"><script type="text/javascript"><!--
google_ad_client = "ca-pub-2783044520727903";
/* jQuery_demo */
google_ad_slot = "2780937993";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
      <h1 style="color: green;">TITRE PRINCIPALE</h1>
      <h2 style="color: green;">SOUS-TITRE</h2>
        <p><font size="4"><font face="Calibri">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae convallis ipsum. Nam pharetra, massa id placerat posuere, ante odio tempor leo, et egestas justo neque id lorem. Morbi a gravida mi. Etiam ligula nunc, tristique nec risus tincidunt, elementum luctus arcu. Donec sed suscipit diam, quis cursus ex. Nam in hendrerit nunc. Praesent sed elit hendrerit felis cursus condimentum faucibus eget magna. Phasellus sed tortor vel magna laoreet rutrum. Pellentesque tincidunt ante id ligula scelerisque fermentum. Vivamus non diam ut ante finibus tincidunt. Sed pellentesque sollicitudin lorem, sed vehicula eros laoreet nec. Mauris quis efficitur nulla. Maecenas bibendum justo mi, vel maximus ante tristique at.</font></font></p>
        <p><font size="4"><font face="Calibri">Praesent vitae risus pretium, lacinia ligula eu, porttitor elit. Donec rhoncus malesuada odio id egestas. Nam pharetra velit nec egestas eleifend. Ut a mollis mauris, nec scelerisque lorem. Morbi placerat lacinia tortor, in tincidunt lacus viverra sed. Donec sem erat, congue eget pharetra nec, ultrices eget mi. Sed sit amet blandit mauris, id porttitor ante. Proin at tellus vel mauris aliquet convallis semper eget dui. Vivamus vitae sapien a est dapibus cursus ac ut felis. Cras iaculis diam et ligula vulputate scelerisque. Aliquam tristique nisl turpis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean at auctor tortor, sed feugiat ante. Duis quis sem ut dui ultricies consectetur.</font></font></p>
        <p><font size="4"><font face="Calibri">Mauris consequat bibendum diam, vel ultrices elit fermentum eu. Curabitur et ullamcorper metus. Curabitur commodo est id enim elementum vulputate. Integer eleifend facilisis velit ac hendrerit. Phasellus tristique a augue at commodo. Integer egestas neque a risus dapibus tempor. Sed volutpat dictum mi. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec egestas tortor vel ultrices viverra.</font></font></p>
        <p><font size="4"><font face="Calibri">Aenean gravida leo lorem, eu blandit sapien porta non. Cras at eros imperdiet, suscipit diam vel, feugiat turpis. In cursus blandit varius. Suspendisse scelerisque lectus tortor, et luctus ligula varius id. Nullam molestie elementum odio porttitor pretium. Donec eu felis ut mauris facilisis suscipit eu ut elit. Proin posuere mauris non bibendum egestas. In vitae lorem et metus rutrum scelerisque. Donec molestie velit ut justo semper accumsan. Praesent placerat metus ut nunc efficitur ultricies. Pellentesque eu massa eros. Curabitur non consequat nibh, nec maximus magna.</font></font></p>
        <p><font size="4"><font face="Calibri">Curabitur id tristique quam, ac viverra erat. Phasellus sed tincidunt leo, faucibus aliquam enim. Morbi varius enim sit amet enim consequat suscipit. Integer accumsan ipsum et tempor dictum. Maecenas malesuada, augue nec cursus placerat, lacus neque finibus diam, non efficitur nisi quam porta mauris. Pellentesque finibus consectetur diam, faucibus fringilla orci vehicula sed. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla malesuada ligula mattis libero commodo sodales.</font></font></p>
        <p><font size="4"><font face="Calibri">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae convallis ipsum. Nam pharetra, massa id placerat posuere, ante odio tempor leo, et egestas justo neque id lorem. Morbi a gravida mi. Etiam ligula nunc, tristique nec risus tincidunt, elementum luctus arcu. Donec sed suscipit diam, quis cursus ex. Nam in hendrerit nunc. Praesent sed elit hendrerit felis cursus condimentum faucibus eget magna. Phasellus sed tortor vel magna laoreet rutrum. Pellentesque tincidunt ante id ligula scelerisque fermentum. Vivamus non diam ut ante finibus tincidunt. Sed pellentesque sollicitudin lorem, sed vehicula eros laoreet nec. Mauris quis efficitur nulla. Maecenas bibendum justo mi, vel maximus ante tristique at.</font></font></p>
        <p><font size="4"><font face="Calibri">Praesent vitae risus pretium, lacinia ligula eu, porttitor elit. Donec rhoncus malesuada odio id egestas. Nam pharetra velit nec egestas eleifend. Ut a mollis mauris, nec scelerisque lorem. Morbi placerat lacinia tortor, in tincidunt lacus viverra sed. Donec sem erat, congue eget pharetra nec, ultrices eget mi. Sed sit amet blandit mauris, id porttitor ante. Proin at tellus vel mauris aliquet convallis semper eget dui. Vivamus vitae sapien a est dapibus cursus ac ut felis. Cras iaculis diam et ligula vulputate scelerisque. Aliquam tristique nisl turpis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean at auctor tortor, sed feugiat ante. Duis quis sem ut dui ultricies consectetur.</font></font></p>
        <p><font size="4"><font face="Calibri">Mauris consequat bibendum diam, vel ultrices elit fermentum eu. Curabitur et ullamcorper metus. Curabitur commodo est id enim elementum vulputate. Integer eleifend facilisis velit ac hendrerit. Phasellus tristique a augue at commodo. Integer egestas neque a risus dapibus tempor. Sed volutpat dictum mi. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec egestas tortor vel ultrices viverra.</font></font></p>
        <p><font size="4"><font face="Calibri">Aenean gravida leo lorem, eu blandit sapien porta non. Cras at eros imperdiet, suscipit diam vel, feugiat turpis. In cursus blandit varius. Suspendisse scelerisque lectus tortor, et luctus ligula varius id. Nullam molestie elementum odio porttitor pretium. Donec eu felis ut mauris facilisis suscipit eu ut elit. Proin posuere mauris non bibendum egestas. In vitae lorem et metus rutrum scelerisque. Donec molestie velit ut justo semper accumsan. Praesent placerat metus ut nunc efficitur ultricies. Pellentesque eu massa eros. Curabitur non consequat nibh, nec maximus magna.</font></font></p>
        <p><font size="4"><font face="Calibri">Curabitur id tristique quam, ac viverra erat. Phasellus sed tincidunt leo, faucibus aliquam enim. Morbi varius enim sit amet enim consequat suscipit. Integer accumsan ipsum et tempor dictum. Maecenas malesuada, augue nec cursus placerat, lacus neque finibus diam, non efficitur nisi quam porta mauris. Pellentesque finibus consectetur diam, faucibus fringilla orci vehicula sed. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla malesuada ligula mattis libero commodo sodales.</font></font></p>
        <p><font size="4"><font face="Calibri">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae convallis ipsum. Nam pharetra, massa id placerat posuere, ante odio tempor leo, et egestas justo neque id lorem. Morbi a gravida mi. Etiam ligula nunc, tristique nec risus tincidunt, elementum luctus arcu. Donec sed suscipit diam, quis cursus ex. Nam in hendrerit nunc. Praesent sed elit hendrerit felis cursus condimentum faucibus eget magna. Phasellus sed tortor vel magna laoreet rutrum. Pellentesque tincidunt ante id ligula scelerisque fermentum. Vivamus non diam ut ante finibus tincidunt. Sed pellentesque sollicitudin lorem, sed vehicula eros laoreet nec. Mauris quis efficitur nulla. Maecenas bibendum justo mi, vel maximus ante tristique at.</font></font></p>
        <p><font size="4"><font face="Calibri">Praesent vitae risus pretium, lacinia ligula eu, porttitor elit. Donec rhoncus malesuada odio id egestas. Nam pharetra velit nec egestas eleifend. Ut a mollis mauris, nec scelerisque lorem. Morbi placerat lacinia tortor, in tincidunt lacus viverra sed. Donec sem erat, congue eget pharetra nec, ultrices eget mi. Sed sit amet blandit mauris, id porttitor ante. Proin at tellus vel mauris aliquet convallis semper eget dui. Vivamus vitae sapien a est dapibus cursus ac ut felis. Cras iaculis diam et ligula vulputate scelerisque. Aliquam tristique nisl turpis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean at auctor tortor, sed feugiat ante. Duis quis sem ut dui ultricies consectetur.</font></font></p>
        <p><font size="4"><font face="Calibri">Mauris consequat bibendum diam, vel ultrices elit fermentum eu. Curabitur et ullamcorper metus. Curabitur commodo est id enim elementum vulputate. Integer eleifend facilisis velit ac hendrerit. Phasellus tristique a augue at commodo. Integer egestas neque a risus dapibus tempor. Sed volutpat dictum mi. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec egestas tortor vel ultrices viverra.</font></font></p>
        <p><font size="4"><font face="Calibri">Aenean gravida leo lorem, eu blandit sapien porta non. Cras at eros imperdiet, suscipit diam vel, feugiat turpis. In cursus blandit varius. Suspendisse scelerisque lectus tortor, et luctus ligula varius id. Nullam molestie elementum odio porttitor pretium. Donec eu felis ut mauris facilisis suscipit eu ut elit. Proin posuere mauris non bibendum egestas. In vitae lorem et metus rutrum scelerisque. Donec molestie velit ut justo semper accumsan. Praesent placerat metus ut nunc efficitur ultricies. Pellentesque eu massa eros. Curabitur non consequat nibh, nec maximus magna.</font></font></p>
        <p><font size="4"><font face="Calibri">Curabitur id tristique quam, ac viverra erat. Phasellus sed tincidunt leo, faucibus aliquam enim. Morbi varius enim sit amet enim consequat suscipit. Integer accumsan ipsum et tempor dictum. Maecenas malesuada, augue nec cursus placerat, lacus neque finibus diam, non efficitur nisi quam porta mauris. Pellentesque finibus consectetur diam, faucibus fringilla orci vehicula sed. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla malesuada ligula mattis libero commodo sodales.</font></font></p>
        <p><font size="4"><font face="Calibri">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae convallis ipsum. Nam pharetra, massa id placerat posuere, ante odio tempor leo, et egestas justo neque id lorem. Morbi a gravida mi. Etiam ligula nunc, tristique nec risus tincidunt, elementum luctus arcu. Donec sed suscipit diam, quis cursus ex. Nam in hendrerit nunc. Praesent sed elit hendrerit felis cursus condimentum faucibus eget magna. Phasellus sed tortor vel magna laoreet rutrum. Pellentesque tincidunt ante id ligula scelerisque fermentum. Vivamus non diam ut ante finibus tincidunt. Sed pellentesque sollicitudin lorem, sed vehicula eros laoreet nec. Mauris quis efficitur nulla. Maecenas bibendum justo mi, vel maximus ante tristique at.</font></font></p>
        <p><font size="4"><font face="Calibri">Praesent vitae risus pretium, lacinia ligula eu, porttitor elit. Donec rhoncus malesuada odio id egestas. Nam pharetra velit nec egestas eleifend. Ut a mollis mauris, nec scelerisque lorem. Morbi placerat lacinia tortor, in tincidunt lacus viverra sed. Donec sem erat, congue eget pharetra nec, ultrices eget mi. Sed sit amet blandit mauris, id porttitor ante. Proin at tellus vel mauris aliquet convallis semper eget dui. Vivamus vitae sapien a est dapibus cursus ac ut felis. Cras iaculis diam et ligula vulputate scelerisque. Aliquam tristique nisl turpis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean at auctor tortor, sed feugiat ante. Duis quis sem ut dui ultricies consectetur.</font></font></p>
        <p><font size="4"><font face="Calibri">Mauris consequat bibendum diam, vel ultrices elit fermentum eu. Curabitur et ullamcorper metus. Curabitur commodo est id enim elementum vulputate. Integer eleifend facilisis velit ac hendrerit. Phasellus tristique a augue at commodo. Integer egestas neque a risus dapibus tempor. Sed volutpat dictum mi. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec egestas tortor vel ultrices viverra.</font></font></p>
        <p><font size="4"><font face="Calibri">Aenean gravida leo lorem, eu blandit sapien porta non. Cras at eros imperdiet, suscipit diam vel, feugiat turpis. In cursus blandit varius. Suspendisse scelerisque lectus tortor, et luctus ligula varius id. Nullam molestie elementum odio porttitor pretium. Donec eu felis ut mauris facilisis suscipit eu ut elit. Proin posuere mauris non bibendum egestas. In vitae lorem et metus rutrum scelerisque. Donec molestie velit ut justo semper accumsan. Praesent placerat metus ut nunc efficitur ultricies. Pellentesque eu massa eros. Curabitur non consequat nibh, nec maximus magna.</font></font></p>
        <p><font size="4"><font face="Calibri">Curabitur id tristique quam, ac viverra erat. Phasellus sed tincidunt leo, faucibus aliquam enim. Morbi varius enim sit amet enim consequat suscipit. Integer accumsan ipsum et tempor dictum. Maecenas malesuada, augue nec cursus placerat, lacus neque finibus diam, non efficitur nisi quam porta mauris. Pellentesque finibus consectetur diam, faucibus fringilla orci vehicula sed. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla malesuada ligula mattis libero commodo sodales.</font></font></p>
        <p><font size="4"><font face="Calibri">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae convallis ipsum. Nam pharetra, massa id placerat posuere, ante odio tempor leo, et egestas justo neque id lorem. Morbi a gravida mi. Etiam ligula nunc, tristique nec risus tincidunt, elementum luctus arcu. Donec sed suscipit diam, quis cursus ex. Nam in hendrerit nunc. Praesent sed elit hendrerit felis cursus condimentum faucibus eget magna. Phasellus sed tortor vel magna laoreet rutrum. Pellentesque tincidunt ante id ligula scelerisque fermentum. Vivamus non diam ut ante finibus tincidunt. Sed pellentesque sollicitudin lorem, sed vehicula eros laoreet nec. Mauris quis efficitur nulla. Maecenas bibendum justo mi, vel maximus ante tristique at.</font></font></p>
        <p><font size="4"><font face="Calibri">Praesent vitae risus pretium, lacinia ligula eu, porttitor elit. Donec rhoncus malesuada odio id egestas. Nam pharetra velit nec egestas eleifend. Ut a mollis mauris, nec scelerisque lorem. Morbi placerat lacinia tortor, in tincidunt lacus viverra sed. Donec sem erat, congue eget pharetra nec, ultrices eget mi. Sed sit amet blandit mauris, id porttitor ante. Proin at tellus vel mauris aliquet convallis semper eget dui. Vivamus vitae sapien a est dapibus cursus ac ut felis. Cras iaculis diam et ligula vulputate scelerisque. Aliquam tristique nisl turpis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean at auctor tortor, sed feugiat ante. Duis quis sem ut dui ultricies consectetur.</font></font></p>
        <p><font size="4"><font face="Calibri">Mauris consequat bibendum diam, vel ultrices elit fermentum eu. Curabitur et ullamcorper metus. Curabitur commodo est id enim elementum vulputate. Integer eleifend facilisis velit ac hendrerit. Phasellus tristique a augue at commodo. Integer egestas neque a risus dapibus tempor. Sed volutpat dictum mi. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec egestas tortor vel ultrices viverra.</font></font></p>
        <p><font size="4"><font face="Calibri">Aenean gravida leo lorem, eu blandit sapien porta non. Cras at eros imperdiet, suscipit diam vel, feugiat turpis. In cursus blandit varius. Suspendisse scelerisque lectus tortor, et luctus ligula varius id. Nullam molestie elementum odio porttitor pretium. Donec eu felis ut mauris facilisis suscipit eu ut elit. Proin posuere mauris non bibendum egestas. In vitae lorem et metus rutrum scelerisque. Donec molestie velit ut justo semper accumsan. Praesent placerat metus ut nunc efficitur ultricies. Pellentesque eu massa eros. Curabitur non consequat nibh, nec maximus magna.</font></font></p>
        <p><font size="4"><font face="Calibri">Curabitur id tristique quam, ac viverra erat. Phasellus sed tincidunt leo, faucibus aliquam enim. Morbi varius enim sit amet enim consequat suscipit. Integer accumsan ipsum et tempor dictum. Maecenas malesuada, augue nec cursus placerat, lacus neque finibus diam, non efficitur nisi quam porta mauris. Pellentesque finibus consectetur diam, faucibus fringilla orci vehicula sed. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla malesuada ligula mattis libero commodo sodales.</font></font></p>
        <p><font size="4"><font face="Calibri">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae convallis ipsum. Nam pharetra, massa id placerat posuere, ante odio tempor leo, et egestas justo neque id lorem. Morbi a gravida mi. Etiam ligula nunc, tristique nec risus tincidunt, elementum luctus arcu. Donec sed suscipit diam, quis cursus ex. Nam in hendrerit nunc. Praesent sed elit hendrerit felis cursus condimentum faucibus eget magna. Phasellus sed tortor vel magna laoreet rutrum. Pellentesque tincidunt ante id ligula scelerisque fermentum. Vivamus non diam ut ante finibus tincidunt. Sed pellentesque sollicitudin lorem, sed vehicula eros laoreet nec. Mauris quis efficitur nulla. Maecenas bibendum justo mi, vel maximus ante tristique at.</font></font></p>
        <p><font size="4"><font face="Calibri">Praesent vitae risus pretium, lacinia ligula eu, porttitor elit. Donec rhoncus malesuada odio id egestas. Nam pharetra velit nec egestas eleifend. Ut a mollis mauris, nec scelerisque lorem. Morbi placerat lacinia tortor, in tincidunt lacus viverra sed. Donec sem erat, congue eget pharetra nec, ultrices eget mi. Sed sit amet blandit mauris, id porttitor ante. Proin at tellus vel mauris aliquet convallis semper eget dui. Vivamus vitae sapien a est dapibus cursus ac ut felis. Cras iaculis diam et ligula vulputate scelerisque. Aliquam tristique nisl turpis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean at auctor tortor, sed feugiat ante. Duis quis sem ut dui ultricies consectetur.</font></font></p>
        <p><font size="4"><font face="Calibri">Mauris consequat bibendum diam, vel ultrices elit fermentum eu. Curabitur et ullamcorper metus. Curabitur commodo est id enim elementum vulputate. Integer eleifend facilisis velit ac hendrerit. Phasellus tristique a augue at commodo. Integer egestas neque a risus dapibus tempor. Sed volutpat dictum mi. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec egestas tortor vel ultrices viverra.</font></font></p>
        <p><font size="4"><font face="Calibri">Aenean gravida leo lorem, eu blandit sapien porta non. Cras at eros imperdiet, suscipit diam vel, feugiat turpis. In cursus blandit varius. Suspendisse scelerisque lectus tortor, et luctus ligula varius id. Nullam molestie elementum odio porttitor pretium. Donec eu felis ut mauris facilisis suscipit eu ut elit. Proin posuere mauris non bibendum egestas. In vitae lorem et metus rutrum scelerisque. Donec molestie velit ut justo semper accumsan. Praesent placerat metus ut nunc efficitur ultricies. Pellentesque eu massa eros. Curabitur non consequat nibh, nec maximus magna.</font></font></p>
        <p><font size="4"><font face="Calibri">Curabitur id tristique quam, ac viverra erat. Phasellus sed tincidunt leo, faucibus aliquam enim. Morbi varius enim sit amet enim consequat suscipit. Integer accumsan ipsum et tempor dictum. Maecenas malesuada, augue nec cursus placerat, lacus neque finibus diam, non efficitur nisi quam porta mauris. Pellentesque finibus consectetur diam, faucibus fringilla orci vehicula sed. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla malesuada ligula mattis libero commodo sodales.</font></font></p>
        <p><font size="4"><font face="Calibri">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae convallis ipsum. Nam pharetra, massa id placerat posuere, ante odio tempor leo, et egestas justo neque id lorem. Morbi a gravida mi. Etiam ligula nunc, tristique nec risus tincidunt, elementum luctus arcu. Donec sed suscipit diam, quis cursus ex. Nam in hendrerit nunc. Praesent sed elit hendrerit felis cursus condimentum faucibus eget magna. Phasellus sed tortor vel magna laoreet rutrum. Pellentesque tincidunt ante id ligula scelerisque fermentum. Vivamus non diam ut ante finibus tincidunt. Sed pellentesque sollicitudin lorem, sed vehicula eros laoreet nec. Mauris quis efficitur nulla. Maecenas bibendum justo mi, vel maximus ante tristique at.</font></font></p>
        <p><font size="4"><font face="Calibri">Praesent vitae risus pretium, lacinia ligula eu, porttitor elit. Donec rhoncus malesuada odio id egestas. Nam pharetra velit nec egestas eleifend. Ut a mollis mauris, nec scelerisque lorem. Morbi placerat lacinia tortor, in tincidunt lacus viverra sed. Donec sem erat, congue eget pharetra nec, ultrices eget mi. Sed sit amet blandit mauris, id porttitor ante. Proin at tellus vel mauris aliquet convallis semper eget dui. Vivamus vitae sapien a est dapibus cursus ac ut felis. Cras iaculis diam et ligula vulputate scelerisque. Aliquam tristique nisl turpis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean at auctor tortor, sed feugiat ante. Duis quis sem ut dui ultricies consectetur.</font></font></p>
        <p><font size="4"><font face="Calibri">Mauris consequat bibendum diam, vel ultrices elit fermentum eu. Curabitur et ullamcorper metus. Curabitur commodo est id enim elementum vulputate. Integer eleifend facilisis velit ac hendrerit. Phasellus tristique a augue at commodo. Integer egestas neque a risus dapibus tempor. Sed volutpat dictum mi. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec egestas tortor vel ultrices viverra.</font></font></p>
        <p><font size="4"><font face="Calibri">Aenean gravida leo lorem, eu blandit sapien porta non. Cras at eros imperdiet, suscipit diam vel, feugiat turpis. In cursus blandit varius. Suspendisse scelerisque lectus tortor, et luctus ligula varius id. Nullam molestie elementum odio porttitor pretium. Donec eu felis ut mauris facilisis suscipit eu ut elit. Proin posuere mauris non bibendum egestas. In vitae lorem et metus rutrum scelerisque. Donec molestie velit ut justo semper accumsan. Praesent placerat metus ut nunc efficitur ultricies. Pellentesque eu massa eros. Curabitur non consequat nibh, nec maximus magna.</font></font></p>
        <p><font size="4"><font face="Calibri">Curabitur id tristique quam, ac viverra erat. Phasellus sed tincidunt leo, faucibus aliquam enim. Morbi varius enim sit amet enim consequat suscipit. Integer accumsan ipsum et tempor dictum. Maecenas malesuada, augue nec cursus placerat, lacus neque finibus diam, non efficitur nisi quam porta mauris. Pellentesque finibus consectetur diam, faucibus fringilla orci vehicula sed. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla malesuada ligula mattis libero commodo sodales.</font></font></p>
        <p><font size="4"><font face="Calibri">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae convallis ipsum. Nam pharetra, massa id placerat posuere, ante odio tempor leo, et egestas justo neque id lorem. Morbi a gravida mi. Etiam ligula nunc, tristique nec risus tincidunt, elementum luctus arcu. Donec sed suscipit diam, quis cursus ex. Nam in hendrerit nunc. Praesent sed elit hendrerit felis cursus condimentum faucibus eget magna. Phasellus sed tortor vel magna laoreet rutrum. Pellentesque tincidunt ante id ligula scelerisque fermentum. Vivamus non diam ut ante finibus tincidunt. Sed pellentesque sollicitudin lorem, sed vehicula eros laoreet nec. Mauris quis efficitur nulla. Maecenas bibendum justo mi, vel maximus ante tristique at.</font></font></p>
        <p><font size="4"><font face="Calibri">Praesent vitae risus pretium, lacinia ligula eu, porttitor elit. Donec rhoncus malesuada odio id egestas. Nam pharetra velit nec egestas eleifend. Ut a mollis mauris, nec scelerisque lorem. Morbi placerat lacinia tortor, in tincidunt lacus viverra sed. Donec sem erat, congue eget pharetra nec, ultrices eget mi. Sed sit amet blandit mauris, id porttitor ante. Proin at tellus vel mauris aliquet convallis semper eget dui. Vivamus vitae sapien a est dapibus cursus ac ut felis. Cras iaculis diam et ligula vulputate scelerisque. Aliquam tristique nisl turpis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean at auctor tortor, sed feugiat ante. Duis quis sem ut dui ultricies consectetur.</font></font></p>
        <p><font size="4"><font face="Calibri">Mauris consequat bibendum diam, vel ultrices elit fermentum eu. Curabitur et ullamcorper metus. Curabitur commodo est id enim elementum vulputate. Integer eleifend facilisis velit ac hendrerit. Phasellus tristique a augue at commodo. Integer egestas neque a risus dapibus tempor. Sed volutpat dictum mi. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec egestas tortor vel ultrices viverra.</font></font></p>
        <p><font size="4"><font face="Calibri">Aenean gravida leo lorem, eu blandit sapien porta non. Cras at eros imperdiet, suscipit diam vel, feugiat turpis. In cursus blandit varius. Suspendisse scelerisque lectus tortor, et luctus ligula varius id. Nullam molestie elementum odio porttitor pretium. Donec eu felis ut mauris facilisis suscipit eu ut elit. Proin posuere mauris non bibendum egestas. In vitae lorem et metus rutrum scelerisque. Donec molestie velit ut justo semper accumsan. Praesent placerat metus ut nunc efficitur ultricies. Pellentesque eu massa eros. Curabitur non consequat nibh, nec maximus magna.</font></font></p>
        <p><font size="4"><font face="Calibri">Curabitur id tristique quam, ac viverra erat. Phasellus sed tincidunt leo, faucibus aliquam enim. Morbi varius enim sit amet enim consequat suscipit. Integer accumsan ipsum et tempor dictum. Maecenas malesuada, augue nec cursus placerat, lacus neque finibus diam, non efficitur nisi quam porta mauris. Pellentesque finibus consectetur diam, faucibus fringilla orci vehicula sed. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla malesuada ligula mattis libero commodo sodales.</font></font></p>
      <br></br>


</div>
      </div>
      <!-- fin "container" --> 
    </div>
    <!-- fin "site-content" -->
    <div class="site-cache" id="site-cache"></div>
  </div>
  <!-- fin "site-pusher" --> 
</div>
<!-- fin "site-container" --> 
<script src="javascript\jquery-1.11.1.min.js"></script> 
<script>
$(document).ready(function(){

   (function($) {

      $('#header__icon').click(function(e){
         e.preventDefault();
         $('body').toggleClass('with--sidebar');
      });
    
    $('#site-cache').click(function(e){
      $('body').removeClass('with--sidebar');
    });

   })(jQuery);

});
</script>

   <p id="footer"><font size="3"><font face="Calibri">© Copyright 2016 | All Rights Reserved | Design by <style type="text/css"><!-- a {text-decoration: none;}//--></style><a href="#" target="_blank">Auteur</a></font></font></p>
  </body>
</html>

Voilà, comme dis précédemment, je n'ai toujours pas trouver pour régler mon problème de scroll 😤 Il y a 2 barres de scroll quand le site est responsive, quand le menu est fermé, or je souhaite qu'il y ai une seul barre qui permet de scroller tout le site quand le menu est fermé et quand il est ouvert, qu'il n'y est plus de scroll. Je vous parle uniquement de la version mobile du site, la version PC est bonne, il n'y a pas de problème 😉
Je pense que cela se passe au niveau de "site-content", comment lui dire de scroller toute la page lorsque la taille de la fenêtre est celle du smartphone quand le menu responsive est fermé et de ne pas scroller quand le menu responsive est ouvert ?
N'oublier pas que le code poster n'est pas le code final, il s'agit justement d'une adaptation pour que vous voyez à la fois les différents langage HTML, CSS et Javascript.

J'ai besoin de votre aide, cher communauté de PrimFX 😀 C'est le seul problème à résoudre et le topic sera résolu 😀

TheOldNoob

Messages: 909

Pour le scrool tu peu utilisé l'attribu overflow-y : scrool

Jerem971

Messages: 808

Re:

Pour le scrool tu peu utilisé l'attribu overflow-y : scrool
Si tu avais pris le temps de regarder mon code source et le problème que je rencontre, tu aurais vu que cette fonction est déjà utiliser... 😒

Jerem971

Messages: 808

Re:

Le code JQuery utilisé à la ligne 412 du dernier code posté est disponible ici si cela peut vous aider à résoudre mon problème. Je pense que sans le JQuery, vous ne pouvez rien faire 😜 Les autres codes qui sont appeler ne sont pas important, c'est juste le design du site.
En espérant que quelqu'un pourra m'aider... 😫😰

Jerem971

Messages: 808

Re:

Quelques nouveautés ! 😄 J'ai finalement réussi à obtenir ce que je voulais : pouvoir scroller toute la page que ce soit en version PC ou mobile... Le menu fonctionne comme je le souhaite : sur la version mobile quand on clique sur l'icône hamburger, cela révèle alors les éléments cachés, mais j'ai encore un autre problème... 😒😰😤😠😕

En effet comme dit plus haut, en ce qui concerne la navigation de la page, j'ai finalement réussi à trouver, tout en corrigeant mes erreurs dans mon code, j'ai supprimé des éléments et j'ai déplacé des éléments...
Voilà maintenant mon nouveau problème : Sur la version mobile, après avoir cliquer sur l'icône hamburger, (pour l'instant tout va bien, il fait ce que je lui demande, révéler les éléments cachés (Accueil, Blog, Social, Contact, À propos))... MAIS ON PEUT SCROLLER HORIZONTALEMENT ET VERTICALEMENT ! NON ! 😤
J'ai découvert cela grâce à l'émulateur de Google Chrome (Ouvrez Google Chrome > Clic droit sur la page > "Inspecter" > "Toogle device toolbar"
Vous l'aurez compris, je souhaite que lorsque le menu (sur la version mobile) est ouvert (après avoir cliquer sur l'icône hamburger) qu'il n'y est plus de scroll ! (Et bien sûr quand on clique dans le vide pour fermer le menu, la possibilité de scroller est disponible à nouveau)
J'ai pensé à du JavaScript mais je ne sais pas si c'est possible de réaliser cela...

Je vous montre quand-même la nouvelle version du code avec mes améliorations...

<!DOCTYPE html">
<html lang="fr">
  <head><link rel="shortcut icon" href="images\favicon.ico" type="image/x-icon" />
    <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0"/>
    <title>Titre onglet</title>
   
   <link type="text/css" rel="stylesheet" href="css\returnOnTop.css" media="all" />
        <script type="text/javascript" src="javascript\jquery.js"></script>
        <script type="text/javascript" src="javascript\returnOnTop.js"></script>
      <link rel="stylesheet" href="css\zoom.css" type="text/css" media="all"/>
      <script type="text/javascript" src="javascript\jquery-1.11.1.min.js"></script>


<style type="text/css">
body
{
   margin: 10px 0 ;
   padding: 0 ;
   text-align: left ;
   font: 0.8em "Trebuchet MS", helvetica, sans-serif ;
   background: #FFFFFF ;
}

div#conteneur
{
   width: 100% ;
   margin: 0 auto ;
   text-align: left ;
   border: 0px solid ;
   background: ;
}

h1#header
{
   height: 200px ;
   margin: 0 ;
   background: url("./images/logo.png") no-repeat left top ;
}

.header
{
   padding: 0 ;
   margin: 2.5em 0 ;
   text-align: left ;
}

.nav li 
{
   display: inline ;
   list-style: none ;
}

.nav a
{
   display: inline-block ;
   margin: 0 30px ;
}

#menu .nav
{
   border-top-color: #339526 ;
   background-color: #339526 ;
   background: -moz-linear-gradient(bottom , #339526 0pt, #339526 50%, #339526 51%, #339526 100%) repeat scroll 0 0 transparent ;
   background: -webkit-linear-gradient(bottom , #339526 0pt, #339526 50%, #339526 51%, #339526 100%) repeat scroll 0 0 transparent ;
   background: -ms-linear-gradient(bottom , #339526 0pt, #339526 50%, #339526 51%, #339526 100%) repeat scroll 0 0 transparent ;
   background: -o-linear-gradient(bottom , #339526 0pt, #339526 50%, #339526 51%, #339526 100%) repeat scroll 0 0 transparent ;
   background: linear-gradient(bottom , #339526 0pt, #339526 50%, #339526 51%, #339526 100%) repeat scroll 0 0 transparent ;
   text-align: left ;
   height: 38px ;
}

#menu .nav a
{
   height: 38px ;
   margin: 0 ;
   padding: 0 35px ;
   line-height: 38px ;
   border-right: 4px solid #FFFFFF ;
   text-decoration: none ;
   color: white ;
   font-family: Helvetica, Arial, Verdana, sans-serif ;
   font-size: 1.3em ;
   font-weight : bold ;
}

#menu .nav a:hover
{
   background-color: #A0CE4E ;
   background: -moz-linear-gradient(bottom , #A0CE4E 0pt, #A0CE4E 50%, #A0CE4E 51%, #A0CE4E 100%) repeat scroll 0 0 transparent ;
   background: -webkit-linear-gradient(bottom , #A0CE4E 0pt, #A0CE4E 50%, #A0CE4E 51%, #A0CE4E 100%) repeat scroll 0 0 transparent ;
   background: -ms-linear-gradient(bottom , #A0CE4E 0pt, #A0CE4E 50%, #A0CE4E 51%, #A0CE4E 100%) repeat scroll 0 0 transparent ;
   background: -o-linear-gradient(bottom , #A0CE4E 0pt, #A0CE4E 50%, #A0CE4E 51%, #A0CE4E 100%) repeat scroll 0 0 transparent ;
   background: linear-gradient(bottom , #A0CE4E 0pt, #A0CE4E 50%, #A0CE4E 51%, #A0CE4E 100%) repeat scroll 0 0 transparent ;
}

div#contenu
{
   padding: 0px 0px ;
   background: url("./images/bg_page.gif") no-repeat left 15px 15px ;
}

div#contenu h1
{
   padding-left: 25px ;
   line-height: 25px ;
   font-size: 2em ;
   background: url("./images/little_logo.png") no-repeat left ;
   color: #339526 ;
}

div#contenu h2
{
   padding-left: 25px ;
   line-height: 25px ;
   font-size: 1.8em ;
   background: url("./images/little_logo2.png") no-repeat left ;
   color: #339526 ;
}

div#contenu h3
{
   margin-left: 15px ;
   padding-left: 5px ;
   border-bottom: 1px solid #339526 ;
   border-left: 3px solid #339526 ;
   color: #339526 ;
}

div#contenu p
{
   text-align: justify ;
   text-indent: 0em ;
   line-height: 1.8em ;
}

div#contenu a
{
   color: #A0CE4E ;
}

div#contenu a:hover
{
   color: #339526 ;
}

footer#footer
{
   margin: 0 ;
   padding-right: 10px ;
   line-height: 30px ;
   text-align: right ;
   color: #339526 ;
}

footer#footer a
{
   color: #339526 ;
}

footer#footer a:hover
{
   color: #A0CE4E ;
}

pre
{
   overflow: auto ;
   background: #339526 ;
   border: 2px solid #339526 ;
   padding: 5px 0 0 5px ;
   font-size: 1.2em ;
}

* html pre
{
   width: 636px ;
}

pre span
{
   color: #560 ;
}

pre span.comment
{
   color: #339526 ;
}

.menu_mobile a
{
   height: 38px ;
   margin: 0 ;
   padding: 0 35px;
   line-height: 38px ;
   border-right: 4px solid #FFFFFF ;
   text-decoration: none ;
   color: white ;
   font-family: Helvetica, Arial, Verdana, sans-serif ;
   font-size: 1.3em ;
   font-weight : bold ;
   display: inline-block ;
   margin: 0 0px ;
}

.container {
 *zoom: 1;
}

.site-content { padding-top: 0px; }

/* HEADER */

.header {
  left: 0;
  right: 0;
  height: 38px;
  color: #FFFFFF;
  background-color: #339526;
}

/* MENU MOBILE */

.menu_mobile
{    
   float: left;
}
.menu_mobile a:hover
{
   background-color: #A0CE4E ;
   background: -moz-linear-gradient(bottom , #A0CE4E 0pt, #A0CE4E 50%, #A0CE4E 51%, #A0CE4E 100%) repeat scroll 0 0 transparent ;
   background: -webkit-linear-gradient(bottom , #A0CE4E 0pt, #A0CE4E 50%, #A0CE4E 51%, #A0CE4E 100%) repeat scroll 0 0 transparent ;
   background: -ms-linear-gradient(bottom , #A0CE4E 0pt, #A0CE4E 50%, #A0CE4E 51%, #A0CE4E 100%) repeat scroll 0 0 transparent ;
   background: -o-linear-gradient(bottom , #A0CE4E 0pt, #A0CE4E 50%, #A0CE4E 51%, #A0CE4E 100%) repeat scroll 0 0 transparent ;
   background: linear-gradient(bottom , #A0CE4E 0pt, #A0CE4E 50%, #A0CE4E 51%, #A0CE4E 100%) repeat scroll 0 0 transparent ;
}


/* RESPONSIVE */
@media only screen and (max-width: 768px) {

.site-pusher,
 .site-container { height: 100%; }

.site-pusher {
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -ms-transform: translateX(0px);
  -webkit-transform: translateX(0px);
  transform: translateX(0px);
}

.site-content {
  position: absolute;
  top: 38px;
  right: 8;
  left: 8;
  bottom: 0;
  padding-top: 15;
}

.header { position: static; }

.header__icon {
  position: relative;
  display: block;
  float: left;
  height: 38px;
  cursor: pointer;
}

.header__icon:after {
  content: '';
  position: absolute;
  display: block;
  width: 1rem;
  height: 0;
  top: 3px;
  left: 18px;
  box-shadow: 0 10px 0 1px #FFFFFF, 0 16px 0 1px #FFFFFF, 0 22px 0 1px #FFFFFF;
}

.menu_mobile 
{
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background-color: #339526;
  /*overflow-y: scroll;
  -webkit-overflow-scrolling: touch;*/
  width: 250px;
  -ms-transform: translateX(-250px);
  -webkit-transform: translateX(-250px);
  transform: translateX(-250px);
}

.menu_mobile a {
  display: block;
  height: 38px;
  text-align: center;
  line-height: 38px;
  border-bottom: 4px solid #FFFFFF;
  border-right : none
}

.with--sidebar .site-pusher {
  -ms-transform: translateX(250px);
  -webkit-transform: translateX(250px);
  transform: translateX(250px);
}

.with--sidebar .site-cache {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.6);
}
}
body {background:url(./images/banniere.jpg) no-repeat top center;}
</style>

  <body style="border-left-style: solid; border-left-width: 0px; margin-top: 0px; margin-bottom: 0px; overflow-y: scroll; overflow-x: hidden;"></body>
  <div id="conteneur">
  <div class="container">
   <h1 id="header" 0px;"="" margin-top:="" 0px;="" style"margin-left:="" style="margin-top: 0px;"></h1>

<div class="menu" id="menu">

<div class="site-container">
  <div class="site-pusher">
    <header class="header"> <a href="#" class="header__icon" id="header__icon" style="border-right-width: 0px; padding-right: 54px"></a>
        <nav class="menu_mobile"><!--
         --><a href="#">Accueil</a><!--
         --><a href="#">Blog</a><!--
         --><a href="#">Social</a><!--
         --><a href="#">Contact</a><!--
         --><a href="#">À propos</a>
   </nav>
    </header>
   <div id="contenu" style="margin-right: 8px; margin-left: 8px;">
    <div class="site-content">
      <div class="jquery-script-ads"><script type="text/javascript"><!--
google_ad_client = "ca-pub-2783044520727903";
/* jQuery_demo */
google_ad_slot = "2780937993";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
      <h1 style="color: green;">TITRE PRINCIPALE</h1>
      <h2 style="color: green;">SOUS-TITRE</h2>
        <p><font size="4"><font face="Calibri">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae convallis ipsum. Nam pharetra, massa id placerat posuere, ante odio tempor leo, et egestas justo neque id lorem. Morbi a gravida mi. Etiam ligula nunc, tristique nec risus tincidunt, elementum luctus arcu. Donec sed suscipit diam, quis cursus ex. Nam in hendrerit nunc. Praesent sed elit hendrerit felis cursus condimentum faucibus eget magna. Phasellus sed tortor vel magna laoreet rutrum. Pellentesque tincidunt ante id ligula scelerisque fermentum. Vivamus non diam ut ante finibus tincidunt. Sed pellentesque sollicitudin lorem, sed vehicula eros laoreet nec. Mauris quis efficitur nulla. Maecenas bibendum justo mi, vel maximus ante tristique at.</font></font></p>
        <p><font size="4"><font face="Calibri">Praesent vitae risus pretium, lacinia ligula eu, porttitor elit. Donec rhoncus malesuada odio id egestas. Nam pharetra velit nec egestas eleifend. Ut a mollis mauris, nec scelerisque lorem. Morbi placerat lacinia tortor, in tincidunt lacus viverra sed. Donec sem erat, congue eget pharetra nec, ultrices eget mi. Sed sit amet blandit mauris, id porttitor ante. Proin at tellus vel mauris aliquet convallis semper eget dui. Vivamus vitae sapien a est dapibus cursus ac ut felis. Cras iaculis diam et ligula vulputate scelerisque. Aliquam tristique nisl turpis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean at auctor tortor, sed feugiat ante. Duis quis sem ut dui ultricies consectetur.</font></font></p>
        <p><font size="4"><font face="Calibri">Mauris consequat bibendum diam, vel ultrices elit fermentum eu. Curabitur et ullamcorper metus. Curabitur commodo est id enim elementum vulputate. Integer eleifend facilisis velit ac hendrerit. Phasellus tristique a augue at commodo. Integer egestas neque a risus dapibus tempor. Sed volutpat dictum mi. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec egestas tortor vel ultrices viverra.</font></font></p>
        <p><font size="4"><font face="Calibri">Aenean gravida leo lorem, eu blandit sapien porta non. Cras at eros imperdiet, suscipit diam vel, feugiat turpis. In cursus blandit varius. Suspendisse scelerisque lectus tortor, et luctus ligula varius id. Nullam molestie elementum odio porttitor pretium. Donec eu felis ut mauris facilisis suscipit eu ut elit. Proin posuere mauris non bibendum egestas. In vitae lorem et metus rutrum scelerisque. Donec molestie velit ut justo semper accumsan. Praesent placerat metus ut nunc efficitur ultricies. Pellentesque eu massa eros. Curabitur non consequat nibh, nec maximus magna.</font></font></p>
        <p><font size="4"><font face="Calibri">Curabitur id tristique quam, ac viverra erat. Phasellus sed tincidunt leo, faucibus aliquam enim. Morbi varius enim sit amet enim consequat suscipit. Integer accumsan ipsum et tempor dictum. Maecenas malesuada, augue nec cursus placerat, lacus neque finibus diam, non efficitur nisi quam porta mauris. Pellentesque finibus consectetur diam, faucibus fringilla orci vehicula sed. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla malesuada ligula mattis libero commodo sodales.</font></font></p>
        <p><font size="4"><font face="Calibri">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae convallis ipsum. Nam pharetra, massa id placerat posuere, ante odio tempor leo, et egestas justo neque id lorem. Morbi a gravida mi. Etiam ligula nunc, tristique nec risus tincidunt, elementum luctus arcu. Donec sed suscipit diam, quis cursus ex. Nam in hendrerit nunc. Praesent sed elit hendrerit felis cursus condimentum faucibus eget magna. Phasellus sed tortor vel magna laoreet rutrum. Pellentesque tincidunt ante id ligula scelerisque fermentum. Vivamus non diam ut ante finibus tincidunt. Sed pellentesque sollicitudin lorem, sed vehicula eros laoreet nec. Mauris quis efficitur nulla. Maecenas bibendum justo mi, vel maximus ante tristique at.</font></font></p>
        <p><font size="4"><font face="Calibri">Praesent vitae risus pretium, lacinia ligula eu, porttitor elit. Donec rhoncus malesuada odio id egestas. Nam pharetra velit nec egestas eleifend. Ut a mollis mauris, nec scelerisque lorem. Morbi placerat lacinia tortor, in tincidunt lacus viverra sed. Donec sem erat, congue eget pharetra nec, ultrices eget mi. Sed sit amet blandit mauris, id porttitor ante. Proin at tellus vel mauris aliquet convallis semper eget dui. Vivamus vitae sapien a est dapibus cursus ac ut felis. Cras iaculis diam et ligula vulputate scelerisque. Aliquam tristique nisl turpis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean at auctor tortor, sed feugiat ante. Duis quis sem ut dui ultricies consectetur.</font></font></p>
        <p><font size="4"><font face="Calibri">Mauris consequat bibendum diam, vel ultrices elit fermentum eu. Curabitur et ullamcorper metus. Curabitur commodo est id enim elementum vulputate. Integer eleifend facilisis velit ac hendrerit. Phasellus tristique a augue at commodo. Integer egestas neque a risus dapibus tempor. Sed volutpat dictum mi. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec egestas tortor vel ultrices viverra.</font></font></p>
        <p><font size="4"><font face="Calibri">Aenean gravida leo lorem, eu blandit sapien porta non. Cras at eros imperdiet, suscipit diam vel, feugiat turpis. In cursus blandit varius. Suspendisse scelerisque lectus tortor, et luctus ligula varius id. Nullam molestie elementum odio porttitor pretium. Donec eu felis ut mauris facilisis suscipit eu ut elit. Proin posuere mauris non bibendum egestas. In vitae lorem et metus rutrum scelerisque. Donec molestie velit ut justo semper accumsan. Praesent placerat metus ut nunc efficitur ultricies. Pellentesque eu massa eros. Curabitur non consequat nibh, nec maximus magna.</font></font></p>
        <p><font size="4"><font face="Calibri">Curabitur id tristique quam, ac viverra erat. Phasellus sed tincidunt leo, faucibus aliquam enim. Morbi varius enim sit amet enim consequat suscipit. Integer accumsan ipsum et tempor dictum. Maecenas malesuada, augue nec cursus placerat, lacus neque finibus diam, non efficitur nisi quam porta mauris. Pellentesque finibus consectetur diam, faucibus fringilla orci vehicula sed. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla malesuada ligula mattis libero commodo sodales.</font></font></p>
        <p><font size="4"><font face="Calibri">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae convallis ipsum. Nam pharetra, massa id placerat posuere, ante odio tempor leo, et egestas justo neque id lorem. Morbi a gravida mi. Etiam ligula nunc, tristique nec risus tincidunt, elementum luctus arcu. Donec sed suscipit diam, quis cursus ex. Nam in hendrerit nunc. Praesent sed elit hendrerit felis cursus condimentum faucibus eget magna. Phasellus sed tortor vel magna laoreet rutrum. Pellentesque tincidunt ante id ligula scelerisque fermentum. Vivamus non diam ut ante finibus tincidunt. Sed pellentesque sollicitudin lorem, sed vehicula eros laoreet nec. Mauris quis efficitur nulla. Maecenas bibendum justo mi, vel maximus ante tristique at.</font></font></p>
        <p><font size="4"><font face="Calibri">Praesent vitae risus pretium, lacinia ligula eu, porttitor elit. Donec rhoncus malesuada odio id egestas. Nam pharetra velit nec egestas eleifend. Ut a mollis mauris, nec scelerisque lorem. Morbi placerat lacinia tortor, in tincidunt lacus viverra sed. Donec sem erat, congue eget pharetra nec, ultrices eget mi. Sed sit amet blandit mauris, id porttitor ante. Proin at tellus vel mauris aliquet convallis semper eget dui. Vivamus vitae sapien a est dapibus cursus ac ut felis. Cras iaculis diam et ligula vulputate scelerisque. Aliquam tristique nisl turpis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean at auctor tortor, sed feugiat ante. Duis quis sem ut dui ultricies consectetur.</font></font></p>
        <p><font size="4"><font face="Calibri">Mauris consequat bibendum diam, vel ultrices elit fermentum eu. Curabitur et ullamcorper metus. Curabitur commodo est id enim elementum vulputate. Integer eleifend facilisis velit ac hendrerit. Phasellus tristique a augue at commodo. Integer egestas neque a risus dapibus tempor. Sed volutpat dictum mi. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec egestas tortor vel ultrices viverra.</font></font></p>
        <p><font size="4"><font face="Calibri">Aenean gravida leo lorem, eu blandit sapien porta non. Cras at eros imperdiet, suscipit diam vel, feugiat turpis. In cursus blandit varius. Suspendisse scelerisque lectus tortor, et luctus ligula varius id. Nullam molestie elementum odio porttitor pretium. Donec eu felis ut mauris facilisis suscipit eu ut elit. Proin posuere mauris non bibendum egestas. In vitae lorem et metus rutrum scelerisque. Donec molestie velit ut justo semper accumsan. Praesent placerat metus ut nunc efficitur ultricies. Pellentesque eu massa eros. Curabitur non consequat nibh, nec maximus magna.</font></font></p>
        <p><font size="4"><font face="Calibri">Curabitur id tristique quam, ac viverra erat. Phasellus sed tincidunt leo, faucibus aliquam enim. Morbi varius enim sit amet enim consequat suscipit. Integer accumsan ipsum et tempor dictum. Maecenas malesuada, augue nec cursus placerat, lacus neque finibus diam, non efficitur nisi quam porta mauris. Pellentesque finibus consectetur diam, faucibus fringilla orci vehicula sed. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla malesuada ligula mattis libero commodo sodales.</font></font></p>
        <p><font size="4"><font face="Calibri">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae convallis ipsum. Nam pharetra, massa id placerat posuere, ante odio tempor leo, et egestas justo neque id lorem. Morbi a gravida mi. Etiam ligula nunc, tristique nec risus tincidunt, elementum luctus arcu. Donec sed suscipit diam, quis cursus ex. Nam in hendrerit nunc. Praesent sed elit hendrerit felis cursus condimentum faucibus eget magna. Phasellus sed tortor vel magna laoreet rutrum. Pellentesque tincidunt ante id ligula scelerisque fermentum. Vivamus non diam ut ante finibus tincidunt. Sed pellentesque sollicitudin lorem, sed vehicula eros laoreet nec. Mauris quis efficitur nulla. Maecenas bibendum justo mi, vel maximus ante tristique at.</font></font></p>
        <p><font size="4"><font face="Calibri">Praesent vitae risus pretium, lacinia ligula eu, porttitor elit. Donec rhoncus malesuada odio id egestas. Nam pharetra velit nec egestas eleifend. Ut a mollis mauris, nec scelerisque lorem. Morbi placerat lacinia tortor, in tincidunt lacus viverra sed. Donec sem erat, congue eget pharetra nec, ultrices eget mi. Sed sit amet blandit mauris, id porttitor ante. Proin at tellus vel mauris aliquet convallis semper eget dui. Vivamus vitae sapien a est dapibus cursus ac ut felis. Cras iaculis diam et ligula vulputate scelerisque. Aliquam tristique nisl turpis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean at auctor tortor, sed feugiat ante. Duis quis sem ut dui ultricies consectetur.</font></font></p>
        <p><font size="4"><font face="Calibri">Mauris consequat bibendum diam, vel ultrices elit fermentum eu. Curabitur et ullamcorper metus. Curabitur commodo est id enim elementum vulputate. Integer eleifend facilisis velit ac hendrerit. Phasellus tristique a augue at commodo. Integer egestas neque a risus dapibus tempor. Sed volutpat dictum mi. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec egestas tortor vel ultrices viverra.</font></font></p>
        <p><font size="4"><font face="Calibri">Aenean gravida leo lorem, eu blandit sapien porta non. Cras at eros imperdiet, suscipit diam vel, feugiat turpis. In cursus blandit varius. Suspendisse scelerisque lectus tortor, et luctus ligula varius id. Nullam molestie elementum odio porttitor pretium. Donec eu felis ut mauris facilisis suscipit eu ut elit. Proin posuere mauris non bibendum egestas. In vitae lorem et metus rutrum scelerisque. Donec molestie velit ut justo semper accumsan. Praesent placerat metus ut nunc efficitur ultricies. Pellentesque eu massa eros. Curabitur non consequat nibh, nec maximus magna.</font></font></p>
        <p><font size="4"><font face="Calibri">Curabitur id tristique quam, ac viverra erat. Phasellus sed tincidunt leo, faucibus aliquam enim. Morbi varius enim sit amet enim consequat suscipit. Integer accumsan ipsum et tempor dictum. Maecenas malesuada, augue nec cursus placerat, lacus neque finibus diam, non efficitur nisi quam porta mauris. Pellentesque finibus consectetur diam, faucibus fringilla orci vehicula sed. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla malesuada ligula mattis libero commodo sodales.</font></font></p>
        <p><font size="4"><font face="Calibri">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae convallis ipsum. Nam pharetra, massa id placerat posuere, ante odio tempor leo, et egestas justo neque id lorem. Morbi a gravida mi. Etiam ligula nunc, tristique nec risus tincidunt, elementum luctus arcu. Donec sed suscipit diam, quis cursus ex. Nam in hendrerit nunc. Praesent sed elit hendrerit felis cursus condimentum faucibus eget magna. Phasellus sed tortor vel magna laoreet rutrum. Pellentesque tincidunt ante id ligula scelerisque fermentum. Vivamus non diam ut ante finibus tincidunt. Sed pellentesque sollicitudin lorem, sed vehicula eros laoreet nec. Mauris quis efficitur nulla. Maecenas bibendum justo mi, vel maximus ante tristique at.</font></font></p>
        <p><font size="4"><font face="Calibri">Praesent vitae risus pretium, lacinia ligula eu, porttitor elit. Donec rhoncus malesuada odio id egestas. Nam pharetra velit nec egestas eleifend. Ut a mollis mauris, nec scelerisque lorem. Morbi placerat lacinia tortor, in tincidunt lacus viverra sed. Donec sem erat, congue eget pharetra nec, ultrices eget mi. Sed sit amet blandit mauris, id porttitor ante. Proin at tellus vel mauris aliquet convallis semper eget dui. Vivamus vitae sapien a est dapibus cursus ac ut felis. Cras iaculis diam et ligula vulputate scelerisque. Aliquam tristique nisl turpis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean at auctor tortor, sed feugiat ante. Duis quis sem ut dui ultricies consectetur.</font></font></p>
        <p><font size="4"><font face="Calibri">Mauris consequat bibendum diam, vel ultrices elit fermentum eu. Curabitur et ullamcorper metus. Curabitur commodo est id enim elementum vulputate. Integer eleifend facilisis velit ac hendrerit. Phasellus tristique a augue at commodo. Integer egestas neque a risus dapibus tempor. Sed volutpat dictum mi. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec egestas tortor vel ultrices viverra.</font></font></p>
        <p><font size="4"><font face="Calibri">Aenean gravida leo lorem, eu blandit sapien porta non. Cras at eros imperdiet, suscipit diam vel, feugiat turpis. In cursus blandit varius. Suspendisse scelerisque lectus tortor, et luctus ligula varius id. Nullam molestie elementum odio porttitor pretium. Donec eu felis ut mauris facilisis suscipit eu ut elit. Proin posuere mauris non bibendum egestas. In vitae lorem et metus rutrum scelerisque. Donec molestie velit ut justo semper accumsan. Praesent placerat metus ut nunc efficitur ultricies. Pellentesque eu massa eros. Curabitur non consequat nibh, nec maximus magna.</font></font></p>
        <p><font size="4"><font face="Calibri">Curabitur id tristique quam, ac viverra erat. Phasellus sed tincidunt leo, faucibus aliquam enim. Morbi varius enim sit amet enim consequat suscipit. Integer accumsan ipsum et tempor dictum. Maecenas malesuada, augue nec cursus placerat, lacus neque finibus diam, non efficitur nisi quam porta mauris. Pellentesque finibus consectetur diam, faucibus fringilla orci vehicula sed. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla malesuada ligula mattis libero commodo sodales.</font></font></p>
        <p><font size="4"><font face="Calibri">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae convallis ipsum. Nam pharetra, massa id placerat posuere, ante odio tempor leo, et egestas justo neque id lorem. Morbi a gravida mi. Etiam ligula nunc, tristique nec risus tincidunt, elementum luctus arcu. Donec sed suscipit diam, quis cursus ex. Nam in hendrerit nunc. Praesent sed elit hendrerit felis cursus condimentum faucibus eget magna. Phasellus sed tortor vel magna laoreet rutrum. Pellentesque tincidunt ante id ligula scelerisque fermentum. Vivamus non diam ut ante finibus tincidunt. Sed pellentesque sollicitudin lorem, sed vehicula eros laoreet nec. Mauris quis efficitur nulla. Maecenas bibendum justo mi, vel maximus ante tristique at.</font></font></p>
        <p><font size="4"><font face="Calibri">Praesent vitae risus pretium, lacinia ligula eu, porttitor elit. Donec rhoncus malesuada odio id egestas. Nam pharetra velit nec egestas eleifend. Ut a mollis mauris, nec scelerisque lorem. Morbi placerat lacinia tortor, in tincidunt lacus viverra sed. Donec sem erat, congue eget pharetra nec, ultrices eget mi. Sed sit amet blandit mauris, id porttitor ante. Proin at tellus vel mauris aliquet convallis semper eget dui. Vivamus vitae sapien a est dapibus cursus ac ut felis. Cras iaculis diam et ligula vulputate scelerisque. Aliquam tristique nisl turpis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean at auctor tortor, sed feugiat ante. Duis quis sem ut dui ultricies consectetur.</font></font></p>
        <p><font size="4"><font face="Calibri">Mauris consequat bibendum diam, vel ultrices elit fermentum eu. Curabitur et ullamcorper metus. Curabitur commodo est id enim elementum vulputate. Integer eleifend facilisis velit ac hendrerit. Phasellus tristique a augue at commodo. Integer egestas neque a risus dapibus tempor. Sed volutpat dictum mi. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec egestas tortor vel ultrices viverra.</font></font></p>
        <p><font size="4"><font face="Calibri">Aenean gravida leo lorem, eu blandit sapien porta non. Cras at eros imperdiet, suscipit diam vel, feugiat turpis. In cursus blandit varius. Suspendisse scelerisque lectus tortor, et luctus ligula varius id. Nullam molestie elementum odio porttitor pretium. Donec eu felis ut mauris facilisis suscipit eu ut elit. Proin posuere mauris non bibendum egestas. In vitae lorem et metus rutrum scelerisque. Donec molestie velit ut justo semper accumsan. Praesent placerat metus ut nunc efficitur ultricies. Pellentesque eu massa eros. Curabitur non consequat nibh, nec maximus magna.</font></font></p>
        <p><font size="4"><font face="Calibri">Curabitur id tristique quam, ac viverra erat. Phasellus sed tincidunt leo, faucibus aliquam enim. Morbi varius enim sit amet enim consequat suscipit. Integer accumsan ipsum et tempor dictum. Maecenas malesuada, augue nec cursus placerat, lacus neque finibus diam, non efficitur nisi quam porta mauris. Pellentesque finibus consectetur diam, faucibus fringilla orci vehicula sed. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla malesuada ligula mattis libero commodo sodales.</font></font></p>
        <p><font size="4"><font face="Calibri">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae convallis ipsum. Nam pharetra, massa id placerat posuere, ante odio tempor leo, et egestas justo neque id lorem. Morbi a gravida mi. Etiam ligula nunc, tristique nec risus tincidunt, elementum luctus arcu. Donec sed suscipit diam, quis cursus ex. Nam in hendrerit nunc. Praesent sed elit hendrerit felis cursus condimentum faucibus eget magna. Phasellus sed tortor vel magna laoreet rutrum. Pellentesque tincidunt ante id ligula scelerisque fermentum. Vivamus non diam ut ante finibus tincidunt. Sed pellentesque sollicitudin lorem, sed vehicula eros laoreet nec. Mauris quis efficitur nulla. Maecenas bibendum justo mi, vel maximus ante tristique at.</font></font></p>
        <p><font size="4"><font face="Calibri">Praesent vitae risus pretium, lacinia ligula eu, porttitor elit. Donec rhoncus malesuada odio id egestas. Nam pharetra velit nec egestas eleifend. Ut a mollis mauris, nec scelerisque lorem. Morbi placerat lacinia tortor, in tincidunt lacus viverra sed. Donec sem erat, congue eget pharetra nec, ultrices eget mi. Sed sit amet blandit mauris, id porttitor ante. Proin at tellus vel mauris aliquet convallis semper eget dui. Vivamus vitae sapien a est dapibus cursus ac ut felis. Cras iaculis diam et ligula vulputate scelerisque. Aliquam tristique nisl turpis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean at auctor tortor, sed feugiat ante. Duis quis sem ut dui ultricies consectetur.</font></font></p>
        <p><font size="4"><font face="Calibri">Mauris consequat bibendum diam, vel ultrices elit fermentum eu. Curabitur et ullamcorper metus. Curabitur commodo est id enim elementum vulputate. Integer eleifend facilisis velit ac hendrerit. Phasellus tristique a augue at commodo. Integer egestas neque a risus dapibus tempor. Sed volutpat dictum mi. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec egestas tortor vel ultrices viverra.</font></font></p>
        <p><font size="4"><font face="Calibri">Aenean gravida leo lorem, eu blandit sapien porta non. Cras at eros imperdiet, suscipit diam vel, feugiat turpis. In cursus blandit varius. Suspendisse scelerisque lectus tortor, et luctus ligula varius id. Nullam molestie elementum odio porttitor pretium. Donec eu felis ut mauris facilisis suscipit eu ut elit. Proin posuere mauris non bibendum egestas. In vitae lorem et metus rutrum scelerisque. Donec molestie velit ut justo semper accumsan. Praesent placerat metus ut nunc efficitur ultricies. Pellentesque eu massa eros. Curabitur non consequat nibh, nec maximus magna.</font></font></p>
        <p><font size="4"><font face="Calibri">Curabitur id tristique quam, ac viverra erat. Phasellus sed tincidunt leo, faucibus aliquam enim. Morbi varius enim sit amet enim consequat suscipit. Integer accumsan ipsum et tempor dictum. Maecenas malesuada, augue nec cursus placerat, lacus neque finibus diam, non efficitur nisi quam porta mauris. Pellentesque finibus consectetur diam, faucibus fringilla orci vehicula sed. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla malesuada ligula mattis libero commodo sodales.</font></font></p>
        <p><font size="4"><font face="Calibri">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae convallis ipsum. Nam pharetra, massa id placerat posuere, ante odio tempor leo, et egestas justo neque id lorem. Morbi a gravida mi. Etiam ligula nunc, tristique nec risus tincidunt, elementum luctus arcu. Donec sed suscipit diam, quis cursus ex. Nam in hendrerit nunc. Praesent sed elit hendrerit felis cursus condimentum faucibus eget magna. Phasellus sed tortor vel magna laoreet rutrum. Pellentesque tincidunt ante id ligula scelerisque fermentum. Vivamus non diam ut ante finibus tincidunt. Sed pellentesque sollicitudin lorem, sed vehicula eros laoreet nec. Mauris quis efficitur nulla. Maecenas bibendum justo mi, vel maximus ante tristique at.</font></font></p>
        <p><font size="4"><font face="Calibri">Praesent vitae risus pretium, lacinia ligula eu, porttitor elit. Donec rhoncus malesuada odio id egestas. Nam pharetra velit nec egestas eleifend. Ut a mollis mauris, nec scelerisque lorem. Morbi placerat lacinia tortor, in tincidunt lacus viverra sed. Donec sem erat, congue eget pharetra nec, ultrices eget mi. Sed sit amet blandit mauris, id porttitor ante. Proin at tellus vel mauris aliquet convallis semper eget dui. Vivamus vitae sapien a est dapibus cursus ac ut felis. Cras iaculis diam et ligula vulputate scelerisque. Aliquam tristique nisl turpis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean at auctor tortor, sed feugiat ante. Duis quis sem ut dui ultricies consectetur.</font></font></p>
        <p><font size="4"><font face="Calibri">Mauris consequat bibendum diam, vel ultrices elit fermentum eu. Curabitur et ullamcorper metus. Curabitur commodo est id enim elementum vulputate. Integer eleifend facilisis velit ac hendrerit. Phasellus tristique a augue at commodo. Integer egestas neque a risus dapibus tempor. Sed volutpat dictum mi. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec egestas tortor vel ultrices viverra.</font></font></p>
        <p><font size="4"><font face="Calibri">Aenean gravida leo lorem, eu blandit sapien porta non. Cras at eros imperdiet, suscipit diam vel, feugiat turpis. In cursus blandit varius. Suspendisse scelerisque lectus tortor, et luctus ligula varius id. Nullam molestie elementum odio porttitor pretium. Donec eu felis ut mauris facilisis suscipit eu ut elit. Proin posuere mauris non bibendum egestas. In vitae lorem et metus rutrum scelerisque. Donec molestie velit ut justo semper accumsan. Praesent placerat metus ut nunc efficitur ultricies. Pellentesque eu massa eros. Curabitur non consequat nibh, nec maximus magna.</font></font></p>
        <p><font size="4"><font face="Calibri">Curabitur id tristique quam, ac viverra erat. Phasellus sed tincidunt leo, faucibus aliquam enim. Morbi varius enim sit amet enim consequat suscipit. Integer accumsan ipsum et tempor dictum. Maecenas malesuada, augue nec cursus placerat, lacus neque finibus diam, non efficitur nisi quam porta mauris. Pellentesque finibus consectetur diam, faucibus fringilla orci vehicula sed. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla malesuada ligula mattis libero commodo sodales.</font></font></p>
      <br></br>


</div>

<script>
$(document).ready(function(){

   (function($) {

      $('#header__icon').click(function(e){
         e.preventDefault();
         $('body').toggleClass('with--sidebar');
      });
    
    $('#site-cache').click(function(e){
      $('body').removeClass('with--sidebar');
    });

   })(jQuery);

});
</script>

   <footer id="footer"><font size="3"><font face="Calibri">© Copyright 2016 | All Rights Reserved | Design by <style type="text/css"><!-- a {text-decoration: none;}//--></style><a href="#" target="_blank">Auteur</a></font></font></footer>
            </div>
         <!-- fin "container" -->
      </div>
   <!-- fin "site-content" -->
   <div class="site-cache" id="site-cache"></div>
            </div>
         <!-- fin "site-pusher" -->
      </div>
   <!-- fin "site-container" -->
  </body>
</html>

Merci d'avance à ceux qui prendront le temps de m'aider 😉 (Courage nous y sommes presque...)

TheFlameflo

Messages: 422

Salut !

Voici un code intéressant et plus ou moins simple que j'ai trouvé sur Google :
[url=http://stackoverflow.com/questions/4770025/how-to-disable-scrolling-temporarily]stackoverflow bloquer le scroll
[/url]
J'espère t'avoir aidé !

Jerem971

Messages: 808

Re:

C'est exactement ce que je cherchais notamment cette démo (par contre même quand le scroll est désactivé, on peut scroller avec la molette de la souris 😕). Je vais coder de mon côté et je te tiens au courant @TheFlameflo 😉

Est-ce que c'est possible de bloquer le scroll même avec la molette de la souris ?
Poster une réponse