© Proxym-IT 
http://twitter.com/proxymit 
conforme aux standards W3C 
Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia...
© Proxym-IT 
http://twitter.com/proxymit 
Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia 
Phone : +216 73 82 12 22 /...
© Proxym-IT 
http://twitter.com/proxymit 
Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia 
Phone : +216 73 82 12 22 /...
© Proxym-IT 
http://twitter.com/proxymit 
Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia 
Phone : +216 73 82 12 22 /...
© Proxym-IT 
http://twitter.com/proxymit 
Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia 
Phone : +216 73 82 12 22 /...
© Proxym-IT 
http://twitter.com/proxymit 
Avantages et exigences du XHTML 
 Un code simplifié, plus léger, moins bavard. ...
© Proxym-IT 
http://twitter.com/proxymit 
Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia 
Phone : +216 73 82 12 22 /...
© Proxym-IT 
http://twitter.com/proxymit 
Règles de formatages des balises 
• XHTML est strict sur les points suivants et ...
© Proxym-IT 
http://twitter.com/proxymit 
<a href="http://www.site.com/script.html?d=1&amp;v=val">Lien correct</a> 
<a hre...
© Proxym-IT 
http://twitter.com/proxymit 
Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia 
Phone : +216 73 82 12 22 /...
© Proxym-IT 
http://twitter.com/proxymit 
Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia 
Phone : +216 73 82 12 22 /...
© Proxym-IT 
http://twitter.com/proxymit 
Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia 
Phone : +216 73 82 12 22 /...
© Proxym-IT 
http://twitter.com/proxymit 
Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia 
Phone : +216 73 82 12 22 /...
© Proxym-IT 
http://twitter.com/proxymit 
Le rendu par défaut des éléments XHTML 
• même lorsqu'aucun style 
Important <h1...
© Proxym-IT 
http://twitter.com/proxymit 
Le rendu par défaut des éléments 
Technopole de Sousse / BP 184 – 4051 Sousse, T...
© Proxym-IT 
http://twitter.com/proxymit 
Le rendu par défaut : Le «display» 
• La propriété CSS « display » définit le ty...
© Proxym-IT 
http://twitter.com/proxymit 
Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia 
Phone : +216 73 82 12 22 /...
© Proxym-IT 
http://twitter.com/proxymit 
Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia 
Phone : +216 73 82 12 22 /...
© Proxym-IT 
http://twitter.com/proxymit 
Les sélecteurs en CSS permettent de cibler précisément n'importe 
quel élément d...
© Proxym-IT 
http://twitter.com/proxymit 
Les sélecteurs d’attribut ciblent un élément en utilisant la présence 
d’un cert...
© Proxym-IT 
http://twitter.com/proxymit 
Les sélecteurs CSS : Les pseudo-formats 
Les pseudo-classes CSS: 
Une pseudo-cla...
© Proxym-IT 
http://twitter.com/proxymit 
Les sélecteurs CSS : Les pseudo-formats 
Les pseudo-élément CSS: 
Comme les pseu...
© Proxym-IT 
http://twitter.com/proxymit 
.profilBox a.video{} .profilBox a.view {} 
Technopole de Sousse / BP 184 – 4051 ...
© Proxym-IT 
http://twitter.com/proxymit 
Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia 
Phone : +216 73 82 12 22 /...
© Proxym-IT 
http://twitter.com/proxymit 
Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia 
Phone : +216 73 82 12 22 /...
© Proxym-IT 
http://twitter.com/proxymit 
Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia 
Phone : +216 73 82 12 22 /...
© Proxym-IT 
http://twitter.com/proxymit 
Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia 
Phone : +216 73 82 12 22 /...
© Proxym-IT 
http://twitter.com/proxymit 
Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia 
Phone : +216 73 82 12 22 /...
© Proxym-IT 
http://twitter.com/proxymit 
La propriété CSS font est un raccourci pour la définition de font-style, font-va...
© Proxym-IT 
http://twitter.com/proxymit 
Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia 
Phone : +216 73 82 12 22 /...
© Proxym-IT 
http://twitter.com/proxymit 
Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia 
Phone : +216 73 82 12 22 /...
© Proxym-IT 
http://twitter.com/proxymit 
Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia 
Phone : +216 73 82 12 22 /...
© Proxym-IT 
http://twitter.com/proxymit 
Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia 
Phone : +216 73 82 12 22 /...
© Proxym-IT 
http://twitter.com/proxymit 
Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia 
Phone : +216 73 82 12 22 /...
© Proxym-IT 
http://twitter.com/proxymit 
/* propriétés communes */ 
} 
#shop .contentBlock { 
/* propriétés spécifiques *...
© Proxym-IT 
http://twitter.com/proxymit 
#subnav { /* Styles */ } 
#subnav li { /* Styles */ } 
#subnav li.subnavitem { /...
© Proxym-IT 
http://twitter.com/proxymit 
Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia 
Phone : +216 73 82 12 22 /...
© Proxym-IT 
http://twitter.com/proxymit 
Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia 
Phone : +216 73 82 12 22 /...
© Proxym-IT 
http://twitter.com/proxymit 
Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia 
Phone : +216 73 82 12 22 /...
© Proxym-IT 
http://twitter.com/proxymit 
Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia 
Phone : +216 73 82 12 22 /...
© Proxym-IT 
http://twitter.com/proxymit 
Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia 
Phone : +216 73 82 12 22 /...
© Proxym-IT 
http://twitter.com/proxymit 
Le « layout » avec N colonnes fixes 
Technopole de Sousse / BP 184 – 4051 Sousse...
© Proxym-IT 
http://twitter.com/proxymit 
Le « layout » avec N colonnes fixes 
#layout{ width:900px; margin:0 auto; } 
Tec...
© Proxym-IT 
http://twitter.com/proxymit 
Le « layout » avec N colonnes fixes 
#layout{ width:900px; margin:0 auto; } 
3. ...
© Proxym-IT 
http://twitter.com/proxymit 
Le « layout » avec N colonnes fixes 
Technopole de Sousse / BP 184 – 4051 Sousse...
© Proxym-IT 
http://twitter.com/proxymit 
Le « layout » avec N colonnes fixes 
Technopole de Sousse / BP 184 – 4051 Sousse...
© Proxym-IT 
http://twitter.com/proxymit 
Un « layout » fluide avec N colonnes 
Avec trois colonnes 
Technopole de Sousse ...
© Proxym-IT 
http://twitter.com/proxymit 
Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia 
Phone : +216 73 82 12 22 /...
© Proxym-IT 
http://twitter.com/proxymit 
Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia 
Phone : +216 73 82 12 22 /...
Prochain SlideShare
Chargement dans…5
×

Intégration graphique en XHTML / CSS

208 vues

Publié le

Cette présentation explique comment intégrer une page web en XHTML/CSS de qualité en respectant les normes W3C.

Publié dans : Logiciels
0 commentaire
1 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
208
Sur SlideShare
0
Issues des intégrations
0
Intégrations
5
Actions
Partages
0
Téléchargements
0
Commentaires
0
J’aime
1
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive
  • Nodejs est un logiciel permettant d'exécuter du JavaScript côté serveur, contrairement à ce qu'on a l'habitude de voir avec le javascript côté client.
  • Le XHTML est compatible avec les anciennes versions du HTML et accompagne le passage aux technologies modulaires et extensibles du XML.
  • Le XHTML est compatible avec les anciennes versions du HTML et accompagne le passage aux technologies modulaires et extensibles du XML.
  • Les attributs sont toujours avec des guillemets
    La minimisation des attributs est interdite
    Les éléments <script> et <style> sont déclarés comme possédant un contenu de données textuelles analysées (PCDATA : Parsed Character DATA)
    Automatiquement, les agents utilisateurs sup primeront les espaces de début et de fin des valeurs d'attributs et si plusieurs espaces se suivent, ils seront remplacés par un unique espace.
    L'utilisation de l'eperluette dans une valeur d'attribut doit se faire par l'intermédiaire de sa référence d'entité caractère, &amp
    Les retours à la ligne dans les valeurs d'attributs sont à proscrire
  • Le terme sélecteur désigne la partie précédant le bloc de déclaration, à gauche de l’accolade ouvrante. Il peut être un sélecteur d’élément p, une classe .list-inline, un ID #product ou un sélecteur d’attribut [class*="col-"].
  • Le terme sélecteur désigne la partie précédant le bloc de déclaration, à gauche de l’accolade ouvrante. Il peut être un sélecteur d’élément p, une classe .list-inline, un ID #product ou un sélecteur d’attribut [class*="col-"].
  • Certains styles, tels que le type de caractère, sa couleur, l'alignement du texte, etc., se transmettent automatiquement des blocs HTML "parents" vers leurs "enfants". D'autres styles tels que la bordure, et les marges (margin et padding) ne se transmettent pas.
  • font-family : permet de spécifier le type de caractère qui doit être utilisé.
    font-size : permet de spécifier la taille de la police.
    font-style : définir le style des caractères.
    font-stretch : définit la largeur du caractère dans une police.
    font-variant : permet d’afficher du texte en petites capitales.
  • La spécification CSS 2.1 met à notre disposition de puissantes possibilités de gestion des surfaces grâce à la propriété display.
  • La spécification CSS 2.1 met à notre disposition de puissantes possibilités de gestion des surfaces grâce à la propriété display.
  • Intégration graphique en XHTML / CSS

    1. 1. © Proxym-IT http://twitter.com/proxymit conforme aux standards W3C Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com Intégration graphique en HTML et CSS Département Web2.0 Préparer et animer par Mahmoud N’bet INTÉGRATION GRAPHIQUE EN XHTML ET CSS
    2. 2. © Proxym-IT http://twitter.com/proxymit Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com (X)HTML Présentation Les normes du XHTML la sémantique web Le rendu par défaut des éléments HTML CSS2 Définition Les sélecteurs, Les propriétés et les valeurs Bonnes pratiques Cascade CSS et priorité des sélecteurs Trucs et astuces Les Layouts
    3. 3. © Proxym-IT http://twitter.com/proxymit Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com Introduction • La création des sites Internet repose sur plusieurs composantes, dont les plus importantes pour l'intégration graphique sont : – Une structure de page codée en "langage" compris par les navigateurs internet : le HTML ou xHTML – Une mise en forme des éléments graphiques (images, blocs, fonds d'écran... ) : la feuille de style, ou CSS – Une mise en page et un formatage (mots en gras, soulignés, texte justifié… )
    4. 4. © Proxym-IT http://twitter.com/proxymit Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com L’intégration graphique • L'intégration graphique consiste à transposer un support passif (une image, une idée, une maquette graphique) qui doit être transposé sur internet pour en faire un élément interactif (afin de pouvoir cliquer sur les textes, faire défiler des images, envoyer un formulaire… ).
    5. 5. © Proxym-IT http://twitter.com/proxymit Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com Présentation de XHTML • Le HTML à l’origine est un langage composé de balises interprété par le navigateur. • Au fil des ans, il s’est avéré que le HTML ne corresponde pas à toutes les attentes des utilisateurs en terme de modularité, de maintenance et de présentation. • D’où la création du XHTML (eXtended HyperText Markup Language) en 2002, XHTML est un pont entre deux technologies, il a repris l’essentiel de la syntaxe du HTML en rajoutant les contraintes imposés par le XML.
    6. 6. © Proxym-IT http://twitter.com/proxymit Avantages et exigences du XHTML  Un code simplifié, plus léger, moins bavard. Il est plus facile à manipuler et Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com à mettre à jour.  Une séparation entre la contenu et sa présentation.  Un standard qui peut être soumis à validation et permet de se décharger des spécificités des différents navigateurs  Il facilite la mise en place d’un web sémantique qui a pour objectif de rendre accessible les informations d’une manière standard afin de faciliter l’indexation des informations aussi bien aux humains qu’aux robots.  Une préoccupation accrue par rapports aux jeux de caractères et à l’internationalisation.  Un langage plus rigoureux qui ne tolère pas les bidouillages.  Le langage continue à évoluer et n’est pas figé
    7. 7. © Proxym-IT http://twitter.com/proxymit Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com Le document minimal XHTML • Il est obligatoire de placer un minimum des éléments dans chaque page XHTML. Ce qui donne un document XHML minimal du type : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" > <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title> My Title </title> <link type="text/css" rel="stylesheet" href="demo.css" /> </head> <body> … <script type="text/javascript" src="js/script.js"></script> </body> </html>
    8. 8. © Proxym-IT http://twitter.com/proxymit Règles de formatages des balises • XHTML est strict sur les points suivants et ne tolère plus les Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com imprécisions du HTML. 1. Tous les balises sont en minuscules. <a href=”ma-page.html”>correct</a> <A HREF=”ma-page.html”>incorrect</A> 2. Tous les balises sont fermés. On utilise des tags auto-fermants pour les éléments simple. <li>Elément liste correct</li> <li>Elément liste incorrect <img src=”max” alt=”une image correcte” /> un retour chariot: <br /> 3. Emboîter les balises <a><b><c>correct</c></b></a> <a><b><c>incorrect</a></b></c>
    9. 9. © Proxym-IT http://twitter.com/proxymit <a href="http://www.site.com/script.html?d=1&amp;v=val">Lien correct</a> <a href="http://www.site.com/script.html?d=1&v=val">Lien incorrect</a> Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com D’autres contraintes XHTML <img src=”max” alt=”une image correcte” /> <img src=”max” alt=incorrecte /> <balise attribut=" valeur de l'attribut " /> <!-- après analyse --> <balise attribut="valeur de l'attribut" /> <option sected="selected">correct</option> <option selected>incorrect</option> <!-- construction correcte --> alt="Une image de mon album" <!-- construction incorrecte --> alt="Une image de mon album"
    10. 10. © Proxym-IT http://twitter.com/proxymit Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com Encore des règles pour être compatible • Et en plus, XHTML interdit l'inclusion de certains éléments dans d'autres: 1. <a> ne peut contenir d'autres éléments <a> 2. <pre> ne peut contenir les éléments <big>, <img>, <object>, <small>, <sub> ou <sup> 3. <button> ne peut contenir les éléments <button>, <form>, <fieldset>, <iframe>, <input>, <isindex>, <label>, <select> ou <textarea> 4. <label> ne peut contenir d'autres éléments <label> 5. <form> ne peut contenir d'autre éléments <form> 6. Un élément de nature « inline » <a>, <span>, <em> … ne peut contenir d'autres éléments de nature « block » <div>, <p> …
    11. 11. © Proxym-IT http://twitter.com/proxymit Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com la sémantique web • Le langage HTML définit la structure d’une page à l'aide des éléments (les balises) porteurs de sens (la sémantique). • La sémantique web, on peut la considérer comme le sens des balises. elle permet d'étudier leur rôle dans le code en ne considérant en aucun moment l'effet d'une balise sur l'affichage. <h1>Important</h1> <hr /> <h4>Moins important</h4> <p>contenu d'une <strpng>paragraphe</strpng></p> <div>Bloc</div> Important <h1> Moins important Paragraphe <p> Bloc <div>
    12. 12. © Proxym-IT http://twitter.com/proxymit Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com la sémantique web • <p> : définit un paragraphe ou des images. • <h1..6> : définit des titres de moins en moins importants dans l'organisation du document. • <ul> et <li> : définit une liste non ordonnée. • <ol> et <li> : définit une liste ordonnée. • <strong> : définit une forte expression sur un ou des mots. • <em> : définit une insistance moyenne sur un ou des mots. • <q> : définit une courte citation dans un paragraphe. • <blockquote> : définit une longue citation. • <cite> : désigne l'auteur d'une citation ou une référence vers une autre source. • < abbr> : définir une forme abrégée. • <sup> et <sub> : servent respectivement à mettre en exposant et en indice. • <code> : indique un fragment de code informatique. Vous pouvez également voir la spécification HTML sur le site de W3C.
    13. 13. © Proxym-IT http://twitter.com/proxymit Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com la sémantique web Web 1.0 Web statique Web 2.0 Web intelligent Web 3.0 Web sémantique
    14. 14. © Proxym-IT http://twitter.com/proxymit Le rendu par défaut des éléments XHTML • même lorsqu'aucun style Important <h1> Moins important Paragraphe <p> Bloc <div> Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com CSS n'est défini, chaque élément hérite d'un affichage par défaut (rendu initial) qui peut être légèrement différent d'un navigateur à un autre. • Pour un langage comme HTML, chaque élément a un comportement bien défini. <h1>Important</h1> <hr /> <h4>Moins important</h4> <p>contenu d'une <strong>paragraphe</strong></p> <div>Bloc</div>
    15. 15. © Proxym-IT http://twitter.com/proxymit Le rendu par défaut des éléments Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com HTML • Dans un monde idéal de compatibilité, tous les navigateurs et agents-utilisateurs appliqueraient sur les éléments HTML des feuilles de styles CSS initiales recommandées par le W3C. p{ display: block; margin: 1em 0; h1 { } display: block; font-size: 2em; font-weight: bold; margin: .67em 0; } Voici un extrait de la feuille de style par défaut appliquée par Firefox sur les éléments HTML : body{ display: block; margin: 8px; }
    16. 16. © Proxym-IT http://twitter.com/proxymit Le rendu par défaut : Le «display» • La propriété CSS « display » définit le type de rendu de boîte à utiliser pour un élément donné. Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com • html, body, h1, h2..h6, p, div { display: block; } • head { display: none; } • span, a, strong, em { display: inline; } • input, select { display: inline-block; }
    17. 17. © Proxym-IT http://twitter.com/proxymit Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com Le CSS • CSS est un autre langage qui vient compléter le HTML. Son rôle est de mettre en forme vos pages web. On peut écrire du code en langage CSS à trois endroits différents : 1. Dans un fichier .css (recommandé) 2. Dans l'en-tête <head> du fichier HTML 3. Directement dans les balises (non recommandé)
    18. 18. © Proxym-IT http://twitter.com/proxymit Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com Définition • Dans un code CSS comme celui-ci, on trouve trois éléments différents : • Les sélecteurs : on écrit les éléments dont on veut modifier l'apparence. • Les propriétés : les « effets de style » de la page sont rangés dans des propriétés. • Les valeurs : pour chaque propriété CSS, on doit indiquer une valeur. Syntaxe générale : sélecteur{ propriété : valeur ; } Déclaration : propriété + valeur Règle : sélecteur + déclaration
    19. 19. © Proxym-IT http://twitter.com/proxymit Les sélecteurs en CSS permettent de cibler précisément n'importe quel élément d'une page. Il peut être un sélecteur d’élément, une classe, un ID ou un sélecteur d’attribut. <balise id="myId" class="myClass" attr="valeur" > Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com Les sélecteurs CSS … – balise : sélecteur d’élément </balise> – .myClass : Sélecteur de classe – #myId : Sélecteur d’identifiant CSS – balise.myClass, balise#myId – * : sélecteur universel – A B : une balise contenue dans une autre – A > B : première balise fille contenue dans une autre – A + B : une balise qui en suit une autre – A[attr] : une balise qui possède un attribut nommé « attr » balise, .myClass, #myId, [attr*="valeur"] { /* declarations CSS */ }
    20. 20. © Proxym-IT http://twitter.com/proxymit Les sélecteurs d’attribut ciblent un élément en utilisant la présence d’un certain attribut ou de la valeur d’un attribut. Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com Les sélecteurs CSS – A[attr] : une balise qui possède un attribut nommé « attr ». – A[attr="valeur"] : une balise avec un attribut et une valeur exacte – A[attr*="leu"] : une balise avec un attribut et une valeur qui contient au moins une occurrence de « leu » (l'attribut doit cette fois contenir dans sa valeur le mot « leu », [ peu importe sa position ]). – A[attr^="va"] : une balise avec un attribut et une valeur qui commence par « va ». – A[attr$="eur"] : une balise avec un attribut et une valeur qui se termine par « eur ». – A[attr~="val"] : une balise, un attribut avec des valeurs séparés par des espaces, l’une d’elle doit être « val ». – A[attr|="val"] : une balise avec un attribut et une valeur exacte « val » ou commence par « val » suivi de « - » (Principalement pour les sous-code de langues. type « Fr-FR »). – root : Représente l’élément HTML <balise attr="valeur" > … </balise>
    21. 21. © Proxym-IT http://twitter.com/proxymit Les sélecteurs CSS : Les pseudo-formats Les pseudo-classes CSS: Une pseudo-classe CSS est un mot-clé ajouté au sélecteur pour indiquer un état particulier de l’élément qui doit être sélectionné. Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com – :hover : cible un élément survolé – :active : cible un élément activé par l’utilisateur (au moment du clic) – :visited : cible un lien déjà visité par l’utilisateur – :link : cible les liens non visités – :focus : cible un élément pointé. Souligner un élément <a> lors du survole: .myLink{ … } .myLink:hover{ text-decoration: underline; } Sélecteur:pseudo-classe{ propriété : valeur ; }
    22. 22. © Proxym-IT http://twitter.com/proxymit Les sélecteurs CSS : Les pseudo-formats Les pseudo-élément CSS: Comme les pseudo-classes, les pseudo-éléments sont ajoutés aux sélecteurs. Au lieu de décrire un état spécial, ils permettent de cibler certaines parties du document. Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com – :before : utilisé pour insérer une partie du contenu avant que le contenu d'un élément. – :after : utilisé pour insérer une partie du contenu après que le contenu d'un élément. – :first-child : pour ajouter un style spécial au premier enfant de son parent. – :last-child: pour ajouter un style spécial au dernière enfant de son parent. – :first-line: pour ajouter un style spécial à la première ligne d'un texte. – :first-letter : pour ajouter un style spécial à la première lettre d'un texte. Exemple d’insérer une icône avant le contenu d’un lien <a>: .myLink{ … } .myLink:before{ content: url(smiley.png) ; } Sélecteur:pseudo-élément{ propriété : valeur ; }
    23. 23. © Proxym-IT http://twitter.com/proxymit .profilBox a.video{} .profilBox a.view {} Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com Exemples .toolBar .nav{ … } #mainMenu li.active a{ color:#78BEA8; background: … ; } .toolBar .nav li:last-child{ border-right: none; } .profilBox a{ color:#656565; } .profilBox a.marker{} .profilBox a.edit{} .profilBox p.desc:first-letter{}
    24. 24. © Proxym-IT http://twitter.com/proxymit Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com Exemples .composantItem h2{ margin: 0 0 18px; } .col-4{ width: 33.3333%; } .show-grid [class^="col-"] { padding:5px; margin-bottom:8px; }
    25. 25. © Proxym-IT http://twitter.com/proxymit Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com Exemples Blockqute:before{ content: " "; } Blockqute:after{ content: " "; }
    26. 26. © Proxym-IT http://twitter.com/proxymit Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com Les propriétés CSS Les boites : • Width / height • Margin • Padding • Background • Border – Border-style – Border-color – Border-width • Text – text-align – text-indent • line-height • vertical-align • overflow • word-break • Opacity Les textes: • Font • font-family (fallback) • font-size • font-style • font-wieght • font-variant • font-stretch • Texte • text-decoration • text-transform • text-shadow • color • letter-spacing • outline Texte... Les positions: • float • clear • Position : static | relative | absolute | fixed • top • right • bottom • left • z-index Divers • Cursor • Content • quotes margin padding
    27. 27. © Proxym-IT http://twitter.com/proxymit Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com Les boites • Le modèle de boîte CSS définit les boîtes rectangulaires qui sont générées pour les éléments de la structure HTML. • Les boites ont quatre côtés : droit ("right"), gauche ("left"), supérieur ("top") et inférieur ("bottom"). margin, padding, border-width: 1un 2un 3un 4un ; border-color: #xxx #xxx #xxx #xxx ;
    28. 28. © Proxym-IT http://twitter.com/proxymit Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com Les valeurs : Le mise en page bacground-image : <image path> ; background-repeat: no-repeat | repeat-x | repeat-y | repeat ; background-attachment: fixed | scroll ; background-position: x-pos, y-pos; background-color: couleur ; background: <image> <repeat> <attachment> <position> <color>; border-style : style ; border-width : taille ; border-color : couleur ; border: <width> <style> <color>; position : static | relative | absolute | fixed; top | right | bottom | left : position ; z-index : nombre ; .parent{ position: relative; } .child{ position:absolute; top: 12px; left: 20px; }
    29. 29. © Proxym-IT http://twitter.com/proxymit La propriété CSS font est un raccourci pour la définition de font-style, font-variant, font-weight, font-size, line-height et font-family dans une seule règle dans la feuille de style. Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com Les valeurs : Le mise en forme • font-family : permet de spécifier le type de caractère qui doit être utilisé. • font-size : permet de spécifier la taille de la police. • line-height : détermine la hauteur des lignes au sein d'un élément. • font-style : définir le style des caractères. • font-stretch : définit la largeur du caractère dans une police. • font-variant : permet d’afficher du texte en petites capitales. font-style : italic | oblique | normal font-wieght : normal | bold | bolder font-variant : normal | small-caps font-size : taille ; Line-height : taille ; font-family : font1, font2, … ; (Le fallback) font: <style> <wieght> <width> <size>/<line-height> <family>; Color : couleur ; font-stretch : normal | condensed letter-spacing : taille ; word-spacing : taille ; Ceci est un texte...
    30. 30. © Proxym-IT http://twitter.com/proxymit Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com Les valeurs : Le mise en forme font-wieght : • normal • bold • bolder • lighter • 100 .. 900 font-stretch : 1. ultra-condensed 2. extra-condensed 3. semi-condensed 4. condensed 5. normal 6. Expanded 7. semi-expanded 8. extra-expanded 9. ultra-expanded
    31. 31. © Proxym-IT http://twitter.com/proxymit Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com Les unités • font-size / line-height / border-width : taille ; Unités absolues:  mm : Le millimètre  cm : Le centimètre (1cm = 10 mm)  in : Le pouce (en anglais « inch ») correspondant à 2,54 cm  pt : Le point. Correspond à 1/72 in.  pc : Le pica. Correspondant à 12 pt. Unités relatives:  em: Unité relative à la taille de police de l'élément, (1 em équivaut à 100% de cette taille). Seule exception à cette règle : lorsque la propriété font-size est définie, elle se rapporte à la taille de la police de l'élément parent.  ex : Unité relative à la hauteur de la minuscule de l'élément Seule exception à cette règle : lorsque la propriété font-size est définie, elle se rapporte à la hauteur de la minuscule de l'élément parent.  px : Le pixel. Il s'agit d'une unité dont le rendu dépend de la résolution du périphérique d'affichage.  % : Le pourcentage est une unité relative à la taille de l'élément ou de son parent. • color / border-color / background-colr : color ;  Couleurs nommées: exemple : grey, red, green ….  Couleurs en hexadecimal : exemple : #EDEDED, #FFAAAA, #CCC….  Couleurs décomposées : rgb(128, 128, 128), rgb(123, 255, 255)….
    32. 32. © Proxym-IT http://twitter.com/proxymit Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com Cascade CSS et priorité des sélecteurs 1. La cascade CSS applique alors un poids à chaque déclaration. 2. La spécificité des sélecteurs se calcule de cette manière: On défini 3 nombre (A, B, C) A. Nombre d’id dans le sélecteur B. Nombre de classes, de pseudo-classes et d’attributs dans le sélecteur C. Nombre d’éléments dans le sélecteur 3. Par exemple, prenons cette hiérarchie: – « #toto » a une spécificité de 1,0,0 – « .inner ul li a » a une spécificité de 0,1,3 – « a:hover » a une spécificité de 0,1,1 .inner > ul > li > a#toto{ … } #toto{ … } .inner ul li a { … } A:hover{ … } [id=toto] est identique à #toto
    33. 33. © Proxym-IT http://twitter.com/proxymit Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com Cascade CSS et priorité des sélecteurs Il existe 2 cas particuliers: • La pseudo-classe :not() n’entre pas dans le calcul de spécificité, mais son contenu oui. Ex: ul li:not(.class) a une spécificité de 0,1,2 et non pas 0,2,2 • Les styles appliqués aux pseudo-éléments ne peuvent pas êtres surclassés en modifiant les styles de l’élément lui-même. Les styles d'un pseudo-élément ont donc la priorité absolue. En matière de spécificité, il existe également les styles inline (dans la balise HTML via l’attribut style) qui surclassent tous les autres sélecteurs, et la directive !important qui surclasse les styles inline. Un style en ligne 1,0,0,0 Le « !important » 1,0,0,0,0 <ul style="padding: 0;">...</ul> !important
    34. 34. © Proxym-IT http://twitter.com/proxymit Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com Bonne s pratiques 1. Rester organisé : – Cela vous permettra de garder à l’oeil dans votre code. – Toujours nommer les grandes zones de vos sites de la même manière. 2. Le format – Le format de code choisi doit assurer: une bonne lisibilité : 3. Écrire les sélecteurs class et id sans noms d'éléments : – pas de div#content{…}, p.details{…}, a.success 4. Préférez le tiret au souligné : – Certains vieux navigateurs ont un peut mal avec les soulignés (underscore « _ »), il est préférable d’utiliser un tiret « - » à la place.- 5. Ne pas nommer les classes CSS en fonction du rendu visuel. – Préfixer vos classes en fonction l’apparence de l’élément (sélecteurs sémantiques) : Il est ainsi plus simple de se retrouver dans l’HTML et dans le CSS. 6. Garder une sauvegarde de vos modèles : – Une fois votre template considéré comme terminé, il peut être utile de garder un sauvegarde comme modèle. /* GLOBAL RESET */ * { margin:0; padding:0; } a img{ border:none; } /* HTML GENERIQUE */ body { font-family:"Lucida Sans",Verdana; } a:link, a:visited, a:active { text-decoration: none; } a:hover { text-decoration: underline; } h1 { } h1 a { } h2 { } /* ELEMENTS PRINCIPAUX DE MA PAGE */ #container{ … } #header{ … } #main{ … } #aside{ … } #footer{ … } /* ELEMENTS SECONDAIRES */ #header .headerContent{ … } #content .contentBloc{ … } /* ELEMENTS DE FORMULAIRE*/ Label{ … } input{…} /* DIVERS */ .clear{ clear: both; } /* Commentaire */ .selecteur-1, .selecteur-2 { display: block; color: #333; } p { … } .details { … } .resume-blue { color: red; } .resume{ color: red; }
    35. 35. © Proxym-IT http://twitter.com/proxymit /* propriétés communes */ } #shop .contentBlock { /* propriétés spécifiques */ Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia .contentBlock{ Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com Bonne s pratiques 5. Conventions de nommage : – Préférer nommer vos classes et identifiants en anglais – utiliser des noms d’éléments génériques. Éviter les nommages de type « .blocShop, .addNewItemLink …. » 6. Éviter de se répéter => code plus court : – Si 2 éléments ont les mêmes propriétés, préférer les combinés. – Toujours utiliser le rassemblement et les raccourcis des éléments. – Ne pas mettre de guillemets aux URL 6. Ne pas déclarer les valeurs héritées : – Type : h1 {font-weight:bold; } 7. Appliquer bien l’avantage de la cascade: – La cascade vous permet d'appliquer plusieurs règles à un même élément. 8. Attribuer plusieurs noms de class: – Vous pouvez attribuer plusieurs noms de class à un même élément. Ce qui vous permet de regrouper les règles qui définissent différentes styles, et ensuite d'appliquer seulement celles dont vous avez besoin. h1, h2 { margin: 1em 0.5em; font-size:1em; color: #2B8ADB; } /* Plutôt que*/ h1 { margin: 1em 0.5em; font-size:1em; color: #2B8ADB; } h2 { margin: 1em 0.5em; font-size:1em; color: #2B8ADB; } h1 { margin-top: 5px; margin-left:10px; margin-right:10px; margin-bottom:16px; color: #336699; border-width: 1px ; border-style:solid; border-color:#000; } /* Plutôt que*/ h1 { margin: 5px 10px 16px; color: #369; border: 1px solid #000; } } <li><a href="#" class="navLink myProfil"></a></li> <li><a href="#" class="navLink sigout"></a></li>
    36. 36. © Proxym-IT http://twitter.com/proxymit #subnav { /* Styles */ } #subnav li { /* Styles */ } #subnav li.subnavitem { /* Styles */ } #subnav li a { /* Styles */ } Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com Bonne s pratiques 10. Utiliser les sélecteurs descendants 11. Ne jamais intégrer les images liées au template comme des balise <img />. Il faut absolument les mettre en background 12. Séparer les hacks spécifiques navigateur. 13. Validez votre code avec le W3C. <link href="style.css" rel="stylesheet"> <!--[if IE 7]> <link href="style-ie7.css" rel="stylesheet"> <![endif]-->
    37. 37. © Proxym-IT http://twitter.com/proxymit Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com Trucs et astuces Centrage Horizontalement 1. Élément bloc – Pour centrer horizontalement un élément avec CSS, vous devez spécifier la largeur de l'élément, ainsi que ses marges horizontales. 2. Éléments hors du flux. – Float:center ? N’existe pas : / Généralement la question se pose lors de la création d'un menu, une liste de liens. 3. Positionnement absolu. #wrap{ width: 980px; margin-left: auto; margin-right: auto; } #wrapper{ /* masque les débordements et englobe le menu */ overflow: hidden; } #menu,#menu li { /* float permet à l'élément de prendre la largeur de son contenu */ float: left; position: relative; } #menu { /* on décale le menu vers la droite de la moitié de la largeur disponible */ left: 50%; } #menu li { /* on décale chaque item vers la gauche de la moitié de la largeur du menu */ right: 50%; }
    38. 38. © Proxym-IT http://twitter.com/proxymit Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com Trucs et astuces 1. Arrêter les flottements. – Un problème CSS très commun consiste à savoir quoi faire pour empêcher qu'un objet en flottement dans un conteneur déborde la limite inférieure de ce conteneur. <div class="conteneur"> <div class="left"> … </div> <div class="left"> … </div> <div class="clear"></div> </div>  La manière traditionnelle de contrôler la situation consistait à ajouter un élément de plus, soit un <div> ou un br, à la suite de l'élément en flottement et de le styler avec « clear:both ».  Une autre solution consiste à styler l’élément conteneur avec « overflow:hidden », mais attention le « overflow:hidden » permet de cacher tout ce qui dépasse.  il existe une méthode plus économique en utilisant le pseudo-format « :after ». .clearfix:after { content: "."; clear: both; display: block; height: 0; visibility: hidden; } /* Pour IEfix */ .clearfix { clear: inline-both; zoom: 1; }
    39. 39. © Proxym-IT http://twitter.com/proxymit Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com Trucs et astuces La fusion des marges Comme son nom l’indique, est un mécanisme qui fusionne automatiquement certaines marges entre-elles. 1. Tout d’abord, cette fusion ne se produit que de manière verticale et ne s’applique qu’au marges externes. 2. 4 règles où une fusion a lieu: a) la marge haute d’un bloc et la marge haute de son premier enfant (de manière récursive) b) la marge basse d’un bloc et la marge basse de son dernier enfant, si la hauteur est auto (de manière récursive) c) la marge basse d’un bloc et la marge haute de son suivant (qui n’est pas forcément un élément frère) d) la marge haute et basse d’un bloc sans contenu Pour empêcher les fusions a et b, il suffit de convertir le parent avec .parent { overflow: hidden } ou encore de lui appliquer un padding ou une bordure même transparente. Mais attention, Les marges d‘un élément flottant ne fusionnent jamais…
    40. 40. © Proxym-IT http://twitter.com/proxymit Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com Trucs et astuces 1. IE ne supporte pas Inline-block – Une solution très simple consiste à styler « zoom:1 » le sélecteur qui porte un « display:inline-block ». 2. liste des liens justifiés grâce au modèle de positionnement tabulaire #wrap{ display:inline-block; zoom: 1; } ul{ display:table; } ul > li{ display:table-cell; }
    41. 41. © Proxym-IT http://twitter.com/proxymit Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com Les « layouts » • Afin de pouvoir positionner et mettre en forme des blocs de contenu, il faut regrouper les contenus en blocs dans le code HTML. • Ensuite positionner ces derniers afin de construire ce qu’on appelle le « layout ».
    42. 42. © Proxym-IT http://twitter.com/proxymit Le « layout » avec N colonnes fixes Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com 1. Avec une seule colonne <html> <head></head> <body> <div id="layout"> <div id="header"></div> <div id="content"></div> <div id="footer"></div> </div> </body> </html> #layout{ width:900px; margin:0 auto; }
    43. 43. © Proxym-IT http://twitter.com/proxymit Le « layout » avec N colonnes fixes #layout{ width:900px; margin:0 auto; } Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com 1. Avec une seule colonne 2. Avec deux colonnes <html> <head></head> <body> <div id="layout"> <div id="header"></div> <div id="content"></div> <div id="footer"></div> </div> </body> </html> <div id="content"> <div class="leftSideBar"></div> <div id="content"></div> </div> <div id="content"> <div id="content"></div> <div class="rightSideBar"></div> </div> #content{ overflow : hidden; } .leftSideBar{ float:left; width:200px; } .rightSideBar{ float:right; width:160px; } .contentBody{ float:left; width:540px; }
    44. 44. © Proxym-IT http://twitter.com/proxymit Le « layout » avec N colonnes fixes #layout{ width:900px; margin:0 auto; } 3. Avec trois colonnes Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com 1. Avec une seule colonne 2. Avec deux colonnes <html> <head></head> <body> <div id="layout"> <div id="header"></div> <div id="content"></div> <div id="footer"></div> </div> </body> </html> <div id="content"> <div class="leftSideBar"></div> <div id="content"></div> </div> <div id="content"> <div id="content"></div> <div class="rightSideBar"></div> </div> <div id="content"> <div class="leftSideBar"></div> <div class="contentBody"></div> <div class="rightSideBar"></div> </div> #content{ overflow : hidden; } .leftSideBar{ float:left; width:200px; } .rightSideBar{ float:right; width:160px; } .contentBody{ float:left; width:540px; }
    45. 45. © Proxym-IT http://twitter.com/proxymit Le « layout » avec N colonnes fixes Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com VS VS Mais, c'est quoi la différence entre ces layouts html ? Comment, on peut avoir des colonnes avec des hauteurs équivalentes à la plus importante entre eux ?
    46. 46. © Proxym-IT http://twitter.com/proxymit Le « layout » avec N colonnes fixes Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com VS VS Mais, c'est quoi la différence entre ces layouts html ? <div id="content"> <div class="leftSideBar"></div> <div id="content"></div> <div class="rightSideBar"></div> </div> #content{ display:table, width:100%; } #content > div { display:table-cell; }
    47. 47. © Proxym-IT http://twitter.com/proxymit Un « layout » fluide avec N colonnes Avec trois colonnes Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com Avec une seule colonne Avec deux colonnes <html> <head></head> <body> <div id="layout"> <div id="header"></div> <div id="content"></div> <div id="footer"></div> </div> </body> </html> <div id="content"> <div class="leftSideBar"></div> <div id="content"></div> </div> <div id="content"> <div class="rightSideBar"></div> <div id="content"></div> </div> <div id="content"> <div class=« leftSideBar"></div> <div class="rightSideBar"></div> <div id="content"></div> </div> #content{ overflow : hidden; } .leftSideBar{ float:left; width:200px; } .rightSideBar{ float:right; width:160px; } .contentBody{ margin: 0 200px 0 160px; }
    48. 48. © Proxym-IT http://twitter.com/proxymit Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com Le grid « layout » Représentation virtuelle composée de lignes, de colonnes et de cellules. .container-12{ overflow:hidden; } [class^=cell]{ float:left; } .cell-1{ width: 8.3333%; } .cell-2{ width: 16.6666%; } .cell-3{ width: 25%; } .cell-4{ width: 33.3333%; } .cell-5{ width: 41.66666%; } .cell-6{ width: 50%; } .cell-7{ width: 58.3333%; } .cell-8{ width: 66.6666%; } .cell-9{ width: 75%; } .cell-10{ width: 83.3333%; } .cell-11{ width: 91.6666%; } .cell-12{ width: 100%; }
    49. 49. © Proxym-IT http://twitter.com/proxymit Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com

    ×