Barra de herramientas usando botones

Después de buscar la opción mas usable para una barra de herramientas (toolbar), dónde se pudiera incluir un icono para cada botón. Al final me quedé con los botones que se pueden mejorar visualmente con CSS y funcionan sin javascript

En la forma incluímos un fieldset para posteriormente agregarle un poco de estilo. Usamos un span dentro del button para poder poner el icono y un fondo al botón. Con el span ponemos un icono como fondo y un padding-left del ancho del icono para dejarle espacio suficiente, en el button ponemos una imagen de fondo y un borde de 1 pixel sólido para que se note cuando presionas el botón.

    @import url(button.css);
    
    menú
    <button type="submit"><span>Abrir</span></button>
    <button type="submit"><span>Cerrar</span></button>
    <button type="submit"><span>Nuevo</span></button>
    <button type="submit"><span>Copiar</span></button>
    <button type="submit"><span>Mover</span></button>
    <button type="submit"><span>Borrar</span></button>
    

button {    background-color:#779999;
    background-image:url(img/back.gif);
    border:solid #DDDDDD 1px;
}

button>span {
    /*font-size:16px;
    font-weight:bold;
    font-family:Arial,sans-serif;
    height:26px;*/
    background-image: url(icons/tool.png);
    /*background-attachment: scroll;*/
    /*background-position: 0 0;*/
    background-repeat: no-repeat;
    padding-left: 18px;
}

Naked Day

http://www.dustindiaz.com/naked-day

La idea detras de esta celebración es poromover los estándares del web, el uso de xhtml simple y llano, markup semántico y una buena estructura jerárquica.

This is a fun idea, fully in line with the reasons for creating CSS in the first place. While most designers are attracted by the extra presentational capabilities, saving HTML from becoming a presentational language was probably a more important motivation for most people who participated in the beginning.

Håkon Wium Lie

enlaces varios

Éste es el diseño… alfresco
DB API… hibernate
CSS standards… dezwozhere

Calendarios de javascript

• Gurt JavaScript Calendar
  Éste sitio tiene otros elementos como un árbol, un menu y tabla con filtros y paginación.
• dhtmlgoodies
  Además presenta varios elementos, entre estos, el Table Widget parece interesante. En general todos los scripts estan geniales, pero el DHTML form validation está muy interesante.
• Unobtrusive Date-Picker Widgit
  También en esta página: Yet Another Unobtrusive Form Validation Script.
  En este sitio los enlaces ya visitados ponen una palomita indicándolo.

Más sobre tablas

No More Tables: CSS Layout Techniques de Douglas Bowman

Pure CSS Scrollable Table with Fixed Header

VERTICAL SCROLLING TABLES

CSS Scrollable Table

Advanced Tables

Scrollable Table with Fixed Header

HTML/DOM Scrolling Table Body

Replicating a Tree table

Zebra Tables

Algo sobre tablas, a propósito de LogAleph

Bring on the tables

A CSS styled table

Introduction to tables

Techniques for Accessible HTML Tables

A table, s’il vous plaît

Accessible Data Tables

CSS Layout Creator

http://www.csscreator.com/version2/pagelayout.php

UL/OL en columnas

Este es el método más flexible para presentar listas en dos o más columnas, con la ayuda de javascript cambiamos el órden de los elementos para presentarlos de arriba a abajo y de izquierda a derecha.

http://b-cage.net/code/web/list-columns.html

tips!

En el sitio de Turnip’s Patch se puede hacer el textarea más grande o pequeño con un script. También tiene un preview mientras escribes actualiza la presentación.

css xhtml

CSS PLaY. experiments with Cascading Style Sheets.

OrderedList con un plugin para WordPress: Tiger Admin.

WP Themes
http://www.hpnadig.net/blog/index.php/archives/category/themes/