1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen
  2. Unsere jährliche Weihnachts-Banner-Aktion hat begonnen! Wir freuen uns auf viele, viele kreative Vorschläge.
    Mehr dazu könnt Ihr hier nachlesen: Weihnachtsbanner 2016

    Information ausblenden

img slicing mit CSS -> IE will nicht

Dieses Thema im Forum "Web-Programmierung" wurde erstellt von milamber, 05.03.07.

  1. milamber

    milamber Ingrid Marie

    Dabei seit:
    07.12.05
    Beiträge:
    272
    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 :)).
     
    #1 milamber, 05.03.07
    Zuletzt bearbeitet: 06.03.07
  2. Atelis

    Atelis Akerö

    Dabei seit:
    01.03.07
    Beiträge:
    1.831
    hab grad kein windows zur hand, aber versuch mal das "position:relative;
     
  3. milamber

    milamber Ingrid Marie

    Dabei seit:
    07.12.05
    Beiträge:
    272
    wie meinst Du das jetzt? :)
     
  4. Hilarious

    Hilarious Gelbe Schleswiger Reinette

    Dabei seit:
    10.08.05
    Beiträge:
    1.759
    Hast Du einen Showcase?
     
  5. Atelis

    Atelis Akerö

    Dabei seit:
    01.03.07
    Beiträge:
    1.831
    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;}...
     
    #5 Atelis, 06.03.07
    Zuletzt bearbeitet: 06.03.07
  6. milamber

    milamber Ingrid Marie

    Dabei seit:
    07.12.05
    Beiträge:
    272
    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 :)
     
  7. milamber

    milamber Ingrid Marie

    Dabei seit:
    07.12.05
    Beiträge:
    272
    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 :).
     

    Anhänge:

  8. Ultrasonic

    Ultrasonic Reinette de Champagne

    Dabei seit:
    09.12.06
    Beiträge:
    417
    Also ich würde das ja ganz anders machen.

    Eine Liste im Sinne von:

    Code:
    <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>.
     
  9. milamber

    milamber Ingrid Marie

    Dabei seit:
    07.12.05
    Beiträge:
    272
    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 :D.

    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
     
  10. milamber

    milamber Ingrid Marie

    Dabei seit:
    07.12.05
    Beiträge:
    272
    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.
     
  11. milamber

    milamber Ingrid Marie

    Dabei seit:
    07.12.05
    Beiträge:
    272
    also hier noch einmal eine Zusammenfassung falls es jemand ausprobieren möchte:

    html:
    Code:
    <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:
    Code:
    #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.
     
  12. Ultrasonic

    Ultrasonic Reinette de Champagne

    Dabei seit:
    09.12.06
    Beiträge:
    417
    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.
     
  13. maxg

    maxg Prinzenapfel

    Dabei seit:
    16.10.06
    Beiträge:
    553
    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>"
     
  14. milamber

    milamber Ingrid Marie

    Dabei seit:
    07.12.05
    Beiträge:
    272
    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 ;).
     
  15. milamber

    milamber Ingrid Marie

    Dabei seit:
    07.12.05
    Beiträge:
    272
    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.
     
  16. maxg

    maxg Prinzenapfel

    Dabei seit:
    16.10.06
    Beiträge:
    553
    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.
     
  17. milamber

    milamber Ingrid Marie

    Dabei seit:
    07.12.05
    Beiträge:
    272
    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 :).
     

Diese Seite empfehlen