img slicing mit CSS -> IE will nicht

[milamber]

hallo

sicherlich kennt Ihr das Image Slicing in Verbindung mit unsortierten Listen. Ansich eine elegante Methode, aber leider nicht barrierefrei. Außerdem hat diese Methode noch ein paar andere Nachteile, die ich umgehen wollte.

Also habe ich mir (wie ich zuerst dachte einen "cleveren") Trick ausgedacht, der aber nicht in IE (und vermutlich nicht in Opera) funktioniert. Hier ein Auszug der wesentlichen Elemente:

<div id="navigation">
<a href="blub"><img src="bild.png" alt="hier wird nichts vor dem Screenreader versteckt!"/></a>
<a href="blub2"><img src="bild2.png" alt="hier auch nicht" /></a>
</div>

css:

#navigation { overflow:hidden; height:40px; }
#navigation a img {position:relative;}
#navigation a img:hover {top:-40px;}
#navigation a img:active {top:-80px;}
/* Extrawurst für IE */
#navigation a:hover img {top:-40px;}
#navigation a:active img {top:-80px;}
#navigation a:hover {padding:0;}


so, mein Plan schien perfekt, aber der IE ist anderer Meinung. Hat jemand eine Idee? habe schon mit clip und overflow rumprobiert, alles ohne Erfolg. Ich habe schon vieles mit CSS angestellt, aber dieses Problem kann ich einfach nicht lösen.

P.S.: ja, ich weiß, dass ich dadurch nur 3 Bilder zu einem zusammenfüge. Es war halt so ein Gedanke und den Nutzen wollte ich erst später untersuchen (Barrierefreiheit und so ).

 

[Atelis]

#navigation a img {position:relative;}
#navigation a img:hover {top:-40px;}
#navigation a img:active {top:-80px;}
/* Extrawurst für IE */
#navigation a:hover img {top:-40px;}
#navigation a:active img {top:-80px;}
#navigation a:hover {padding:0;}

hab grad kein windows zur hand, aber versuch mal das "position:relative;

 

[milamber]

wie meinst Du das jetzt?

 

[Hilarious]

hallo

sicherlich kennt Ihr das Image Slicing in Verbindung mit unsortierten Listen. Ansich eine elegante Methode, aber leider nicht barrierefrei. Außerdem hat diese Methode noch ein paar andere Nachteile, die ich umgehen wollte.

Also habe ich mir (wie ich zuerst dachte einen "cleveren") Trick ausgedacht, der aber nicht in IE (und vermutlich nicht in Opera) funktioniert. Hier ein Auszug der wesentlichen Elemente:

<div id="navigation">
<a href="blub"><img src="bild.png" alt="hier wird nichts vor dem Screenreader versteckt!"/></a>
<a href="blub2"><img src="bild2.png" alt="hier auch nicht" /></a>
</div>

css:

#navigation a img {position:relative;}
#navigation a img:hover {top:-40px;}
#navigation a img:active {top:-80px;}
/* Extrawurst für IE */
#navigation a:hover img {top:-40px;}
#navigation a:active img {top:-80px;}
#navigation a:hover {padding:0;}


so, mein Plan schien perfekt, aber der IE ist anderer Meinung. Hat jemand eine Idee? habe schon mit clip und overflow rumprobiert, alles ohne Erfolg. Ich habe schon vieles mit CSS angestellt, aber dieses Problem kann ich einfach nicht lösen.

P.S.: ja, ich weiß, dass ich dadurch nur 3 Bilder zu einem zusammenfüge. Es war halt so ein Gedanke und den Nutzen wollte ich erst später untersuchen (Barrierefreiheit und so ).

Hast Du einen Showcase?

 

[Atelis]

hab grad kein windows zur hand, aber versuch mal das "position:relative;

sry, aber der hat meine nachricht abgeschnitten...
meinte position:relative hinter jeden tag zu setzen, also auch noch #navigation a:hover img {position:relative; top:-40px;}...

 

[milamber]

das bringt leider auch nichts (außer Ärger unter Safari).

es ist wirklich kein einfaches Problem

@Hilarious
nee, grad nicht mehr, weil alles wieder umgebaut

 

[milamber]

oh, mir fällt grad auf, dass ich etwas Wichtiges vergessen habe zu erwähnen ... sorry . War gestern wohl schon zu müde .


#navigation { overflow:hidden; height:40px; }

so, beim hover und active sollen die graphiken nach oben flutschen und somit einen "mouseovereffekt" erzeugen da dank overflow:hidden nur der gewollte Bereich der Graphik erscheint. Der Vorteil, den ich hier sehe: ich muss nicht jedes Element mit einer ID ausstatten, damit wird der Code eleganter.
In Firefox und Safari funktioniert es auch wie gedacht. Der IE erzwingt aber eine Vergrößerung des Containers und zeigt die ganze Graphik.

hier zwei Screenshots, einmal richtig (mit der Maus über "Kontakt") und einmal wie es der IE anzeigt.

P.S. sorry, dass ich gestern noch die Hälfte der Informationen weggelassen habe .

 

[Ultrasonic]

Also ich würde das ja ganz anders machen.

Eine Liste im Sinne von:

<ul><li></li></ul>

Definiere dann für jedes "<li>" ein Hintergrundbild im Sinne von:

#link1 a { background:url(bild.jpg) no-repeat top left; }

#link1 a:hover {background:url(bild.jpg) no-repeat bottom left; }

inkl. background-position einmal für off als "top left" und einmal für on also "bottom left" und natürlich eine feste Größe für "<li>" sowie margin: 0; und padding: 0; für <ul> und <li>.

 

[milamber]

oh neeee, ich habe die Lösung. Seltsamerweise war ich mir aber sicher, dass ich das schon ganz am Anfang auch so hatte ... man sollte sich vielleicht doch mal notieren was man macht .

position:relative; muss noch zu #navigation hinzugefügt werden.

#Navigation {
position:relative;
overflow:hidden;
height:40px;
}

oh man, war ja einfach ...

danke für die Hilfe

 

[milamber]

Also ich würde das ja ganz anders machen.

Eine Liste im Sinne von:

<ul><li></li></ul>

Definiere dann für jedes "<li>" ein Hintergrundbild im Sinne von:





inkl. background-position einmal für off als "top left" und einmal für on also "bottom left" und natürlich eine feste Größe für "<li>" sowie margin: 0; und padding: 0; für <ul> und <li>.

ich habe in meinem ersten Post geschrieben, dass ich kein Listen slicing wegen der fehlenden Barrierefreiheit möchte .
dieses Verfahren hat 2 große Nachteile:
- Screenreader können keinen Text vorlesen der versteckt wurde. Und das macht man ja bei der Liste (oder man läßt ihn ganz weg).
- jedes Element bekommt eine ID, was den Code in meinen Augen nicht gerade Elegant macht.

 

[milamber]

also hier noch einmal eine Zusammenfassung falls es jemand ausprobieren möchte:

html:

<div id="Navigation">
<a href=""><img src="bla.png" alt="text für screenreader" /></a>
<a href=""><img src="bla2.png" alt="text für screenreader" /></a>
<a href=""><img src="bla3.png" alt="text für screenreader" /></a>
</div>

css:

#Navigation a img {position:relative;}
#Navigation a img:hover {top:-40px;}
#Navigation a img:active {top:-80px;}
/* extrawurst für IE */
#Navigation a:hover img {top:-40px;}
#Navigation a:active img {top:-80px;}
#Navigation a:hover {padding:0;}

#Navigation {
	position:relative;
	overflow:hidden;
     height:40px;
   	background-image:url(images/menustripe.png);
    background-repeat:repeat-x;
}

Anmerkung:
für jeden Button im Menü gibt es ein Bild mit 3 Zustände für normal, hover und active. Das Bild ist insgesamt 120px hoch.

Interessant wäre noch eine Lösung für den "current" Zustand zu finden.

 

[Ultrasonic]

ich habe in meinem ersten Post geschrieben, dass ich kein Listen slicing wegen der fehlenden Barrierefreiheit möchte .
dieses Verfahren hat 2 große Nachteile:
- Screenreader können keinen Text vorlesen der versteckt wurde. Und das macht man ja bei der Liste (oder man läßt ihn ganz weg).
- jedes Element bekommt eine ID, was den Code in meinen Augen nicht gerade Elegant macht.

Na dann prost. Nimm doch einfach einzelne <div> Layer in Deiner Navigation und versehe diese mit id, Hintergrundbild und den 3 verschiedenen Positionen für das eine Hintergrundbild.

 

[maxg]

schön das es geklappt hat und das du dich -trotz Navigation über Bilder- für etwas barrierefreies entschieden hast. inwieweit das eine wirklich gute Lösung ist lässt sich aber vortrefflich streiten Ich selber stehe nicht so auf Navigationen die nur aus Bildern bestehen und eigentlich interpretieren die guten Screenreader auch einen "title" im "<a>"

 

[milamber]

es gibt viele Möglichkeiten. Aber ich wollte dieses mal die Liste umgehen und was Anderes ausprobieren. Das "alt" Attribut wird ja vom Screenreader vorgelesen und ich benutze für ein Bild auch das dafür vorgesehene Element .

Aber klar, es ist nur eine Methoden von vielen und man kann sich darüber streiten ob sie jetzt sinnvoll ist oder nicht .

P.S. das Problem mit den Screenreadern ist, dass man als Webdesigner meistens keinen hat und sich nur auf Infos im Netz verlassen muss .

 

[milamber]

BIK schreibt:

Anders als das alt-Attribut bei Grafiken ist das title-Attribut optional. Für Informationen, die der Benutzer für das Verständnis zwingend braucht, ist es nicht gut geeignet, sondern vielmehr für ergänzende Informationen.
Bei Seiten, die sich um Barrierefreiheit bemühen, wird das title-Attribut oft überfrachtet. Häufig werden zum Beispiel Linktexte oder andere im Kontext bereits verfügbare Informationen im title-Attribut noch einmal wiederholt. Dies führt in der Praxis zur Unbenutzbarkeit der title-Attribute.

na ja, eine Begründung der Aussage wäre nicht schlecht.

 

[maxg]

was die meinen ist ein Konstrukt der Sorte

<a href=http://www.meineurl.de/home title="Startseite">Startseite</a>

Weil das dann "Startseite Startseite" ergibt.

 

[milamber]

ja, das steht im 2. Absatz, aber ich meine den ersten. Warum ist es nur für ergänzende Infos geeignet? Ich selbst setze title zwar auch nur für ergänzende Infos ein (hat aber eher etwas mit dem Stil zu tun), aber eine Begründung für diese Aussagen würde mich trotzdem interessieren .