zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Kleine Grafik bei jedem Link

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 24.10.2005, 04:49
Benutzerbild von blockbuster
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 24.10.2005
Beiträge: 8
blockbuster befindet sich auf einem aufstrebenden Ast
Standard Kleine Grafik bei jedem Link

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ß
__________________
Glaubst Du das die Wirklichkeit in Wirklichkeit die Wirklichkeit ist?
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 24.10.2005, 09:18
Benutzer
neuer user
 
Registriert seit: 22.05.2005
Beiträge: 56
theonlyrobi befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 24.10.2005, 14:29
Neuer Benutzer
neuer user
 
Registriert seit: 23.10.2005
Beiträge: 23
LosMintos befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #4 (permalink)  
Alt 24.10.2005, 14:34
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard

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

Sematisches Markup !!
__________________
</ulle>
Mit Zitat antworten
  #5 (permalink)  
Alt 24.10.2005, 15:20
Benutzerbild von Boris
Tanzender Webentwickler
XHTMLforum-Kenner
 
Registriert seit: 29.07.2004
Ort: Kornwestheim / Stuttgart
Beiträge: 4.925
Boris ist ein sehr geschätzer MenschBoris ist ein sehr geschätzer MenschBoris ist ein sehr geschätzer Mensch
Standard

Zitat:
eine margin-left definieren
Nein, er muss ein padding nehmen
__________________
My software never has bugs. It just develops random features ...

» DevShack - die Website des freien Webentwicklers Boris Bojic
Mit Zitat antworten
  #6 (permalink)  
Alt 25.10.2005, 02:13
Benutzerbild von blockbuster
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 24.10.2005
Beiträge: 8
blockbuster befindet sich auf einem aufstrebenden Ast
Standard

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ß
__________________
Glaubst Du das die Wirklichkeit in Wirklichkeit die Wirklichkeit ist?
Mit Zitat antworten
  #7 (permalink)  
Alt 25.10.2005, 09:41
{ display: random;}
XHTMLforum-Kenner
 
Registriert seit: 08.09.2004
Ort: Stuttgart
Beiträge: 5.034
andir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblick
Standard

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
__________________
Grüsse Andreas- auch mal wieder da...

Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams)
Wiedergelesen: > hier und hier

[Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte
Mit Zitat antworten
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
Link in eine Grafik kiron (X)HTML 1 16.07.2009 21:09
3 Spalten optimieren auf 800x600!? Pumpkin CSS 13 25.03.2007 14:38
Problem mit komplexem Menü Chellisa CSS 2 09.01.2007 18:16
Text und Grafik unabhängig aber gleichzeitig als link Pukki CSS 2 11.03.2006 16:12
Link markieren bei Auswahl Anonymous CSS 2 17.06.2003 15:32


Alle Zeitangaben in WEZ +2. Es ist jetzt 11:26 Uhr.