Javascript 2

<div id="myDiv">
  <p>Un peu de texte <a>et un lien</a></p>
</div>

<script>
  var div = document.getElementById('myDiv');

  alert(div);
</script>

var divs = document.getElementsByTagName('div');

for (var i = 0, c = divs.length ; i < c ; i++) {
    alert('Element n° ' + (i + 1) + ' : ' + divs[i]);
}



var query = document.querySelector('#menu .item span'),
    queryAll = document.querySelectorAll('#menu .item span');

alert(query.innerHTML); // Affiche : "Élément 1"

alert(queryAll.length); // Affiche : "2"
alert(queryAll[0].innerHTML + ' - ' + queryAll[1].innerHTML); // Affiche : "Élément 1 - Élément 2"

JavaScript

En résumé

• Le Javascript est un langage de programmation interprété, c'est-à-dire qu'il a besoin d'un interpréteur pour pouvoir être exécuté.
• Le Javascript est utilisé majoritairement au sein des pages Web.
• Tout comme le HTML, le Javascript est exécuté par le navigateur de l'internaute : on parle d'un comportement client-side, par opposition au server-side lorsque le code est exécuté par le serveur.
• Le Javascript est standardisé par l'ECMA International sous le nom d'ECMAScript qui constitue la référence du langage. D'autres langages découlent de l'ECMAScript, comme ActionScript, EX4 ou encore JScript.NET.
• La dernière version standardisée du Javascript est basée sur l'ECMAScript 5, sorti en 2009.

En résumé

• Les instructions doivent êtres séparées par un point-virgule.
• Un code Javascript bien présenté est plus lisible et plus facilement modifiable.
• Il est possible d'inclure des commentaires au moyen des caractères //, /* et */.
• Les codes Javascript se placent dans un élément <script>.
• Il est possible d'inclure un fichier Javascript grâce à l'attribut src de l'élément <script>.

var myVariable;
var myvariable;
var MYVARIABLE;

Le Javascript étant un langage sensible à la casse

var myVariable = 5.5

var myVariable1, myVariable2 = 4, myVariable3;

var isTrue = true;
var isFalse = false;
var vrai=true;
    alert(typeof vrai);

var userName = prompt('Entrez votre prénom :');
alert(userName); // Affiche le prénom entré par l'utilisateur



var first, second, result;
first = prompt('Entrez le premier chiffre :');
second = prompt('Entrez le second chiffre :');
result = parseInt(first) + parseInt(second);
alert(result);

En résumé

• Une variable est un moyen pour stocker une valeur.
• On utilise le mot clé var pour déclarer une variable, et on utilise = pour affecter une valeur à la variable.
• Les variables sont typées dynamiquement, ce qui veut dire que l'on n'a pas besoin de spécifier le type de contenu que la variable va contenir.
• Grâce à différents opérateurs, on peut faire des opérations entre les variables.
• L'opérateur + permet de concaténer des chaînes de caractères, c'est-à-dire de les mettre bout à bout.
• La fonction prompt() permet d'interagir avec l'utilisateur.

var number = 4, text = '4', result;

result = number == text;
alert(result); // Affiche  « true » alors que « number » est un nombre et « text » une chaîne de caractères

result = number === text;
alert(result); // Affiche « false » car cet opérateur compare aussi les types des variables en plus de leurs valeurs

if (confirm('Pour accéder à ce site vous devez avoir 18 ans ou plus, cliquez sur "OK" si c\'est le cas.')) {
    alert('Vous allez être redirigé vers le site.');
}

else {
    alert("Désolé, vous n'avez pas accès à ce site.");
}

var floor = parseInt(prompt("Entrez l'étage où l'ascenseur doit se rendre (de -2 à 30) :"));

if (floor == 0) {

    alert('Vous vous trouvez déjà au rez-de-chaussée.');

} else if (-2 <= floor && floor <= 30) {

    alert("Direction l'étage n°" + floor + ' !');

} else {

    alert("L'étage spécifié n'existe pas.");

}

var drawer = parseInt(prompt('Choisissez le tiroir à ouvrir (1 à 4) :'));

switch (drawer) {
    case 1:
        alert('Contient divers outils pour dessiner : du papier, des crayons, etc.');
    break;

    case 2:
        alert('Contient du matériel informatique : des câbles, des composants, etc.');
    break;

    case 3:
        alert('Ah ? Ce tiroir est fermé à clé ! Dommage !');
    break;

    case 4:
        alert('Contient des vêtements : des chemises, des pantalons, etc.');
    break;

    default:
        alert("Info du jour : le meuble ne contient que 4 tiroirs et, jusqu'à preuve du contraire, les tiroirs négatifs n'existent pas.");
}

var startMessage = 'Votre catégorie : ',
    endMessage,
    adult = confirm('Êtes-vous majeur ?');

endMessage = adult ? '18+' : '-18';

alert(startMessage + endMessage);

En résumé

• Une condition retourne une valeur booléenne : true ou false.
• De nombreux opérateurs existent afin de tester des conditions et ils peuvent être combinés entre eux.
• La condition if else est la plus utilisée et permet de combiner les conditions.
• Quand il s'agit de tester une égalité entre une multitude de valeurs, la condition switch est préférable.
• Les ternaires sont un moyen concis d'écrire des conditions if else et ont l'avantage de retourner une valeur.

var number = 1;

while (number < 10) {
    number++;
}

alert(number); // Affiche : « 10 »

do {
    instruction_1;
    instruction_2;
    instruction_3;
} while (condition);

for (var iter = 0; iter < 5; iter++) {
    alert('Itération n°' + iter);
}

En résumé

L'incrémentation est importante au sein des boucles. Incrémenter ou décrémenter signifie ajouter ou soustraire une unité à une variable. Le comportement d'un opérateur d'incrémentation est différent s'il se place avant ou après la variable.
La boucle while permet de répéter une liste d'instructions tant que la condition est vérifiée.
La boucle do while est une variante de while qui sera exécutée au moins une fois, peu importe la condition.
La boucle for est une boucle utilisée pour répéter une liste d'instructions un certain nombre de fois. C'est donc une variante très ciblée de la boucle while.

function showMsg() {
    alert('Et une première fonction, une !');
}

showMsg();

function sayHello() {
    return 'Bonjour !';
    alert('Attention ! Le texte arrive !');
}

alert(sayHello());

var sayHello = function() {
    alert('Bonjour !');
};

(function() { // Début de la zone isolée

    var test = 'blanc'; // On crée une variable du même nom avec le contenu « blanc » dans la zone isolée
  
    alert('Dans la zone isolée, la couleur est : ' + test);

})();

function prompt2(text, allowCancel) {

    if (typeof allowCancel === 'undefined') { // Souvenez-vous de typeof, pour vérifier le type d'une variable
        allowCancel = false;
    }

En résumé

• Il existe des fonctions natives, mais il est aussi possible d'en créer, avec le mot-clé function.
• Les variables déclarées avec var au sein d'une fonction ne sont accessibles que dans cette fonction.
• Il faut éviter le plus possible d'avoir recours aux variables globales.
• Une fonction peut recevoir un nombre défini ou indéfini de paramètres. Elle peut aussi retourner une valeur ou ne rien retourner du tout.
• Des fonctions qui ne portent pas de nom sont des fonctions anonymes et servent à isoler une partie du code.

var myArray = new Array('Sébastien', 'Laurence', 'Ludovic', 'Pauline', 'Guillaume');

myArray[1] = 'Clarisse';

alert(myArray[1]);

myArray.push('Pauline', 'Guillaume'); // Ajoute « Pauline » et « Guillaume » à la fin du tableau

myArray.shift(); // Retire « Sébastien »
myArray.pop(); // Retire « Guillaume »



var cousinsString = 'Pauline Guillaume Clarisse',
    cousinsArray  = cousinsString.split(' ');
alert(cousinsArray);

var cousinsString_2 = cousinsArray.join('-');
alert(cousinsString_2);


var family = {
    self:     'Sébastien',
    sister:   'Laurence',
    brother:  'Ludovic',
    cousin_1: 'Pauline',
    cousin_2: 'Guillaume'
};

family['sister'];
family['uncle'] = 'Didier'; // « Didier » est ajouté et est accessible via l'identifiant « uncle »
for (var id in family) { // On stocke l'identifiant dans « id » pour parcourir l'objet « family »
 
    alert(family[id]);
  
}

En résumé

• Un objet contient un constructeur, des propriétés et des méthodes.
• Les tableaux sont des variables qui contiennent plusieurs valeurs, chacune étant accessible au moyen d'un indice.
• Les indices d'un tableau sont toujours numérotés à partir de 0. Ainsi, la première valeur porte l'indice 0.
• Des opérations peuvent être réalisées sur les tableaux, comme ajouter des items ou en supprimer.
• Pour parcourir un tableau, on utilise généralement une boucle for, puisqu'on connaît, grâce à la propriété length, le nombre d'items du tableau.
• Les objets littéraux sont une variante des tableaux où chaque item est accessible via un identifiant et non un indice.

Drupal

En résumé
• CMS veut dire Content Management System. En français, cela se traduit
par système de gestion des contenus ou SGC.
• Pour un CMS, tout est contenu : article, page, commentaire, etc.
• Un CMS permet de créer tout type de site web dès lors qu’il y a
manipulation de contenu (blog, catalogue de produits, etc.)
• Un CMS permet de faire une séparation stricte entre les informations
d’un contenu et leur présentation visuelle.
• Un CMS permet un travail collaboratif sur le contenu qu’il gère.

En résumé
• Drupal est un outil libre sous licence GPL v2, de même que
l’ensemble des modules que nous utiliserons dans cet ouvrage.
• L’architecture de Drupal est modulaire et peut être étendue dans
toutes les directions imaginables.
• Drupal implémente la quasi-totalité des concepts d’un CMS.
• De par sa nature complexe, il est important de garder en tête l’aspect
performance qui peut devenir le point faible d’un site Drupal.


En résumé
•L’étape de définition d’un projet n’est pas seulement utile, elle est
indispensable pour réaliser un travail propre et dans les délais fixés.
•Le site que vous concevez n’est pas là pour répondre à vos besoins,
mais à ceux de vos visiteurs et utilisateurs.
•La conception d’un site passe par la définition des acteurs (rôles), des
fonctionnalités attendues et de leur organisation (navigation).
•Faites le tri entre les fonctions fondamentales (ex. créer un article) et
les fonctions transversales et utilitaires (ex. générer un PDF).
•N’omettez jamais de définir précisément la plate-forme technique
cible et la fréquentation attendue.

En résumé
•Pour fonctionner, Drupal a besoin de PHP 5.0 et d’un service HTTP
(Apache ou IIS feront l’affaire).
•Toutes les ressources pour Drupal (Drupal lui-même, les traductions,
les modules, les thèmes) sont disponibles sur le site http://drupal.org.
•Si vous avez des questions à propos de l’installation, n’hésitez pas à
les poser sur le forum en français dédié à Drupal, à l’adresse
http://drupalfr.org/forumdans la rubrique Avant installation


site:drupal.org
inurl:project administration menu


En résumé
•L’administration de Drupal est certes complexe, mais elle est ration-nelle. En peu de temps, vous acquerrez les bons réflexes qui vous per-mettront de vous y repérer.
•L’ensemble des fonctions fondamentales de Drupal est issu des
modules fournis en standard.
•Il est possible d’étendre les fonctionnalités de Drupal à l’aide de nou-veaux modules que vous pouvez télécharger sur drupal.org.
•Drupal est un outil communautaire qui a besoin de votre aide.
Lorsque vous trouvez une erreur dans le cœur de Drupal ou dans l’un
de ses modules, n’hésitez jamais à signaler l’anomalie.
•Si vous butez sur un problème concernant un module, ou si vous
n’arrivez pas à identifier le modulecorrespondant à votre besoin, vous
pouvez poser une question sur le forum http://drupalfr.org/forum, dans la
section Support généra


En résumé
•Un rôle est une liste nommée de permis
•Chaque module définit son propre jeu d
•Drupal permet la création d’autant de rô
•À un utilisateur donné peuvent être a
nécessaire.
•Un utilisateur qui a saisi un identifiant
automatiquement du rôleUtilisateur ide
•Le visiteur ne possédant pas d'identifian
pour unique rôle Utilisateur anonyme.

Modules : pathauto,checkout,path redirect,comment_mover,External links filter,faq,diff,Taxonomy navigator,Tagadelic,date,nodeacess,quicktabs,Block Visibility Page,localization client,i18n,mobile_tools,blocks404


En résumé
•N’oubliez jamais que le type de contenu est un élément paramétrable.
Lorsque vous vous demanderez où se règle tel ou tel aspect lié au
contenu – par exemple après avoir installé un nouveau module –, ayez
le réflexe d’aller voir si ce paramétrage ne se trouve pas dans les types
de contenu.
•Les commentaires sont considérés comme des contenus ; par consé-
quent, leurs paramètres sont réglés par type de contenu et leur admi-
nistration se trouve dans la section Gestion des contenus.
•Les formats d’entrée permettent la transformation de ce que vous
avez saisi en un code XHTML. Vous pouvez créer de nouveaux for-
mats ou étendre des formats existants à l’aide de filtres fournis par des
modules.
•Si vous avez besoin d’aide, n’hésitez pas à poster des questions pré-
cises dans la section Support généralde drupalfr.org.


En résumé
•Le module Book permet de hiérarchiser des contenus les uns par rap-port aux autres. Une hiérarchie appelée Livre peut regrouper des con-tenus de tout type.
•Les révisions permettent d’historier chacune des modifications
apportées au contenu. Pensez toujours à indiquer les raisons de vos
modifications de contenu dans le journal des révisions.
•Le module CCK permet de créer des types de contenu complexes,
dotés de nouveaux champs. CCK est un outil fondamental pour
structurer les types de contenu.
•Le module Views permet de créer des listes de contenus présentées
sous la forme de pages.
•Il est possible d’étendre le système dedroits sur les contenus en ajou-tant de nouveaux modules. Attention, ces modules sont potentielle-ment incompatibles les uns avec les autres


En résumé
•Les blocs sont des unités de contenu qui peuvent être créés dynami-
quement par des modules, ou que l’on peut créer soi-même comme
n’importe quel contenu.
•Une région est une zone de la page sur laquelle peuvent être disposés
des blocs.
•Les régions sont définies par le thème.
•Un même bloc ne peut être dans deux régions différentes.
•Changer la structure d’une page consiste en particulier à jouer sur la
visibilité des blocs qui la composent.
•Un menu Drupal est un groupe contenant des éléments de menu.
•Chaque menu peut être transformé en bloc.


En résumé
•Les traductions disponibles sont le fruit d’un travail communautaire,
n’hésitez pas à y participer en créant un compte sur http://l10n.drupalfr.org/.
•Drupal en standard prend en charge une traduction des interfaces et
des contenus. Si vous souhaitez aller plus loin, le module I18N est un
passage obligé.


Les modèles sont des fichiers portant l’extension .tpl.phpet stockés à la
racine du thème. Leur rôle est de produire le rendu visuel soit d’un élé-ment spécifique de la page (un commentaire, un bloc ou un nœud), soit
de la page elle-même. Leur contenu est un mélange de code XHTML
pour la mise en forme, et de code PHP pour l’insertion des données à
présenter.

Le code PHP d’un modèle doit rester extrêmement simple et ne con-tenir que deux types d’instruction : printpour insérer le contenu d’une
variable, et éventuellement if/elsepour implémenter des conditions.


Dans le code de ce modèle, Bluemarine utilise ces deux identifiants pour
associer à chaque <div>représentant un bloc :
•la classe block, commune à tous les blocs ;
•la classe block-<nom du module>, commune à tous les blocs issus d’un
même module ;
•l’identifiant block-<nom du module>-<delta du bloc>, qui est spéci-fique à ce bloc uniquement.


Chaque donnée de Drupal est transformée en code XHTML par ce
qu’on appelle un « hook de thème ».

CSS

 

W3C : le garant des standards

Le W3C (World Wide Web Consortium) est un organisme mondial créé par Tim Berners-Lee dont l’objectif
est de garantir la pérennité et l’interopérabilité des standards de langage web. Composé de la plupart des
acteurs de la toile (Microsoft, Mozilla, Opera, IBM, …), le W3C a pour charge de rédiger et proposer les
spécifications HTML, XHTML, CSS, SVG, ECMAScript, etc.
*********************

 *********************
Priorité:

1. Poids « a » : règle CSS déclarée à l’aide de l’attribut HTML style= au sein de l’élément.
2. Poids « b » : sélecteur d’identifiant (id).
3. Poids «  c  »  : sélecteur de classe, d’attribut  ([]) ou de pseudo-classe (:hover,  :focus,
:first-child).
  4. Poids « d » : sélecteur d’élément (p, div, a,…) ou de pseudo-élément (:first-letter, :before,
:after, :first-line).
  5. Poids nul : sélecteur joker (*), de parenté (>) ou d’adjacence (+).
*********************

* une déclaration suivie du mot-clé !important devient préférentielle

*********************
Pseudo-Element :

#ariane:before {content: "Vous êtes ici : ";} /* à appliquer sur l’élément <ul
id="ariane"> */
Séparateurs « > » entre chaque élément du fil d’Ariane
#ariane li {display: inline}
#ariane li + li:before { content: "> "; }
Guillemets ouvrants au début d’un bloc de citation
blockquote:before {content: open-quote;}
Guillemets fermants à la fin d’un bloc de citation
blockquote:after {content: close-quote;}
Images de fond affichées avant et après chaque paragraphe
p:before {
  content: url(images/arrondi_haut.png);
}
p:after {
  content: url(images/arrondi_bas.png);
}
*********************
attr :

Partie HTML
<a href="http://www.alsacreations.com" title="s'ouvre dans une nouvelle fenêtre"
target="_blank">Le site d'Alsacréations</a>
Partie CSS
a[title]:after { /* on ne cible que les liens disposant d'un attribut title */
  content: " (" attr(title) ")"; /* on affiche la valeur de title à la suite du lien */
}

a[hreflang="fr"]:after { /* on ne cible que les liens disposant d'un attribut hreflang
➥ dont la valeur est « fr » */
  content: url(img/flag_fr.png); /* on affiche une image de drapeau */
}
*********************
@:

@import url(css/print.css) print;

@media
 
La règle @media indique qu’un bloc de règles ne concernera que des périphériques de sortie
déterminés. Par exemple, certains styles peuvent être définis pour l’écran uniquement, d’autres
pour l’impression :
@media screen
{
  body {background: url(img/wallpaper.jpg) center top;}
}
@media print
{
  body {background: #fff; color: #000;}
}

Les différents types de médias communément reconnus sont :
•  all (l’ensemble des médias possibles) ;
•  aural et speech (synthèses vocales) ;
•  handheld (mobiles) ;
•  print (imprimantes) ;
•  projection (projecteurs) ;
•  screen (écrans d’ordinateurs).
*********************



*********************
HTML avec microformats

<div class="vcard"> <!-- appel au format hCard -->
  <ul class="adr">  <!-- propriété globale d’adresse hCard -->
    <li class="fn org name">Alsacréations</li>
    <li class="title">Agence web exotique</li>
    <li class="street-address">5, rue des Couples</li>
    <li><span class="postal-code">67000</span>  <span class="locality">Strasbo
        </span> <span class="country-name">France</span></li>
  </ul>
  <p class="email">contact@alsacreations.fr</p>  <!-- classe hCard d’e-mail --
  <p class="tel">Tél. xx xx xx xx xx</p>  <!-- classe hCard de téléphone -->
  <p class="social url">   <!-- classes hCard de type social et de lien -->
    <a href="http://twitter.com/alsacreations">Twitter</a>
  </p>
</div>
*********************

Ordre préferé:

  1. Contenu créé : les propriétés afférentes au contenu créé via :after et :before (content, coun-
ter, quotes).
  2. Propriété display : tout ce qui affecte le rendu par défaut de l’élément (none, block, inline,
inline-block, table, table-cell, table-row, box, list-item).
  3. Positionnement : tout ce qui détermine la position de l’élément (position, float, top, right,
bottom, left, vertical-align, z-index, clear).
  4. Modèle de boîte : tout ce qui influe sur les dimensions de l’élément (width, height, min-width,
min-height, max-width, max-height, padding, margin, border, overflow).
  5. Transformations et transitions  : propriétés et valeurs CSS 3 (transform, rotate, scale,
skew, transition).
  6. Typographie  : tout ce qui détermine les caractéristiques de la police de caractères (font,
text-align, text-decoration, letter-spacing, text-indent, line-height, text-transform,
white-space, word-wrap).
  7. Décoration : les propriétés purement ornementales (background, color, list-style, outline).
*********************

Bien Commenter:

/* ----------------------------- */
/*  =     Header                 */
/* ----------------------------- */
Toujours dans l’optique de mieux appréhender un projet en commun, CSSdoc (www.cssdoc.net)
propose une convention à appliquer au sein des commentaires d’un document CSS. Toute per-
sonne partageant des fichiers CSS, qu’elle soit intégrateur, développeur ou créatif, peut tirer
bénéfice de cette recommandation née en 2008.
**********************
supprimer toutes les marges et retraits internes des éléments à l’aide du sélecteur universel étoile:

* {
  margin: 0;
  padding: 0;
}
*********************
Quelques règles utiles:

Voici une liste de quelques règles à suivre dans la mesure du possible :
•  N’utilisez pas de sélecteur universel (caractère étoile). Exemple à éviter : * {margin: 0;}.
•  Limitez le nombre de sélecteurs de descendance (caractère espace). Privilégiez #header a à
#header ul li a.
•  Choisissez si possible le sélecteur d’enfant (>) plutôt que le sélecteur de descendance (carac-
tère espace). Préférez #header  >  img à #header  img, tout en tenant compte que ce sélecteur
n’est pas reconnu par IE6.
•  Autant que possible, utilisez un identifiant, une classe ou un sélecteur d’élément, mais pas
une combinaison de deux ou trois. Préférez #header a à div#header menu a.lien.
•  Évitez de faire précéder un identifiant par le nom de l’élément ciblé (idem pour les classes).
Préférez #nav à ul#nav.

*********************
Conseils:

 *********************

Fusion des marges(verticales):

Dans les différents cas suivants, la fusion des marges ne s’applique pas entre un parent et son
enfant :
•  Lorsqu’une bordure est appliquée sur le parent. Une simple bordure haute ou basse suffit e
il est possible de rendre cette bordure invisible avec une déclaration de type border-top: 1px
solid transparent, qui est reconnue depuis IE7. Attention, toutefois, à ne pas oublier que la
largeur de la bordure compte dans le calcul des dimensions de la boîte.
•  Lorsqu’une marge interne (padding) haute ou basse est appliquée au parent. Là aussi, un
simple padding-top: 1px fonctionne, mais doit être pris en compte dans la hauteur du parent
Cette astuce fonctionne sur tous les navigateurs.
•  Lorsqu’un contenu orphelin (non balisé) est introduit avant le premier enfant : n’importe que
texte brut, ou caractère, empêche alors la fusion de marges.
•  Lorsque la déclaration overflow:  hidden ou overflow:  auto est appliquée sur le parent. Cette
solution est intéressante, mais a d’autres conséquences (empêche le dépassement des flot
tants, peut cacher les contenus qui dépassent ou faire apparaître des barres de défilement). À
utiliser avec prudence.
•  Lorsque le parent est positionné hors du flux (position absolue, fixée ou flottement). Il s’agi
là aussi d’une manœuvre séduisante, mais qui a des répercussions sur l’ensemble du design
de votre page web.
***************************
Display:

***************************
Feuille de styles par défaut fournie par la spécification CSS 2.1:

html, address,
blockquote,
body, dd, div,
dl, dt, fieldset, form,
frame, frameset,
h1, h2, h3, h4,
h5, h6, noframes,
ol, p, ul, center,
dir, hr, menu, pre   { display: block }
li              { display: list-item }
head            { display: none }
table           { display: table }
tr              { display: table-row }
thead           { display: table-header-group}
tbody           { display: table-row-group }
tfoot           { display: table-footer-group}
col             { display: table-column }
colgroup        { display: table-column-group}
td, th          { display: table-cell }
caption         { display: table-caption }
input, select   { display: inline-block }
*********************
Position:absolue :

Un élément positionné en absolu se place par rapport à son premier ancêtre positionné
Le principe est le suivant : le bloc positionné en absolu remonte toute sa branche au sein de la
hiérarchie dans le code HTML. Il vérifie si son parent est « positionné », c’est-à-dire s’il est
muni de la propriété position avec une valeur autre que static. Si tel n’est pas le cas, il remonte
d’une génération et ainsi de suite jusqu’à trouver un ancêtre positionné. En dernier recours, si
l’élément positionné absolument ne rencontre aucun ancêtre positionné, son référent est l’élé-
ment racine <html>.
Nous comprenons, grâce à cette règle, qu’il devient aisé d’indiquer une référence à un bloc
absolu  : il suffit d’appliquer une déclaration position:  absolute, position:  fixed ou posi-
tion: relative à cet élément de référence (figure 4-16).
*******************
Notez que seuls les éléments « positionnés » peuvent être affectés par cette propriété d’empilement
z-index.
*******************
Étirer un élément :

Dans le cas où l’élément absolu est « dimensionné » à l’aide de ses paires contraires, il devient
possible d’occuper 100 % de la largeur tout en bénéficiant de padding et de border :
#header {
  position: absolute;
  left: 0; right: 0; /* s’étend sur toute la largeur  */
  padding: 20px; /* le padding est inclus à l’intérieur  */
  background: #abc;
}
****************************

Positionnement fixé :

•  Un élément est dit fixé lorsqu’il bénéficie de la déclaration position: fixed.
•  Puisqu’on lui applique une propriété position, l’élément est dit « positionné » (il sert donc de
référent aux éléments positionnés en absolu).
•  Un bloc fixé sort du flux et se place dans un autre plan, laissant les éléments en flux se réor-
ganiser entre eux.
•  La boîte d’un élément fixé devient dimensionnable, à l’instar des éléments absolus.
Le positionnement fixé se distingue principalement de son cousin absolu de par sa particularité
de rendu  : un élément fixé demeure ancré à l’écran même lorsque l’utilisateur fait défiler le
contenu à l’aide des ascenseurs (scrollbars).
En termes de localisation, et lorsque les propriétés top, right, bottom et left sont précisées, l’élé­
ment fixé est toujours positionné par rapport à la partie visible de la fenêtre du navigateur, quel
que soit son ancêtre, fût-il positionné.
***************************

Positionnement relatif :

Troisième et petit frère de la famille, le positionnement relatif porte à mon sens très mal son
nom, tout simplement parce qu’il ne représente en aucune manière un positionnement tel qu’il a
été défini jusque là, mais un simple décalage.
Un élément positionné relativement se place par rapport à sa position classique dans le flux,
puis est éventuellement décalé si au moins une des propriétés top, right, bottom ou left est
renseignée. La notion de « relatif » s’applique par conséquent à son emplacement initial dans le
flux (figure 4-20).
Contrairement aux schémas absolus et fixés, les propriétés top, right, bottom et left ne servent
plus à indiquer un emplacement, mais un décalage par rapport à la position initiale.
Un élément relatif demeure dans le flux et continue à interagir avec les autres éléments voisins.
D’ailleurs, l’espace laissé par un élément décalé en relatif ne peut pas être occupé par d’autres
éléments, car il est toujours censé l’occuper (figure 4-21).
****************************

Positionnement flottant :

La propriété float apparaît dès CSS 1, classée dans les « modèles de mise en forme », tels que
inline et block (un peu comme si l’idée avait été de créer une règle de type display: float).
Le principe de base est pourtant élémentaire : un élément flottant est ôté du flux et placé à l’ex­
trême gauche (float: left) ou droite (float: right) de son conteneur, tout en demeurant sur sa
hauteur de ligne initiale dans le flux.
-Cela signifie qu’un parent ne contenant que des flottants n’occupera physiquement aucune sur-
face à l’écran,
**************************
Priorité entre les propriétés display, float et position :

  1. Si display: none est appliqué, alors l’élément ne crée pas de boîte et les propriétés position
et float ne sont pas employables.
  2. Sinon, si une propriété position est appliquée et a pour valeur absolute ou fixed, ce schéma
devient prioritaire, la valeur de la propriété float est forcée à none et l’élément est placé selon
les éventuelles valeurs de top, right, bottom et left.
  3. Sinon, si une propriété float est appliquée avec la valeur left ou right, l’élément devient
flottant.
  4. Sinon, l’élément est disposé selon son mode de rendu par défaut inhérent à la propriété dis-
play (inline, block, list-item, etc.).
**************************
Parmi les schémas de positionnement offrant la possibilité de placer deux éléments dimension-
nés côte à côte, citons display:  inline-block et display:  table-cell
**************************

Astuce inline-block:

Dans la feuille de styles CSS classique
element {
  display: inline-block;
}
Dans une feuille de styles CSS conditionnelle pour les versions d’IE antérieures à IE8
element {  /* @bugfix inline-block sur IE6/IE7 */
  display: inline;
  zoom: 1; /* donner le layout */
}
*************************
Supprimer les whitespace directement au sein du code :

<div>
  <p>Lorem Elsass ipsum</p><p>réchime amet sed bissame so libero knackes
choucroute...</p><p>Hopla kuglopf flammekueche</p> /* plus de whitespace entre les
éléments */
</div>
************************
Display:table :

Partie HTML
<div id="header">en-tête</div>
<div id="main">
  <p id="menu">ici le menu</p>
  <p id="content">ici le contenu</p>
  <p id="news">ici les news</p>
</div>
<div id="footer">pied de page</div>
Partie CSS
#header {
  background: #555;
  color: white;
}
#main {
  display: table;
  width: 100%;
}
#menu, #news {
  width: 25%;
  display: table-cell
  background: #bbb;
}
#content {
  display: table-cell
}
#footer {
  background: #555;
  color: white;
}

**********************

Construire un Tableau :

#main {
  display: table;
  border-collapse: separate; /* pour apercevoir les séparations */
  border-spacing: 4px;
}
.row {
  display: table-row;
}
.row > div {  /* les div de premier niveau uniquement */
  display: table-cell;
  padding: 1em;
  background-color: #abc;
}



***************************
Le modèle de boîte flexible:



Partie HTML
<div id="main">
  <p>une boîte</p>
  <p>encore une boîte</p>
  <p>et encore une troisième boîte</p>
  <p>et hop !</p>
</div>


Partie CSS
#main {
  display: -moz-box;
  display: -webkit-box;
  display: box;
}
Empilement vertical ou horizontal :



#main {
  display: -moz-box;
  display: -webkit-box;
  display: box;
  -moz-box-orient: vertical;

  -webkit-box-orient: vertical;
  box-orient: vertical;
}
Ordre d’empilement :




#main {
  display: -moz-box;
  display: -webkit-box;
  display: box;
  -moz-box-orient: vertical;
  -webkit-box-orient: vertical;
  box-orient: vertical;
  -moz-box-direction: reverse;
  -webkit-box-direction: reverse;
  box-direction: reverse;
}
************************

#main > p {
  -moz-box-ordinal-group: 2;
  -webkit-box-ordinal-group: 2;
  box-ordinal-group: 2;
}

#main > p:last-child {
  -moz-box-ordinal-group: 1;
  -webkit-box-ordinal-group: 1;
  box-ordinal-group: 1;
}
***********************

Flexibilité : remplir l’espace :

Une boîte devient flexible à partir du moment où elle se voit attribuer la propriété box-flex avec
une valeur supérieure ou égale à 1. Elle s’étend alors sur toute la surface disponible restante au
sein de son parent .

#main {
  ...
  width: 100%;
}
#main > p:first-child {
  -moz-box-flex: 1;
  -webkit-box-flex: 1;
  box-flex: 1;
}
*************************

ul {
  display: -webkit-box;
  display: -moz-box;
  display: box;
  -webkit-box-align: center; /* alignement vertical */
  -moz-box-align: center;
  box-align: center;
  -webkit-box-pack: center; /* alignement horizontal */
  -moz-box-pack: center;
  box-pack: center;
}
*************************
Les différents schémas de positionnement CSS :


*************************

Astuces:


#toto { /* Pour IE6/IE7 et les anciens navigateurs */
  display: inline;
  zoom: 1;
}
:lang(fr) #toto {  /* Pour les navigateurs modernes et IE8 */
  display: inline-block;
}


<!--[if IE]>
  ici votre code HTML réservé à IE
<![endif]-->


<!--[if IE 6]> pour IE6 uniquement <![endif]-->
<!--[if gt IE 6]>   pour   les   versions   supérieures   à   IE 6   <![endif]-->
<!--[if gte IE 6]>   pour   les   versions   supérieures   ou   égales   à   IE 6   <![endif] -- >
<!--[if lt IE 8]>   pour   les   versions   inférieures   à   IE 8   <![endif]-->
<!--[if lte IE 8]> pour les versions inférieures ou égales à IE 8   <![endif]-->




<!--[if (gte IE 6)&(lte IE 8)]> entre les versions IE 6 et IE 8 uniquement <![endif]
-->
<!--[if (IE 6)|(IE 8)]> pour les versions IE 6 ou IE 8 uniquement <![endif]-->
<!--[if !IE]><!--> pour les navigateurs non IE <!--<![endif]-->


<link rel="stylesheet" href="styles.css" type="text/css" />
<!--[if lt IE 8]>
<link rel="stylesheet" href="styles_ie.css" type="text/css" />
<![endif]-->


<!--[if lte IE 7]>   <body   class="ie7">   <![endif]-->
<!--[if !IE]><!--> <body> <!--<![endif]-->