PDA

Archiv verlassen und diese Seite im Standarddesign anzeigen : CSS: Icon vor Link setzen


Rampage
2005-09-09, 16:52:05
Hi,

kann mir jemand sagen, wie ich mittels CSS ;) ein Icon vor einen Link setzen kann?
Habe die Datei mal angehängt.

Sollte nicht über <li> gelöst werden, da die Links nebeneinander stehen.
Obwohl, geht das nicht auch? Hat jemand mal ein Link oder ein Beispiel für sowas?

Danke schonmal :)

Marscel
2005-09-09, 17:30:15
<img width="16" height="16" src="BILDDATEI" alt="" /><a href="LINK">TEXT</a>

Rampage
2005-09-09, 17:34:06
<img width="16" height="16" src="BILDDATEI" alt="" /><a href="LINK">TEXT</a>
hab oben mal was editiert.
Wie man so ein Bild davor setzt ist mir klar ;)

Nase
2005-09-09, 17:48:32
Du machst das Bild einfach als Hintergrundbild vom dem Link und gibts dem Link dann noch ein padding-left, damit der Text weiter rechts steht und nicht über dem Hintergrundbild steht.

Rampage
2005-09-09, 17:56:36
Du machst das Bild einfach als Hintergrundbild vom dem Link und gibts dem Link dann noch ein padding-left, damit der Text weiter rechts steht und nicht über dem Hintergrundbild steht.
ah danke, genau so war es...
hab ich sogar schonmal gemacht :rolleyes:

ravage
2005-09-09, 18:07:56
Mit
display:inline;
kannst du Listen in eine Reihe bekommen, nur kannst du dann keine Listenpunkte(Grafiken) mehr nutzen. Zumindest geht es bei meinem Test grad nicht...

http://ravage.dyndns.org/liste.html

PatkIllA
2005-09-09, 18:13:14
Listen sind eh zickig, weil die Browser die umgebende Box unterschiedlich interpretieren. Der Trick mit dem Hintergrund klappt da aber sehr gut.
Weiss jemand wie man es hinbekommt numerierte Listen zu erstellen und trotzdem Kontrolle über den Abstand zu haben?

Yan-13
2005-09-10, 10:46:43
Hi,

Hm da habe ich auch ma ne frage wie kann man es machen das das icon nur bei mousehover kommt sprich der link erst normal aussieht und wenn ich mit dem zeiger drauf bin das icon davorgesetzt wird .....

mfg Yan13

Rampage
2005-09-10, 10:58:27
Hi,

Hm da habe ich auch ma ne frage wie kann man es machen das das icon nur bei mousehover kommt sprich der link erst normal aussieht und wenn ich mit dem zeiger drauf bin das icon davorgesetzt wird .....

mfg Yan13

etwa so:

a.txSmall, a.txSmall:visited, a.txSmall:active{
color: #605E58;
text-decoration:none;
margin:0px;
padding-right:6px;
}


a.txSmall:hover{
text-decoration:underline;
color: #605E58;
margin:0px;
padding-left:6px;
padding-right:6px;
background-image: url(../img/ic_link.gif);
background-repeat: no-repeat;
}