miércoles, 18 de abril de 2012

CSS para distribución horizontal, Custom breadcrumb

  • Para distribuir uniformemente una lista horizontal de fotografías, se puede usar el selector :nth-child(kn), como en:
    .item {
      width: 160px;
      float: left;
      margin-right: 35px;
    }
    .item:nth-child(5n) {
      margin-right: 0;
    }
    
    En este ejemplo cada item tiene una ancho de 160px y un margen derecho de 35px. Si el ancho del contenedor es 940px, sólo se mostrarán 4 [ya que (160 + 35)*4 = 780 y  (160 + 35)*5 = 975]. Pero nth-child(5n) permite que cada 5 items el margen sea 0 y así ya caben los 5 elementos: 160*5 + 35*4 = 940.
    En este artículo usan un método similar:  How to distribute elements horizontally using CSS. El método que muestro permite hacer distribución para más de una fila.
  • En Drupal 6:
    • Se puede usar la vista taxonomy_term para reemplazar el listado por default de items (por ejemplo taxonomy/term/4 muestra todos los items cuyo term tiene tid=4). Pero, si se ingresa a un item, el breadcrumb no permite regresar al listado. Para que el breadcrumb permita regresar al listado, se puede usar el módulo Custom breadcrumbs e indicar:
      • Titles: [term]
      • Paths: taxonomy/term/[term-id]
    • Custom breadcrumbs tambien permite indicar que aparezca el enlace de cierta página. Por ejemplo:
      • Breadcrumb visibility:
        return in_array($node->path, array(
          'content/child1', 
          'content/child2',
        ));
        
      • Titles: Parent
      • Paths: content/parent