Guten Tag,

soweit bin ich schon gekommen:

a:hover[href$=".pdf"] {

background-image:url(pdf_symbol.gif);
background-position:right;
background-repeat:no-repeat;
}

jetzt möchte ich aber mein Bild an eine Position rücken, die nicht von Text überdeckt wird. Kann ich das PDF-Symbol auch irgendwo im Vordergrund positionieren? Wie geht das?

Gruß
broesel

Hallo broesel,

beschreib doch mal genauer, was Du machen möchtest.

Das

a:hover[href$=".pdf"]

ist weder HTML noch CSS.


Oder suchst Du so etwas?

<a href="example.pdf"><img src="pdf_symbol.gif"> Linktext</a>

Gruß Sabine

Hallo Sabine

es funktioniert so. Ich habe diesen Teil in der css-Datei stehen. Nur beim überfahren einer PDF-Datei wird dann ein gif-Bild mit Logo eingeblendet. Ansonsten erscheint nichts. Ich möchte aber nun das erscheinende Bild nicht hinter dem Link sondern etwas besser positioniert haben. Dafür such ich den passenden Eintrag im CSS. Ich komm nicht drauf, welcher es sein könnte.

Gruß
broesel

Hallo brösel,

>> Nur beim überfahren einer PDF-Datei wird dann ein gif-Bild mit Logo eingeblendet.

Das möchte ich bitte einmal sehen (Link?).
Weder HTML noch CSS kann etwas mit Variablen anfangen.
Wie soll das funktionieren?
href$=".pdf"

Gruß Sabine

Hallo Sabine

damit auch du es sehen kannst:

http://js-kaut.de/test/

bis gestern war die seite noch online. habe für dich die zur funktion nötigen dateien nochmal in einen testordner geladen. beim überfahren der links *.pdf erscheint im firefoxbrowser das bild.

Gruß
broesel

PS. In der Bibel nannten sie ihn Thomas

Hallo,

probier mal folgendes:

nimm die br aus den a tags heraus: <br></a> -> </a><br>

dann gib den links ein padding-right:25px;

Dann erscheint das Hoover-PDF-Bild neben dem Link.

Hallo brösel,

a:hover[href$=".pdf"]

scheint irgendeine Funktion zu sein, die ausschließlich in neuen Mozilla-Browsern funktioniert (Firefox, Mozilla)

In der CSS-Spezifikation steht jedenfalls nichts davon drin:
http://www.w3.org/...namic-pseudo-classes

Ich würde da eher eine Klasse verwenden, das funktioniert dann in allen Browsern, die CSS2 unterstützen:
a:hover.pdf

Du kannst nun folgendes probieren

CSS ändern: Hintergrundbild links ausrichten
background-position:left;

HTML ändern: Mit &nbsp; Platz schaffen für das PDF-Bildchen
<a class="pdf" href="hochzeit_01.pdf" target="_blank">&nbsp;&nbsp;&nbsp;Hochzeitsartikel von Friedel Stumpf</a>

Sinnvoller wäre es, wenn Du das PDF-Bildchen immer anzeigst und nicht erst bei a:hover

Gruß Sabine

du meinst also, dass es nur mit schieben von buchstaben zu lösen ist? klar kann man es auch ständig anzeigen. ist ja nur eine kleine änderung - hover weglassen.

Gruß
broesel

Es geht natürlich auch mit padding (ohne Buchstabenschieben), so wie Stefan schon vorgeschlagen hatte.

Wenn das Hintergrundbild links ausgerichtet ist, dann

padding-left:25px

Da hatte ich gar nicht dran gedacht, muß wohl an der Uhrzeit liegen.

Gruß Sabine