Rahmen um Thumbnails

[Take Three]

Hallo Leute,

Habe folgendes Problem: Ich will mit CSS meine anklickbaren Thumbnails so formatieren, dass wenn man mit der Maus darüberfährt sich eine gestrichelte Linie rundherum bildet. Das geht aber nur, wenn ich im IMG-Tag das border="..." weglasse. Problem: Jetzt bildet sich schon von Anfang an ein silberner Rand um die Thumbnails. WARUM?

Ein Thumbnail meiner Galerie sieht so aus:
<a href="bildgross.jpg"><img class="thumbnail" src="bildklein.jpg"></a>

Meine styles.css sieht so aus:

  
img.thumbnail:link        { color: #000000; border: 1px solid blue; }  
img.thumbnail:visited     { color: #000000; border: 1px solid yellow; }  
img.thumbnail:hover       { color: #000000; border: 1px dashed red; }  
img.thumbnail:active      { color: #000000; border: 1px dashed #000000; }  

Man kann das ganze auch ansehen unter http://mitglied.lycos.de/synthesizer/takethree/galerie.php

Vielen Dank im Vorraus
Mfg
Take Three

[Christoph Schnauß]

hallo,

Jetzt bildet sich schon von Anfang an ein silberner Rand um die Thumbnails. WARUM?

Du solltest dir, wenn solche Fragen auftauchen, zum Testen auch immer mal einen anderen Browser nehmen. Die hellgraue Umrandung gibts in Firefox, im IE wird es ein blauer Rand, und in Opera gar keiner (bzw. schwarz). Schreibe in deine CSS einfach noch eine Zeile
  img.thumbnail {border:none;}
mit hinein, das sollte helfen.

Grüße aus Berlin

Christoph S.

[fastix®]

Moin!

img.thumbnail {border:none;}

Ich würde
img.thumbnail {border:1px solid black ;}

vorschlagen, damit die die Grafiken nicht so wackeln, wenn man mit der Maus drüber fährt.

MFFG (Mit freundlich- friedfertigem Grinsen)

fastix®

[Ashura]

Hallo fastix®.

Ich würde
img.thumbnail {border:1px solid black ;}

vorschlagen, damit die die Grafiken nicht so wackeln, wenn man mit der Maus drüber fährt.

Und ich wäre für:

img.thumbnail{border:1px solid transparent;}

Dann muss man bei einer Änderung der Hintergrundfarbe nicht auch noch die Rahmenfarbe anpassen. (Obwohl das bei einem globalen CSS eine Sache von Sekunden ist.)

Gruß, Ashura

[Christoph Schnauß]

hallo fastix®,

Ich würde
img.thumbnail {border:1px solid black ;}
vorschlagen

Da kollidiert nochwas. Ich hatte mir die tatsächlich online gestellte CSS vorhin noch nicht angesehen. Die Konstruktion ist so:
  <a ...><img ...></a>
und die CSS formuliert Pseudoklassen sowohl für <img> wie auch für <a>. Die kommen sich nun aber mindestens beim IE in die Quere. Es wäre wahrscheinlich besser, für <img> gar kein CSS festzulegen, und stattdessen die Formatierung an <a> zu binden.

Grüße aus Berlin

Christoph S.

[Felix Riesterer]

Lieber Christoph,

Es wäre wahrscheinlich besser, für <img> gar kein CSS festzulegen, und stattdessen die Formatierung an <a> zu binden.

Da bin ich anderer Meinung! Es sollten meines Erachtens sowohl für <a> als auch für <img> Rulesets definiert werden, allerdings würde ich die Klassenbenennung im HTML-Teil in das <a> schreiben. Folgende Lösung finde ich vor allem auch für den IE besser:

HTML:

  
<a class="thumbnail" href="..."><img src="..." /></a>

CSS:

  
a.thumbnail { text-decoration: none; }  
a.thumbnail img { border: 1px solid transparent; margin: 0; }  
a.thumbnail:link img, a.thumbnail:visited img { border: 1px solid #666666; }  
a.thumbnail:hover img { border: 1px dashed silver; filter:Gray() }  
a.thumbnail:active img { border: 1px dashed silver; }

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[Christoph Schnauß]

hallo Felix,

Es sollten meines Erachtens sowohl für <a> als auch für <img> Rulesets definiert werden, allerdings würde ich die Klassenbenennung im HTML-Teil in das <a> schreiben.

Bitte. So herum gehts natürlich auch. Wichtig ist meiner Ansicht nach, daß sich die Formatierungen für <a> und <img> nicht in die Quere kommen, wie es derzeit ist.

Grüße aus Berlin

Christoph S.

[MudGuard]

Hi,

Meine styles.css sieht so aus:

img.thumbnail:link        { color: #000000; border: 1px solid blue; }
img.thumbnail:visited     { color: #000000; border: 1px solid yellow; }

  
Deine Bilder sind keine Links. Deine Bilder befinden sich nur innerhalb von Links.  
Daher sind diese beiden rulesets für die Katz (XHTML 2.0 hast Du ja nicht verwendet - HTML auch nicht wirklich).  
  

> ~~~css
  

> img.thumbnail:hover       { color: #000000; border: 1px dashed red; }  
> img.thumbnail:active      { color: #000000; border: 1px dashed #000000; }  
> 

Zumindest ersteres funktioniert in modernen Browsern, im IE natürlich nicht, der kann :hover nur für Links.

Befasse Dich mit dem descendant Selektor.

cu,
Andreas

[Ashura]

Hallo MudGuard.

img.thumbnail:hover       { color: #000000; border: 1px dashed red; }
img.thumbnail:active      { color: #000000; border: 1px dashed #000000; }

>   
> Zumindest ersteres funktioniert in modernen Browsern, im IE natürlich nicht, der kann :hover nur für Links.  
  
Zweiteres funktioniert in allen modernen Browsern ebenso.  
  
  
Gruß, Ashura  

-- 
Selfcode: sh:( fo:) ch:? rl:( br:^ n4:& ie:{ mo:) va:) de:> zu:) fl:( ss:| ls:[ js:|  
[30 Days to becoming an Opera8 Lover](http://tntluoma.com/opera/lover/8/) -- [Day 16: Sessions](http://operalover.tntluoma.com/8/day_16_sessions)  
Meine Browser: Opera 8.0 | Firefox 1.0.4 | Lynx 2.8.3 | Netscape 4.7 | IE 6.0  
[\[Deshalb frei! - Argumente pro freie Software\]](http://deshalbfrei.org/)