Pierre: background-image in einem Link rechts positionieren

SELF-Forum

background-image in einem Link rechts positionieren

Pierre
– Informationen zu den Bewertungsregeln

Hallo

vielleicht weiss jemand Rat. Ich möchte bei einem Link, am Ende einen Pfeil als Grafik einbinden. Wenn ich das alles Links positioniere in diesem Stil ...

a:link {
padding-left: 10px;
background-image: arrow.gif;
background-position: left;
background-repeat: no-repeat;
}

... dann funzt es ganz ok. Der Pfeil wird vor dem ersten Wort, links angezeigt.

Wenn ich dasselbe nun rechts platzieren möchte ...
a:link {
padding-right: 10px;
background-image: arrow.gif;
background-position: right;   /*auch right bottom funzt nicht*/
background-repeat: no-repeat;
}

schauts gut aus, solange der Link über eine Zeile läuft. Nun habe ich aber Links, die über mehrere Zeilen laufen. Firefox geht damit prächtig um. Am Ende macht er das padding und platziert den Pfeil, aber natürlich gefällt IE das mal wieder nicht und bei mehrzeiligen Links zeigt er mir den Hintergrundpfeil nicht mehr an.

Wenn ich den a-Tag als Blockelement definiere zeigt mir IE den Pfeil zwar an, aber natürlich am rechten äusseren Rand und nicht direkt am Ende des Textes. Also auch keine Lösung. Wenn ich die position Definition auf left stelle, sehe ich einen Teil des Pfeiles irgendwo in der Höhe eingemittet. Scheint also das IE das Background Bild bei mehreren Zeilen über die gesamte Höhe verteilt??? Ich krieg auf IE auf jeden Fall keine Lösung hin. Vielleicht kennt jemand ein Workaround zu diesem Problem.

Natürlich könnt ich auch einfach das Image als HTML-Tag innerhalb des a-Tags setzen, aber genau diesen Aufwand möchte ich ja vermeiden.

Wer weiss Rat?
Besten Dank
Pierre

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. background-image in einem Link rechts positionieren

    Inita Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Hoi,

    kannst du probieren so:

    a:link {
    padding-right: 10px;
    background:url(arrow.gif) 100px 0 no-repeat}

    oder auch noch width:200px zB hinschreiben, einfachmal expementiere.

    LG,
    Inita

    --
    Don't forget to love yourself.
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. background-image in einem Link rechts positionieren

      Pierre
      – Informationen zu den Bewertungsregeln

      Ist leider keine Lösung, da ich keine fixen Werte verwenden kann, da ich diese Definition ja für verschiedene Links brauche und auch jeder Browser die Schriften wieder anders Rendert oder Darstellt. Ist also keine Lösung.

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. background-image in einem Link rechts positionieren

        Inita_
        – Informationen zu den Bewertungsregeln

        hi,

        also, bei mir funct alles in IE6, Opera, FF:

          
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
<html>  
  <head>  
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">  
  <meta name="generator" content="PSPad editor, www.pspad.com">  
  <title></title>  
  </head>  
  <body>  
    <a href="google.com" alt="link" style="background:url(Sheldon.gif) right no-repeat;padding:5px 50px 5px 0;line-height:50px;">me is clever</a>  
    <br />  
    <a href="google.com" alt="link" style="background:url(Sheldon.gif) right no-repeat;padding:5px 50px 5px 0;line-height:50px">me is very very clever</a>  
  </body>  
</html>
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. background-image in einem Link rechts positionieren

          Pierre
          – Informationen zu den Bewertungsregeln

          Alles klar. Das schreibe ich ja auch in meinem Post, dass es bei einem Einzeiler funzt!

          Aber mach mal "me is very <br />very clever und dann gehts nimmer...

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. background-image in einem Link rechts positionieren

            Inita_
            – Informationen zu den Bewertungsregeln

            hoi,

            <a href="google.com" alt="link" style="background:url(Sheldon.gif) right no-repeat;display:table;border:1px solid"><span style="display:table-cell;border:1px solid;padding:5px 50px 5px 0">me is very<br />very clever</span></a>

            so waere es, wenn es kein IE6 gaebe.

            Inita

            Beitrag melden
            –
            Informationen zu den Bewertungsregeln

            1. background-image in einem Link rechts positionieren

              Inita_
              – Informationen zu den Bewertungsregeln

              hoi,

              <a href="google.com" alt="link" style="border:1px solid;display:block;float:left;display:block">me is very<br />very clever clever</a><span style="border:1px solid;background:url(Sheldon.gif) no-repeat;width:40px;height:40px;display:block;float:left"></span>
                  <br clear="all" />

              auch ne moeglichkeit =]

              Inita

              Beitrag melden
              –
              Informationen zu den Bewertungsregeln

              1. background-image in einem Link rechts positionieren

                Pierre
                – Informationen zu den Bewertungsregeln

                Hallo Inita

                Deine Lösungen bringen mich nicht weiter. Die verursachen nur unnötigen Code, da kann ich gleich hinter dem Text ein normales Image einbinden und habe das Problem gelöst.

                Falls es nicht klar ist, was ich meine, habe ich ein Müsterchen erstellt:
                http://www.per-net.ch/test/testlink.html

                FF zeigt die Pfeile der Links richtig an, IE schaffts nur beim Einzeiler, im Zweizeiler mittet er den Pfeil in der Höhe beider Zeilen ein. Wenn ich im CSS neben dem right noch ein bottom einfüge, verschwindet der Pfeil gänzlich.

                Hat noch jemand eine Idee?
                Danke
                Pierre

                Beitrag melden
                –
                Informationen zu den Bewertungsregeln

                1. background-image in einem Link rechts positionieren

                  Bobby
                  – Informationen zu den Bewertungsregeln

                  Moin

                  Hat noch jemand eine Idee?
                  Danke
                  Pierre

                  Den Links die Eigenschaft display:block und dem hg-image die Eigenschaft right und bottom geben. Dann gehts bei mir im IE6

                  Gruß Bobby

                  --
                  -> Für jedes Problem gibt es eine Lösung, die einfach, sauber und falsch ist! <-
                  -> Nicht das Problem macht die Schwierigkeiten, sondern unsere Sichtweise! <-
                  ie:{ br:> fl:{ va:} ls:< fo:) rl:( n4:( de:> ss:) ch:? js:( mo:} sh:) zu:)
                  Beitrag melden
                  –
                  Informationen zu den Bewertungsregeln

                  1. background-image in einem Link rechts positionieren

                    Pierre
                    – Informationen zu den Bewertungsregeln

                    Hallo

                    Den Links die Eigenschaft display:block und dem hg-image die Eigenschaft right und bottom geben. Dann gehts bei mir im IE6

                    hab ich auch schon probiert. Nur ist dann das Problem, dass die Pfeile am rechten unteren Rand kleben und nicht direkt hinter dem Wort stehen und dann verlieren sie leider den Bezug zum Link...

                    Thanks anyway
                    More ideas?

                    Beitrag melden
                    –
                    Informationen zu den Bewertungsregeln

                    1. background-image in einem Link rechts positionieren

                      Flo
                      – Informationen zu den Bewertungsregeln

                      Was hälst du von der lösung

                        
<!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>  
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>  
  
 <title>Muster</title>  
 <style type="text/css" media="screen">  
  
  body {  
   font-family: Verdana;  
   font-size: 62.5%;  
  }  
  
  div {  
   width: 200px;  
   background: #f0f0f0;  
   padding: 5px;  
   border: 1px solid silver;  
  }  
  
  a {  
   color: #444;  
   text-decoration: none;  
  }  
  
  /* Variante Link mit block */  
  a:hover, a:active {  
   text-decoration: underline;  
  }  
  a span {  
   background: url(http://www.per-net.ch/test/pfeil.gif) no-repeat center;  
   display: inline-block;  
   width: 8px;  
   height: 8px;  
  }  
  
 </style>  
</head>  
  
<body>  
 <div>  
  <p><a href="link.html">Hier steht ein Link<span></span></a></p>  
  <p><a href="link.html">Hier steht ein Link der über zwei Zeilen l&auml;uft.<span></span></a></p>  
  
 </div>  
  
</body>  
</html>

                      gruß
                      Flo

                      Beitrag melden
                      –
                      Informationen zu den Bewertungsregeln