Dotclear


Ignore:
Timestamp:
09/08/13 12:05:23 (12 years ago)
Author:
Anne Kozlika <kozlika@…>
Branch:
default
Children:
1756:820ded7ce747, 1823:6dea7b458fb9
Message:

Layouts: detour du three-cols, améliorations des one- two- three- boxes.
Compléments sur _charte.html.

File:
1 edited

Legend:

Unmodified
Added
Removed

  • admin/_charte.html

    r1748 r1749  
    1515     <style type="text/css"> 
    1616          #content > h2 {padding-top: 2.5em;} 
    17           #content > h3, #content > h4 {padding-top: 2em;} 
     17          #content > h3, #content > h4 {padding-top: 2em; color: #d30e70;} 
    1818          #content > h2:first-child {padding-top: 0;} 
     19          .one-box .box {border: 1px solid #ddd; padding: 2px .5em;} 
    1920     </style> 
    2021     <script type="text/javascript" src="js/jquery/jquery.js"></script> 
     22     <script type="text/javascript" src="js/jquery/jquery.pageTabs.js"></script> 
    2123     <script type="text/javascript" src="js/jquery/jquery.biscuit.js"></script> 
    2224     <script type="text/javascript" src="js/jquery/jquery.bgFade.js"></script> 
    … …  
    2527     <script type="text/javascript"> 
    2628     //<![CDATA[ 
    27      dotclear.nonce = '5f7602a68cd19a8613d2dda9b510e1e0e85b417a'; 
    28      dotclear.img_plus_src = 'images/expand.png'; 
    29      dotclear.img_plus_alt = 'dévoiler'; 
    30      dotclear.img_minus_src = 'images/hide.png'; 
    31      dotclear.img_minus_alt = 'cacher'; 
    32      dotclear.img_menu_on = 'images/menu_on.png'; 
    33      dotclear.img_menu_off = 'images/menu_off.png'; 
    34      dotclear.msg.help = 'Aide pour cette page'; 
    35      dotclear.msg.help_hide = 'Masquer'; 
    36      dotclear.msg.to_select = 'Sélectionner :'; 
    37      dotclear.msg.no_selection = 'aucun'; 
    38      dotclear.msg.select_all = 'tous'; 
    39      dotclear.msg.invert_sel = 'Inverser la sélection'; 
    40      dotclear.msg.website = 'Site web :'; 
    41      dotclear.msg.email = 'Email :'; 
    42      dotclear.msg.ip_address = 'Adresse IP :'; 
    43      dotclear.msg.error = 'Erreur :'; 
    44      dotclear.msg.entry_created = 'Billet créé avec succès.'; 
    45      dotclear.msg.edit_entry = 'Modifier le billet'; 
    46      dotclear.msg.view_entry = 'voir le billet'; 
    47      dotclear.msg.confirm_delete_posts = 'Êtes-vous certain de vouloir supprimer les billets sélectionnés (%s) ?'; 
    48      dotclear.msg.confirm_delete_categories = 'Êtes-vous certain de vouloir supprimer les categories sélectionnées (%s) ?'; 
    49      dotclear.msg.confirm_delete_post = 'Êtes-vous certain de vouloir supprimer ce billet ?'; 
    50      dotclear.msg.click_to_unlock = 'Cliquez ici pour déverrouiller ce champ'; 
    51      dotclear.msg.confirm_spam_delete = 'Êtes-vous sûr de vouloir supprimer tous les indésirables ?'; 
    52      dotclear.msg.confirm_delete_comments = 'Êtes-vous certain de vouloir supprimer les commentaires sélectionnés (%s) ?'; 
    53      dotclear.msg.confirm_delete_comment = 'Êtes-vous certain de vouloir supprimer ce commentaire ?'; 
    54      dotclear.msg.cannot_delete_users = 'Les utilisateurs ayant écrit des entrées ne peuvent être supprimés.'; 
    55      dotclear.msg.confirm_delete_user = 'Êtes-vous certain de vouloir supprimer les utilisateurs sélectionnés (%s) ?'; 
    56      dotclear.msg.confirm_delete_category = 'Êtes-vous certain de vouloir supprimer la catégorie \"%s\" ?'; 
    57      dotclear.msg.confirm_reorder_categories = 'Êtes-vous certain de vouloir réinitialiser l\'ordre des catégories ?'; 
    58      dotclear.msg.confirm_delete_media = 'Êtes-vous certain de vouloir supprimer le média \"%s\" ?'; 
    59      dotclear.msg.confirm_extract_current = 'Êtes-vous certain de vouloir extraire l\'archive dans le répertoire actuel ?'; 
    60      dotclear.msg.confirm_remove_attachment = 'Êtes-vous certain de vouloir supprimer l\'annexe \"%s\" ?'; 
    61      dotclear.msg.confirm_delete_lang = 'Êtes-vous certain de vouloir supprimer la langue \"%s\" ?'; 
    62      dotclear.msg.confirm_delete_plugin = 'Êtes-vous certain de vouloir supprimer le plugin \"%s\" ?'; 
    63      dotclear.msg.use_this_theme = 'Utiliser ce thème'; 
    64      dotclear.msg.remove_this_theme = 'Supprimer ce thème'; 
    65      dotclear.msg.confirm_delete_theme = 'Êtes-vous certain de vouloir supprimer le thème \"%s\" ?'; 
    66      dotclear.msg.confirm_delete_backup = 'Êtes-vous certain de vouloir supprimer cette sauvegarde ?'; 
    67      dotclear.msg.zip_file_content = 'Contenu du fichier zip'; 
    68      dotclear.msg.xhtml_validator = 'Vérifier la validité XHTML'; 
    69      dotclear.msg.xhtml_valid = 'Le contenu XHTML est valide.'; 
    70      dotclear.msg.xhtml_not_valid = 'Il y a des erreurs XHTML.'; 
    71      dotclear.msg.confirm_change_post_format = 'Vous avez des modifications non sauvegardées. Changer de format vous fera perdre ces modifications. Continuer ?'; 
    72      dotclear.msg.confirm_change_post_format_noconvert = 'Attention : le changement de syntaxe ne transformera pas les balises des contenus déjà saisis. Pensez à les réadapter après cette opération. Confirmez-vous ce changement de syntaxe ?'; 
    73      dotclear.msg.load_enhanced_uploader = 'Chargement de l\'interface avancée.'; 
    74  
     29          dotclear.img_plus_alt = 'dévoiler'; 
     30          dotclear.img_minus_alt = 'cacher'; 
     31          dotclear.img_menu_on = 'images/menu_on.png'; 
     32          dotclear.img_menu_off = 'images/menu_off.png'; 
     33          dotclear.msg.help = 'Aide pour cette page'; 
     34          dotclear.msg.help_hide = 'Masquer'; 
     35          dotclear.msg.error = 'Erreur :'; 
    7536     //]]> 
    7637     </script> 
    7738     <script type="text/javascript"> 
    7839     //<![CDATA[ 
    79      dotclear.unfolded_sections = {'dcx_post_lang':true,'dc_favorites_menu':true,'dc_system_menu':true}; 
    80  
     40          dotclear.unfolded_sections = {'dc_favorites_menu':true,'dc_system_menu':true}; 
    8141     //]]> 
    8242     </script> 
    83      <link rel="stylesheet" type="text/css" href="style/jsToolBar/jsToolBar.css" /> 
    84      <script type="text/javascript" src="js/jsToolBar/jsToolBar.js"></script> 
    85      <script type="text/javascript" src="js/jsToolBar/jsToolBar.wysiwyg.js"></script> 
    86      <script type="text/javascript" src="js/jsToolBar/jsToolBar.dotclear.js"></script> 
    8743     <script type="text/javascript"> 
    8844     //<![CDATA[ 
    89      jsToolBar.prototype.dialog_url = 'popup.php'; jsToolBar.prototype.iframe_css = 'body{font: 12px "DejaVu Sans","Lucida Grande","Lucida Sans Unicode",Arial,sans-serif;color : #000;background: #f9f9f9;margin: 0;padding : 2px;border: none;}pre, code, kbd, samp {font-family:"Courier New",Courier,monospace;font-size : 1.1em;}code {color : #666;font-weight : bold;}body > p:first-child {margin-top: 0;}'; jsToolBar.prototype.base_url = 'http://localhost'; jsToolBar.prototype.switcher_visual_title = 'visuel'; jsToolBar.prototype.switcher_source_title = 'source'; jsToolBar.prototype.legend_msg = 'Vous pouvez utiliser les raccourcis suivants pour formater votre texte.'; jsToolBar.prototype.elements.blocks.options.none = '-- aucun --'; jsToolBar.prototype.elements.blocks.options.nonebis = '-- format bloc --'; jsToolBar.prototype.elements.blocks.options.p = 'Paragraphe'; jsToolBar.prototype.elements.blocks.options.h1 = 'Titre de niveau 1'; jsToolBar.prototype.elements.blocks.options.h2 = 'Titre de niveau 2'; jsToolBar.prototype.elements.blocks.options.h3 = 'Titre de niveau 3'; jsToolBar.prototype.elements.blocks.options.h4 = 'Titre de niveau 4'; jsToolBar.prototype.elements.blocks.options.h5 = 'Titre de niveau 5'; jsToolBar.prototype.elements.blocks.options.h6 = 'Titre de niveau 6'; jsToolBar.prototype.elements.strong.title = 'Forte emphase'; jsToolBar.prototype.elements.em.title = 'Emphase'; jsToolBar.prototype.elements.ins.title = 'Insertion'; jsToolBar.prototype.elements.del.title = 'Suppression'; jsToolBar.prototype.elements.quote.title = 'Citation en ligne'; jsToolBar.prototype.elements.code.title = 'Code'; jsToolBar.prototype.elements.br.title = 'Passage à la ligne'; jsToolBar.prototype.elements.blockquote.title = 'Bloc de citation'; jsToolBar.prototype.elements.pre.title = 'Texte préformaté'; jsToolBar.prototype.elements.ul.title = 'Liste à puces'; jsToolBar.prototype.elements.ol.title = 'Liste numérotée'; jsToolBar.prototype.elements.link.title = 'Lien'; jsToolBar.prototype.elements.link.href_prompt = 'URL ?'; jsToolBar.prototype.elements.link.hreflang_prompt = 'Langue ?'; jsToolBar.prototype.elements.img.title = 'Image externe'; jsToolBar.prototype.elements.img.src_prompt = 'URL ?'; jsToolBar.prototype.elements.img_select.title = 'Sélecteur de média'; jsToolBar.prototype.elements.post_link.title = 'Lien vers une entrée';  
     45          $(function() { 
     46               $.pageTabs('two-boxes'); 
     47          }); 
    9048     //]]> 
    9149     </script> 
    92      <script type="text/javascript" src="js/_index.js"></script> 
    9350</head> 
    9451 
    … …  
    11774                         <p>La font-size de base est à 1.2rem (la valeur <code>1rem</code> correspond à 10px). Si vous utilisez l'unité <code>rem</code> pensez à faire précéder la déclaration par son équivalent  
    11875                         en pixels pour rester compatible avec Internet Explorer. L'interlignage courant est à 1.5.</p> 
    119                          <p>La liste suivante est de class <code>nice</code>. Elle est semblable aux listes ordinaires mais avec des puces carrées.</p> 
     76                         <p>La liste suivante est de class <code>"nice"</code>. Elle est semblable aux listes ordinaires mais avec des puces carrées.</p> 
    12077                         <ul class="nice"> 
    12178                              <li>Les textes courants sont en Arial, Helvetica ou sans-serif. </li> 
    … …  
    12582 
    12683                         <h3 id="titres">Titre h3</h3> 
    127                               <p>Le titre de niveau h1 est réservé au titre du site-admin. Le titre de niveau h2 est réservé au breadcrumb/titre de la page courante. On utilise les titres de niveau h3 en premier niveau de titre à l'intérieur de pages, comme sur la page Inport/Export.</p> 
     84                              <p>Le titre de niveau h1 est réservé au titre du site-admin. Le titre de niveau h2 est réservé au breadcrumb/titre de la page courante. On utilise les titres de niveau h3 en premier niveau de titre à l'intérieur des pages, comme sur la page Import/Export.</p> 
    12885                              <p>Il ne faut pas choisir un niveau de titre en fonction de son aspect mais respecter une hiérarchie cohérente. On peut obtenir visuellement l'aspect d'un titre h3 en donnant à l'élément la class <code>"as_h3"</code>.</p> 
    12986                         <h4>Titre de niveau h4</h4> 
    … …  
    13592                         <div class="fieldset"> 
    13693                              <h4 class="smart-title">Variante pour les titres</h4> 
    137                                    <p>On peut utiliser une variante aux titres qui regroupent des actions (voir la page de la Médiathèque) ou servent de titre à une boîte encadrée, comme ici où les présentes explications sont placées dans une div de class <code>fieldset</code>.</p> 
    138                                    <p>On peut utiliser, quel que soit le niveau hx de cet intertitre la class <code>smart-title</code> pour obtenir l'effet ci-dessus.</p> 
     94                                   <p>On peut utiliser une variante aux titres qui regroupent des actions (voir la page de la Médiathèque) ou servent de titre à une boîte encadrée, comme ici où les présentes explications sont placées dans une div de class <code>"fieldset"</code>.</p> 
     95                                   <p>On peut utiliser, quel que soit le niveau hx de cet intertitre la class <code>"smart-title"</code> pour obtenir l'effet ci-dessus.</p> 
    13996                         </div> 
    14097 
    … …  
    14299 
    143100                    <h3 id="onglets">Onglets</h3> 
    144                          <div class="part-tabs"> 
    145                               <ul> 
    146                                    <li id="part-tabs-toto" class="part-tabs-active"><a href="#ancre-1">Titre de l'onglet 1</a></li> 
    147                                    <li id="part-tabs-titi"><a href="#ancre-2">Titre de l'onglet 2</a></li> 
    148                               </ul> 
    149                          </div> 
    150                          <p class="multi-part">La classe <code>multi-part</code> (qui doit obligatoirement être donnée à la div du contenu de chaque onglet afin que le script jQuery fonctionne) aligne son bord gauche avec celui premier onglet.</p> 
    151                     <hr /> 
     101                    <p>Les descriptions des constructions en multi-colonnes ci-dessous présentent un exemple de répartition en onglets.</p> 
    152102 
    153103                    <h3 id="multi-colonnage">Multi-colonnage</h3> 
    154                     <h4>Two-cols 50/50</h4> 
     104                    <div id="one-box" class="multi-part" title="One-box"> 
     105                         <h4>Boîtes distribuées horizontalement</h4> 
     106                         <div class="one-box"> 
     107                              <div class="box"> 
     108                                   <p><span class="step">1</span> Toutes les boîtes de class <code>"box"</code> placées à l'intérieur d'une boîte de class <code>"one-box"</code> se distribuent horizontalement (imaginez que chaque boîte est un mot dans un paragraphe). Si les largeurs de ces boîtes ne sont pas spécifiquement définies dans la CSS, elle s'ajustent à leur contenu.</p> 
     109                              </div> 
     110                              <div class="box"> 
     111                                   <p><span class="step">2</span> Voici une petite boîte.</p> 
     112                              </div> 
     113                              <div class="box"> 
     114                                   <p><span class="step">3</span> Une autre petite boîte.</p> 
     115                              </div> 
     116                              <div class="box"> 
     117                                   <p><span class="step">4</span> Par défaut les « lignes »  de boîtes <code>"box"</code> sont justifiées au sein de la boîte <code>"one-box"</code> et l'espacement se répartit entre elles.</p> 
     118                              </div> 
     119                              <div class="box"> 
     120                                   <p><span class="step">5</span> Si vous souhaitez un autre alignement des boîtes entre elles vous pouvez ajouter les class :  
     121                                   <ul class="nice clear"> 
     122                                        <li><code>"txt-left"</code>,</li> 
     123                                        <li><code>"txt-right"</code></li>  
     124                                        <li>ou <code>"txt-center"</code></li> 
     125                                   </ul> 
     126                                   <p> à la class <code>"one-box"</code>.</p> 
     127                              </div> 
     128                              <div class="box"> 
     129                                   <p><span class="step">6</span> Le cadre placé ici autour de chaque boîte ne fait pas partie des styles par défaut.</p> 
     130                              </div> 
     131                         </div> 
     132                    </div> 
     133                    <div id="two-boxes" class="multi-part" title="Two-boxes"> 
     134                         <h4>Boîtes distribuées deux par deux</h4> 
     135                         <div> 
     136                              <div class="two-boxes odd"> 
     137                                   <p><span class="step">1</span> Les boîtes de class <code>"two-boxes"</code> ont une règle CSS <code>display:inline-block;</code>. Elles se rangent alternativement à gauche et à droite. Pour plus de clarté, les blocs sont ici numérotés avec leur ordre dans le flux.</p> 
     138                              </div><!-- 
     139                              --><div class="two-boxes even"> 
     140                                   <p><span class="step">2</span> S'il n'y a que deux boîtes, une autre class n'est pas nécessaire. S'il y en a plusieurs, il est conseillé de leur attribuer alternativement les class <code>"odd"</code> et <code>"even"</code> pour que les marges se placent correctement.</p> 
     141                              </div><!-- 
     142                              --><div class="two-boxes odd"> 
     143                                   <p><span class="step">3</span> Attention, il faut soit ne pas retourner à la ligne entre la fermeture d'une boîte <code>"two-boxes"</code> et l'ouverture de la suivante soit adopter la méthode de commentaire vide mise en place ici et expliquée chez <a href="http://www.alsacreations.com/astuce/lire/1432-display-inline-block-espaces-indesirables.html">Alsacréations</a> («&nbsp;Méthode 2&nbsp;»).</p> 
     144                              </div><!-- 
     145                              --><div class="two-boxes even"> 
     146                                   <div class="box"> 
     147                                        <p><span class="step">4</span> Toutes les boîtes de class <code>"box"</code><br /> 
     148                                         placées au sein d'une boîte <code>"two-boxes"</code>…</p> 
     149                                   </div> 
     150                                   <div class="box"> 
     151                                        <p><span class="step">4 bis</span>… se distribuent horizontalement comme dans <br /> 
     152                                             une boîte <code>"one-box"</code>.</p> 
     153                                   </div> 
     154                              </div> 
     155                         </div> 
     156                    </div> 
     157                    <div id="three-boxes" class="multi-part" title="Three-boxes"> 
     158                         <h4>Boîtes distribuées trois par trois</h4> 
     159                         <div> 
     160                              <div class="three-boxes"> 
     161                                   <div class="box"> 
     162                                        <p>Sur le même principe que les « two-boxes » on peut utiliser des boîtes de class <code>"three-boxes"</code> pour répartir les contenus sur trois colonnes de 30% chacune (le reste est occupé par les marges).</p> 
     163                                   </div> 
     164                              </div><!-- 
     165                              --><div class="three-boxes"> 
     166                                   <div class="box"> 
     167                                        <p>Comme pour les "two-boxes" il faut soit ne pas laisser d'espace ou de retour à la ligne entre les boîtes, soit adopter la méthode recommandée plus haut.</p> 
     168                                   </div> 
     169                              </div><!-- 
     170                              --><div class="three-boxes"> 
     171                                   <div class="box"> 
     172                                        <p>Dans les « two-boxes » comme dans les « three-boxes », on peut placer à l'intérieur plusieurs autres div de class="box" qui s'afficheront les unes à côté des autres ou l'une en dessous de l'autre selon la place dont elles disposent.</p> 
     173                                   </div> 
     174                              </div> 
     175                         </div> 
     176                    </div> 
     177                    <div id="two-cols-50-50" class="multi-part" title="Two-cols (50/50)"> 
     178                         <h4>Deux colonnes flottantes de largeurs égales</h4> 
    155179                         <div class="two-cols clearfix"> 
    156180                              <div class="col"> 
    157                                    <p>La div englobante porte la class <code>two-cols</code>, chacune de ses div porte la class <code>col</code>. 
     181                                   <p>La div englobante porte la class <code>"two-cols"</code>, chacune de ses div porte la class <code>"col"</code>. 
    158182                                   Sans autre précision les deux colonnes sont d'égale largeur.</p> 
    159183                              </div> 
    160184                              <div class="col"> 
    161                                    <p>Attention : ces colonnes sont construites avec des flottants, il faut donc penser à mettre une class <code>clear</code> à l'élément suivant ou ajouter la class <code>clearfix</code> à la div <code>class="two-cols"</code>.</p> 
    162                               </div> 
    163                          </div> 
    164                     <h4>Two-cols 70/30</h4> 
     185                                   <p>Attention : ces colonnes sont construites avec des flottants, il faut donc penser à mettre une class <code>clear</code> à l'élément suivant ou ajouter la class <code>"clearfix"</code> à la <code>div class="two-cols"</code>.</p> 
     186                              </div> 
     187                         </div> 
     188                    </div> 
     189                    <div id="two-cols-70-30" class="multi-part" title="Two-cols (70/30)"> 
     190                         <h4>Deux colonnes flottantes de largeurs inégales</h4> 
    165191                         <div class="two-cols clearfix"> 
    166192                              <div class="col70"> 
    167                                    <p><span class="step">col70</span> La div englobante porte la class <code>two-cols</code>, chacune de ses div porte la class <code>col</code>. 
    168                                    Pour obtenir des colonnes inégales, on dispose des classes <code>col70</code> et <code>col30</code>.</p> 
     193                                   <p><span class="step">col70</span> La div englobante porte la class <code>"two-cols"</code>. 
     194                                   Pour obtenir des colonnes inégales, on dispose des classes <code>"col70"</code> et <code>col30</code> à attribuer à l'une ou à l'autre de ses colonnes.</p> 
    169195                              </div> 
    170196                              <div class="col30"> 
    171                                    <p><span class="step">col30</span> Penser à mettre une class <code>clear</code> à l'élément suivant ou ajouter la class <code>clearfix</code> à la div <code>class="two-cols"</code>.</p> 
    172                               </div> 
    173                          </div> 
    174                     <h4>Two-boxes</h4> 
    175                          <div> 
    176                               <div class="two-boxes odd"> 
    177                                    <div class="box"> 
    178                                         <p><span class="step">1</span> Les boîtes de class <code>two-boxes</code> ont une règle de <code>display:inline-block;</code>. Elles se rangent alternativement à gauche et à droite.</p> 
    179                                    </div> 
    180                               </div><!-- 
    181                               --><div class="two-boxes even"> 
    182                                    <div class="box"> 
    183                                         <p><span class="step">2</span> S'il n'y a que deux boîtes, une autre class n'est pas nécessaire. S'il y en a plusieurs, il est conseillé 
    184                                         de leur attribuer alternativement les class <code>odd</code> et <code>even</code> pour que les marges se 
    185                                         placent correctement.</p> 
    186                                    </div> 
    187                               </div><!-- 
    188                               --><div class="two-boxes odd"> 
    189                                    <div class="box"> 
    190                                         <p><span class="step">3</span> Attention, il faut soit ne pas retourner à la ligne entre la fermeture d'une boîte et l'ouverture de la suivante soit adopter la Méthode 2 mise en place ici expliquée chez <a href="http://www.alsacreations.com/astuce/lire/1432-display-inline-block-espaces-indesirables.html">Alsacréations</a>.</p> 
    191                                    </div> 
    192                               </div> 
    193                          </div> 
    194                     <h4>Three-boxes</h4> 
    195                          <div> 
    196                               <div class="three-boxes"> 
    197                                    <div class="box"> 
    198                                         <p>Sur le même principe on peut utiliser des boîtes de class <code>three-boxes</code> pour répartir les contenus sur trois colonnes de 30% chacune (le reste est occupé par les marges).</p> 
    199                                    </div> 
    200                               </div><!-- 
    201                               --><div class="three-boxes"> 
    202                                    <div class="box"> 
    203                                         <p>Comme pour les "two-boxes" il faut soit ne pas laisser d'espace ou de retour à la ligne entre les boîtes, soit adopter la méthode recommandée plus haut.</p> 
    204                                    </div> 
    205                               </div><!-- 
    206                               --><div class="three-boxes"> 
    207                                    <div class="box"> 
    208                                         <p>Dans les "two-boxes" comme dans les "three-boxes", on peut placer à l'intérieur plusieurs autres div de class="box" qui s'afficheront les unes à côté des autres ou l'une en dessous de l'autre selon la place dont elles disposent.</p> 
    209                                    </div> 
    210                               </div> 
    211                          </div> 
     197                                   <p><span class="step">col30</span> Penser à mettre une class <code>"clear"</code> à l'élément suivant ou ajouter la class <code>"clearfix"</code> <code>div class="two-cols"</code>.</p> 
     198                              </div> 
     199                         </div> 
     200                    </div> 
     201                    <div id="three-cols" class="multi-part" title="Three-cols (deprecated)"> 
     202                         <h4>Trois colonnes flottantes de largeurs égales</h4> 
     203                         <p class="warning"><strong>Deprecated.</strong> Ces règles sont conservées dans la 2.6 par souci de rétro-compatibilité mais il est recommandé d'utiliser désormais le colonnage <a href="#three-boxes">three-boxes</a>.</p> 
     204                         <div class="three-cols clearfix"> 
     205                              <div class="col"> 
     206                                   <h5>Colonne 1</h5> 
     207                                   <p>La div englobante porte la class <code>"three-cols"</code>, chacune de ses div porte la class <code>"col"</code>. Les trois colonnes sont d'égale largeur.</p> 
     208                              </div> 
     209                              <div class="col"> 
     210                                   <h5>Colonne 2</h5> 
     211                                   <p>Voici une deuxième colonne. N'oubliez pas d'ajouter la class <code>"clearfix"</code> à la class <code>"three-cols"</code> ou un élément de class <code>"clear"</code> après cet élément.</p> 
     212                              </div> 
     213                              <div class="col"> 
     214                                   <h5>Colonne 3</h5> 
     215                                   <p>Voilà la troisième colonne.</p> 
     216                              </div> 
     217                         </div> 
     218                    </div> 
     219                    <hr /> 
     220                    <p><strong>Note :</strong> les valeurs en pourcentage et les numérotations sont placées dans un <code>span class="step"</code>.</p> 
    212221 
    213222                    <h2><span class="page-title">Interactions</span></h2> 
    … …  
    323332                    <ul> 
    324333                         <li><a href="#onglets">Onglets</a></li> 
    325                          <li><a href="#multi">Multi-colonnage</a></li> 
     334                         <li><a href="#multi-colonnage">Multi-colonnage</a></li> 
    326335                    </ul> 
    327336               </div><!-- /blog-menu --> 
Note: See TracChangeset for help on using the changeset viewer.

Sites map