Verlinkte Grafik

[maxi89]

Hallo zusammen,

ich habe bei einer Seite das aussehen von Text und Links durch CSS festgelegt - mehr nicht.
Wenn ich jetzt aber eine Grafik verlinke wird diese wie verlinkter Text unterstrichen (mit den in der CSS-Datei angegebenen Punkten), auch mit border="0" bekomme ich das einfach nicht weg.

Die CSS-Datei sieht jetzt so aus:

body { FONT-SIZE: 12px; FONT-FAMILY: Verdana,Helvetica; COLOR: #FFFFFF;}
a:link{color: #FFFFFF; text-decoration: none; border-bottom-width:1px; border-bottom-style:dotted; border-bottom-color:#FFFFFF}
a:active{color: #FFFFFF; text-decoration: none; border-bottom-width:1px; border-bottom-style:dotted; border-bottom-color:#FFFFFF}
a:visited{color: #FFFFFF; text-decoration: none; border-bottom-width:1px; border-bottom-style:dotted; border-bottom-color:#FFFFFF}
a:hover{color: #FFFFFF; text-decoration: none; border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:#FFFFFF}
a:img { border: none; border-bottom-width: 0px; border-bottom-style: none; }

Ich habe mit CSS noch nicht soviel am Hut gehabt, deshalb finde ich den Fehler wahrscheinlich nicht

Wie bekomme ich diesen gepunkteten Rahmen unter den Grafiken wieder weg?


Danke schonmal

[michfrm]

Wie bekomme ich diesen gepunkteten Rahmen unter den Grafiken wieder weg?

Mach entweder das raus:

border-bottom-style:solid; border-bottom-color:#FFFFFF

oder deklarier die Bilder nochmal extra unter den Zeilen mit den zitieren Codes und heb diese Definitionen dann wieder auf.

[maxi89]

Sorry wenn ich jetzt doof Frage, aber wie deklariere ich denn die Grafik mit CSS?

[Mich@el]

Moin Maxi89,
jetzt hab´ ich aber Rücken, nachdem ich erstmal alle Farben von weiß in sichtbar geändert habe! Machst Du das immer so?
Probiers mal hiermit:

a:focus, a:active, a:visited, img { border: none; border-bottom-width: 0px; border-bottom-style: none; } 

Du kannst auch -wie ich angegeben- Deine Links ruhig nebeneinander (verkürzt) schreiben. Einfach immer ein "Komma" dazwischen.

Grüße
Michael

[maxi89]

jetzt hab´ ich aber Rücken, nachdem ich erstmal alle Farben von weiß in sichtbar geändert habe! Machst Du das immer so?

Nein, nur immer dann, wenn der Seitenhintergrund eine relativ dunkle Grafik ist
Habe ich aber nicht in der CSS-Datei angegeben, da der Hintergrund ein 100% hohes und breites DIV ist - das auch noch mit CSS zu gestalten ist mir ehrlich gesagt noch etwas zu kompliziert


Ich hab den Code mal so eingefügt und schon sind die unteren Rahmenlinien unter der Grafik weg - unter den Textlinks (wo die ja bleiben sollen) aber auch...
Gibt es eine Möglichkeit, im <img>-Tag der Seite anzugeben, dass der Browser sich an die img-Zeile der CSS-Datei halten soll und dann die Rahmenlinien weg lässt?
Ich hoffe ich mache keinen allzu trotteligen Eindruck jetzt, aber CSS ist für mich teilweise noch recht viel Neuland

[michfrm]

Jeden Tag kannst mit CSS deklarieren

Beispiele:

<img /> => img { }
<fieldset><legend>Blabla</legend></fieldset> => fieldset legend {}
<p>Blabla</p> => p { }

Lies ab Besten das hier mal komplett durch
http://de.selfhtml.org/css/

[maxi89]

Ich habe jetzt mal nach der Anleitung von Selfhtml eine neue Klasse in der CSS-Datei angelegt, die ich sinnigerweise .keinrahmen genannt habe.
Diese Klasse sieht jetzt so aus:

 .keinrahmen { border: none; border-bottom-width: 0px; border-bottom-style: none; } 

Die Grafiken werden jetzt auch mit
<a class="keinrahmen" href=.....> verlinkt, und ab jetzt zweifel ich an mir selbst:
Der Opera zeigt weiter die unteren Rahmenlinien an, der Firefox aber macht mir um eine der (gleich verlinkten) Grafiken einen kompletten Rahmen, bei der anderen lässt er lediglich die unteren Rahmenlinien...

[michfrm]

Kannst du uns da mal nen Screenshot posten?

[maxi89]

Das hier ist aus dem Firefox 2:



...und das hier vom Opera:


Im IE kann ich das leider nicht testen, weil das transparente PNG-Dateien sind und ihr wisst ja, wie gern der IE die hat...


Und hier zum näheren Sinn der Sache:
Da ist eine Grafik (die mit den Fotos und dem Text). Da soll man jetzt auf die Fotos klicken können, um ein Profil zu sehen (in neuem Fenster geöffnet). Weil ich aber nicht mal eben ein paar Hundert Euro für Photoshop übrig habe und das somit nicht mal eben Slicen kann, habe ich einfach eine transparente GIF-Datei mit DIVs darübergelegt und verlinkt. Ist nicht das gelbe vom Ei, tut aber seinen Dienst

[michfrm]

Die IE7 solllte transparente PNGs können.

Wenn beide den gleichen Code haben, müssten die ja gleich aussehen... schon mal bei Mozilla geschaut, ob ein Bug zu dem Thema bekannt ist?

[maxi89]

Die IE7 solllte transparente PNGs können.

Ja, der IE7... Aber ich sitze hier vor einem Windows 2000, da kann man den nicht drauf installieren
Ich probiere es jetzt mal auf einem anderen Rechner mit dem Mozilla nochmal, der ist dort viel später installiert worden und sollte (wenns ein bekannter Fehler ist) diesen beseitigt haben.

EDIT: Auf dem anderen Rechner hat die eine Grafik im Mozilla keinen Rahmen, also werde ich meinen wohl mal updaten müssen.

EDIT2: Jetzt nach dem Update siehts sowohl in Opera und Firefox gleich aus

[Mich@el]

EDIT2: Jetzt nach dem Update siehts sowohl in Opera und Firefox gleich aus

Wie jetzt? Geht´s jetzt?

[maxi89]

Leider nicht, diese unteren Rahmenlinien sind weiterhin da - aber wenigstens in beiden Browsern an der gleichen Stelle, das ist doch auch schonmal was

[designfanatiker]

Warum nimmst du nicht einfach statt border-bottom die dafür vorgesehene Eigenschaft text-decoration: underline?

[maxi89]

Hm, das wäre wahrscheinlich die beste Lösung, ich wollte aber eigentlich diesen Effekt, dass normale Links gepunktet unterstrichen, beim draufzeigen aber normal durchgezogen unterstrichen werden. Soweit ich das jetzt gesehen habe, geht das mit text-decoration: underline wohl nicht...
Das werde ich dann wohl mit gesonderten Klassen machen müssen.