nicht angemeldet
Bild über Download-Link
AugeHallo,
ich möchte über einem Download-Link ein Bild anzeigen lassen per CSS. Wenn ich also z.B. einen Link definiere und ihm eine Klasse (class="...") zuweise, soll über dem Link-Text z.B. ein ZIP-Logo erscheinen.
Bisher habe ich nur die CSS-Variante a:before gefunden, welche dann beliebigen Inhalt (auch Bilder) vor dem Link ausgibt. Und mit der relativen Positierung von background-image hat es auch nicht funktioniert.
Weiß jemand Rat?
-
Hi Michael!
Wenn ich also z.B. einen Link definiere und ihm eine Klasse (class="...") zuweise, soll über dem Link-Text z.B. ein ZIP-Logo erscheinen.
D.h. der Text soll verschwinden und nur das Bild zu sehen sein?
Und mit der relativen Positierung von background-image hat es auch nicht funktioniert.
Genau diesen Weg hätte ich gewählt! Was meinst du mit "hat nicht funktioniert"?
Könntest du etwas genauer erläutern [1], was du möchtest und was du bereits versucht hast?
[1] Stichpunkte reichen aber auch. (-;
MfG H☼psel
--
"It's amazing I won. I was running against peace, prosperity, and incumbency."
George W. Bush speaking to Swedish Prime Minister unaware a live television camera was still rolling, June 14, 2001
Selfcode: ie:% fl:( br:> va:) ls:& fo:) rl:? n4:& ss:| de:] js:| ch:? sh:( mo:) zu:)-
Hallo,
mit "über dem Text" meine ich die Position des Bildes in der x-y-Richtung (nicht in z-Richtung), d.h. der Text soll noch zu lesen sein und darüber soll ein Bild zu sehen sein. Es geht sich darum, z.B. Links zu einem PDF-Dokument mit einem zusätzlichen Bild zu kennzeichnen:
[BILD]
Datei.pdfBisher versucht habe ich folgendes:
- a:before (funktioniert, aber das Bild ist dann vor dem Text, nicht darüber)
- Innenabstand des Textes nach oben verändern (padding-top: 40px) und ein Hintergrundbild einbinden
- padding-top benutzen und relative Position des Bildes angeben (0px 0px)
Die letzten beiden erbrachten allerdings nicht das gewünschte Ergebnis.
-
Hallo,
habe die "Lösung" durch try-and-error gefunden. Das Ergebnis kann unter folgender URL angesehen werden: http://www.project-3002.net/test/index.html
Eigentlich nicht kompliziert, ich war nur beim ersten Versuch beim Ansatz schon auf dem falschen Weg :-)
-
Hallo
habe die "Lösung" durch try-and-error gefunden. Das Ergebnis kann unter folgender URL angesehen werden: http://www.project-3002.net/test/index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Test</title> <link rel="stylesheet" href="template.css" type="text/css" /> </head> <body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000">Fällt dir irgendwas an dem Ausschnitt deines Quelltextes auf?
Tschö, Auge
--
Die Musik drückt aus, was nicht gesagt werden kann und worüber es unmöglich ist zu schweigen.
(Victor Hugo)
Veranstaltungsdatenbank Vdb 0.1
-
-
-
Hallo
ich möchte über einem Download-Link ein Bild anzeigen lassen per CSS. Wenn ich also z.B. einen Link definiere und ihm eine Klasse (class="...") zuweise, soll über dem Link-Text z.B. ein ZIP-Logo erscheinen.
Und wie soll man dann den Linktext lesen können?
Bisher habe ich nur die CSS-Variante a:before gefunden, welche dann beliebigen Inhalt (auch Bilder) vor dem Link ausgibt.
Das wäre auch mein Lösungsansatz, den allerdings der meist verwandte Browser kalt lässt.
Und mit der relativen Positierung von background-image hat es auch nicht funktioniert.
Naja, ein mit
background-imageeingebundenes Bild bleibt halt ein _background_ image. Es ist also immer der Hintergrund des Elements, dem es zugewiesen wurde. Du kannst es nur nach den fürbackground(-image)geltenden Regeln positionieren.Weiß jemand Rat?
Weise das Bild dem Link zu
<a href="foo"><img src="bar" alt="Download (oder was auch immer)"></a>Es wäre auch möglich, das Bild per CSS über den Text zu legen. Das geht aber nur, wenn man den Link mit
positionversieht, ihn damit zum Blockelement macht. Das würde z.B. in einer Liste von Downloads funktionieren, aber nicht innerhalb des Textflusses in einem Absatz.Mal sehen, ob ich es noch zusammenbekomme:
<a href="foo" class="downloads">Download (oder was auch immer)<span></span></a>a.downloads { position:relative; /* der Link wird aus dem normalen Dokumentfluss genommen */ /* Weise ich dem Link keine explizite Position zu, wird er um 0 Pixel zu seiner normalen Position, also garnicht verschoben */ /* Maße willkürlich gewählt, diese werden durch die Maße des Bildes bestimmt */ width:100px; height:20px; } a.downloads span { position:absolute; /* Das span wird innerhalb des Links fest positioniert */ z-index:1; /* Es wird in den Vordergrund gebracht */ /* ab damit in die obere linke Ecke */ top:0; left:0; /* span nimmt den ganzen verfügbaren Platz ein */ width:100%; height:100%; margin:0; padding:0; /* Die Angaben zum Hintergrundbild */ background-image:...; }Das Bild wird bei all denen (den meisten) angezeigt, die die Anzeige von Bildern aktiviert haben. Alle anderen sehen den Text.
Das ganze hat jedoch einen Nachteil. Falls jemand die Schriftgröße in seinem Browser so sehr erhöht hat, dass schlussendlich der Text des Links unter dem Bild hervorlugt, sieht es unegal aus. Dies könnte man verhindern, in dem man für
a.downloadszusätzlichoverflow:hidden;notiert. Lässt jemand jedoch keine Bildanzeige zu, hat eine hohe Schriftgröße eingestellt _und_ die CSS-Anweisungoverflow:hidden;incl. der Größenagaben des Links werden interpretiert, kann er/sie nicht einmal den Linktext lesen da dieser (höchstwahrscheinlich) nicht in die vorgegebene Größe hineinpasst.Dies nur zur Beachtung.
Tschö, Auge
--
Die Musik drückt aus, was nicht gesagt werden kann und worüber es unmöglich ist zu schweigen.
(Victor Hugo)
Veranstaltungsdatenbank Vdb 0.1