Kleine Grafik bei jedem Link

blockbuster · #1 (**permalink**) 24.10.2005, 03:49

Hallo zusammen,

da ich noch ein echter CSS NooB bin aber gerade sehr gefallen am Thema finde, kommt hier eine Frage die bestimmt schon öfter gestellt wurde - sorry also... Ich weiß aber als Neuling nicht wie das was ich möchte heisst...

Ich hätte nämlich gerne das vor jedem Link im Text eine kleine Grafik erscheint - so ein kleiner Pfeil halt oder irgend so etwas...

Gesehen habe ich das hier: http://www.css-technik.de/artikel/18.htm.

Zitat:

Wir hatten das (direkt vor diesem Wort --->) CSS4You-Projekt im Oktober/November 2003 von Thomas Pehlgrim übernommen, um es weiter zu betreiben.

Habe mir zwar das CSS angesehen und die Funktion scheinbar auch gefunden, aber wo ich sie in meinem CSS konkret einbauen soll weiß ich nicht so - das überfordert mich noch ein wenig...

Vielleicht kann mir hier ja jemand helfen?!

Vielen Dank!

Gruß

theonlyrobi · #2 (**permalink**) 24.10.2005, 08:18

Hallo,

du musst in der CSS Datei bei der Klasse deiner Menülinks die Eigenschaft background definieren. Dort kannst du ein Bild zuweisen. Bei deinem Beispiel sieht das quasi so aus:

Code:

a.img
{
background: url(/gfx/pfeil_x.gif) no-repeat left;
}

a.img --> Es gilt für alle Links mit der Klasse img
url(/gfx/pfeil_x.gif) --> das ist die URL zum Hintergrundbild
no-repeat --> Das Bild soll nicht wiederholt werden
left --> Das bild soll links stehen

Robert

LosMintos · #3 (**permalink**) 24.10.2005, 13:29

Das stimmt, Du kannst dem <a>-Element ein Hintergundbild geben. Dann musst Du zusätzlich (wenn das Bild links ausgerichtet ist) eine margin-left definieren, damit der Verweistext nicht das Bild überdeckt.

Wenn Du auf den Internet Explorer keinen Wert legst, dann geht es noch geiler mit dem Pseudoelement :before (oder :after). D. h. Du schreibst:

a:before { content: url(image.gif); }

und alles wird gut (im modernen Browser)

hth

ulle · #4 (**permalink**) 24.10.2005, 13:34

Der img-Tag ist nur für Dokumenten-Inhalte zu verwenden !!

Sematisches Markup !!

Boris · #5 (**permalink**) 24.10.2005, 14:20

Zitat:

eine margin-left definieren

Nein, er muss ein padding nehmen

blockbuster · #6 (**permalink**) 25.10.2005, 01:13

O.k. Leute,

vielen Dank so weit! Sieht schon mal sehr nützlich aus - funktioniert nur nicht so wie ich es mir dachte...

Also wenn ich den Tag jetzt einfüge bei der Linkklasse, erscheint der Pfeil bei wirklich jedem Textlink. Vielleicht hätte ich mich etwas deutlicher ausdrücken sollen. Ich will das das Symbol natürlich nur im Content Bereich auftauscht - also nicht bei den Textlinks in der Navigation...

Für den Content sieht das CSS wie folgt aus:

Code:

#content {
border:1px solid #efeff7;
background-color:#f7f7f7;
background: url('gfx/pfeil-rechts-3.gif') no-repeat left;
width:580px;
float:right;
padding:15px 8px;
}

Nachdem ich es aber so eingebaut habe, verschiebt es mir alles... oder kommt es doch direkt in den Linkbereich und muss dort anders gestaltet werden??? Der Link Tag sieht wie folgt aus:

Code:

a:link { text-decoration:none; font-weight:bold; color:#7b7d8e; letter-spacing:1pt; }
a:visited { text-decoration:none; font-weight:bold; color:#7b7d8; letter-spacing:1pt }
a:active { text-decoration:none; font-weight:bold; background-color:#808080;}
a:hover { text-decoration:underline; font-weight:bold; background-color:#C0C0C0;}
{ 
  text-decoration:underline;
  font-weight:normal;
  color:#ff0000;
  font-size:12px;
}
a:active, a:hover
{ 
  color:#009999;
}

Wo muss ich es dann also nun platzieren um das gewünschte Ergebnis zu erhalten?

Vielen Dank nochmal!

Gruß

andir · #7 (**permalink**) 25.10.2005, 08:41

Nachdenken und zuordnen.

Du kannst deine Links direkter ansprechen:

Code:

#content a { background: url(.....); }

Dann werden nur die Links im container mit der id content entsprechend dargestellt.

Also: 1. Selektor = content (spricht content oder Kindelemente von content an) 2. Selektor: Alle links in content

grüsse ar

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Link in eine Grafik	kiron	(X)HTML	1	16.07.2009 20:09
3 Spalten optimieren auf 800x600!?	Pumpkin	CSS	13	25.03.2007 13:38
Problem mit komplexem Menü	Chellisa	CSS	2	09.01.2007 17:16
Text und Grafik unabhängig aber gleichzeitig als link	Pukki	CSS	2	11.03.2006 15:12
Link markieren bei Auswahl	Anonymous	CSS	2	17.06.2003 14:32