LautundKlar

Mootools Datagrid mit sortierbaren Tabellen

OmniGrid ist ein DataGrid das mit Mootools umgesetzt wurde. Neben sortierbaren Tabellenspalten enthält es einen “Pagebrowser” und die Anzahl der Tabellenzeilen kann definiert werden. Außerdem können Zellen gelöscht, dupliziert und editiert werden.

Es basiert zum Teil auf zwei ähnlichen Komponenten: FlexGrid jQuery und Phatfusion sortableTable. Eines der wenigen (oder vielleicht das einzige) Mootools Datagrid. Jedenfalls das einzige das ich gefunden habe.

Website: http://www.omnisdata.com/omnigrid/

Popularity: 12% [?]

CSS Organizer

Je umfangreicher eine Webseite wird, desto unübersichtlicher wird das CSS. Styleneat sorgt hier vielleicht für Abhilfe.

Styleneat ist ein kostenloser online Service, der CSS-Dateien strukturiert und sie somit übersichtlicher und leichter verständlich macht. Hierzu kann man seine Dateien entweder hochladen, oder per Copy-Paste einfügen, oder auch einfach die URL angeben.

Es gibt mehrere Möglichkeiten der Sortierung wie etwa alphabetische Reihenfolge der Selektoren und Egenschaften.

Website: http://styleneat.com/

Popularity: 9% [?]

CSS Layouts

Hier haben wir eine sehr umfangreiche Sammlung von CSS-Layouts.  Die Layouts gibt es zudem Fluid, Fixed und in verschiedenen Breiten.

Website: http://layouts.ironmyers.com/

Popularity: 9% [?]

Border innerhalb von Grafiken mittels CSS

Auf CSS-tricks.com habe ich eine Möglichkeit gefunden inerhalb von Grafiken Rahmen zu setzen. Es ist eigentlich recht einfach, man muss nur darauf kommen. Man kann nämlich mittels negativem Margin die Border beliebig nach innen ziehen:

#example-one a img, #example-one a { border: none; overflow: hidden; float: left; }
#example-one a:hover  { border: 3px solid black; }
#example-one a:hover img { margin: -3px; }

Border außerhalb

Und auch das ist möglich: “Hover-Border” außerhalb von Grafiken, die das Layout nicht zerstören:

#example-two a img, #example-two a { border: none; float: left; }
#example-two a { margin: 3px; }
#example-two a:hover { outline: 3px solid black; }

Website: CSS-tricks.com

Den gleichen Effekt kann man natürlich auch so erzielen:

#example-three a { border: 3px solid transparent; margin:0; padding:0;float: left; }
#example-three a:hover { border: 3px solid black; }

Popularity: 10% [?]