_Blank – Etape 09

PrécédentSuivant

1Insertion d’image

3 Méthodes

  1. Utiliser la balise <img>
  2. Utiliser la balise <figure>
  3. Utiliser le style (voir Background Image)

Récupérer les éléments

Les images seront enregistrées dans HTML CSS/Site/images
(clic droit – enregistrer la cible du lien sous…)

  1. Image 01
  2. Image 02
  3. Image 03
  4. Image 04
  5. Image 05

2Manipulation
Image dans le corps du texte

  1. Ouvrir index-ALL.html depuis Notepad++
  2. Ligne 71 – Ajouter (après l’ouverture du <p> ) :
    <img src="images/imgDemo05.jpg" class="imgGauche" />
  3. Ligne 76 – Ajouter (après l’ouverture du <p> ) :
    <img src="images/imgDemo05.jpg" class="imgDroit" />
  4. Ligne 102 – Sauter une ligne.
    Ligne 103 (vide) – Ajouter <p class="imgCentre"><img src="images/imgDemo02.jpg" /></p>
  5. Ligne 136 – Ajouter (après l’ouverture du <p> ) :<figure class="imgDroit"><img src="images/imgDemo03.jpg" class="imgCentre" /><figcaption><h1>Le titre de l'image</h1><p>La légende de l'image</p></figcaption></figure>

Le code

<!DOCTYPE html>
<html lang="en">
<head>

  <!-- Basic Page Needs
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <meta charset="utf-8">
  <title>Your page title here :)</title>
  <meta name="description" content="">
  <meta name="author" content="">

  <!-- Mobile Specific Metas
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- FONT
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <link href="//fonts.googleapis.com/css?family=Raleway:400,300,600" rel="stylesheet" type="text/css">

  <!-- CSS
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/skeleton.css">
  <link rel="stylesheet" href="css/monstyle.css">

  <!-- Favicon
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <link rel="icon" type="image/png" href="images/favicon.png">

</head>
<body class="gris">

<!-- PAGE -->
<div class="container">

	<!-- ENTETE -->
	<div class="row">
		<header class="twelve columns vert">
		<p>Ici l'identité et la navigation du site.</p>
		</header>
	<!-- /ENTETE -->
	</div>
	
	<!-- ACCUEIL ligne 1 -->
	<div class="row">
		<div class="twelve columns violet">
		<p>Ici un slogan/une image représentative de l'identité/un service/un produit mis en avant.
		</p>
		</div>
	<!-- /ACCUEIL ligne 1 -->
	</div>
	<!-- ACCUEIL ligne 2 -->
	<div class="row">
		<article class="four columns magenta">
		<p>Ici un service/un produit mis en avant.</p>
		</article>
		<article class="four columns magenta">
		<p>Ici un service/un produit mis en avant.</p>
		</article>
		<article class="four columns magenta">
		<p>Ici un service/un produit mis en avant.</p>
		</article>
	<!-- /ACCUEIL ligne 2 -->
    </div>
	
	<!-- 2 COLONNES 2/3+1/3 -->
	<div class="row">
		<main class="eight columns bleu">
		<!-- PROPOS PRINCIPAL -->
		<h1>Consectetuer adipiscingelit</h1>
		<p><img src="images/imgDemo05.jpg" class="imgGauche" />Lorem ipsum dolor sit amet, consectetuer adipiscingelit. Aenean commodo ligula eget dolor. Aenean massa<strong>strong</strong>. Cum sociis natoque penatibuset magnis dis parturient montes, nascetur ridiculusmus. Donec quam felis, ultricies nec, pellentesqueeu, pretium quis, sem. Nulla consequat massa quisenim. Donec pede justo, fringilla vel, aliquet nec,vulputate eget, arcu. In enim justo, rhoncus ut,imperdiet a, venenatis vitae, justo. Nullam dictumfelis eu pede <a href="#">Ici un lien</a>mollis pretium. Integer tincidunt. Cras dapibus.Vivamus elementum semper nisi. Aenean vulputateeleifend tellus. Aenean leo ligula, porttitor eu,consequat vitae, eleifend ac, enim. Aliquam lorem ante,dapibus in, viverra quis, feugiat a, tellus. Phasellusviverra nulla ut metus varius laoreet. Quisque rutrum.Aenean imperdiet. Etiam ultricies nisi vel augue.Curabitur ullamcorper ultricies nisi.</p>
		<blockquote>Lorem ipsum dolor sit amet, consectetuer adipiscingelit. Aenean commodo ligula eget dolor.</blockquote>
		<h2>Aenean commodo ligula eget massa</h2>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscingelit. <b>Aenean commodo ligula</b> eget dolor. Aenean massa.Cum sociis natoque penatibus et magnis dis parturientmontes, nascetur ridiculus mus. Donec quam felis,ultricies nec, pellentesque eu, pretium quis, sem.</p>
		<h3>Cum sociis natoque penatibus et magnis</h3>
		<p><img src="images/imgDemo05.jpg" class="imgDroit" />Lorem ipsum dolor sit amet, consectetuer adipiscingelit. Aenean commodo ligula eget dolor. Aenean massa.Cum sociis natoque penatibus et magnis dis parturientmontes, nascetur ridiculus mus. Donec quam felis,ultricies nec, pellentesque eu, pretium quis, sem.</p>
		<ul>
		  <li>Lorem ipsum dolor sit amet consectetuer.</li>
		  <li>Aenean commodo ligula eget dolor.</li>
		  <li>Aenean massa cum sociis natoque penatibus.</li>
		</ul>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscingelit. Aenean commodo ligula eget dolor. Aenean massa.Cum sociis natoque penatibus et magnis dis parturientmontes, nascetur ridiculus mus. Donec quam felis,ultricies nec, pellentesque eu, pretium quis, sem.</p>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscingelit. Aenean commodo ligula eget dolor. Aenean massa.Cum sociis natoque penatibus et magnis dis parturientmontes, nascetur ridiculus mus. Donec quam felis,ultricies nec, pellentesque eu, pretium quis, sem.</p>
		</main>
		<aside class="four columns orange">
		<!-- PROPOS SECONDAIRE -->
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscingelit. Aenean commodo ligula eget dolor. Aenean massa.Cum sociis natoque penatibus et magnis dis parturientmontes, nascetur ridiculus mus. Donec quam felis,ultricies nec, pellentesque eu, pretium quis, sem.</p>
		<ul>
		  <li><a href="#">Lien possible vers une autre page</a></li>
		  <li><a href="#">Autre lien possible</a></li>
		  <li><a href="#">Relatif aux propos de la page</a></li>
		  <li><a href="#">Eventuellement vers un autre site</a></li>
		</ul>
		</aside>
	<!-- /2 COLONNES 2/3+1/3 -->
	</div>
	
	<!-- 2 COLONNES 1/3+2/3 ATTENTION L'ORDRE DES COLONNES EST GERE DANS LA FEUILLE DE STYLE-->
	<div class="row inversion">	
		<main class="eight columns bleu bureauDroit">
		<!-- PROPOS PRINCIPAL -->
		<h1>Consectetuer adipiscingelit</h1>
		<p class="imgCentre"><img src="images/imgDemo02.jpg" /></p>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscingelit. Aenean commodo ligula eget dolor. Aenean massa<strong>strong</strong>. Cum sociis natoque penatibuset magnis dis parturient montes, nascetur ridiculusmus. Donec quam felis, ultricies nec, pellentesqueeu, pretium quis, sem. Nulla consequat massa quisenim. Donec pede justo, fringilla vel, aliquet nec,vulputate eget, arcu. In enim justo, rhoncus ut,imperdiet a, venenatis vitae, justo. Nullam dictumfelis eu pede <a href="#">Ici un lien</a>mollis pretium. Integer tincidunt. Cras dapibus.Vivamus elementum semper nisi. Aenean vulputateeleifend tellus. Aenean leo ligula, porttitor eu,consequat vitae, eleifend ac, enim. Aliquam lorem ante,dapibus in, viverra quis, feugiat a, tellus. Phasellusviverra nulla ut metus varius laoreet. Quisque rutrum.Aenean imperdiet. Etiam ultricies nisi vel augue.Curabitur ullamcorper ultricies nisi.</p>
		<blockquote>Lorem ipsum dolor sit amet, consectetuer adipiscingelit. Aenean commodo ligula eget dolor.</blockquote>
		<h2>Aenean commodo ligula eget massa</h2>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscingelit. <b>Aenean commodo ligula</b> eget dolor. Aenean massa.Cum sociis natoque penatibus et magnis dis parturientmontes, nascetur ridiculus mus. Donec quam felis,ultricies nec, pellentesque eu, pretium quis, sem.</p>
		<h3>Cum sociis natoque penatibus et magnis</h3>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscingelit. Aenean commodo ligula eget dolor. Aenean massa.Cum sociis natoque penatibus et magnis dis parturientmontes, nascetur ridiculus mus. Donec quam felis,ultricies nec, pellentesque eu, pretium quis, sem.</p>
		<ul>
		  <li>Lorem ipsum dolor sit amet consectetuer.</li>
		  <li>Aenean commodo ligula eget dolor.</li>
		  <li>Aenean massa cum sociis natoque penatibus.</li>
		</ul>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscingelit. Aenean commodo ligula eget dolor. Aenean massa.Cum sociis natoque penatibus et magnis dis parturientmontes, nascetur ridiculus mus. Donec quam felis,ultricies nec, pellentesque eu, pretium quis, sem.</p>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscingelit. Aenean commodo ligula eget dolor. Aenean massa.Cum sociis natoque penatibus et magnis dis parturientmontes, nascetur ridiculus mus. Donec quam felis,ultricies nec, pellentesque eu, pretium quis, sem.</p>
		</main>
		<aside class="four columns orange bureauGauche">
		<!-- PROPOS SECONDAIRE -->
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscingelit. Aenean commodo ligula eget dolor. Aenean massa.Cum sociis natoque penatibus et magnis dis parturientmontes, nascetur ridiculus mus. Donec quam felis,ultricies nec, pellentesque eu, pretium quis, sem.</p>
		<ul>
		  <li><a href="#">Lien possible vers une autre page</a></li>
		  <li><a href="#">Autre lien possible</a></li>
		  <li><a href="#">Relatif aux propos de la page</a></li>
		  <li><a href="#">Eventuellement vers un autre site</a></li>
		</ul>
		</aside>
	<!-- /2 COLONNES 1/3+2/3 -->
	</div>
	
	<!-- PLEINE LARGEUR -->
	<div class="row">
		<main class="twelve columns bleu">
		<!-- PROPOS PRINCIPAL -->
		<h1>Consectetuer adipiscingelit</h1>
		<p><figure class="imgDroit"><img src="images/imgDemo03.jpg" /><figcaption><h1>Le titre de l'image</h1><p>La légende de l'image</p></figcaption></figure>Lorem ipsum dolor sit amet, consectetuer adipiscingelit. Aenean commodo ligula eget dolor. Aenean massa<strong>strong</strong>. Cum sociis natoque penatibuset magnis dis parturient montes, nascetur ridiculusmus. Donec quam felis, ultricies nec, pellentesqueeu, pretium quis, sem. Nulla consequat massa quisenim. Donec pede justo, fringilla vel, aliquet nec,vulputate eget, arcu. In enim justo, rhoncus ut,imperdiet a, venenatis vitae, justo. Nullam dictumfelis eu pede <a href="#">Ici un lien</a>mollis pretium. Integer tincidunt. Cras dapibus.Vivamus elementum semper nisi. Aenean vulputateeleifend tellus. Aenean leo ligula, porttitor eu,consequat vitae, eleifend ac, enim. Aliquam lorem ante,dapibus in, viverra quis, feugiat a, tellus. Phasellusviverra nulla ut metus varius laoreet. Quisque rutrum.Aenean imperdiet. Etiam ultricies nisi vel augue.Curabitur ullamcorper ultricies nisi.</p>
		<blockquote>Lorem ipsum dolor sit amet, consectetuer adipiscingelit. Aenean commodo ligula eget dolor.</blockquote>
		<h2>Aenean commodo ligula eget massa</h2>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscingelit. <b>Aenean commodo ligula</b> eget dolor. Aenean massa.Cum sociis natoque penatibus et magnis dis parturientmontes, nascetur ridiculus mus. Donec quam felis,ultricies nec, pellentesque eu, pretium quis, sem.</p>
		<h3>Cum sociis natoque penatibus et magnis</h3>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscingelit. Aenean commodo ligula eget dolor. Aenean massa.Cum sociis natoque penatibus et magnis dis parturientmontes, nascetur ridiculus mus. Donec quam felis,ultricies nec, pellentesque eu, pretium quis, sem.</p>
		<ul>
		  <li>Lorem ipsum dolor sit amet consectetuer.</li>
		  <li>Aenean commodo ligula eget dolor.</li>
		  <li>Aenean massa cum sociis natoque penatibus.</li>
		</ul>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscingelit. Aenean commodo ligula eget dolor. Aenean massa.Cum sociis natoque penatibus et magnis dis parturientmontes, nascetur ridiculus mus. Donec quam felis,ultricies nec, pellentesque eu, pretium quis, sem.</p>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscingelit. Aenean commodo ligula eget dolor. Aenean massa.Cum sociis natoque penatibus et magnis dis parturientmontes, nascetur ridiculus mus. Donec quam felis,ultricies nec, pellentesque eu, pretium quis, sem.</p>
		</main>
	<!-- /PLEINE LARGEUR -->
	</div>
	
	<!-- PIED -->
	<div class="row">
		<footer class="twelve columns vert">
		<p>Ici Rappel de l'identité/Adresse/Tél. et navigation secondaire du site - lien vers une page contact/les mentons légales/politique de confidentialité/Cookies/Conditions Générales d'Utilisation/Conditions Générales de Vente.</p>
		</footer>
	<!-- /PIED -->
	</div>

 
<!-- /PAGE -->
</div>

<!-- End Document
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
</body>
</html>

3Observation

Pour corriger les placements images, il faut créer les class assignées aux images, .imgGauche, .imgDroit et .imgCentre.
Il est également possible de cibler la balise <img> dans la feuille de style (moins précis que les styles précités) et la balise <figure>.

4Manipulation

  1. Ouvrir monstyle.css depuis Notepad++
  2. Ajouter ligne 9 : 
    .imgGauche {
float:  left;
margin-right: 4%;
}
.imgDroit {
float:  right;
margin-left: 4%;
}
.imgCentre {
text-align: center;
}

5Observation

Les class .imgGauche et .imgDroit  modifient le comportement des images. Elles « flottent », permettant l’habillage du texte (à droite ou à gauche selon le style).
imgCentre est attribué à la balise <p> qui « tient » l’image souhaitée centrée, c’est pourquoi la proposition align-text  est modifié – tout contenu dans le <p> sera centré.

6Manipulation
Image en fond d’un contenant

  1. Ouvrir index-ALL.html depuis Notepad++
  2. Ligne 47 – Remplacer la totalité de la ligne 47 par <div class="imgBandeau"></div>
  3. Ouvrir monstyle.css depuis Notepad++

Ajouter ligne 24 la déclaration du style annoncé précédemment class="imgBandeau"

.imgBandeau {
width: 100%;
height: 400px;
background-image: url('../images/imgDemo01.jpg');
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}

Observation

7Explications

Etapes 9 – Stade 2

Insertion simple d’une image dans le corps du texte = <img src="…">
+ insertion d’une <figure> – celle-ci contient une image <img> + une légende <figcaption> ( <figcaption> peut contenir un titre et un texte (court), soit <h1> + <p>, ou bien un simple texte <p>)
Le comportement des images est décidé depuis la feuille de style monstyle.css.
Les class css sont données dans les attributs possibles à l’image – ou au contenant <figcaption>. Ces class sont déclarées dans la feuille de style.

Etapes 9 – Stade 6

Un contenant <div> est déclaré ligne 47 auquel est attribué une class class="imgBandeau".
imgBandeau est déclaré dans la feuille de style monstyle.css.
Ce style reçoit comme propriété une largeur 100%, une hauteur 400px, une image de fond – cette image se trouve dans le dossier images et porte le nom de imgDemo01.jpg.
background-position fixe l’axe sur lequel nous plaçons cette image et background-repeat la répition (ou non) de l’image.
Background-size détermine la taille et le comportement adopté par l’image dans son contenant – ici cover nous remplira la zone définie par l’image homothétiquement.

Pour en savoir plus sur les images et les propriété de style adoptées

  1. Les images (HTML)
  2. Background-image – background-size

8Le code de cette étape

HTML

<!DOCTYPE html>
<html lang="en">
<head>

  <!-- Basic Page Needs
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <meta charset="utf-8">
  <title>Your page title here :)</title>
  <meta name="description" content="">
  <meta name="author" content="">

  <!-- Mobile Specific Metas
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- FONT
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <link href="//fonts.googleapis.com/css?family=Raleway:400,300,600" rel="stylesheet" type="text/css">

  <!-- CSS
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/skeleton.css">
  <link rel="stylesheet" href="css/monstyle.css">

  <!-- Favicon
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <link rel="icon" type="image/png" href="images/favicon.png">

</head>
<body class="gris">

<!-- PAGE -->
<div class="container">

	<!-- ENTETE -->
	<div class="row">
		<header class="twelve columns vert">
		<p>Ici l'identité et la navigation du site.</p>
		</header>
	<!-- /ENTETE -->
	</div>
	
	<!-- ACCUEIL ligne 1 -->
	<div class="row">
		<div class="twelve columns violet">
		<div class="imgBandeau"></div>
		</div>
	<!-- /ACCUEIL ligne 1 -->
	</div>
	<!-- ACCUEIL ligne 2 -->
	<div class="row">
		<article class="four columns magenta">
		<p>Ici un service/un produit mis en avant.</p>
		</article>
		<article class="four columns magenta">
		<p>Ici un service/un produit mis en avant.</p>
		</article>
		<article class="four columns magenta">
		<p>Ici un service/un produit mis en avant.</p>
		</article>
	<!-- /ACCUEIL ligne 2 -->
    </div>
	
	<!-- 2 COLONNES 2/3+1/3 -->
	<div class="row">
		<main class="eight columns bleu">
		<!-- PROPOS PRINCIPAL -->
		<h1>Consectetuer adipiscingelit</h1>
		<p><img src="images/imgDemo05.jpg" class="imgGauche" />Lorem ipsum dolor sit amet, consectetuer adipiscingelit. Aenean commodo ligula eget dolor. Aenean massa<strong>strong</strong>. Cum sociis natoque penatibuset magnis dis parturient montes, nascetur ridiculusmus. Donec quam felis, ultricies nec, pellentesqueeu, pretium quis, sem. Nulla consequat massa quisenim. Donec pede justo, fringilla vel, aliquet nec,vulputate eget, arcu. In enim justo, rhoncus ut,imperdiet a, venenatis vitae, justo. Nullam dictumfelis eu pede <a href="#">Ici un lien</a>mollis pretium. Integer tincidunt. Cras dapibus.Vivamus elementum semper nisi. Aenean vulputateeleifend tellus. Aenean leo ligula, porttitor eu,consequat vitae, eleifend ac, enim. Aliquam lorem ante,dapibus in, viverra quis, feugiat a, tellus. Phasellusviverra nulla ut metus varius laoreet. Quisque rutrum.Aenean imperdiet. Etiam ultricies nisi vel augue.Curabitur ullamcorper ultricies nisi.</p>
		<blockquote>Lorem ipsum dolor sit amet, consectetuer adipiscingelit. Aenean commodo ligula eget dolor.</blockquote>
		<h2>Aenean commodo ligula eget massa</h2>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscingelit. <b>Aenean commodo ligula</b> eget dolor. Aenean massa.Cum sociis natoque penatibus et magnis dis parturientmontes, nascetur ridiculus mus. Donec quam felis,ultricies nec, pellentesque eu, pretium quis, sem.</p>
		<h3>Cum sociis natoque penatibus et magnis</h3>
		<p><img src="images/imgDemo05.jpg" class="imgDroit" />Lorem ipsum dolor sit amet, consectetuer adipiscingelit. Aenean commodo ligula eget dolor. Aenean massa.Cum sociis natoque penatibus et magnis dis parturientmontes, nascetur ridiculus mus. Donec quam felis,ultricies nec, pellentesque eu, pretium quis, sem.</p>
		<ul>
		  <li>Lorem ipsum dolor sit amet consectetuer.</li>
		  <li>Aenean commodo ligula eget dolor.</li>
		  <li>Aenean massa cum sociis natoque penatibus.</li>
		</ul>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscingelit. Aenean commodo ligula eget dolor. Aenean massa.Cum sociis natoque penatibus et magnis dis parturientmontes, nascetur ridiculus mus. Donec quam felis,ultricies nec, pellentesque eu, pretium quis, sem.</p>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscingelit. Aenean commodo ligula eget dolor. Aenean massa.Cum sociis natoque penatibus et magnis dis parturientmontes, nascetur ridiculus mus. Donec quam felis,ultricies nec, pellentesque eu, pretium quis, sem.</p>
		</main>
		<aside class="four columns orange">
		<!-- PROPOS SECONDAIRE -->
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscingelit. Aenean commodo ligula eget dolor. Aenean massa.Cum sociis natoque penatibus et magnis dis parturientmontes, nascetur ridiculus mus. Donec quam felis,ultricies nec, pellentesque eu, pretium quis, sem.</p>
		<ul>
		  <li><a href="#">Lien possible vers une autre page</a></li>
		  <li><a href="#">Autre lien possible</a></li>
		  <li><a href="#">Relatif aux propos de la page</a></li>
		  <li><a href="#">Eventuellement vers un autre site</a></li>
		</ul>
		</aside>
	<!-- /2 COLONNES 2/3+1/3 -->
	</div>
	
	<!-- 2 COLONNES 1/3+2/3 ATTENTION L'ORDRE DES COLONNES EST GERE DANS LA FEUILLE DE STYLE-->
	<div class="row inversion">	
		<main class="eight columns bleu bureauDroit">
		<!-- PROPOS PRINCIPAL -->
		<h1>Consectetuer adipiscingelit</h1>
		<p class="imgCentre"><img src="images/imgDemo02.jpg" /></p>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscingelit. Aenean commodo ligula eget dolor. Aenean massa<strong>strong</strong>. Cum sociis natoque penatibuset magnis dis parturient montes, nascetur ridiculusmus. Donec quam felis, ultricies nec, pellentesqueeu, pretium quis, sem. Nulla consequat massa quisenim. Donec pede justo, fringilla vel, aliquet nec,vulputate eget, arcu. In enim justo, rhoncus ut,imperdiet a, venenatis vitae, justo. Nullam dictumfelis eu pede <a href="#">Ici un lien</a>mollis pretium. Integer tincidunt. Cras dapibus.Vivamus elementum semper nisi. Aenean vulputateeleifend tellus. Aenean leo ligula, porttitor eu,consequat vitae, eleifend ac, enim. Aliquam lorem ante,dapibus in, viverra quis, feugiat a, tellus. Phasellusviverra nulla ut metus varius laoreet. Quisque rutrum.Aenean imperdiet. Etiam ultricies nisi vel augue.Curabitur ullamcorper ultricies nisi.</p>
		<blockquote>Lorem ipsum dolor sit amet, consectetuer adipiscingelit. Aenean commodo ligula eget dolor.</blockquote>
		<h2>Aenean commodo ligula eget massa</h2>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscingelit. <b>Aenean commodo ligula</b> eget dolor. Aenean massa.Cum sociis natoque penatibus et magnis dis parturientmontes, nascetur ridiculus mus. Donec quam felis,ultricies nec, pellentesque eu, pretium quis, sem.</p>
		<h3>Cum sociis natoque penatibus et magnis</h3>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscingelit. Aenean commodo ligula eget dolor. Aenean massa.Cum sociis natoque penatibus et magnis dis parturientmontes, nascetur ridiculus mus. Donec quam felis,ultricies nec, pellentesque eu, pretium quis, sem.</p>
		<ul>
		  <li>Lorem ipsum dolor sit amet consectetuer.</li>
		  <li>Aenean commodo ligula eget dolor.</li>
		  <li>Aenean massa cum sociis natoque penatibus.</li>
		</ul>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscingelit. Aenean commodo ligula eget dolor. Aenean massa.Cum sociis natoque penatibus et magnis dis parturientmontes, nascetur ridiculus mus. Donec quam felis,ultricies nec, pellentesque eu, pretium quis, sem.</p>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscingelit. Aenean commodo ligula eget dolor. Aenean massa.Cum sociis natoque penatibus et magnis dis parturientmontes, nascetur ridiculus mus. Donec quam felis,ultricies nec, pellentesque eu, pretium quis, sem.</p>
		</main>
		<aside class="four columns orange bureauGauche">
		<!-- PROPOS SECONDAIRE -->
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscingelit. Aenean commodo ligula eget dolor. Aenean massa.Cum sociis natoque penatibus et magnis dis parturientmontes, nascetur ridiculus mus. Donec quam felis,ultricies nec, pellentesque eu, pretium quis, sem.</p>
		<ul>
		  <li><a href="#">Lien possible vers une autre page</a></li>
		  <li><a href="#">Autre lien possible</a></li>
		  <li><a href="#">Relatif aux propos de la page</a></li>
		  <li><a href="#">Eventuellement vers un autre site</a></li>
		</ul>
		</aside>
	<!-- /2 COLONNES 1/3+2/3 -->
	</div>
	
	<!-- PLEINE LARGEUR -->
	<div class="row">
		<main class="twelve columns bleu">
		<!-- PROPOS PRINCIPAL -->
		<h1>Consectetuer adipiscingelit</h1>
		<p><figure class="imgDroit"><img src="images/imgDemo03.jpg" /><figcaption><h1>Le titre de l'image</h1><p>La légende de l'image</p></figcaption></figure>Lorem ipsum dolor sit amet, consectetuer adipiscingelit. Aenean commodo ligula eget dolor. Aenean massa<strong>strong</strong>. Cum sociis natoque penatibuset magnis dis parturient montes, nascetur ridiculusmus. Donec quam felis, ultricies nec, pellentesqueeu, pretium quis, sem. Nulla consequat massa quisenim. Donec pede justo, fringilla vel, aliquet nec,vulputate eget, arcu. In enim justo, rhoncus ut,imperdiet a, venenatis vitae, justo. Nullam dictumfelis eu pede <a href="#">Ici un lien</a>mollis pretium. Integer tincidunt. Cras dapibus.Vivamus elementum semper nisi. Aenean vulputateeleifend tellus. Aenean leo ligula, porttitor eu,consequat vitae, eleifend ac, enim. Aliquam lorem ante,dapibus in, viverra quis, feugiat a, tellus. Phasellusviverra nulla ut metus varius laoreet. Quisque rutrum.Aenean imperdiet. Etiam ultricies nisi vel augue.Curabitur ullamcorper ultricies nisi.</p>
		<blockquote>Lorem ipsum dolor sit amet, consectetuer adipiscingelit. Aenean commodo ligula eget dolor.</blockquote>
		<h2>Aenean commodo ligula eget massa</h2>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscingelit. <b>Aenean commodo ligula</b> eget dolor. Aenean massa.Cum sociis natoque penatibus et magnis dis parturientmontes, nascetur ridiculus mus. Donec quam felis,ultricies nec, pellentesque eu, pretium quis, sem.</p>
		<h3>Cum sociis natoque penatibus et magnis</h3>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscingelit. Aenean commodo ligula eget dolor. Aenean massa.Cum sociis natoque penatibus et magnis dis parturientmontes, nascetur ridiculus mus. Donec quam felis,ultricies nec, pellentesque eu, pretium quis, sem.</p>
		<ul>
		  <li>Lorem ipsum dolor sit amet consectetuer.</li>
		  <li>Aenean commodo ligula eget dolor.</li>
		  <li>Aenean massa cum sociis natoque penatibus.</li>
		</ul>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscingelit. Aenean commodo ligula eget dolor. Aenean massa.Cum sociis natoque penatibus et magnis dis parturientmontes, nascetur ridiculus mus. Donec quam felis,ultricies nec, pellentesque eu, pretium quis, sem.</p>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscingelit. Aenean commodo ligula eget dolor. Aenean massa.Cum sociis natoque penatibus et magnis dis parturientmontes, nascetur ridiculus mus. Donec quam felis,ultricies nec, pellentesque eu, pretium quis, sem.</p>
		</main>
	<!-- /PLEINE LARGEUR -->
	</div>
	
	<!-- PIED -->
	<div class="row">
		<footer class="twelve columns vert">
		<p>Ici Rappel de l'identité/Adresse/Tél. et navigation secondaire du site - lien vers une page contact/les mentons légales/politique de confidentialité/Cookies/Conditions Générales d'Utilisation/Conditions Générales de Vente.</p>
		</footer>
	<!-- /PIED -->
	</div>

 
<!-- /PAGE -->
</div>

<!-- End Document
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
</body>
</html>

CSS

monstyle.css

@media (min-width: 550px) {

.bureauGauche {
margin-left: 0;
}
.bureauDroit {
float: right;
}
/*.bureauDroit {
position: absolute;
right: 0;
}*/
.imgGauche {
float:  left;
margin-right: 4%;
}
.imgDroit {
float:  right;
margin-left: 4%;
}
.imgCentre {
text-align: center;
}
.imgBandeau {
width: 100%;
height: 400px;
background-image: url('../images/imgDemo01.jpg');
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}

}

skeleton.css

/*
* Skeleton V2.0.4
* Copyright 2014, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 12/29/2014
*/


/* Table of contents
––––––––––––––––––––––––––––––––––––––––––––––––––
- Grid
- Base Styles
- Typography
- Links
- Buttons
- Forms
- Lists
- Code
- Tables
- Spacing
- Utilities
- Clearing
- Media Queries
*/


/* Grid
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.container {
  position: relative;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box; }
.column,
.columns {
  width: 100%;
  float: left;
  box-sizing: border-box; }

/* For devices larger than 400px */
@media (min-width: 400px) {
  .container {
    width: 85%;
    padding: 0; }
}

/* For devices larger than 550px */
@media (min-width: 550px) {
  .container {
    width: 80%; }
  .column,
  .columns {
    margin-left: 4%; }
  .column:first-child,
  .columns:first-child {
    margin-left: 0; }

  .one.column,
  .one.columns                    { width: 4.66666666667%; }
  .two.columns                    { width: 13.3333333333%; }
  .three.columns                  { width: 22%;            }
  .four.columns                   { width: 30.6666666667%; }
  .five.columns                   { width: 39.3333333333%; }
  .six.columns                    { width: 48%;            }
  .seven.columns                  { width: 56.6666666667%; }
  .eight.columns                  { width: 65.3333333333%; }
  .nine.columns                   { width: 74.0%;          }
  .ten.columns                    { width: 82.6666666667%; }
  .eleven.columns                 { width: 91.3333333333%; }
  .twelve.columns                 { width: 100%; margin-left: 0; }

  .one-third.column               { width: 30.6666666667%; }
  .two-thirds.column              { width: 65.3333333333%; }

  .one-half.column                { width: 48%; }

  /* Offsets */
  .offset-by-one.column,
  .offset-by-one.columns          { margin-left: 8.66666666667%; }
  .offset-by-two.column,
  .offset-by-two.columns          { margin-left: 17.3333333333%; }
  .offset-by-three.column,
  .offset-by-three.columns        { margin-left: 26%;            }
  .offset-by-four.column,
  .offset-by-four.columns         { margin-left: 34.6666666667%; }
  .offset-by-five.column,
  .offset-by-five.columns         { margin-left: 43.3333333333%; }
  .offset-by-six.column,
  .offset-by-six.columns          { margin-left: 52%;            }
  .offset-by-seven.column,
  .offset-by-seven.columns        { margin-left: 60.6666666667%; }
  .offset-by-eight.column,
  .offset-by-eight.columns        { margin-left: 69.3333333333%; }
  .offset-by-nine.column,
  .offset-by-nine.columns         { margin-left: 78.0%;          }
  .offset-by-ten.column,
  .offset-by-ten.columns          { margin-left: 86.6666666667%; }
  .offset-by-eleven.column,
  .offset-by-eleven.columns       { margin-left: 95.3333333333%; }

  .offset-by-one-third.column,
  .offset-by-one-third.columns    { margin-left: 34.6666666667%; }
  .offset-by-two-thirds.column,
  .offset-by-two-thirds.columns   { margin-left: 69.3333333333%; }

  .offset-by-one-half.column,
  .offset-by-one-half.columns     { margin-left: 52%; }

}


/* Base Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* NOTE
html is set to 62.5% so that all the REM measurements throughout Skeleton
are based on 10px sizing. So basically 1.5rem = 15px :) */
html {
  font-size: 62.5%; }
body {
  font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */
  line-height: 1.6;
  font-weight: 400;
  font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #222; }


/* Typography
–––––––––––––––––––––––––––––––––––––––––––––––––– */
h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 2rem;
  font-weight: 300; }
h1 { font-size: 4.0rem; line-height: 1.2;  letter-spacing: -.1rem;}
h2 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; }
h3 { font-size: 3.0rem; line-height: 1.3;  letter-spacing: -.1rem; }
h4 { font-size: 2.4rem; line-height: 1.35; letter-spacing: -.08rem; }
h5 { font-size: 1.8rem; line-height: 1.5;  letter-spacing: -.05rem; }
h6 { font-size: 1.5rem; line-height: 1.6;  letter-spacing: 0; }

/* Larger than phablet */
@media (min-width: 550px) {
  h1 { font-size: 5.0rem; }
  h2 { font-size: 4.2rem; }
  h3 { font-size: 3.6rem; }
  h4 { font-size: 3.0rem; }
  h5 { font-size: 2.4rem; }
  h6 { font-size: 1.5rem; }
}

p {
  margin-top: 0; }


/* Links
–––––––––––––––––––––––––––––––––––––––––––––––––– */
a {
  color: #1EAEDB; }
a:hover {
  color: #0FA0CE; }


/* Buttons
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
  display: inline-block;
  height: 38px;
  padding: 0 30px;
  color: #555;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  line-height: 38px;
  letter-spacing: .1rem;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  background-color: transparent;
  border-radius: 4px;
  border: 1px solid #bbb;
  cursor: pointer;
  box-sizing: border-box; }
.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
.button:focus,
button:focus,
input[type="submit"]:focus,
input[type="reset"]:focus,
input[type="button"]:focus {
  color: #333;
  border-color: #888;
  outline: 0; }
.button.button-primary,
button.button-primary,
input[type="submit"].button-primary,
input[type="reset"].button-primary,
input[type="button"].button-primary {
  color: #FFF;
  background-color: #33C3F0;
  border-color: #33C3F0; }
.button.button-primary:hover,
button.button-primary:hover,
input[type="submit"].button-primary:hover,
input[type="reset"].button-primary:hover,
input[type="button"].button-primary:hover,
.button.button-primary:focus,
button.button-primary:focus,
input[type="submit"].button-primary:focus,
input[type="reset"].button-primary:focus,
input[type="button"].button-primary:focus {
  color: #FFF;
  background-color: #1EAEDB;
  border-color: #1EAEDB; }


/* Forms
–––––––––––––––––––––––––––––––––––––––––––––––––– */
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea,
select {
  height: 38px;
  padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
  background-color: #fff;
  border: 1px solid #D1D1D1;
  border-radius: 4px;
  box-shadow: none;
  box-sizing: border-box; }
/* Removes awkward default styles on some inputs for iOS */
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none; }
textarea {
  min-height: 65px;
  padding-top: 6px;
  padding-bottom: 6px; }
input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="text"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
  border: 1px solid #33C3F0;
  outline: 0; }
label,
legend {
  display: block;
  margin-bottom: .5rem;
  font-weight: 600; }
fieldset {
  padding: 0;
  border-width: 0; }
input[type="checkbox"],
input[type="radio"] {
  display: inline; }
label > .label-body {
  display: inline-block;
  margin-left: .5rem;
  font-weight: normal; }


/* Lists
–––––––––––––––––––––––––––––––––––––––––––––––––– */
ul {
  list-style: circle inside; }
ol {
  list-style: decimal inside; }
ol, ul {
  padding-left: 0;
  margin-top: 0; }
ul ul,
ul ol,
ol ol,
ol ul {
  margin: 1.5rem 0 1.5rem 3rem;
  font-size: 90%; }
li {
  margin-bottom: 1rem; }


/* Code
–––––––––––––––––––––––––––––––––––––––––––––––––– */
code {
  padding: .2rem .5rem;
  margin: 0 .2rem;
  font-size: 90%;
  white-space: nowrap;
  background: #F1F1F1;
  border: 1px solid #E1E1E1;
  border-radius: 4px; }
pre > code {
  display: block;
  padding: 1rem 1.5rem;
  white-space: pre; }


/* Tables
–––––––––––––––––––––––––––––––––––––––––––––––––– */
th,
td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid #E1E1E1; }
th:first-child,
td:first-child {
  padding-left: 0; }
th:last-child,
td:last-child {
  padding-right: 0; }


/* Spacing
–––––––––––––––––––––––––––––––––––––––––––––––––– */
button,
.button {
  margin-bottom: 1rem; }
input,
textarea,
select,
fieldset {
  margin-bottom: 1.5rem; }
pre,
blockquote,
dl,
figure,
table,
p,
ul,
ol,
form {
  margin-bottom: 2.5rem; }


/* Utilities
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.u-full-width {
  width: 100%;
  box-sizing: border-box; }
.u-max-full-width {
  max-width: 100%;
  box-sizing: border-box; }
.u-pull-right {
  float: right; }
.u-pull-left {
  float: left; }


/* Misc
–––––––––––––––––––––––––––––––––––––––––––––––––– */
hr {
  margin-top: 3rem;
  margin-bottom: 3.5rem;
  border-width: 0;
  border-top: 1px solid #E1E1E1; }


/* Clearing
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Self Clearing Goodness */
.container:after,
.row:after,
.u-cf {
  content: "";
  display: table;
  clear: both; }


/* Media Queries
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/*
Note: The best way to structure the use of media queries is to create the queries
near the relevant code. For example, if you wanted to change the styles for buttons
on small devices, paste the mobile query code up in the buttons section and style it
there.
*/


/* Larger than mobile */
@media (min-width: 400px) {}

/* Larger than phablet (also point when grid becomes active) */
@media (min-width: 550px) {}

/* Larger than tablet */
@media (min-width: 750px) {}

/* Larger than desktop */
@media (min-width: 1000px) {}

/* Larger than Desktop HD */
@media (min-width: 1200px) {}

/* COULEURS ETAPE 4*/
/*.gris {
background-color: #e7e7e8;
}
.vert {
background-color: #99c555;
}
.violet {
background-color: #4e5ca5;
}
.magenta {
background-color: #d92c89;
}
.bleu {
background-color: #52a7dc;
}
.orange {
background-color: #e9973e;
}*/
/* MODIFICATION COLONNES ET LIGNES POUR LISIBILITE */
.container {
padding-top: 20px;
}
/*.column,
.columns {
height: 100px;
}*/
.row {
margin-bottom: 20px;
}

 

PrécédentSuivant
Article précédent_Blank – Etape 08
Article suivant_Blank – Etape 10 – Navigation responsive