Textlink mit einer Grafik versehen

[brey]

Hi,

ich versuche eine Formatvorlage für Textlinks zu erstellen, bei denen hinter dem Link immer automatisch eine kleine Grafik (Pfeil) erscheint. Mit "Hintergrundbild" geht das zwar, aber ich kann nicht sagen, dass die Grafik immer direkt hinter dem Linktext folgen soll: (Linkname ->). Bei "Liste" passiert irgendwie gar nichts...

Jemand einen Vorschlag?

[nettesekel]

Jepp, habe ich. Stelle die horizontale Hintergrundposition auf 100% oder rechts.
Nimm die Breite deiner Grafik z.B. 15px + 2-3px = 18px und trage sie unter dem Reiter Rahmen als Textabstand rechts ein. Das wars. 


Beispielcode gefällig?

Code: [Auswählen]

.BildLink{
   font-family: Verdana, Tahoma, Arial, Helvetica, Sans-serif;
   font-size: 12px;
   color: rgb(255,0,0);
   text-decoration: none;
   background-image: url( "../assets/images/pfeil.png" );
   background-repeat: no-repeat;
   background-position: 100% 50%;
   padding-right: 25px;
}

[brey]

Hi,

danke für den Denkanstoß! Funktioniert prinzipiell gut, allerdings verschwindet die Garfik beim Mouseover. Hängt wohl damit zusammen, dass in der Formatvorlage für hover keine Funktion für den Rahmen exisitiert. Wenn ich z.B. "padding-right: 10px" eingebe, nimmt NOF das nicht an.

Gibts hierfür vielleicht auch einen Lösungsansatz?

VG
brey

[nettesekel]

Ich schau mir das nachher mal an und melde mich. Das muss gehen.

[NullAhnung]

kenn mich da nicht so aus....

kann man das nicht mit css .... input:focus machen....

[nettesekel]

Also vom Grundsatz her kann ich das Problem nicht wirklich nachvollziehen und es braucht eigentlich hierfür auch keine speziellen Formatangaben.
Alle Formatierungen, die ich in der Hauptklasse festgelegt habe werden an die hover-class vererbt, sofern ich nicht gezielt veränderte Angaben für die hover-class mache. Heißt, der in der Hauptklasse festgelegte Rahmen/Abstand wird automatisch in der hover-class mit umgesetzt.

Ich habe es gerade nochmal getestet und dem Link bei hover eine andere Farbe und eine Unterstreichung zugewiesen. Der Link verhält sich bei hover wie angegeben, Farbe und Unterstreichung ändern sich, die BG-Grafik bleibt unangetastet.

-------------------------------------------------------------------------

Wenn du allerdings bei hover auch die BG-Grafik änderst, dann kann es sein, dass es Probleme gibt die durch eine NOF-Macke verursacht werden. Mir ist schon öfter mal aufgefallen, dass NOF speziell bei geänderten BG-Grafiken in hover-Klassen  gern mal falsche Pfade generiert.
Wenn das der Fall wäre, würde in deiner CSS-Datei in der hover-class der Pfad zur geänderten BG-Grafik statt

"../assets/images/bg.jpg"

etwa so aussehen

"Images\\bg.png"

Demzufolge würde die zweite Grafik auch nicht im Ordner assets/images/ der Publizierung liegen.
Teste das bitte mal oder stelle deinen Versuch mal online.

Wenn dem so ist, muss man halt ein wenig nachhelfen.

Was meist ganz gut klappt ist Folgendes: Erstelle die hover-class zuerst und weise ihr das gewünschte Hintergrundbild zu. Du solltest hierbei einen neuen Namen für deine Linkklasse wählen, da NOF sich fast alles bis in die Steinzeit merkt und sich sonst ggf. an die alte Klasse und ihre Einstellungen "erinnert" und diese dann doch wieder umsetzt. Also legst du zuerst MeinLink:hover an und danach erst MeinLink... hierfür die dir bekannten Einstellungen nutzen.

l.g. nettesekel


Beispielcode... bei hover soll sich Textfarbe, Unterstreichung und BG-Grafik ändern:

Code: [Auswählen]

.MeinLink:hover {
   color: rgb(102,153,51);
    text-decoration: underline;
   background-image : url( "../assets/images/Pfeil2.png" )

.MeinLink {
   font-family: Verdana,  Tahoma,  Arial,  Helvetica,  Sans-serif;
    font-size: 12px;
    color: rgb(255,0,0);
    text-decoration: none ;
    background-image: url( "../assets/images/Pfeil.png" );
    background-repeat: no-repeat;
    background-position: right;
    padding-right: 25px
}