Voici une base responsive, n'hésitez pas à l'utiliser pour vos projets :
Voici le code Html :
<!Doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Base Template Responsive 2 colonnes Full Width</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" lang="fr" content="DESCRIPTION DU SITE"> <meta name="author" content="AUTEUR"> <meta name="robots" content="index, follow"> <link rel="favicon-icon" href="img/favicon.png"> <link rel="shortcut icon" href="img/favicon.ico"> <link rel="stylesheet" href="css/base-responsive.css"> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> </head> <body> <header> <div class="container"> <div class="header-logo"> <h1 class="header-nom-site">Nom Du Site</h1> </div> <div class="header-slogan"> <p>Le Slogan du Site</p> </div> <div class="header-droite"> <span>Zone Haut Droite</span> </div> <div class="clear"></div> </div> </header> <nav> <div class="container"> <ul> <li><a href="">Accueil</a></li> <li><a href="">Qui Sommes nous ?</a></li> <li><a href="">Contact</a></li> </ul> </div> </nav> <section> <div class="container"> <main> <h1>Titre de page</h1> <hr> <!-- Titre et niveaux --> <h1>Titre niveau 1</h1> <h2>Titre niveau 2</h2> <h2>Titre niveau 3</h2> <h2>Titre niveau 4</h2> <h5>Titre niveau 5</h5> <h6>Titre niveau 6</h6> <hr> <!-- Image Responsive --> <h2>Responsive images</h2> <p>Afin que vos images soient responsive, vous pouvez utiliser la classe <code>.img-responsive</code>.</p> <p><img class="img-responsive" src="http://placehold.it/700x350" alt="image manquante"></p> <hr> <!-- Paragraphe --> <h2>Paragraphe</h2> <p>Le Lorem Ipsum est simplement du faux texte employé dans la <a href="#">composition et la mise en page avant impression</a>. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un peintre anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte.</p> <p> Il n'a pas fait que survivre cinq siècles, mais s'est aussi adapté à la bureautique informatique, sans que son contenu n'en soit modifié. Il a été popularisé dans les années 1960 grâce à la vente de feuilles Letraset contenant des passages du Lorem Ipsum</p> <hr> <!-- Liste --> <h2>Liste Non Ordonnée</h2> <p>Voici un exemple de liste non ordonnée.</p> <ul> <li>Element A</li> <li>Element B</li> <li>Element C</li> <li>Element D</li> <li>Element E</li> </ul> <hr> <h2>Liste Ordonnée</h2> <p>Voici un exemple de liste ordonnée.</p> <ol> <li>Element 1</li> <li>Element 2</li> <li>Element 3</li> <li>Element 4</li> <li>Element 5</li> </ol> <hr> <h2>Liste non mise en forme</h2> <p>Pour une liste non mise en forme, vous pouvez utiliser la classe <code>list-unstyled</code>.</p> <ul class="list-unstyled"> <li>Element</li> <li>Element</li> <li>Element</li> <li>Element</li> <li>Element</li> </ul> <hr> <h2>Liste en ligne</h2> <p>Pour une liste sur une seule ligne, vous pouvez utiliser la classe <code>list-inline</code>.</p> <ul class="list-inline"> <li>One</li> <li>Two</li> <li>Three</li> <li>Four</li> </ul> <hr> <h2>Bouton</h2> <p>Vous pouvez appliquer la classe css <code>btn</code> pour avoir un style prédéfinie sur vos boutons.</p> <p><a href="#" class="btn">Submit</a></p> <hr> <!-- Tables --> <h2>Tables</h2> <p>Exemple d'un tableau de données</p> <table> <thead> <tr> <th>#</th> <th>Prénom</th> <th>Nom</th> <th>Pseudo</th> </tr> </thead> <tbody> <tr> <th>1</th> <td>Julien</td> <td>Cottet</td> <td>j.cottet</td> </tr> <tr> <th>2</th> <td>Amandine</td> <td>Thoyer</td> <td>lamandine</td> </tr> <tr> <th>3</th> <td>Thomas</td> <td>Winter</td> <td>twinter</td> </tr> </tbody> </table> </main> <aside> <h2>Sidebar</h2> <p>Contrairement à une opinion répandue, <a href="#">le Lorem Ipsum</a> n'est pas simplement du texte aléatoire. Il trouve ses racines dans une oeuvre de la littérature latine classique datant de 45 av. J.-C., le rendant vieux de 2000 ans. Un professeur du Hampden-Sydney College, en Virginie, s'est intéressé à un des mots latins les plus obscurs, consectetur, extrait d'un passage du Lorem Ipsum, et en étudiant tous les usages de ce mot dans la littérature classique, découvrit la source incontestable du Lorem Ipsum. Il provient en fait des sections 1.10.32 et 1.10.33 du "De Finibus Bonorum et Malorum" (Des Suprêmes Biens et des Suprêmes Maux) de Cicéron. Cet ouvrage, très populaire pendant la Renaissance, est un traité sur la théorie de l'éthique. Les premières lignes du Lorem Ipsum, "Lorem ipsum dolor sit amet...", proviennent de la section 1.10.32.</p> </aside> <div class="clear"></div> </div> </section> <footer> <div class="container"> © Copyright 2016 </div> </footer> </body> </html>
/***************** GENERAL *****************/ body{ margin: 0; padding: 0; color: #333; font: 1em/1.2 Helvetica, Arial, Geneva, sans-serif; } p{ line-height: 1.5; margin: 0; } a:link { color: #337ab7; text-decoration: none; } a:visited { color: #002366; } a:focus { color: #000; } a:hover { text-decoration: underline; } a:active { color: #f43c80; } hr{ margin: 1em 0 2em 0; border: 0; border-top: 1px solid #ddd; } table{ border-collapse: collapse; border-top: 1px solid #ddd; width: 100%; max-width: 100%; margin-bottom: 20px; } th, td{ padding: 0.5em 1em; vertical-align: top; text-align: left; border-bottom: 1px solid #ddd; } .container{ max-width: 70em; margin: 0 auto; } .clear{ clear: both; } h1, h2, h2, h2, h5, h6 { font-weight: 500; margin: 0 0 0.5em; } .img-responsive { max-width: 100%; } /***************** GENERAL *****************/ /***************** HAUT *****************/ header { padding: 1em 3em; min-height: 30px; background: #dedede; } .header-slogan , .header-droite { padding: 0.3em 0 0 0; } .header-logo{ float: left; margin-bottom: 1em; margin-right: 5%; width: 30%; /* background: red; */ } h1.header-nom-site { margin: 0; font-size: 1.5em; } .header-slogan { float: left; width: 30%; margin-bottom: 1em; margin-right: 5%; text-align: center; /* background: blue; */ } .header-droite { float: left; width: 30%; text-align: right; /* background: green; */ } /***************** HAUT *****************/ /***************** MENU *****************/ nav{ background: #555; text-align: center; min-height: 30px; } nav ul{ margin: 0; padding: 0; list-style: none; } nav ul li{ display: inline; margin: 0; } nav ul li a{ display:inline-block; text-decoration: none; padding: 0 2em; color: #fff !important; min-height: 30px; line-height: 30px; } nav ul a:hover{ background: #337ab7; text-decoration: none; } /***************** MENU *****************/ /***************** CONTENU *****************/ section{ padding: 1em;} main { float: left; width: 65%; margin-right: 5%; margin-bottom: 1em; } aside { float: left; width: 30%; margin-bottom: 1em; } /***************** CONTENU *****************/ /***************** BAS *****************/ footer { color: #fff; background: #555; padding: 1em 1.25em; } /***************** BAS *****************/ /***************** RESPONSIVE TABLETTE *****************/ @media (max-width: 60em) { /* une seule colonne (one column page) */ body:before{ background: #fda500; content: "responsive version tablette"; position: absolute; color: #fff; padding: 2px; font-size: 12px; } main{ width: 100%; } aside{ width: 100%; } } /***************** RESPONSIVE TABLETTE *****************/ /***************** RESPONSIVE SMARTPHONE *****************/ @media (max-width: 36em) { /* width 100% pour les éléments du header et du menu (full width) */ body:before{ background: #337ab7; content: "responsive version smartphone"; position: absolute; color: #fff; padding: 2px; font-size: 12px; } .header-logo{ width: 100%; text-align: left; } .header-slogan{ width: 100%; text-align: left; } .header-droite{ width: 100%; text-align: left; } nav ul li a{ display: block; border-bottom: 1px solid #c0c0c0; text-align: left; } } /***************** RESPONSIVE SMARTPHONE *****************/ /***************** REPRISE FACULTATIVE *****************/ .list-unstyled{ padding-left: 0; list-style: none; } .list-inline{ padding-left: 0; margin-left: -5px; list-style: none; } .list-inline > li{ display: inline-block; padding-right: 5px; padding-left: 5px; } .btn{ color: #fff !important; background-color: royalblue; border-color: #222; display: inline-block; padding: .5em 1em; margin-bottom: 0; font-weight: 400; line-height: 1.2; text-align: center; white-space: nowrap; vertical-align: middle; cursor: pointer; border: 1px solid transparent; border-radius: .2em; text-decoration: none; } .btn:hover{ color: #fff !important; background-color: #111; } .btn:focus{ color: #fff !important; background-color: #fda500; } .btn:active{ color: #fff !important; background-color: #f43c80; } /***************** REPRISE FACULTATIVE *****************/
Tout d'abord, au niveau de l'arborescence, un dossier /base-responsive/ est créé.
Le fichier base-responsive.html est créer à la racine de ce même dossier
2 sous dossiers sont créés : /img/ et /css/
Voici un lien vers l'icone favicon.ico et favicon.png a enregistrer et à placer dans le dossier /img/ du projet.
Le code JavaScript ci-dessous permet l'interprétation des balises html5 (header, footer, main, aside, nav, etc.) par les anciens navigateurs :
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>Ensuite, ce n'est pas un conteneur qui contient tout le site mais bien un conteneur à l'intérieur de chaque zone importante (header, nav, section, footer) pour donner un effet pleine largeur (full width).
<header> <div class="container"> ... </div> </header> <nav> <div class="container"> ... </div> </nav> <section> <div class="container"> ... </div> </section> <footer> <div class="container"> ... </div> </footer>
.container
afin que l'on puisse la rappeler plusieurs fois.<header> <div class="container"> <div class="header-logo"> <h1 class="header-nom-site">Nom Du Site</h1> </div> <div class="header-slogan"> <p>Le Slogan du Site</p> </div> <div class="header-droite"> <span>Zone Haut Droite</span> </div> <div class="clear"></div> </div> </header> <nav> <div class="container"> <ul> <li><a href="">Accueil</a></li> <li><a href="">Qui Sommes nous ?</a></li> <li><a href="">Contact</a></li> </ul> </div> </nav>Le code CSS de base pour ces différentes zones est le suivant :
/***************** HAUT *****************/ header { padding: 1em 3em; min-height: 30px; background: #dedede; } .header-slogan , .header-droite { padding: 0.3em 0 0 0; } .header-logo{ float: left; margin-bottom: 1em; margin-right: 5%; width: 30%; } h1.header-nom-site { margin: 0; font-size: 1.5em; } .header-slogan { float: left; width: 30%; margin-bottom: 1em; margin-right: 5%; text-align: center; } .header-droite { float: left; width: 30%; text-align: right; } /***************** HAUT *****************/ /***************** MENU *****************/ nav{ background: #555; text-align: center; min-height: 30px; } nav ul{ margin: 0; padding: 0; list-style: none; } nav ul li{ display: inline; margin: 0; } nav ul li a{ display:inline-block; text-decoration: none; padding: 0 2em; color: #fff !important; min-height: 30px; line-height: 30px; } nav ul a:hover{ background: #337ab7; text-decoration: none; } /***************** MENU *****************/
@media (max-width: 36em) { body:before{ background: #337ab7; content: "responsive version smartphone"; position: absolute; color: #fff; padding: 2px; font-size: 12px; } .header-logo{ width: 100%; text-align: left; } .header-slogan{ width: 100%; text-align: left; } .header-droite{ width: 100%; text-align: left; } nav ul li a{ display: block; border-bottom: 1px solid #c0c0c0; text-align: left; } }
float: left;
.body:before
permet de garder une indication lors des tests (par l'intérmédiaire de la propriété content qui nous permet d'intégrer du texte dans le code Html), il ne faudra pas oublier de la retirer lors de la mise en ligne (en production).<section> <div class="container"> <main> <h1>Titre de page</h1> <hr> <!-- Titre et niveaux --> <h1>Titre niveau 1</h1> <h2>Titre niveau 2</h2> <h2>Titre niveau 3</h2> <h2>Titre niveau 4</h2> <h5>Titre niveau 5</h5> <h6>Titre niveau 6</h6> <hr> <!-- Image Responsive --> <h2>Responsive images</h2> <p>Afin que vos images soient responsive, vous pouvez utiliser la classe <code>.img-responsive</code>.</p> <p><img class="img-responsive" src="http://placehold.it/700x350" alt="image manquante"></p> <hr> <!-- Paragraphe --> <h2>Paragraphe</h2> <p>Le Lorem Ipsum est simplement du faux texte employé dans la <a href="#">composition et la mise en page avant impression</a>. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un peintre anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte.</p> <p> Il n'a pas fait que survivre cinq siècles, mais s'est aussi adapté à la bureautique informatique, sans que son contenu n'en soit modifié. Il a été popularisé dans les années 1960 grâce à la vente de feuilles Letraset contenant des passages du Lorem Ipsum</p> <hr> </main> <aside> <h2>Sidebar</h2> <p>Contrairement à une opinion répandue, <a href="#">le Lorem Ipsum</a> n'est pas simplement du texte aléatoire. Il trouve ses racines dans une oeuvre de la littérature latine classique datant de 45 av. J.-C., le rendant vieux de 2000 ans. Un professeur du Hampden-Sydney College, en Virginie, s'est intéressé à un des mots latins les plus obscurs, consectetur, extrait d'un passage du Lorem Ipsum, et en étudiant tous les usages de ce mot dans la littérature classique, découvrit la source incontestable du Lorem Ipsum. Il provient en fait des sections 1.10.32 et 1.10.33 du "De Finibus Bonorum et Malorum" (Des Suprêmes Biens et des Suprêmes Maux) de Cicéron. Cet ouvrage, très populaire pendant la Renaissance, est un traité sur la théorie de l'éthique. Les premières lignes du Lorem Ipsum, "Lorem ipsum dolor sit amet...", proviennent de la section 1.10.32.</p> </aside> <div class="clear"></div> </div> </section>
/***************** CONTENU *****************/ section{ padding: 1em;} main { float: left; width: 65%; margin-right: 5%; margin-bottom: 1em; } aside { float: left; width: 30%; margin-bottom: 1em; } /***************** CONTENU *****************/
main
se voit dotée d'une largeur de 65 % de l'écran et aside
d'une largeur de 30% de l'écran, avec les 5% de marges cela fait bien 100%, ainsi lorsqu'une connexion aura lieu avec un plus petit écran, le site sera elastique et s'adaptera automatiquement (pourcentage % = responsive fluide)./***************** RESPONSIVE TABLETTE *****************/ @media (max-width: 60em) { /* une seule colonne (one column page) */ body:before{ background: #fda500; content: "responsive version tablette"; position: absolute; color: #fff; padding: 2px; font-size: 12px; } main{ width: 100%; } aside{ width: 100%; } } /***************** RESPONSIVE TABLETTE *****************/
RESPONSIVE DESIGN
1. Le Responsive Design 2. Exemples 3. Creer Sa Page Web 4. Site Web Responsive Design