Responsive Images (Adapter une bannière d'un site web)

Ce topic a été résolu
Profil introuvable

Profil introuvable Le 27 janvier 2017 à 00:44 (Édité le 25 janvier 2019 à 17:53)

Hello la communauté ! 😀

Alors voilà, j'ai une bannière dont je souhaite quelle soit adapter à un site web, c'est-à-dire que le visiteur ne droit pas voir les marges blanches à gauche et à droite sur de grand écrans. Je n'ai trouver aucun tutoriel correspondant à ma demande 😦

Sachant que mon image fait 1114 pixels horizontalement et 246 pixels verticalement, faut-il que je change sa taille ? Ou c'est simplement des lignes de codes CSS qui peuvent gérer cela ?

Si vous pouvez m'expliquer comment cela fonctionne, me donner quelques pistes et bien entendu les problèmes que cela peut causer (si il y en a).

Merci d'avance 😀
TheFlameflo

TheFlameflo Le 27 janvier 2017 à 01:44

Salut !

Essaies un width de 100% sur ton image, ça devrait marcher.
S'il y a des marges sur les côtés, tu peux essayer de réinitialiser ton css (en utilisant le sélecteur "*" et en mettant les marges et le padding a 0) ou y aller cas par cas et supprimer les marges sur le body, ta div, etc.

J'espère t'avoir aidé !
Profil introuvable

Profil introuvable Le 27 janvier 2017 à 03:25

Re :

Peut-tu regarder le dernier code poster sur ce topic ?

La bannière en question est à la ligne 324 :

body {background:url(./images/banniere.jpg) no-repeat top center;}
J'essaye avec la fonction width et je te dis.
TheFlameflo

TheFlameflo Le 27 janvier 2017 à 06:00

Je vois !

Je pensais que tu parlais d'une balise image...
Sur un background, ça ne marchera pas...
Sincèrement, je pense qu'utiliser une balise image c'est le mieux pour faire une bannière plutôt que d'utiliser le background de body...

Mais, si tu souhaites le faire comme ça, il y a la propriété "background-size" qui peut être utile.  [url=http://www.w3schools.com/cssref/css3_pr_background-size.asp]background-size
[/url]En gros, tu as plusieurs paramètres, mais je pense que tu pourrais essayer du côté de cover, voir si ça marche.

J'espère avoir aidé ! 😀
jeannot_gates

jeannot_gates Le 27 janvier 2017 à 18:25

Bonsoir et si tu utilise en css un max-width:100%; et width:100%;
Profil introuvable

Profil introuvable Le 28 janvier 2017 à 00:06

Re:

Merci à 'TheFlameflo' et 'jeannot_gates' pour vos pistes 😀 J'ai réussi à l'adapter !!! 😄

Voici ce que j'ai rajouter :

body {background:url(./images/banniere.jpg) no-repeat top center; background-size: 100%}
Pour la version PC c'est correct mais par contre pour la version mobile ce n'est pas bon, elle s'adapte aussi et je ne souhaite pas qu'elle s'adapte pour la version mobile. Je souhaite qu'elle soit adapter à la version PC et quand il s'agit de la version mobile, elle garde sa taille d'origine.

Si vous avez encore des pistes, je suis preneur 😄

Merci quand même de m'avoir presque résolu ce problème 😉
TheFlameflo

TheFlameflo Le 28 janvier 2017 à 03:10

Salut !

Tu n'as qu'à utiliser les media-queries :
Si c'est un ordinateur, tu fais les changements sinon rien.
OU
Si c'est un mobile, tu réinitialises la taille et sur PC tu ne fais rien.

Je pense que la deuxième est plus facile à mettre en place, je te laisse t'informer sur les medias-queries :
[url=https://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-css3/mise-en-page-adaptative-avec-les-media-queries]openclassrooms - media queries
[/url]
Profil introuvable

Profil introuvable Le 28 janvier 2017 à 20:11 (Édité le 28 janvier 2017 à 20:12)

Re:

Oui je maitrise un peu les media queries car j'avais finalement réussi à créer une version mobile de mon site sur ce topic. Je voudrais juste savoir si il faut vraiment utilisé les media queries ou il y a une autre solution ?

Amicalement 😀
TheFlameflo

TheFlameflo Le 28 janvier 2017 à 20:38

J'imagine que c'est possible en JS, mais je vois pas trop l'utilité de le faire en JS...

Je pense que ce bout de code devrait suffire (à tester sur mobile):

@media not handheld {
   //ton code
}
Tu peux ajouter aussi ", (min-width: ?px)" pour faire en sorte que si la fenêtre est plus petite que ? pixels, la bannière ait sa taille normale.

Si tu as besoin de précisions, n'hésite pas ! 😀
TheOldNoob

TheOldNoob Le 28 janvier 2017 à 21:18

Salut les gens 😀

Pour info, une bannière ne se met jamais sur le body, on la met sur le header. Je vous invite a relise la sementique obligatoire d'un fichier html 😀
Profil introuvable

Profil introuvable Le 28 janvier 2017 à 21:26

Re:

Je pense que j'aurais besoin d'un peu plus de précision 'TheFlameflo' sur 

Je pense que ce bout de code devrait suffire (à tester sur mobile):

@media not handheld {   //ton code}
Tu peux ajouter aussi ", (min-width: ?px)" pour faire en sorte que si la
fenêtre est plus petite que ? pixels, la bannière ait sa taille normale.
et 'TheOldNoob' pour les bannières.

Merci d'avance 😀
TheOldNoob

TheOldNoob Le 28 janvier 2017 à 21:29

j'ai rien compris jerem
TheFlameflo

TheFlameflo Le 28 janvier 2017 à 22:27

Pour le code que j'ai donné, ça s'active seulement si l'appareil utilisé N'EST PAS un mobile et si la largeur de la fenêtre est au-dessus d'un certain nombre de pixels.

Tu peux aussi faire l'inverse, mais ça serait plus long, car il faudrait mettre tous les appareils qui ne sont pas des mobiles et modifier min-width par max-width.

Du coup, je te conseille quelque chose qui ressemble à ça :
@media not handheld, (min-width: ?px)
{
  body {background:url(./images/banniere.jpg) no-repeat top center; background-size: 100%}
}
Il faut remplacer le ? par le nombre de pixels de large pour que tu considères ça comme un écran de mobile.

Par contre, comme TheOldNoob a dit, c'est pas top d'utiliser le background du body pour mettre une bannière.
TheOldNoob

TheOldNoob Le 28 janvier 2017 à 22:41

Autre conseil pour le développement de vos site, pensez a faire du mobie first. 50% du trafic mondial se fait sur des smartphone/tablette alors que seulement 20% des sites sont fabriquer en mobile first. Surtout qu'il est plus facile de faire du mobile => desktop que l'inverse !
Profil introuvable

Profil introuvable Le 29 janvier 2017 à 02:55 (Édité le 29 janvier 2017 à 02:57)

Re:

Pour le code que j'ai donné, ça s'active seulement si l'appareil utilisé N'EST PAS un mobile et si la largeur de la fenêtre est au-dessus d'un certain nombre de pixels.

Tu peux aussi faire l'inverse, mais ça serait plus long, car il faudrait mettre tous les appareils qui ne sont pas des mobiles et modifier min-width par max-width.

Du coup, je te conseille quelque chose qui ressemble à ça :
@media not handheld, (min-width: ?px){  body {background:url(./images/banniere.jpg) no-repeat top center; background-size: 100%}}
Il faut remplacer le ? par le nombre de pixels de large pour que tu considères ça comme un écran de mobile.

Par contre, comme TheOldNoob a dit, c'est pas top d'utiliser le background du body pour mettre une bannière.
Merci d'avoir développé, je pense avoir compris donc je pense que cela devrait fonctionné. Je vais testé et je te tiens au courant 😉
Par contre je ne comprend pas pourquoi ce n'est pas recommandé d'utiliser le background du "body" pour une bannière... 😰 Pourquoi ? Quel problème cela cause-t-il ? Car quand je regarde mon site, tout à l'air normal et les éléments sont positionner comme je le souhaite. Peut-tu me dire alors le problème ?

Autre conseil pour le développement de vos site, pensez a faire du mobie first. 50% du trafic mondial se fait sur des smartphone/tablette alors que seulement 20% des sites sont fabriquer en mobile first. Surtout qu'il est plus facile de faire du mobile => desktop que l'inverse !
Au final le faire avant ou après, cela ne change rien, vu qu'on obtiendra le même résultat final... Je ne comprend pas la non plus... 😰
TheFlameflo

TheFlameflo Le 29 janvier 2017 à 04:58 (Édité le 29 janvier 2017 à 04:59)

Pour revenir sur le questionnement du background, etc, c'est juste qu'on n'utilise généralement pas le background comme ça.
Si ça marche c'est top, mais généralement, on fait quelque chose de séparé pour que ce soit plus facilement utilisable.
Après, il peut y avoir le reste de la page qui chevauche sur le background, des éléments qui vont dessus, s'il prend trop de place ou pas assez etc.

Si on prend une balise header ou juste image et qu'on code bien, ça ne chevauche pas et on peut le modifier plus facilement (selon moi).

Après tout, chacun fait comme il le veut, tant que ça marche et que le créateur soit confortable avec ce qu'il a créé.

Pour ce qui est du mobile-first, c'est qu'on souhaite adapter la version mobile à l'ordinateur et pas l'inverse.
Étant donné que les mobiles sont de plus en plus présent, on aura tendance à faire quelque chose qui convient parfaitement au mobile et qui est adapté

Personnellement, j'ai beaucoup plus de problèmes quand je fais une version PC et que j'essaie de passer en mobile étant donné que les éléments doivent être plus petits, avoir une disposition spéciale et rendre ça agréable à la navigation.

Si on est assuré d'avoir une version mobile qui marche bien, il suffit de réorganiser les éléments, les agrandir et les disposer comme on veut pour le PC.

Bref, ça ne change pas grand chose, c'est surtout une question de priorités.

EDIT : un petit lien concernant le mobile-first, ça explique plutôt bien le concept et les avantages : http://www.smart-seven.fr/definition-strategie-digitale-du-mobile-first-web-design/
TheOldNoob

TheOldNoob Le 29 janvier 2017 à 10:00

Je rejoint Flameflo.

Pour le background, c'est une question de sémantique, la balise header existe, il faut l'utilisé.

Le background sur le body n'a qu'une seul vrais utilité, afficher une couleur en attendent que l'image de background se charge. C'est utile pour les petites connexion.
Si tu met ta bannière sur ton body, tu ne peu plus mettre de background sur ton site.
Je ne répète pas ce qu'a dit Flameflo, mais attention a l’empilement de vos élément, on a plein de balise html, il faut les utilisé correctement. Sinon le robot google va vous punir et adieux le référencement dans la première page de la SERP.
Une petite lecture intéressante sur openclassroom mise a jours ressament :
https://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-css3/structurer-sa-page


Pour le mobile first c'est pareil, le robot google va de plus en plus mal noté les site qui ne sont pas mobile first. 
Je le répète, mais les smartphones remplace de plus en plus les desktop, c'est a prendre sérieusement en compte si vous ne voulez pas avoir la totalité de votre site a refaire d'ici peu. Et c'est plus facile a produire dans le sens mobile => desktop que l'inverse !
Profil introuvable

Profil introuvable Le 29 janvier 2017 à 22:47

Re:

Je tâcherai, en tant que programmeur utiliser "mobile-first" avant comme convenu 😀 Je pense que ça droit être plus simple comme tu l'as dit 'TheFlameflo' et 'TheOldNoob'.

Je modifierai plus tard le code source de mon site si le background dans "body" me pose problème...

Si tu met ta bannière sur ton body, tu ne peu plus mettre de background sur ton site.
J'avais fait des tests et effectivement je ne peux pas changer la couleur de la page entière de mon site... Mais pour le moment je n'ai pas besoin de changer la couleur de fond, je tâcherai de m'en souvenir si jamais j'ai un besoin de la faire.

Merci à vous deux pour vos conseils qui m'ont été très utile 😄 Mais maintenant, revenons à mon problème...

'TheFlameflo', j'ai essayer le code suivant :

@media not handheld, (min-width: 768px)
{
  body {background:url(./images/banniere.jpg) no-repeat top center; background-size: 100%}
}
Mais cela ne fonctionne pas, l'image disparait quand j'applique cette modification... As-tu une autre solution ?
TheOldNoob

TheOldNoob Le 30 janvier 2017 à 00:35

A tu fait un petit reset css?
* {
margin : 0;
padding:0;
}
Après, tu peu aussi utilisé le vw comme unité pour ton background. C'est une unité assez pratique dans pas mal de cas
TheFlameflo

TheFlameflo Le 30 janvier 2017 à 03:49 (Édité le 30 janvier 2017 à 03:50)

Désolé, ma faute !

J'ai oublié de préciser qu'il fallait quand même mettre la bannière, mais que la media-query ne doit contenir que le background size :


body {
background:url(./images/banniere.jpg) no-repeat top center; 
}
@media not handheld, (min-width: 768px)
{  body 
   {
      background-size: 100%
   }
}
Profil introuvable

Profil introuvable Le 30 janvier 2017 à 23:16 (Édité le 30 janvier 2017 à 23:19)

Re:

A tu fait un petit reset css?
* {
margin : 0;
padding:0;
}
Après, tu peu aussi utilisé le vw comme unité pour ton background. C'est une unité assez pratique dans pas mal de cas
Si tu pouvais développer car je ne vois pas pourquoi réinitialiser le code CSS... J'aurais besoin d'en savoir plus...

Désolé, ma faute !

J'ai oublié de préciser qu'il fallait quand même mettre la bannière, mais que la media-query ne doit contenir que le background size

body {
background:url(./images/banniere.jpg) no-repeat top center; 
}
@media not handheld, (min-width: 768px)
{  body 
   {
      background-size: 100%
   }
}
J'ai tester ton code ci-dessus, mais cela ne fonctionne toujours pas 😦 C'est vraiment dommage que sur la version PC c'est nickel mais pas sur la version mobile 😦

Je suis preneur pour d'autres tentatives...
TheFlameflo

TheFlameflo Le 30 janvier 2017 à 23:52

C'est bizarre parce que le code devrait au moins mettre le background sur tous les supports...

Penses-tu que tu pourrais fournir le code complet pour que je puisse tester en local parce que c'est un peu difficile de le faire "à l'aveugle" ?

Je sais que tu l'as déjà posté sur l'autre topic, mais s'il y a eu des changements, c'est mieux d'avoir la version la plus récente.
TheOldNoob

TheOldNoob Le 30 janvier 2017 à 23:59

Le reset CSS est une pratique controversé si on la pousse trop loin. Mais ça a sont utilité pour normalisé les navigateurs. Chaque navigateurs a sa propre feuille de style interne qui fait qu'un site peu avoir des apparences différentes en fonction de celui ci.
Le plus classiquement, on commence par redéfinir le margin et le padding de tout les éléments. Après, il y a pas mal d'autre chose qu'on peu ajouter.
Pour ma part, je normalise ma fonte, afin qu'elle soit la même sur tout les navigateurs et je met un  box-sizing: border-box; 
En gros, voilà par quoi commence pratiquement toutes mes feuilles de styles :
* { /* Réinitialisation navigateur*/
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html, body {
   widht: 100%;
}
html {
    font: 62.5% arial, sans-serif; /* pour normalisé la taille de mes font */
    font-family: 'Titillium Web', sans-serif;
    color: #323232;
    background: #ddd;
}
img {
    max-width: 100%; /* pour que mes images soit de la taille de leur bloc parents*/
}
h1, h2, h3 {
    color: #fff;
}
h1 {
    font-size: 3.5rem;
}
h2 {
    font-size: 2.5rem;
}
h3 {
    font-size: 1.5rem;
}
ul {
   list-style: none;
}
a {
   text-decoration: none;
}
Profil introuvable

Profil introuvable Le 31 janvier 2017 à 02:34

Re:

'TheFlameflo', voici la dernière version de mon code source, j'ai juste rajouter quelque chose qui n'a rien a voir avec le sujet : l'information sur les cookies (tu n'as pas ce bout de code sur les codes de l'autre topic)

<!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>
      <link rel="stylesheet" href="css\cookieinfo.css" type="text/css" media="all"/>
      <script type="text/javascript" src="javascript\CookieInfo.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: 66px ;
   margin: 0 ;
   padding: 0 35px;
   line-height: 66px ;
   border-right: 4px solid #FFFFFF ;
   text-decoration: none ;
   color: white ;
   font-family: Helvetica, Arial, Verdana, sans-serif ;
   font-size: 1.4em ;
   font-weight : bold ;
   display: inline-block ;
   margin: 0 0px ;
}

.container {
 *zoom: 1;
}

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

/* HEADER */

.header {
  left: 0;
  right: 0;
  height: 66px;
  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: 66px;
  right: 8;
  left: 8;
  bottom: 0;
  padding-top: 15;
}

.header { position: static; }

.header__icon {
  position: relative;
  display: block;
  float: left;
  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_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: 44px;
  text-align: center;
  line-height: 44px;
  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; background-size: 100%;}
</style>

  <body style="border-left-style: solid; border-left-width: 0px; margin-top: 0px; margin-bottom: 0px; overflow-y: scroll; -webkit-overflow-scrolling: touch; 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>
      jQuery().cookieInfo({
        defaultText: "Ce site internet utilise des cookies afin d'assurer les meilleurs services possibles, nous dépendons de ces cookies pour fonctionner correctement.",
        okButton: "C\'est noté !",
        displayMore: true,
        moreButton: "En savoir plus...",
        moreInfo: "Les cookies sont de petits fichiers texte conservés sur votre ordinateur. Certains cookies sont nécessaires pour garantir le bon fonctionnement du site, pour cette raison nous avons déjà mis certains cookies. Ils nous permettent également de vous donner la meilleure expérience de navigation possible et nous aider à comprendre comment vous utilisez notre site.",
        moreURL:  "",
        location: "bottom",
        speedIn: 500,
        speedOut: 400,
        delay: 1000,
        float: true,
        style: "dark",
        cookieExpiry: 90,
        cookieName: "Pharmacie du Boulevard"
      });
</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>

   <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>

Pour la bannière, tu peux en trouver sur internet et tu lui donne 1114 pixels horizontalement et 246 pixels verticalement 😉

'TheOldNoob' merci de m'avoir expliquer son fonctionnement et merci pour ton développement, est-ce que je peux récupérer ton code source CSS qui m'a l'air pratique, à moins que ce soit sur copyright, je préfère te demander 😉
TheOldNoob

TheOldNoob Le 31 janvier 2017 à 07:35

Aucun copyright ! 
Si je peu aidé, c'est avec plaisir 😀