A:visited mit gif

Meganova · 10. November 2019 um 18:49

Hallo,

ich hab mal wider ein kleines Problem bei dem Ihr mir bestimmt helfen könnt.

Ich hab eine Seite die als Übersicht für einen Blog gedacht ist und möchte jetzt die a:visited in meiner CSS so verändern das der Seitenbesucher ein kleines Symbol angezeigt bekommt wenn er einen Link im Blog besucht hat. Dieses Symbol soll in der Übersicht mit „float: right;“ neben dem jewaligen Thema angezeigt werden, das Symbol heißt „btn_visit.gif“.

Ich hab hier mal ein Beispiel wie die Übersicht aufgebaut ist:

Einsender Überschrift - Kurze Beschreibung

und in meiner CSS sehen die Teile zu dieser Liste so aus:

.headline,
.headline a:visited,
.headline a:active,
.headline a:link {
display: block;
width: 100%;
list-style: none;
font-family: arial;
font-size: 10pt;
font-weight: bold;
margin: 0px;
color: gray;
}

.headline a:hover {
display: block;
width: 100%;
background: #C0C0C0;
list-style: none;
font-family: arial;
font-size: 10pt;
font-weight: bold;
margin: 0px;
color: gray;
}

.headline span#baddy,
.headline span#baddy a:visited,
.headline span#baddy a:active,
.headline span#baddy a:link,
.headline span#baddy a:hover {
font-family: arial;
font-size: 8pt;
font-weight: bold;
color: gray;
text-decoration: none;
}

.headline span#name,
.headline span#name a:visited,
.headline span#name a:active,
.headline span#name a:link,
.headline span#name a:hover {
font-family: arial;
font-size: 12pt;
font-weight: bold;
color: green;
text-decoration: none;
}

.headline span#comments,
.headline span#comments a:visited,
.headline span#comments a:active,
.headline span#comments a:link,
.headline span#comments a:hover {
font-family: arial;
font-size: 10pt;
font-weight: bold;
color: #000000;
text-decoration: none;
}

hoffe das Ihr mir helfen könnt,
schon jetzt danke…

lg. Meganova

Liamara_3a3668 · 10. November 2019 um 18:49

Hallo,

ich hab jetzt nicht ganz verstanden wo das Bild hinsoll, aber wenn’s doch ein Effekt des besuchten Links sein soll, warum dann nicht den besuchten Link mit einem Hintergrundbild versehen, dass dort platziert ist wo du es haben willst (also links, rechts oder wo auch immer). Ich meine mit background:url.

Meganova · 10. November 2019 um 18:50

Hi Liamara,

Du meinst z.B. so:

.headline a:visited {
background: url(’…/images/bkd_page.bmp’) repeat-x 0 0 repeat-z 0 0 top 10px right 10px;
}

wobei ist nicht weiss ob das mit „top“ und „right“ bei einem Hintergrund geht, aber trozdem danke, das bringt mich schonmal weiter.

lg. Meganova

Gernot_Back · 10. November 2019 um 18:50

Hallo Meganova,

.headline a:visited {
background: url(’…/images/bkd_page.bmp’) repeat-x 0 0
repeat-z 0 0 top 10px right 10px;
}

Nein, das sind ein paar Angaben zu viel zu background-position: entweder „0 0“ (was die Default-Einstellung ist und deshalb keiner Erwähnung bedarf) oder „10px 10px“ oder "right top ", was dasselbe wäre wie „100% 0“. Mach auch am besten keinen Mischmasch zwischen verbalen und numerischen Angaben, wie z.B. „right 0“. Das mögen manche Browser (Netscape6/7, ältere Mozillas) nicht.

Gruß Gernot

Meganova · 10. November 2019 um 18:50

Ich hab jetzt schon ein bischen probiert, aber wie kann ich das so machen das der Hintergrund in alle Richtungen nicht wiederholt und rechtsbündig ist. Ich bin inzwischen so weit das ich für dieses vorhaben eine extra div gemacht habe, allerdings klappt es da auch nicht so richtig. da wird dann der Hintergrund gar nicht angezeigt.

Ich weiss nicht was ich falsch mache !!!

Gernot_Back · 10. November 2019 um 18:50

Hallo Meganova,

lies doch einfach mal die Bibel:
http://de.selfhtml.org/css/eigenschaften/hintergrund…

Speziell bei deinem Vorhaben ist auch die Lektüre von 2. Mose 20,4 interessant:
Du sollst dir keinen Reim auf dein Bildnis machen:

http://de.selfhtml.org/css/eigenschaften/innenabstan…

Gruß gernot

Meganova · 10. November 2019 um 18:50

Danke Dir,

Du hast recht -> Öfter mal die Bibel Lesen !!!

Aber jetzt läuft die hover class nicht mehr, die solte den Hintergrund grau also „#c0c0c0“ machen wie bekomme ich das den hin ???

lg. Meganova

aya · 10. November 2019 um 18:50

Positionieren
background-repeat: repeat-x //repeat-y //repeat-none;

sagt aus OB und wenn ja WIE das Bild wiederholt wird x-achse=horizontal, y=vertikal
bei repeat-none - wird das nur einmal angezeigt und nicht wiederholt.

background-position:right//top //bottom //left //center;
sagt wo innerhalb des bereiches (div, table, etc.) das Bild angezeigt wird.
Man kann natürlich auch pixel genau positionieren mit: background-position:1px 3px; - was heisst - 1 px von links und 3 px von oben

also:
background-image:url(image.gif);
background-repeat:no-repeat;
background-position:right;

glg
aya

aya · 10. November 2019 um 18:50

colori i positizionare
a:hover{background-color:grau;} --> funktioniert nicht???

hm …
noch ein Tip am Rande: ich geh davon aus, daß du deine Links in einem div hast und nicht jeden link in einem eigenen div.
Damit der Link immer die gesamte Breite des Divs hat und nicht beim Text aufhört --> display:block verwenden

Meganova · 10. November 2019 um 18:52

nein, ich hab die div mit display: block; aber den Link nicht in einer div sondern die div im Link.

lg. Meganova

aya · 10. November 2019 um 18:52

hab ich gerade eben ausprobiert, mit ganz gewöhnlichen link pseudo klassen mit und ohne div -> funktioniert grundsätzlich schon.

Poste doch mal einen link von der seite oder aber den html code mit css angaben.

lg
aya

Meganova · 10. November 2019 um 18:52

Hi,

mein HTML-Code ist so aufgebaut:
User-Blog
User-Blog

[User] Micheal-Mani - Tausende wollen Jackso…

[User] Terminator eröffnet CeBIT - Schokiere…

[User] Spielesender GIGA stellt Betrieb ein …

WPU User-Blog ist Online - Schreibt was das …

und die CSS dazu so:

body {
display: block;
margin: 0px;
padding-left: 0px;
font-family: arial;
font-size: 10pt;
scrollbar-DarkShadow-Color:#000000;
scrollbar-Track-Color:#000000;
scrollbar-Face-Color:#008000;
scrollbar-Shadow-Color:#112112;
scrollbar-Highlight-Color:#00FF00;
scrollbar-3dLight-Color:#999999;
scrollbar-Arrow-Color:#00FF00;
}

img {
border-style: none;
}

.headline,
.headline a:active,
.headline a:link {
display: block;
width: 100%;
list-style: none;
font-family: arial;
font-size: 10pt;
font-weight: bold;
margin: 0px;
color: gray;
}

.headline a:hover {
display: block;
width: 100%;
background: #C0C0C0;
list-style: none;
font-family: arial;
font-size: 10pt;
font-weight: bold;
margin: 0px;
color: gray;
}

.headline a:visited {
display: block;
background: url(‚D:\static\page\icon\ico_visit.png‘);
background-repeat: no-repeat;
background-position: 100% 5px;
width: 100%;
list-style: none;
font-family: arial;
font-size: 10pt;
font-weight: bold;
margin: 0px;
color: gray;
}

.headline span#script,
.headline span#script a:visited,
.headline span#script a:active,
.headline span#script a:link,
.headline span#script a:hover {
font-family: arial;
font-size: 10pt;
font-weight: bold;
color: gray;
text-decoration: none;
}

.headline span#baddy,
.headline span#baddy a:visited,
.headline span#baddy a:active,
.headline span#baddy a:link,
.headline span#baddy a:hover {
font-family: arial;
font-size: 8pt;
font-weight: bold;
color: gray;
text-decoration: none;
}

.headline span#name,
.headline span#name a:visited,
.headline span#name a:active,
.headline span#name a:link,
.headline span#name a:hover {
font-family: arial;
font-size: 12pt;
font-weight: bold;
color: green;
text-decoration: none;
}

.headline span#comments,
.headline span#comments a:visited,
.headline span#comments a:active,
.headline span#comments a:link,
.headline span#comments a:hover {
font-family: arial;
font-size: 10pt;
font-weight: bold;
color: #000000;
text-decoration: none;
}

.topic {
display: block;
background-color: green;
font-family: arial;
font-size: 12pt;
font-weight: bold;
margin: 0px;
color: #00FF00;
}

#port {
float: right;
font-family: arial;
font-size: 10pt;
font-weight: bold;
}

#combox {
float: right;
font-family: arial;
font-size: 10pt;
font-weight: bold;
}

#data {
display: block;
font-family: arial;
font-size: 10pt;
font-weight: bold;
margin: 0px;
color: #C0C0C0;
}

#area {
display: block;
font-family: arial;
font-size: 10pt;
margin: 0px;
color: #000000;
}

#area img{
border-style: none;
float: left;
}

.linkline {
display: block;
list-style: none;
font-family: arial;
font-size: 10pt;
font-weight: bold;
margin: 0px;
color: #000000;
border-bottom: 1px solid silver;
}

#link {
display: block;
font-family: arial;
font-size: 10pt;
font-weight: bold;
margin: 0px;
color: #000000;
}

.Comments {
display: block;
padding-left: 20px;
list-style: none;
font-family: arial;
font-size: 12pt;
margin: 0px;
color: green;
}

#nick {
display: block;
list-style: none;
font-family: arial;
font-size: 12pt;
font-weight: bold;
margin: 0px;
color: green;
}

#titel {
display: block;
background-color: #C0C0C0;
list-style: none;
font-family: arial;
font-size: 10pt;
font-weight: bold;
margin: 0px;
color: #000000;
}

#post {
display: block;
list-style: none;
font-family: arial;
font-size: 10pt;
margin: 0px;
color: #000000;
}

a:visited, a:active, a:link {
font-family: arial;
font-style: bold;
font-size: 10pt;
color: green;
text-decoration: none;
}

a:hover {
font-family: arial;
font-style: bold;
font-size: 10pt;
color: #00FF00;
text-decoration: none;
}

ich weiss…
Ihr werdet jetzt sagen „Hey, D:\ ???“ die Seite ist momentan Off, ich hatte vor einiger zeit beschlossen den Anbieter zu wechseln, da mein Alter kein SSI geschweigeden sowas wie PHP bzw. eine höhere Version davon unterstützt. Bei der gelegenheit: kennt jemand einen günstigeren Anbieter als die Telekom ? Die wollen für 1 GB Speicher + 250 Mail-Adressen -> 49,95 EURO / Monatlich.

lg. Meganova

aya · 10. November 2019 um 18:53

hi

also ganz Wichitg!!! - der beste anbieter mit tollem Support www.campusspeicher.de --> in dresden zu hause und absolut vernünftige Preise - hab alle Domains auch die von Kunden dort und bin super zufrieden.

zu deinem „Problem“. bei mir funktioniert der graue Hintergrund bei hover prächtig!!

lediglich das Bild bei links finde ich nicht - oder ist das eine andere Baustelle?

lg
aya

Meganova · 10. November 2019 um 18:53

Hi,

Um das Bild geht es ja,
Also a:hover macht ja den bg. Grau - Das läuft, aber nur wenn ich den Link noch nie angeklickt habe bzw. meinen Verlauf gelöscht habe.

Und die Links die ich schon geklick habe, da wird der bg. aus a:visited angezeigt, aber nicht mehr der aus der hover pseudo.

das ist das problem, ich hab schon versucht eine extra div zu machen und der bei a:visited den Bild-Hintergrund zu geben, aber dann muss ich immer genau auf diese div Klicken damit das geht. Und das ist ja nicht das was ich mir so vorgestellt hatte.

aya · 10. November 2019 um 18:54

Hi,

Um das Bild geht es ja,

ich habe im gesamten Stylesheet kein background-image gefunden - sehr wohl aber ein nur ‚background:url(xxx)‘ - das musst du ändern.
Abgesehen davon ist die Pfadangabe so falsch. Absolute Pfadangaben werden glaube ich mit ‚file://c:/xxx‘ geschrieben, aber da bin nicht sicher. Relative Pfadangaben werden vom momentanen Ort der Datei aus angegeben und um Verzeichnisse zu wechseln gibt man …/ für eine OrdnerEbene weiter raus an. Also wenn deine Datei auf c:\website ist und das image ist auf c:\ dann muss die Pfadangabe …/image.gif sein.
Also hier den Pfad ändern.

Da der hover zustand nur dann nicht funktioniert, wenn auch visited zutrifft und visited aber durch die Pfadangabe nicht korrekt ist --> bitte einfach mal das ändern, wahrscheinlich funzt dann auch der hover.

lg
aya

Meganova · 10. November 2019 um 18:55

Hi,

Hab das jetzt geändert, aber es läuft immer noch nicht.

lg. Meganova

aya · 10. November 2019 um 18:55

ich hab das mit deinem Code ausprobiert, den Pfad korrigiert und es funktioniert bei mir,

da weiss ich dann auch nicht weiter

lg
aya

Meganova · 10. November 2019 um 18:56

Ich überlege schon, ob ich die einzelnen „Inhalte“ nochmal in eine div lege und der dann den a:visited hintergrund als pseudo gebe.

das müsste doch dann eigendlich gehen, oder ?

lg. Meganova

aya · 10. November 2019 um 18:56

ich glaub eher, daß die bereits unglaubliche Verschachtelung von styles das problem ist.

Versuch doch einfach abzuspecken

ein Div für links - diese korrekt mit den linkformatierungen belegen und dann - und erst dann - die spans mit den jeweiligen Formatierungen (noch ohne linkformatierung) dazufügen.-
Und so step by step schauen wann was funktioniert bzw ab wann was buggy wird.

Und jetz nochmal divs reinzustellen hat im Grunde überhaupt keinen Sinn.

Da du ja bereits für comments, baddy etc. schon viel zu viele Formate vergeben hast.
Und konstruktoren bräuchtest du im grunde auch nicht - soll hiessen, daß buddy a:hover reicht und du nicht bei der headline beginnen musst.

Weniger ist auch hier mehr *gg

lg
aya

Meganova · 10. November 2019 um 18:56

Hi,

aber die angaben zu Comment, Baddy und so sind die Orginalen aus dem Bolg nur die Headline und das was dazu gehört ist für die übersicht.

Aber es hat jetzt nach dem ca. 1 Milliardensten mal funktioniert mit einem kleinen kunstgriff. in hab jetzt aus „.headline a:visited“ „.headline a:hover a:visited“ gemacht - und siehe da, jetzt läuft’s.

lg. und Danke,
Meganova