Intégrateur : entre le marteau et lenclumeBonnes pratiquesdintégration robusteAtelier technique CSS — Paris Web 2011par Ro...
Intégrateur de STPo - Robot de Gordon BennettAtelier technique CSS — Romy Duhem-Verdière — Paris Web 2011   2
Lintégrateur                                                 XHML, CSS, jQuery,                                       medi...
Vous réalisez vos intégrations                         avec soin et amour :                         P valides             ...
Mais pourquoi faut-il                        que le dev                        saccage tout ça ?Atelier technique CSS — Ro...
Le développeur            .toto p a p { … }Atelier technique CSS — Romy Duhem-Verdière — Paris Web 2011   6
PHP, ASP, Java, SQL,           Perl, Ruby, Python, Klingon,                  Zend, Symphony,     eZ publish, Drupal, SPIP,...
Faire simple !
Ce quà codé lintégrateur                     h1 { font-size : 2em; }                     h2 { font-size : 1.33em; }       ...
ProblèmesAtelier technique CSS — Romy Duhem-Verdière — Paris Web 2011   10
Trop de font-size !                                                                        Résultats de recherche         ...
Ressortir la calculette ?Em Calculator : http://riddle.pl/emcalc/Atelier technique CSS — Romy Duhem-Verdière — Paris Web 2...
Définir une taille relativehtml { font-size: 100%; }body { font-size: .75em; }h1 { font-size: 150%; }h2 { font-size: 130%;...
Définir une taille relativehtml { font-size: 100%; }body { font-size: .75em; }h1 { font-size: 150%; }h2 { font-size: 130%;...
Définir une taille relativehtml { font-size: 100%; }body { font-size: .75em; }h1 { font-size: 150%; }h2 { font-size: 130%;...
Définir une taille relativehtml { font-size: 100%; }body { font-size: .75em; }h1 { font-size: 150%; }h2 { font-size: 130%;...
Définir une taille relative1) Ne pas définir la taille de chaque élément !2) Définir une font-size de base, sur le <body> ...
Au fait, qui saccage   lintégration ?
Au fait, qui saccage ?1) Le développementAtelier technique CSS — Romy Duhem-Verdière — Paris Web 2011   19
Au fait, qui saccage ?1) Le développement2) Le code généré    (framework, CMS, plugins)Atelier technique CSS — Romy Duhem-...
Au fait, qui saccage ?1) Le développement2) Le code généré    (framework, CMS, plugins)3) Les rédacteursAtelier technique ...
Comment améliorer ?                                                  1) Discuter avec les1) Le développement              ...
Comment améliorer ?                                                  1) Discuter avec les1) Le développement              ...
Comment améliorer ?                                                  1) Discuter avec les1) Le développement              ...
Anticiper
Quel CSS pour styler ces listes ?Atelier technique CSS — Romy Duhem-Verdière — Paris Web 2011   26
Ce quà codé lintégrateurAtelier technique CSS — Romy Duhem-Verdière — Paris Web 2011   27
ProblèmeAtelier technique CSS — Romy Duhem-Verdière — Paris Web 2011   28
Un bon exemple/* Lists--------------------------------------------- */li ul,li ol               { margin: 0; }ul, ol      ...
CorrectionAtelier technique CSS — Romy Duhem-Verdière — Paris Web 2011            30
Listes hétérogènesAtelier technique CSS — Romy Duhem-Verdière — Paris Web 2011   31
Comment anticiper ?1) Styler tout le HTML     ●         y compris les balises rarement utilisées     ●         utiliser un...
Styler                                               tout le HTML                                   Source : framework CSS...
Exemple de charte typoAtelier technique CSS — Romy Duhem-Verdière — Paris Web 2011                        34              ...
Laisser la main
Qui lemporte ?                           #content h2 { color: red; }                        .chapo h2 { color: purple; }  ...
Spécificité des sélecteursEn supposant que tous les sélecteurs suivants sont justes et désignent lemême élément, lequel se...
Spécificité des sélecteursEn supposant que tous les sélecteurs suivants sont justes et désignent lemême élément, lequel se...
Soyez .class plutôt qu#IDVoir : http://oli.jp/2011/ids/Atelier technique CSS — Romy Duhem-Verdière — Paris Web 2011   39
Soyez .class plutôt qu#IDExemple : http://romy.tetue.net/structure-html-de-baseAtelier technique CSS — Romy Duhem-Verdière...
Laissez les IDs au dev !1) Les ID sont uniques :    laissez la liberté de réemployer    à ceux qui suivent2) Réservez les ...
Mettre des .class à disposition
Mettre des .class à dispositionsmall, .small { font-size: 90%; }big,   .big   { font-size: 130%;}Atelier technique CSS — R...
Mettre des .class à dispositionh1,           .h1               {   font-size:       3em; line-height: 1; margh2,          ...
Mettre des .class à dispositionbody,     .font1 { font-family:                                Helvetica, Arial, sanh1,h2, ...
Familles typo                                                               + classes                                     ...
Mettre des .class à dispositionVoir : http://romy.tetue.net/styler-les-messages-du-systemeAtelier technique CSS — Romy Duh...
Sélecteurs multiples                                                                       pink                           ...
Séparer sémantique et déco                                             Classes sémantiques       déco                     ...
Atelier technique CSS — Romy Duhem-Verdière — Paris Web 2011   50
Bref, livrez un framework !            Avec du code facilement ré-utilisable pour les suivantsSource : framework interne d...
Habillerle code généré
Quelle structure HTML ?   En plus de celles propres aux formulaires (form, fieldset, label, input)  quelles balises HTML u...
Ce quà codé lintégrateurAtelier technique CSS — Romy Duhem-Verdière — Paris Web 2011   54
Code généréExemple de code généré par JoomlaAtelier technique CSS — Romy Duhem-Verdière — Paris Web 2011   55
Code généréExemple de code généré par SPIPAtelier technique CSS — Romy Duhem-Verdière — Paris Web 2011   56
Code généréExemple de code généré par Zend FrameworkAtelier technique CSS — Romy Duhem-Verdière — Paris Web 2011   57
Conclusion ?1) Ne pas présupposer    de la structure HTML2) Demander un échantillon    de code généré    (voire adopter le...
Penser modulaireAtelier technique CSS — Romy Duhem-Verdière — Paris Web 2011   59
Bloc modulaire                         Quel code               pour ce bloc dactus ?Atelier technique CSS — Romy Duhem-Ver...
Bloc modulaire<div class="bloc" id="news">   <h2>Linfo en continu</h2>   <ul>       <li><a href="#">...</a></li>       <li...
Bloc modulaire                          Quel code               pour ce bloc dactus               ailleurs dans la page ?A...
Bloc modulaire<div class="bloc" id="news">   <h2>Linfo en continu</h2>   <ul>       <li><a href="#">...</a></li>       <li...
Comment disposer des deux ?<div class="bloc" id="news">   <h2>Linfo en continu</h2>   <ul>       <li><a href="#">...</a></...
Comment disposer des deux ?<div class="bloc" id="news">   <h2>Linfo en continu</h2>   <ul>       <li><a href="#">...</a></...
Comment disposer des deux ?<div class="bloc" id="news">   <h2>Linfo en continu</h2>   <ul>       <li><a href="#">...</a></...
Souplesur les pattes arrières !
Merci !Merci à Bertrand Keller de la Netscouade, à Martin Supiot de Clever Age, à Cyril Marion des Ateliers CYM,à Hugues M...
Prochain SlideShare
Chargement dans…5
×

Bonnes pratiques intégration robuste

1 975 vues

Publié le

Cet atelier partage des bonnes pratiques pour réaliser des intégrations robustes, qui résisteront au développement. À partir d’exemples concrets nous essayerons de décortiquer ensemble ce qui coince, entre le code idéal produit par l’intégrateur et le code effectivement développé, afin d’en tirer la leçon et lister les concessions prévisibles de part et d’autre pour un mariage réussi. Souple sur les pattes arrières !

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

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

Aucune remarque pour cette diapositive

Bonnes pratiques intégration robuste

  1. 1. Intégrateur : entre le marteau et lenclumeBonnes pratiquesdintégration robusteAtelier technique CSS — Paris Web 2011par Romy Duhem-Verdièrehttp://romy.tetue.net/857
  2. 2. Intégrateur de STPo - Robot de Gordon BennettAtelier technique CSS — Romy Duhem-Verdière — Paris Web 2011 2
  3. 3. Lintégrateur XHML, CSS, jQuery, media queries, microformats, RGAA, Accessiweb, WCAG, BluePrint, 960 Grid, ooCSS, LESS, Framework Z, sprites, PSD, Gimp …Cf.: http://www.nota-bene.org/Integrateurs-montez-au-front-ParisAtelier technique CSS — Romy Duhem-Verdière — Paris Web 2011 3
  4. 4. Vous réalisez vos intégrations avec soin et amour : P valides P sémantiques P accessiblesAtelier technique CSS — Romy Duhem-Verdière — Paris Web 2011 4
  5. 5. Mais pourquoi faut-il que le dev saccage tout ça ?Atelier technique CSS — Romy Duhem-Verdière — Paris Web 2011 5
  6. 6. Le développeur .toto p a p { … }Atelier technique CSS — Romy Duhem-Verdière — Paris Web 2011 6
  7. 7. PHP, ASP, Java, SQL, Perl, Ruby, Python, Klingon, Zend, Symphony, eZ publish, Drupal, SPIP, TypoScript, cahier des charges …Atelier technique CSS — Romy Duhem-Verdière — Paris Web 2011 7
  8. 8. Faire simple !
  9. 9. Ce quà codé lintégrateur h1 { font-size : 2em; } h2 { font-size : 1.33em; } h3 { font-size : 1.17em; } h4 { font-size : 1.1em; } p { font-size: .688em; } li { font-size: .688em; } blockquote { font-size: .688em; } small { font-size: .52em; }Atelier technique CSS — Romy Duhem-Verdière — Paris Web 2011 9
  10. 10. ProblèmesAtelier technique CSS — Romy Duhem-Verdière — Paris Web 2011 10
  11. 11. Trop de font-size ! Résultats de recherche des occurrences de « font-size » dans un projet... 11Atelier technique CSS — Romy Duhem-Verdière — Paris Web 2011
  12. 12. Ressortir la calculette ?Em Calculator : http://riddle.pl/emcalc/Atelier technique CSS — Romy Duhem-Verdière — Paris Web 2011 12
  13. 13. Définir une taille relativehtml { font-size: 100%; }body { font-size: .75em; }h1 { font-size: 150%; }h2 { font-size: 130%; }h3 { font-size: 110%; }small { font-size: 90%; }Atelier technique CSS — Romy Duhem-Verdière — Paris Web 2011 13
  14. 14. Définir une taille relativehtml { font-size: 100%; }body { font-size: .75em; }h1 { font-size: 150%; }h2 { font-size: 130%; }h3 { font-size: 110%; }small { font-size: 90%; }Atelier technique CSS — Romy Duhem-Verdière — Paris Web 2011 14
  15. 15. Définir une taille relativehtml { font-size: 100%; }body { font-size: .75em; }h1 { font-size: 150%; }h2 { font-size: 130%; }h3 { font-size: 110%; }small { font-size: 90%; }Atelier technique CSS — Romy Duhem-Verdière — Paris Web 2011 15
  16. 16. Définir une taille relativehtml { font-size: 100%; }body { font-size: .75em; }h1 { font-size: 150%; }h2 { font-size: 130%; }h3 { font-size: 110%; }small { font-size: 90%; }Cf. : http://www.pompage.net/definir-des-tailles-de-polices-en-cssAtelier technique CSS — Romy Duhem-Verdière — Paris Web 2011 16
  17. 17. Définir une taille relative1) Ne pas définir la taille de chaque élément !2) Définir une font-size de base, sur le <body> (dont chaque élément hérite)3) Puis définir quelques exceptions : ● titres plus gros ● mentions plus petitesAtelier technique CSS — Romy Duhem-Verdière — Paris Web 2011 17
  18. 18. Au fait, qui saccage lintégration ?
  19. 19. Au fait, qui saccage ?1) Le développementAtelier technique CSS — Romy Duhem-Verdière — Paris Web 2011 19
  20. 20. Au fait, qui saccage ?1) Le développement2) Le code généré (framework, CMS, plugins)Atelier technique CSS — Romy Duhem-Verdière — Paris Web 2011 20
  21. 21. Au fait, qui saccage ?1) Le développement2) Le code généré (framework, CMS, plugins)3) Les rédacteursAtelier technique CSS — Romy Duhem-Verdière — Paris Web 2011 21
  22. 22. Comment améliorer ? 1) Discuter avec les1) Le développement développeurs 2) Apprendre à coder souple et modulaire2) Le code généré (framework, CMS, plugins)3) Les rédacteursAtelier technique CSS — Romy Duhem-Verdière — Paris Web 2011 22
  23. 23. Comment améliorer ? 1) Discuter avec les1) Le développement développeurs 2) Apprendre à coder souple et modulaire2) Le code généré 3) Travailler sur un échantillon (framework, CMS, plugins) de code généré3) Les rédacteursAtelier technique CSS — Romy Duhem-Verdière — Paris Web 2011 23
  24. 24. Comment améliorer ? 1) Discuter avec les1) Le développement développeurs 2) Apprendre à coder souple et modulaire2) Le code généré 3) Travailler sur un échantillon (framework, CMS, plugins) de code généré 4) Anticiper les3) Les rédacteurs expérimentations des rédacteursAtelier technique CSS — Romy Duhem-Verdière — Paris Web 2011 24
  25. 25. Anticiper
  26. 26. Quel CSS pour styler ces listes ?Atelier technique CSS — Romy Duhem-Verdière — Paris Web 2011 26
  27. 27. Ce quà codé lintégrateurAtelier technique CSS — Romy Duhem-Verdière — Paris Web 2011 27
  28. 28. ProblèmeAtelier technique CSS — Romy Duhem-Verdière — Paris Web 2011 28
  29. 29. Un bon exemple/* Lists--------------------------------------------- */li ul,li ol { margin: 0; }ul, ol { margin: 0 1.5em 1.5em 0; padding-left: 1.5em; }ul { list-style-type: disc; }ol { list-style-type: decimal; }dl { margin: 0 0 1.5em 0; }dl dt { font-weight: bold; }dd { margin-left: 1.5em;}Source : http://www.blueprintcss.orgAtelier technique CSS — Romy Duhem-Verdière — Paris Web 2011 29
  30. 30. CorrectionAtelier technique CSS — Romy Duhem-Verdière — Paris Web 2011 30
  31. 31. Listes hétérogènesAtelier technique CSS — Romy Duhem-Verdière — Paris Web 2011 31
  32. 32. Comment anticiper ?1) Styler tout le HTML ● y compris les balises rarement utilisées ● utiliser une page de démo exhaustive2) Se constituer une page de test ● récolter des exemples vicieux ● des extraits générés via WYSIWYGAtelier technique CSS — Romy Duhem-Verdière — Paris Web 2011 32
  33. 33. Styler tout le HTML Source : framework CSS BlueprintAtelier technique CSS — Romy Duhem-Verdière — Paris Web 2011 33
  34. 34. Exemple de charte typoAtelier technique CSS — Romy Duhem-Verdière — Paris Web 2011 34 Source : charte typo SPIP
  35. 35. Laisser la main
  36. 36. Qui lemporte ? #content h2 { color: red; } .chapo h2 { color: purple; } De quelle couleur sera le titre du chapo ?Atelier technique CSS — Romy Duhem-Verdière — Paris Web 2011 36
  37. 37. Spécificité des sélecteursEn supposant que tous les sélecteurs suivants sont justes et désignent lemême élément, lequel sera appliqué en priorité ?a) #page ul li a { }b) #page .menu a { }c) div.menu ul li a { }d) div#page ul a { }Source : http://www.alsacreations.com/quiz/lire/7-css-difficile.htmlAtelier technique CSS — Romy Duhem-Verdière — Paris Web 2011 37
  38. 38. Spécificité des sélecteursEn supposant que tous les sélecteurs suivants sont justes et désignent lemême élément, lequel sera appliqué en priorité ?a) #page ul li a { }0103 : le sélecteur contient 1 identifiant, 0 classe et 3 élémentsb) #page .menu a { }0111 : le sélecteur contient 1 identifiant, 1 classe et 1 élémentc) div.menu ul li a { }0014 : le sélecteur contient 1 classe et 4 élémentsd) div#page ul a { }0103 : le sélecteur contient 1 identifiant et 3 élémentsCascade CSS et priorité des sélecteurs : http://openweb.eu.org/articles/cascade_css/Atelier technique CSS — Romy Duhem-Verdière — Paris Web 2011 38
  39. 39. Soyez .class plutôt qu#IDVoir : http://oli.jp/2011/ids/Atelier technique CSS — Romy Duhem-Verdière — Paris Web 2011 39
  40. 40. Soyez .class plutôt qu#IDExemple : http://romy.tetue.net/structure-html-de-baseAtelier technique CSS — Romy Duhem-Verdière — Paris Web 2011 40
  41. 41. Laissez les IDs au dev !1) Les ID sont uniques : laissez la liberté de réemployer à ceux qui suivent2) Réservez les IDs à : ● JavaScript ● formulaires ● N° identifiants (BDD) ● etc.Atelier technique CSS — Romy Duhem-Verdière — Paris Web 2011 41
  42. 42. Mettre des .class à disposition
  43. 43. Mettre des .class à dispositionsmall, .small { font-size: 90%; }big, .big { font-size: 130%;}Atelier technique CSS — Romy Duhem-Verdière — Paris Web 2011 43
  44. 44. Mettre des .class à dispositionh1, .h1 { font-size: 3em; line-height: 1; margh2, .h2 { font-size: 2em; margin-bottom: 0.75eh3, .h3 { font-size: 1.5em; line-height: 1; mah4, .h4 { font-size: 1.2em; line-height: 1.25;h5, .h5 { font-size: 1em; font-weight: bold; mh6, .h6 { font-size: 1em; font-weight: bold; }Daprès : Object Oriented CSSAtelier technique CSS — Romy Duhem-Verdière — Paris Web 2011 44
  45. 45. Mettre des .class à dispositionbody, .font1 { font-family: Helvetica, Arial, sanh1,h2, .font2 { font-family: Arial Black, Gadgetcode,pre, .font3 { font-family: Courier, monospace; } .font4 { font-family: Palatino, Georgia, seAtelier technique CSS — Romy Duhem-Verdière — Paris Web 2011 45
  46. 46. Familles typo + classes réemployables Définition des titres + classes réemployables Exceptions définies . via sélecteur parent . via classes distinctivesAtelier technique CSS — Romy Duhem-Verdière — Paris Web 2011 46
  47. 47. Mettre des .class à dispositionVoir : http://romy.tetue.net/styler-les-messages-du-systemeAtelier technique CSS — Romy Duhem-Verdière — Paris Web 2011 47
  48. 48. Sélecteurs multiples pink red orange add super yellow<input class=”button edit big green ”> cancel small blue delete black like gray next white prev start save submitAtelier technique CSS — Romy Duhem-Verdière — Paris Web 2011 48
  49. 49. Séparer sémantique et déco Classes sémantiques déco pink red orange add super yellow<input class=”button edit big green ”> cancel small blue delete black like gray next white prev start save submitAtelier technique CSS — Romy Duhem-Verdière — Paris Web 2011 49
  50. 50. Atelier technique CSS — Romy Duhem-Verdière — Paris Web 2011 50
  51. 51. Bref, livrez un framework ! Avec du code facilement ré-utilisable pour les suivantsSource : framework interne de la NetscouadeAtelier technique CSS — Romy Duhem-Verdière — Paris Web 2011 51
  52. 52. Habillerle code généré
  53. 53. Quelle structure HTML ? En plus de celles propres aux formulaires (form, fieldset, label, input) quelles balises HTML utiliser pour structurer ce formulaire de contact ?Atelier technique CSS — Romy Duhem-Verdière — Paris Web 2011 53
  54. 54. Ce quà codé lintégrateurAtelier technique CSS — Romy Duhem-Verdière — Paris Web 2011 54
  55. 55. Code généréExemple de code généré par JoomlaAtelier technique CSS — Romy Duhem-Verdière — Paris Web 2011 55
  56. 56. Code généréExemple de code généré par SPIPAtelier technique CSS — Romy Duhem-Verdière — Paris Web 2011 56
  57. 57. Code généréExemple de code généré par Zend FrameworkAtelier technique CSS — Romy Duhem-Verdière — Paris Web 2011 57
  58. 58. Conclusion ?1) Ne pas présupposer de la structure HTML2) Demander un échantillon de code généré (voire adopter le framework de loutil, du dev, de léquipe)3) Appliquer le style à cet échantillonAtelier technique CSS — Romy Duhem-Verdière — Paris Web 2011 58
  59. 59. Penser modulaireAtelier technique CSS — Romy Duhem-Verdière — Paris Web 2011 59
  60. 60. Bloc modulaire Quel code pour ce bloc dactus ?Atelier technique CSS — Romy Duhem-Verdière — Paris Web 2011 60
  61. 61. Bloc modulaire<div class="bloc" id="news"> <h2>Linfo en continu</h2> <ul> <li><a href="#">...</a></li> <li><a href="#">...</a></li> <li><a href="#">...</a></li> <li><a href="#">...</a></li> <li><a href="#">...</a></li> </ul> <a href="#" class="more">Toutes les infos</a></div><!--#news-->#news { width: 300px; }#news h2 { padding-left: 20px; background: url(img/puce.png) no-repeat;#news ul { background: #e5e4d3; border: 1px solid #5b4c2a; border-width#news li { display: block; padding: 10px; }#news .more { display: block; color: red; background: url(img/more.png) Atelier technique CSS — Romy Duhem-Verdière — Paris Web 2011 61
  62. 62. Bloc modulaire Quel code pour ce bloc dactus ailleurs dans la page ?Atelier technique CSS — Romy Duhem-Verdière — Paris Web 2011 62
  63. 63. Bloc modulaire<div class="bloc" id="news"> <h2>Linfo en continu</h2> <ul> <li><a href="#">...</a></li> <li><a href="#">...</a></li> <li><a href="#">...</a></li> <li><a href="#">...</a></li> <li><a href="#">...</a></li> </ul> <a href="#" class="more">Toutes les infos</a></div><!--#news-->#news { padding: 5px; background: #e5e4d3; }#news h2 { float: left; padding-left: 20px; background: url(img/puce.pn#news ul { }#news li { float: left; display: block; width: 660px; padding: 10px; ba#news .more { float: right; display: block; color: red; background: url Atelier technique CSS — Romy Duhem-Verdière — Paris Web 2011 63
  64. 64. Comment disposer des deux ?<div class="bloc" id="news"> <h2>Linfo en continu</h2> <ul> <li><a href="#">...</a></li> <li><a href="#">...</a></li> <li><a href="#">...</a></li> <li><a href="#">...</a></li> <li><a href="#">...</a></li> </ul> <a href="#" class="more">Toutes les infos</a></div><!--#news-->#news { width: 300px; }#news h2 { padding-left: 20px; background: url(img/puce.png) no-repeat;#news ul { background: #e5e4d3; border: 1px solid #5b4c2a; border-width#news li { display: block; padding: 10px; }#news .more { display: block; color: red; background: url(img/more.png)#news { padding: 5px; background: #e5e4d3; }#news h2 { float: left; padding-left: 20px; background: url(img/puce.pn#news ul {}#news li { float: left; display: block; width: 660px; padding: 10px; ba#news .more { float: right; display: block; color: red; background: url Atelier technique CSS — Romy Duhem-Verdière — Paris Web 2011 64
  65. 65. Comment disposer des deux ?<div class="bloc" id="news"> <h2>Linfo en continu</h2> <ul> <li><a href="#">...</a></li> Méthode 1 : <li><a href="#">...</a></li> <li><a href="#">...</a></li> surcharge <li><a href="#">...</a></li> <li><a href="#">...</a></li> </ul> <a href="#" class="more">Toutes les infos</a></div><!--#news-->#news { width: 300px; }#news h2 { padding-left: 20px; background: url(img/puce.png) no-repeat;#news ul { background: #e5e4d3; border: 1px solid #5b4c2a; border-width#news li { display: block; padding: 10px; }#news .more { display: block; color: red; background: url(img/more.png).toto #news { width: auto; padding: 5px; background: #e5e4d3; }.toto #news h2 { float: left; }.toto #news ul { background: none; border: 0; }.toto #news li { float: left; width: 660px; background: #fff; }.toto #news .more { float: right; border: 2px solid #fff; } Atelier technique CSS — Romy Duhem-Verdière — Paris Web 2011 65
  66. 66. Comment disposer des deux ?<div class="bloc" id="news"> <h2>Linfo en continu</h2> <ul> <li><a href="#">...</a></li> Méthode 2 : <li><a href="#">...</a></li> <li><a href="#">...</a></li> bloc modulaire <li><a href="#">...</a></li> <li><a href="#">...</a></li> </ul> <a href="#" class="more">Toutes les infos</a></div><!--#news-->#news { }#news h2 { padding-left: 20px; background: url(img/puce.png) no-repeat;#news ul { }#news li { display: block; padding: 10px; }#news .more { display: block; color: red; background: url(img/more.png).aside #news { width: 300px; }.aside #news ul { background: #e5e4d3; border: 1px solid #5b4c2a; borde.toto #news { padding: 5px; background: #e5e4d3; }.toto #news ul {}.toto #news li { float: left; width: 660px; background: #fff; }.toto technique .more { float: right;Paris Web 20112px solid #fff; } Atelier #news CSS — Romy Duhem-Verdière — border: 66
  67. 67. Souplesur les pattes arrières !
  68. 68. Merci !Merci à Bertrand Keller de la Netscouade, à Martin Supiot de Clever Age, à Cyril Marion des Ateliers CYM,à Hugues Moreno, Frédéric Xavier et à tous vos retours dexpérience en intégration. Merci à vous et #sharetheloveRetrouvez-moi ici : http://romy.tetue.net/857

×