nicht angemeldet
img in a mit border - Wie macht man's richtig?
Hallo,
ich will meine privaten Webseiten auf XHTML mit CSS umstellen und mache derzeit ein paar Design-Versuche. Dabei will ich die Seiten wenigstens im IE 6 und im Firefox (nahezu) identisch aussehen zu lassen. Jetzt bin ich über ein Problem gestolpert, das ich auch nach langer rumprobiererei und lesen von Websites nicht gelöst bekomme.
Die Beispielseite: http://test.dralli.de/test.html
Für diesen Test habe ich HTML und CSS in eine Datei gepackt.
Wer kann, sollte sich die Seiten im IE 6 und im Firefox (ich habe die Version 0.9.3) angucken. Was ich in beiden Browsern erreichen will, ist Aussehen und Verhalten wie der Fall 2 im Firefox dargestellt wird - ein 4px breiter Rahmen um das komplette Bild, der sich bei einem MouseOver komplett verfärbt.
Hat jemand einen Tipp, wie ich so ein Verhalten erreichen kann? Ich hab jetzt so viel probiert und bin im Augenblick echt ratlos - oder inzwischen zu blind, um den Fehler zu sehen...
Danke!
- Thorsten
-
Hi,
Wer kann, sollte sich die Seiten im IE 6 und im Firefox (ich habe die Version 0.9.3) angucken. Was ich in beiden Browsern erreichen will, ist Aussehen und Verhalten wie der Fall 2 im Firefox dargestellt wird - ein 4px breiter Rahmen um das komplette Bild, der sich bei einem MouseOver komplett verfärbt.
Deinem Code nach zu urteilen bist Du Dir offenbar der Existenz des Nachfahrenselektors nicht bewusst. Beschäftige Dich mit diesem.
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes-
'nabend,
Deinem Code nach zu urteilen bist Du Dir offenbar der Existenz des Nachfahrenselektors nicht bewusst. Beschäftige Dich mit diesem.
Deiner Antwort nach zu urteilen bist Du Dir offenbar der Existenz von Beispielseiten, die einen Effekt hervorrufen, ohne alle Möglichkeiten von CSS (inklusiver aller Selektor-Typen, als da wären Universeller S., Elementtyp-S., Klassen-S., ID-S., Pseudo-Element-S., Pseudo-Klassen-S., Nachfahrens., S. für direkt über- und untergeordnete Elemente, S. für benachbarte Elemente, Attribut-S. und die beliebte S.-Gruppierung) auszunutzen, nicht bewusst. Beschäftige dich mit der Möglichkeit, dass Beispielseiten oft nicht zu 100% optimiert sind.
-
Will ja keinen Flamewar starten, aber die Antwort auf die altklugen Sprüche von Cheatah fand ich passend.
Tommowski
-
hi,
S. für direkt über- und untergeordnete Elemente,
selektor für übergeordnete elemente - wie lautet der denn?
S. für benachbarte Elemente
was sind benachbarte elemente, und wie sieht dieser selektor aus?
gruß,
wahsaga--
"Look, that's why there's rules, understand? So that you _think_ before you break 'em."-
Hi,
was sind benachbarte elemente, und wie sieht dieser selektor aus?
ich nehme an, er meint "+" und "~". Eine in der Tat nicht wirklich günstige Übersetzung von "adjacent sibling".
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes
-
-
Hi,
Deinem Code nach zu urteilen bist Du Dir offenbar der Existenz des Nachfahrenselektors nicht bewusst. Beschäftige Dich mit diesem.
Deiner Antwort nach zu urteilen bist Du Dir offenbar der Existenz von Beispielseiten, die einen Effekt hervorrufen, ohne alle Möglichkeiten von CSS (inklusiver aller Selektor-Typen, als da wären Universeller S., Elementtyp-S., Klassen-S., ID-S., Pseudo-Element-S., Pseudo-Klassen-S., Nachfahrens., S. für direkt über- und untergeordnete Elemente, S. für benachbarte Elemente, Attribut-S. und die beliebte S.-Gruppierung) auszunutzen, nicht bewusst. Beschäftige dich mit der Möglichkeit, dass Beispielseiten oft nicht zu 100% optimiert sind.wenn Du so furchtbar viel weißt, wie kommt es dann, dass Du auf etwas derart Grundlegendes in einer derart offensichtlichen Situation nicht gekommen bist?
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes
-
-
-
hi,
Die Beispielseite: http://test.dralli.de/test.html
im oberen beispiel "fällt" das bild aus dem rahmen heraus, weil der rahmen zum <a> gehört.
:hover auf img anzuwenden, wie im unteren beispiel, kann der IE aber noch nicht - der beherrscht dieses pseudo-format bisher nur für links.
eine "lösung" wäre eine kombination aus beidem:
den rahmen für das bild definieren, und auf :hover am link reagieren.<a href="blah.html"><img src="bilg.jpg alt="bildtitel"></a>
a img {
border-width:4px;
border-style:solid;
margin: 0;
padding: 4px;
}a:link img {
border-color:#09f;
}a:hover img {
border-color:#f60;
}
gruß,
wahsaga--
"Look, that's why there's rules, understand? So that you _think_ before you break 'em."-
hi,
Die Beispielseite: http://test.dralli.de/test.html
im oberen beispiel "fällt" das bild aus dem rahmen heraus, weil der rahmen zum <a> gehört.
Ja, aber ist das Bild nicht der Inhalt des <a>, und laut dem Box-Modell sollte der Rahmen um den Inhalt des gesamten Elements gehen? Oder hab ich da etwas falsch verstanden?
:hover auf img anzuwenden, wie im unteren beispiel, kann der IE aber noch nicht - der beherrscht dieses pseudo-format bisher nur für links.
eine "lösung" wäre eine kombination aus beidem:
den rahmen für das bild definieren, und auf :hover am link reagieren.Das funktioniert tatsächlich! Danke!
[PS: Wenn du mir jetzt noch sagen kannst, warum im Firefox immer das letzte Panorama-Bild im <div id="foto">...</div> um zwei Pixel nach rechts verschoben ist, wäre ich glücklich ;) ]
Gruß
Thorsten
-