background-image in einem Link rechts positionieren
0 
Inita
background-image in einem Link rechts positionieren
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
-
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.-
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.
-
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>-
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...
-
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
-
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
-
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.htmlFF 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-
Moin
Hat noch jemand eine Idee?
Danke
PierreDen 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:)-
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?-
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äuft.<span></span></a></p> </div> </body> </html>gruß
Flo
-
-
-
-
-
-
-
-
-