zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Grafik für Hyperlink mit background-image

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 14.03.2005, 13:43
don don ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 14.03.2005
Beiträge: 3
don befindet sich auf einem aufstrebenden Ast
Standard Grafik für Hyperlink mit background-image

Hallo,

ich möchte links neben einem Hyperlink mit der CSS-Eigenschaft background eine kleine Icon-Grafik anzeigen.

So sieht die CSS-Klasse aus:

.link
{
padding-left: 20px;
background: url(icon.png) no-repeat left;
}


Von den meisten Browsern wird das auch problemlos dargestellt, nur bei IE5 und 6 wird die Grafik nicht mehr angezeigt, wenn der Link umbricht. Das eingestellte padding wird zwar weiterhin angezeigt, nicht aber die Grafik.

Ich habe gelesen, dass das ein Bug im IE sein soll.
Weiß jemand, wie man dieses Problem beheben kann?

Vielen Dank!

Grüße,
don

PS: Mit der Eigenschaft white-space: nowrap lässt sich das Umbrechen des Links verhindern.
Wenn dann aber der gesamte Link in die nächste Zeile rutscht, wird die Grafik wieder nicht angezeigt.
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 14.03.2005, 13:53
Neuer Benutzer
neuer user
 
Registriert seit: 14.03.2005
Beiträge: 17
bububox befindet sich auf einem aufstrebenden Ast
Standard

Versuch mal, obs geht, wenn Du ihm noch display:block; zuweist... Etwas mehr Code wäre auch praktisch, vor allem ausm (X)HTML...
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 14.03.2005, 14:25
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 18.01.2005
Beiträge: 696
wahsaga befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von bububox
Versuch mal, obs geht, wenn Du ihm noch display:block; zuweist...
hältst du das für im fließtext befindliche links für eine gute idee ...?
Mit Zitat antworten
  #4 (permalink)  
Alt 14.03.2005, 14:32
Neuer Benutzer
neuer user
 
Registriert seit: 14.03.2005
Beiträge: 17
bububox befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von wahsaga
hältst du das für im fließtext befindliche links für eine gute idee ...?
Nein, habe seinen Text jetzt auch noch mehrmals gelesen, wo ließt Du raus, dass es sich dabei um solche Links handelt?
Mit Zitat antworten
  #5 (permalink)  
Alt 14.03.2005, 14:47
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 18.01.2005
Beiträge: 696
wahsaga befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von bububox
Nein, habe seinen Text jetzt auch noch mehrmals gelesen, wo ließt Du raus, dass es sich dabei um solche Links handelt?
ist auf grund von
Zitat:
[...] nur bei IE5 und 6 wird die Grafik nicht mehr angezeigt, wenn der Link umbricht. [...]
Wenn dann aber der gesamte Link in die nächste Zeile rutscht, wird die Grafik wieder nicht angezeigt.
m.E. stark zu vermuten.


wenn's sich anders verhalten sollte, möge der frager mich korrigieren.
Mit Zitat antworten
  #6 (permalink)  
Alt 14.03.2005, 14:57
Neuer Benutzer
neuer user
 
Registriert seit: 14.03.2005
Beiträge: 17
bububox befindet sich auf einem aufstrebenden Ast
Standard

Jo, wie gesagt, mehr Infos, z.B. anhand von Code wäre hilfreich...
Mit Zitat antworten
  #7 (permalink)  
Alt 14.03.2005, 15:02
don don ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 14.03.2005
Beiträge: 3
don befindet sich auf einem aufstrebenden Ast
Standard

@bububox: Danke, das hilft mir erstmal weiter. Mit display: block wird der Link koplett in die nächste Zeile verlagert und das Icon wird angezeigt.

Allerdings brauche ich die Icons auch bei mehreren Links in einer horizontalen Navigations-Leiste (also mehrere Links, die nebeneinander stehen), die dann nicht umbrechen darf.

Zitat:
Etwas mehr Code wäre auch praktisch, vor allem ausm (X)HTML...
Hier sind die relevanten Teile des Codes (zuerst nochmal das CSS und dann die Links in HTML):

Code:
//CSS (Extern eingebunden)
.link
{
padding-left: 20px;
background: url(icon.png) no-repeat left;
}

//HTML (mit Doctype XHTML 1.0 Strict)
Link1
Link2
Link3
Link4
...
Wenn jetzt z.B. Link4 umbricht tritt das Problem auf.

Grüße,
Jochen
Mit Zitat antworten
  #8 (permalink)  
Alt 14.03.2005, 15:29
Neuer Benutzer
neuer user
 
Registriert seit: 14.03.2005
Beiträge: 17
bububox befindet sich auf einem aufstrebenden Ast
Standard

Bei der Text-Navigation würde ich eine (Unordered) Liste verwenden.

Code:
<ul>[*]Link 1[*]Link 2[*]Link 3[*]Link 4[/list]
Dabei musst Du der Listen-Definition (<ul>) per CSS erstmal ihren standardmäßigen Listen-Style nehmen:

Code:
ul {
list-style:none;
}
Und die List-Items ([*]) linksbündig ausrichten, damit sie alle nebeneinander sind:

Code:
ul li {
float:left;
}
Jetzt sollte schonma alles nebeneinander stehen und du kannst die Links wie gehabt formatieren... Ob die nun umbrechen oder nicht, hängt vom restlichen Code ab, ob sie in nem <div> mit ner festen Größe sind z.B...
Mit Zitat antworten
  #9 (permalink)  
Alt 14.03.2005, 15:44
don don ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 14.03.2005
Beiträge: 3
don befindet sich auf einem aufstrebenden Ast
Standard

@bububox:

An der Code-Struktur kann ich nichts ändern, die kommt direkt vom Kunden und soll so bleiben. Die Links stehen ja auch so nebeneinander.

Der Anzeigebereich hat zwar eine feste Größe, aber die Link-Namen sollen auch geändert werden können. D.h. ich kann die Links nicht so anordnen, dass keine Umbrüche entstehen, denn die können in der Länge variieren.

Ich hab grad versucht die Links in spans oder divs zu packen und mit verschiedenen Eigenschaften rumgespielt, bisher allerdings ohne Erfolg.

Grüße,
Jochen
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 14.03.2005, 15:52
Neuer Benutzer
neuer user
 
Registriert seit: 14.03.2005
Beiträge: 17
bububox befindet sich auf einem aufstrebenden Ast
Standard

Dazu müssteste die Links wohl echt in DIVs oder SPANs packen, da sich das sonst alles im selben Zeilenbereich abspielt, d.h., dass wenn der letzte Link umbricht, stünde er ganz vorne, unterm ersten Link...

Wenn du den DIVs darum jeweils links ein Padding von 20px gibst, eine Line-Height von der Höhe des Icons und es links oben positionierst, sollte es funktionieren... Allerdings bräuchten die DIVs dann auch ein float:left;, da sie standardmäßig untereinander wären dann...
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Navigation positionieren maybebabe CSS 4 08.04.2013 23:17
Ausrichtung Kalender greece4u CSS 20 14.05.2012 14:32
Inline Listenelement wird nicht richtig im background befüllt SteveB CSS 3 28.04.2011 21:41
Float-Reihenfolge? wolf1985 CSS 0 21.08.2008 02:35
Mozilla zeigt DIV zu oft an cracki CSS 6 09.03.2008 16:22


Alle Zeitangaben in WEZ +2. Es ist jetzt 20:38 Uhr.