Definitionslisten in Spalten

Dokumentationssysteme: MediaWiki, dokuwiki, tikiwiki
Ticketsysteme: OTRS, Mantis, Redmine, Flyspray
eCommerce: Magento, Oxid
Content-Management-Systeme: Wordpress, typo3, MODx, eZPublish
Systemadministration: Linux (Debian, Redhat)
Versionsverwaltung: Subversion, Git

Eine Special für Css: die Verwendnung der html-Definitionslisten (dl) als Liste, da diese das einzige (?) wirklich semantische Element im html ist. Eine recht brauchbare Anleitung ist Definitionslisten nutzen

Anwenden kann man das für z.B. Lebensläufe, am besten in microformats.

umija

Standardmäßig werden html Definitionslisten (dl) versetzt dargestellt:

definition (list) term: definition (list) definition
Äpfel: € 3,00
Birnen: € 4,50
Birnen: € 4,50 sehr viel und langer text der dann irgendwie noch eingerückt werden muss; oder auch nicht, na das muss ich mir noch überlegen. Oder soll ich jetzt hier einfach blindext schreiben so wie Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum..

Innerhalb der css-class "list" werden diese aber durch:

.list dt {     float: left; 
    clear: both; 
    background-color: #F5F5F5;
    width: 200px;
    margin: 0px 5px 5px 0px;
    font-size: 12;  }
.list dt, .list dd {
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; }

nebeneinander gestellt, der float dann im nächsten Element wieder ge''clear''ed, sonst würden alle nicht untereinander sondern seitlich versetzt stehen. Auserdem geben wir der ersten "Spalte" eine breite von ''200px'', eine wenig Abstand und die richtige Schrift.

Was dann so aussieht:

definition (list) term: definition (list) definition
Äpfel: € 3,00
Birnen: € 4,50
Birnen: € 4,50 sehr viel und langer text der dann irgendwie noch eingerückt werden muss; oder auch nicht, na das muss ich mir noch überlegen. Oder soll ich jetzt hier einfach blindext schreiben so wie Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum..
Zwetschgen: € 2,50 sehr viel und langer text der dann irgendwie noch eingerückt werden muss; oder auch nicht, na das muss ich mir noch überlegen. Oder soll ich jetzt hier einfach blindext schreiben so wie Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum..

IE bug

wie immer klappt das alles ganz gut, aber nicht im IE; der Inhalt von dd wird nicht angezeigt wenn man das einmal markiert hat ??

todo

dd {margin: 0px 0px 0px 210px; }

evtl raus bei dt margin: 0px 5px 5px 0px;