Archivo para la categoría CSS y XHTML

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&gt;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;
}

,

Deja un comentario

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

Deja un comentario

enlaces varios


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

Deja un comentario

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.

Deja un comentario

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

Deja un comentario

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

Deja un comentario

CSS Layout Creator


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

Deja un comentario