Changeset 2096:c757544b90c3
- Timestamp:
- 09/25/13 22:16:54 (11 years ago)
- Branch:
- default
- Location:
- admin
- Files:
-
- 2 edited
Legend:
- Unmodified
- Added
- Removed
-
admin/_charte.php
r2038 r2096 334 334 <p class="nav_prevnext"><a title="Titre de l'élément précédente" href="post.php?id=4145">« Élément précédent</a> | <a title="Titre de l'élément suivant" href="#">Élément suivant »</a></p> 335 335 336 <h2><span class="page-title">Les tableaux</span></h2> 337 <p>Il existe deux mises en forme type de tableaux selon que l'on cherche à faire un tableau ordinaire 338 ou un tableau dont on peut déplacer les lignes par glisser déposer (voir plus bas). Cependant certaines règles 339 sont communes à tout les tableaux.</p> 340 341 <h3 id="communes">Règles communes</h3> 342 <h4>Largeur du tableau</h4> 343 <p>Sauf pour des tableaux particuliers (absents dans l'admin mais qui pourraient être nécessaires 344 à un plugin,les tableaux occupent toute la largeur de la page. Afin que les tableaux soient consultables 345 sur un mobile en navigant horizontalement, on englobe le tableau dans une <code>div class="table-outer"</code>, 346 qui servira de « conteneur ».</p> 347 <h4>Accessibilité</h4> 348 <p>Les éléments caption, th, scope sont nécessaires à l'accessibilité. Ne les oubliez pas ! ». 349 On peut utiliser la <code>class="hidden"</code> sur l'élément <code>caption</code> (qui accueille 350 le titre du tableau) si vous ne souhaitez pas qu'il soit affiché sur la page.</p> 351 <h4>Les classes</h4> 352 <p>Des classes particulières peuvent être attribuées aux lignes :</p> 353 <ul> 354 <li><code>line</code> (systématique) : pour les traits horizontaux et le fond gris léger 355 au survol ;</li> 356 <li><code>offline</code> : pour un noir estompé (gris quoi).</li> 357 </ul> 358 <p>Des classes particulières peuvent être appliquées aux cellules :</p> 359 <ul> 360 <li><code>nowrap</code> : pas de retour à la ligne dans la cellule, quelle que soit la 361 largeur de la page ;</li> 362 <li><code>maximal</code> : la cellule prendra toute la largeur restante disponible ;</li> 363 <li><code>count</code> : le contenu de la cellule sera aligné à droite avec un petit retrait.</li> 364 </ul> 365 <h3 id="ordinaires">Tableau classique</h3> 366 <div class="table-outer"> 367 <table> 368 <caption class="hidden">Liste des entrées</caption> 369 <tr> 370 <th colspan="2" class="first">Titre</th> 371 <th scope="col">Date</th> 372 <th scope="col">Catégorie</th> 373 <th scope="col">Auteur</th> 374 <th scope="col">Commentaires</th> 375 <th scope="col">Rétroliens</th> 376 <th scope="col">État</th> 377 </tr> 378 <tr class="line"> 379 <td class="nowrap"><input type="checkbox" name="name1" value="value1" /></td> 380 <td class="maximal" scope="row"><a href="#">Mon cher Franck</a></td> 381 <td class="nowrap count">06/08/2013 19:16</td> 382 <td class="nowrap"><a href="#">Les aventures du clafoutis</a></td> 383 <td class="nowrap">kozlika</td><td class="nowrap count">4</td> 384 <td class="nowrap count">0</td><td class="nowrap status"><img alt="Publié" title="Publié" src="images/check-on.png" /> <img alt="Sélectionné" title="Sélectionné" src="images/selected.png" /> </td> 385 </tr> 386 <tr class="line offline"> 387 <td class="nowrap"><input type="checkbox" name="name2" value="value2" /></td> 388 <td class="maximal" scope="row"><a href="#">Dotclear 2.3.0</a></td> 389 <td class="nowrap count">16/05/2011 22:29</td> 390 <td class="nowrap"><a href="#">Les aventures du clafoutis</a></td> 391 <td class="nowrap">kozlika</td><td class="nowrap count">5</td> 392 <td class="nowrap count">0</td><td class="nowrap status"><img alt="Non publié" title="Non publié" src="images/check-off.png" /> <img alt="Sélectionné" title="Sélectionné" src="images/selected.png" /> </td> 393 </tr> 394 <tr class="line"> 395 <td class="nowrap"><input type="checkbox" name="entries[]" value="2148" /></td> 396 <td class="maximal" scope="row"><a href="#">Causons opéra au Tamm Bara</a></td> 397 <td class="nowrap count">24/11/2009 23:10</td> 398 <td class="nowrap"><a href="#">Les aventures du clafoutis</a></td> 399 <td class="nowrap">kozlika</td> 400 <td class="nowrap count">4</td><td class="nowrap count">1</td> 401 <td class="nowrap status"><img alt="Publié" title="Publié" src="images/check-on.png" /> </td> 402 </tr> 403 <tr class="line"> 404 <td class="nowrap"><input type="checkbox" name="entries[]" value="2136" /></td> 405 <td class="maximal" scope="row"><a href="#">Souffler six bougies</a></td> 406 <td class="nowrap count">14/08/2009 00:00</td><td class="nowrap"><a href="#">Les aventures du clafoutis</a></td> 407 <td class="nowrap">kozlika</td> 408 <td class="nowrap count">4</td><td class="nowrap count">2</td><td class="nowrap status"><img alt="Publié" title="Publié" src="images/check-on.png" /> </td> 409 </tr> 410 <tr class="line"> 411 <td class="nowrap"><input type="checkbox" name="entries[]" value="2129" /></td> 412 <td class="maximal" scope="row"><a href="#">Dotclear et grenadine, troisième édition</a></td> 413 <td class="nowrap count">15/06/2009 07:39</td> 414 <td class="nowrap"><a href="#">Les aventures du clafoutis</a></td> 415 <td class="nowrap">kozlika</td> 416 <td class="nowrap count">9</td> 417 <td class="nowrap count">1</td> 418 <td class="nowrap status"><img alt="Publié" title="Publié" src="images/check-on.png" /> </td> 419 </tr> 420 <tr class="line"> 421 <td class="nowrap"><input type="checkbox" name="entries[]" value="2111" /></td> 422 <td class="maximal" scope="row"><a href="#">L'abc dotclear est né</a></td> 423 <td class="nowrap count">19/03/2009 10:31</td><td class="nowrap"><a href="#">Les aventures du clafoutis</a></td> 424 <td class="nowrap">kozlika</td> 425 <td class="nowrap count">1</td><td class="nowrap count">0</td> 426 <td class="nowrap status"><img alt="Publié" title="Publié" src="images/check-on.png" /> </td> 427 </tr> 428 </table> 429 </div> 430 431 336 432 </div><!-- /content --> 337 433 </div><!-- /main --> -
admin/style/default.css
r2085 r2096 415 415 font: 100% "Andale Mono","Courier New",monospace; 416 416 } 417 code { 418 background: #FAFAD1; 419 } 417 420 pre { 418 421 white-space: pre; … … 2352 2355 width: 100%; 2353 2356 height: 4px; 2354 background: # d99;2357 background: #EBEB47; 2355 2358 } 2356 2359 #debug div { … … 2363 2366 #debug:hover { 2364 2367 height: auto; 2368 padding: 2px 1em; 2369 z-index: 100; 2365 2370 } 2366 2371 #debug:hover div { … … 2468 2473 #content { 2469 2474 margin: 0; 2470 padding: 0 .5em ;2475 padding: 0 .5em !important; 2471 2476 } 2472 2477 #collapser { … … 2476 2481 margin: 0; 2477 2482 padding: 6px 0; 2483 } 2484 #dashboard-boxes .box.medium, 2485 #dashboard-boxes .box.small, 2486 #dashboard-boxes .box.large { 2487 width: 90%; 2488 margin: 10px auto; 2478 2489 } 2479 2490 } … … 2496 2507 width: 150px; 2497 2508 } 2498 #dashboard-boxes .box.small2499 #dashboard-boxes .box.medium {2500 margin: 10px 0;2501 width: 280px;2502 }2503 2509 #content.with-help #help-button { 2504 2510 top: 101px;
Note: See TracChangeset
for help on using the changeset viewer.