CSS Liste aufzählungszeichen nach Filetyp
![](http://www.drupalcenter.de/files/noavatar_mini.gif)
am 07.05.2010 - 15:27 Uhr in
Hallo, ich bin gerade dabei die Downloadanzeige in einen Block auszulagern.
nun ist es aber so, dass ich entweder den Filenamen irgendwo ab einer bestimmten Länge abschneiden müsste, in etwa so:
abcd....
statt
abcdefg.zip
oder, damit es in den Block passt (Zeilenumbruch will ich gerade nicht) die Schrift kleiner machen muss.
Wenn ich nun aber die Schrift prozentual kleiner skaliere (font-size: 90%) schrumpft auch die Zeilenhöhe.
Dies schneidet dann aber mein als Background image der Zeile platziertes Icon oben und unten ab.
a[href $='.jpg'] {
padding-left: 20px;
background: transparent url(../../../default/files/icons/icon_pic.gif) no-repeat center left;
}
Daher habe ich nun 3 Möglichkeiten:
1. Den Filenamen irgendwie abkürzen (geht das mit CSS?).
2. Zeilenhöhe irgendwie gleich groß lassen (20pixel damit das BG Image voll dargestellt wird) während ich die Schrift verkleinere - Line-height geht dazu nicht, das BG-img ist trotz höherer Zeile nur so hoch wie der Text!-
oder
3. Das entsprechende File-Symbol als Aufzählungszeichen in der Liste anzeigen, was mir fast das liebste wäre (möglichst skalierbar).
Mittels list-style-image funktioniert dies auch, aber eben nur mit einem Image für alle downloads. Ich möchte aber für jeden Typ das entsprechende Icon haben (.xls .doc. txt etc).
Daher muss ich irgendwie die folgenden beiden Teile so zusammenwurschteln, ich weiss nur nicht wie:
(sicher ist auch der direkt folgende 1. Teil CSS - den ich selber erstellt habe - nicht optimal, aber es geht. Wenn einer einen Verbesserungsvorschlag hat, gern her damit)
/* Attachments in Block auslagern */
li.att_list, ul.att_list {
margin: 0;
padding: 0 1em 0 0;
list-style-type: none;
font-size: 90%;
background-color: none;
border: none;
}
/* Download-Dateiicons */
a[href $='.zip'] {
padding-left: 20px;
background: transparent url(../../../default/files/icons/icon_archive.gif) no-repeat center left;
}
a[href $='.rar'] {
padding-left: 20px;
background: transparent url(../../../default/files/icons/icon_archive.gif) no-repeat center left;
}
a[href $='.jpg'] {
padding-left: 20px;
background: transparent url(../../../default/files/icons/icon_pic.gif) no-repeat center left;
}
a[href $='.bmp'] {
padding-left: 20px;
background: transparent url(../../../default/files/icons/icon_pic.gif) no-repeat center left;
}
....
Irgendwie müssen meiner Meinung nach die a[href.... in den Style von UL und statt der ganzen background: ... jeweils list-style-image:url([Dateiname]) rein, aber wie?
Hier müsste es doch hoffentlich genug CSS Profis geben oder?
- Anmelden oder Registrieren um Kommentare zu schreiben
Neue Kommentare
vor 1 Stunde 20 Minuten
vor 1 Stunde 54 Minuten
vor 18 Stunden 36 Minuten
vor 18 Stunden 44 Minuten
vor 22 Stunden 36 Minuten
vor 23 Stunden 6 Minuten
vor 1 Tag 9 Stunden
vor 1 Tag 13 Stunden
vor 1 Tag 13 Stunden
vor 2 Tagen 7 Sekunden