_Blank – Etape 08

PrécédentSuivant

1Manipulation

  1. Ouvrir index-ALL.html depuis Notepad++
  2. Remplacer tous les textes présents dans les balises <main> (soit : Ici le texte principale de la page – Peut contenir, texte, lien, image(s), vidéo imbriquée, Google Map imbriqué.) par le (faux texte) propos principal proposé dans ce document (Clic droit > « enregistrer la cible du lien sous » dans le dossier BASE).
  3. Remplacer tous les textes présents dans les balises <aside>  (soit : Contenu secondaire – peut contenir liens relatifs au site pointant vers d’autres pages du site ou autres sites – Images, Annonces publicitaires, vidéo imbriquée, Google Map imbriqué.) par le (faux texte) propos secondaire proposé dans le même document.

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

2Observation

Problème de lecture/d’interprétation de nos deux colonnes inversées…
La position en mode absolu – absolute – a sorti l’élément du flux. (Ce qui semblait être une bonne idée sans contenu)
Pour le positionner à droite, nous pouvons lui indiquer qu’il « flotte à droite » – float: right; dans la feuille de style corrective – monstyle.css – et supprimer la modification de son positionnement (par défaut les colonnes sont en mode relatif).

Manipulation

Ouvrir monstyle.css depuis Notepad++
lignes 6 à 9

.bureauDroit {
position: absolute;
right: 0;
}

devient

.bureauDroit {
float: right;
}

3Observation

 

4Suppression des couleurs

Manipulation

Ouvrir skeleton.css depuis Notepad++

  1. Commenter les lignes 421 à 438 
    /*.gris {
background-color: #e7e7e8;
}
.vert {
background-color: #99c555;
}
.violet {
background-color: #4e5ca5;
}
.magenta {
background-color: #d92c89;
}
.bleu {
background-color: #52a7dc;
}
.orange {
background-color: #e9973e;
}*/

5Observation

Tout est interprété (dans votre navigateur) depuis la feuille de style skeleton.css et les correctifs apportés dans la feuille de style monstyle.css.
h1, h2, h3, paragraphe, liste, éléments de liste, liens (couleur, soulignement, comportement au survol) – placement/positionnement, colonnage…
(Supprimer ces deux feuilles de style nous ramène à la seule interprétation de celle de votre navigateur.)

PrécédentSuivant
Article précédent_Blank – Etape 07
Article suivant_Blank – Etape 09