|
|||
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. |
Sponsored Links |
|
|||
Zitat:
|
|
|||
Zitat:
Zitat:
wenn's sich anders verhalten sollte, möge der frager mich korrigieren. |
|
|||
@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:
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 ... Grüße, Jochen |
|
|||
Bei der Text-Navigation würde ich eine (Unordered) Liste verwenden.
Dabei musst Du der Listen-Definition (<ul>) per CSS erstmal ihren standardmäßigen Listen-Style nehmen: Code:
ul { list-style:none; } Code:
ul li { float:left; } |
|
|||
@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 |
Sponsored Links |
|
|||
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... |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ä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 |