[GastForen Web allgemein HTML und CSS / Stylesheets pdf-Link; Icon hinterlegen mit pdf, aber etwas grösser [CSS]

  • Suche
  • Hilfe
  • Lesezeichen
  • Benutzerliste
Themen
Beiträge
Moderatoren
Letzter Beitrag

pdf-Link; Icon hinterlegen mit pdf, aber etwas grösser [CSS]

sejau
Beiträge gesamt: 298

7. Okt 2011, 18:08
Beitrag # 1 von 4
Bewertung:
(3821 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo zusammen

ich möchte gerade allen pdf Dateien die auf einer Seite sthen ein pdf Icon hinterlegen mit css.
So weit bin ich:

Code
a[href $='.pdf'] { 
font-size: 12px;
padding-right: 27px;
background: transparent url(img/pdf.png) no-repeat center right;
background-size: 14px;
}


Nun ist es so, dass mir so das Icon doch etwas zu klein ist (passt sich der Zeilengrösse an)
Kann man nun das Icon etwas grösser machen als die Zeilenhöhe?

background-size geht nicht und ist glaube ich sowieso CSS3...

Wäre stark wenn da jemand einen Tipp hätte.

Gruss
X

pdf-Link; Icon hinterlegen mit pdf, aber etwas grösser [CSS]

flobaer
Beiträge gesamt: 317

7. Okt 2011, 18:34
Beitrag # 2 von 4
Beitrag ID: #481870
Bewertung:
(3813 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo sejau,

Das Icon passi sich normalerweise nicht der Zeilenhöhe an, sondern wird in 100% dargestellt. Du kannst zwar die Größe mit "background-size" (CSS3!!) beeinflussen. Besser wäre jedoch das Bild einfach zu vergrößern.

Viele Grüße
Florian


als Antwort auf: [#481867]

pdf-Link; Icon hinterlegen mit pdf, aber etwas grösser [CSS]

sejau
Beiträge gesamt: 298

8. Okt 2011, 10:15
Beitrag # 3 von 4
Beitrag ID: #481889
Bewertung:
(3781 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hm komisch.
Ich hab nämlich das Bild schon zu gross auf dem Server.
Sagen wir mein Icon ist 48x48px gross.
Nun füge ich es ohne Grössenangabe so mit CSS ein, wie ich es oben gemacht habe.
Dann passiert folgendes. Vom Icon wird nur ein Ausschnitt angezeigt. Ich sehe zwar, dass das angezeigte Bildchen 48x48px gewesen ist, jedoch sehe ich vielleicht 16x48px.
Die Höhe wird also beschnitten und ich sehe nur einen Streifen, der so hoch ist wie die Textzeile. Deshalb die Annahme, dass das Icon 'angepasst' wird.


als Antwort auf: [#481870]

pdf-Link; Icon hinterlegen mit pdf, aber etwas grösser [CSS]

tvgd
Beiträge gesamt: 5

10. Okt 2011, 17:18
Beitrag # 4 von 4
Beitrag ID: #482042
Bewertung:
(3730 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Mit padding-top und -bottom entsprechend deinem Icon sollte es gehen. Da dein Link ein inline-Element ist, wird der Zeilenfluss nicht darunter leiden.


als Antwort auf: [#481889]
X

Aktuell

Veranstaltungskalender

Hier können Sie Ihre Anlässe eintragen, welche einen Zusammenhang mit den Angeboten von HilfDirSelbst.ch wie z.B. Adobe InDesign, Photoshop, Illustrator, PDF, Pitstop, Affinity, Marketing, SEO, Büro- und Rechtsthemen etc. haben. Die Einträge werden moderiert freigeschaltet. Dies wird werktags üblicherweise innert 24 Stunden erfolgen.

pdf-icon Hier eine kleine Anleitung hinsichtlich Bedeutung der auszufüllenden Formularfelder.

Veranstaltungen
02.02.2023

Prozesse optimieren und effizient gestalten

Zürich
Donnerstag, 02. Feb. 2023, 08.00 - 10.00 Uhr

Digitalisierung, Webauftritt

Digitalisierung mitgestalten - Worauf kommt es an? Wie wichtig ist die Webseite? Webseite mit Word Press? Interne Prozesse optimieren

Ja

Organisator: B. Isik - SNF Academy

Kontaktinformation: Birol Isik, E-Mailinfo AT bkcc DOT ch

https://digitalisierung-heute.ch/digitalisierung-informationstag-schweiz/

Veranstaltungen
01.03.2023 - 09.03.2023

Online
Mittwoch, 01. März 2023, 00.00 Uhr - Donnerstag, 09. März 2023, 00.00 Uhr

Online Webinar

Wie gehen wir mit diesen Veränderungen um? Was ist notwendig, damit wir die Digitalisierung im Unternehmen klappt? Veränderungsprozesse verstehen und entsprechend handeln Mitarbeiter als Botschafter Webseite mit WordPress erstellen SEA /SEO (Ads aufschalten)

Ja

Organisator: B. Isik - SNF Academy

Kontaktinformation: B. Isik, E-Mailinfo AT snfa DOT ch

https://www.fernstudiumfitness.ch/digitalisierung-schweiz/