CSS Liste aufzählungszeichen nach Filetyp
Eingetragen von Gork (225)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 5 Tagen 6 Stunden
vor 2 Wochen 1 Tag
vor 2 Wochen 2 Tagen
vor 9 Wochen 6 Tagen
vor 10 Wochen 14 Stunden
vor 10 Wochen 1 Tag
vor 10 Wochen 5 Tagen
vor 10 Wochen 5 Tagen
vor 11 Wochen 3 Tagen
vor 11 Wochen 3 Tagen