Natasja: Trennung von Layout und Inhalt: <li> für Grafiken?

hallöle,

entsprechend der Trennung von Layout und Inhalt und XHTML, etc. soll man ja vermeiden, <table> als Layout-Mittel für Grafiken zu missbrauchen. Wie sieht es mit <ul> aus? Ist die Verwendung von Listen für Grafiken statthaft?

Dankeschön
Natasja

  1. hi,

    Wie sieht es mit <ul> aus? Ist die Verwendung von Listen für Grafiken statthaft?

    Wenn du eine Liste von Bildern hast ...

    gruß,
    wahsaga

    --
    /voodoo.css:
    #GeorgeWBush { position:absolute; bottom:-6ft; }
    1. hi,

      Wie sieht es mit <ul> aus? Ist die Verwendung von Listen für Grafiken statthaft?

      Wenn du eine Liste von Bildern hast ...

      gruß,
      wahsaga

      eine Liste würde ich es nicht nennen. Es sind einfach Bilder, die untereinander angeordnet werden sollen. Und <br /> soll man ja dafür auch nicht nehmen ;-)  Was wäre denn die Ideal-Lösung nach aktuellem Stand der Diskussion?

      Dankeschön
      Natasja

      1. Hi!

        Es sind einfach Bilder, die untereinander angeordnet werden sollen. Und <br /> soll man ja dafür auch nicht nehmen ;-)  Was wäre denn die Ideal-Lösung nach aktuellem Stand der Diskussion?

        <img src="..." alt="...">

        UNd dann,falls die Bilder wirklich untereinanderstehen müssen, mit passendem Selektor ein display:block; verpassen. Oder aber einfach <br /> nutzen.
        Mann kann sich über solche Kleinigkeiten den Kopf zerbrechen, muss man aber nicht.

        Gruß aus Iserlohn

        Martin

        --
        Wer anderen eine Bratwurst brät, hat ein Bratwurstbratgerät.
        Selfcode: ie:{ fl:( br:^ va:) ls:# fo:| rl:( n4:( ss:| de:> js:) ch:? sh:( mo:| zu:)
        1. Hi!

          Es sind einfach Bilder, die untereinander angeordnet werden sollen. Und <br /> soll man ja dafür auch nicht nehmen ;-)  Was wäre denn die Ideal-Lösung nach aktuellem Stand der Diskussion?

          <img src="..." alt="...">

          UNd dann,falls die Bilder wirklich untereinanderstehen müssen, mit passendem Selektor ein display:block; verpassen.

          Was _genau_ bewirkt "display:block" ?

          Oder aber einfach <br /> nutzen.

          Komisch,  und ich dachte <br /> wäre böse[tm] ;-)

          Mann kann sich über solche Kleinigkeiten den Kopf zerbrechen, muss man aber nicht.

          Gruß aus Iserlohn

          Martin

          1. Hi!

            Was _genau_ bewirkt "display:block" ?

            Das Bild wird dargestellt wie ein Blockelement, also es beansprucht eine Zeile für sich (grob gesagt, es gibt ja noch float usw.)

            Komisch,  und ich dachte <br /> wäre böse[tm] ;-)

            Nö. Aber da du ja eh eine Liste von Links hast, ist die Frage ja eh philosophischer Natur ;-)

            Gruß aus Iserlohn

            Martin

            --
            Softwarefirmen haben viel Ahnung vom Programmieren und wenig von Marketing. Außer Microsoft, da ist das umgekehrt und das macht diese Firma so gefährlich.
            Selfcode: ie:{ fl:( br:^ va:) ls:# fo:| rl:( n4:( ss:| de:> js:) ch:? sh:( mo:| zu:)
            1. Hi!

              Was _genau_ bewirkt "display:block" ?

              Das Bild wird dargestellt wie ein Blockelement, also es beansprucht eine Zeile für sich (grob gesagt, es gibt ja noch float usw.)

              Komisch,  und ich dachte <br /> wäre böse[tm] ;-)

              Nö. Aber da du ja eh eine Liste von Links hast, ist die Frage ja eh philosophischer Natur ;-)

              dann mal von der Philosophie zur Realität ;-)

              <style="text/css">
              <!--
              ul {
               list-style-type:none;
               }
              -->
              </style>

              im <head> zeigt bei mir nicht die Wirkung, dass kein Bullet angezeigt wird. wenn ich <ul style="list-style-type:none"> im <body> verwende klappt es jedoch. Sieht jemand meinen Fehler?

              Dankeschön
              Natasja

              1. Hello out there!

                <style="text/css">
                Sieht jemand meinen Fehler?

                Siehst du ihn auch?

                Und schmeiß bitte die HTML-Kommentar-Zeichen raus, die haben in CSS nichts zu suchen.

                See ya up the road,
                Gunnar

                --
                “Remember, in the end, nobody wins unless everybody wins.” (Bruce Springsteen)
                1. Hello out there!

                  <style="text/css">
                  Sieht jemand meinen Fehler?

                  Siehst du ihn auch?

                  Allerdings ;-) Danke

                  Und schmeiß bitte die HTML-Kommentar-Zeichen raus, die haben in CSS nichts zu suchen.

                  wieso nicht? bei selfhtml habe ich gelesen, dass man das so machen soll für den Fall, dass ein browser kein css beherrscht (netscape 4 und so)?

                  See ya up the road,
                  Gunnar

                  1. Hello out there!

                    Und schmeiß bitte die HTML-Kommentar-Zeichen raus, die haben in CSS nichts zu suchen.

                    wieso nicht? bei selfhtml habe ich gelesen, dass man das so machen soll

                    Dann wird’s Zeit, dass das aus SELFHTML rausfliegt.

                    für den Fall, dass ein browser kein css beherrscht (netscape 4 und so)?

                    Wer benutzt noch Netscape 4? Und wenn, dann wäre die Anzeige des CSS-Quelltextes wohl das geringste Problem bei der Darstellung des Layouts.

                    See ya up the road,
                    Gunnar

                    --
                    “Remember, in the end, nobody wins unless everybody wins.” (Bruce Springsteen)
                2. Heyho!

                  Tut mir leid dass ich zwischenhake, aber entweder ist es schon zu spät für dieses "Rätsel" (im Hinblick auf die Tageszeit) oder es ist zu spät für mich (was ich mit meinen 20 Jahren noch nicht hoffe ;) ) bzw meine CSS-Kenntnisse.

                  <style="text/css">
                  Sieht jemand meinen Fehler?

                  Siehst du ihn auch?

                  Tut mir leid, nein.

                  Und was ist an den Kommentaren so schlimm? SelfHTML empfielt sie, und eine gewisse Abwärtskompatibilität schadet nicht. Besonders, wenn andere (neuere) Browser davon nicht betroffen sind.

                  Man kläre mich auf ;)

                  Danke schonmal

                  Gruß

                  Mastershrimp

                  1. Und was ist an den Kommentaren so schlimm? SelfHTML empfielt sie, und eine gewisse Abwärtskompatibilität schadet nicht. Besonders, wenn andere (neuere) Browser davon nicht betroffen sind.

                    Die Kommentare sind in dem Fall nur nötig für Browser die das <style> Element nicht kennen. Wenn du denkst das noch nennenswert Netscape 3 Benutzer deine Seite besuchen solltest du die Kommentare drin lassen, besser wäre es gleich externe styles zu verwenden.

                    Struppi.

                  2. Hello out there!

                    Tut mir leid dass ich zwischenhake, aber entweder ist es schon zu spät für dieses "Rätsel" (im Hinblick auf die Tageszeit) oder es ist zu spät für mich (was ich mit meinen 20 Jahren noch nicht hoffe ;) ) bzw meine CSS-Kenntnisse.

                    <style="text/css">

                    Mit deinen CSS-Kenntnissen hat das nichts zu tun, eher mit deinen HTML- oder allgemeiner SGML-Kenntnissen. Aber wohl doch eher mit der Tageszeit. ;-)

                    Das Start-Tag ist so definiert (SGML)
                    STag    ::=    '<' Name (S Attribute)* S? '>'

                    (Mal schnell abgeschrieben. Dank an Thomas J.S.)

                    Und was ist an den Kommentaren so schlimm?

                    Sie sind unnütz. Eventuell auch gefährlich (besonders bei JavaScript-Bereichen).

                    und eine gewisse Abwärtskompatibilität schadet nicht.

                    Richtig. Aber welcher heute im Einsatz befindliche Browser stellt den Inhalt von style-Bereichen im Viewport dar?

                    See ya up the road,
                    Gunnar

                    --
                    “Remember, in the end, nobody wins unless everybody wins.” (Bruce Springsteen)
                    1. Oha.

                      Jetzt fällt's mir wie Schuppen von den Augen! Man liest eben doch nur das, was man lesen will ;)

                      Hatte mir das " type" einfach dazugewünscht *g*

                      Und was ist an den Kommentaren so schlimm?

                      Sie sind unnütz. Eventuell auch gefährlich (besonders bei JavaScript-Bereichen).

                      Inwiefern? Was stellen die in JavaScript-Bereichen an?

                      Aber welcher heute im Einsatz befindliche Browser stellt den Inhalt von style-Bereichen im Viewport dar?

                      Gottseidank keiner. Aber ich hab mir in meinem Texteditor ein paar Presets eingetragen - u.A. auch "<style><!-- ...".

                      Und da es keinem schadet werde ich das wohl auch weiterhin verwenden. Als ich diese Diskussion las, dachte ich nur, die Dinger wären _wirklich_ schadhaft (im Sinne von deprecated o.Ä.)

                      Oder würdest du nachträglich in allen Seiten die Kommentare in <style> und <script> herausnehmen? Der Nutzen rechtfertigt m.E. den Aufwand nicht wirklich

                      nächtlich-müder Gruß

                      Mastershrimp

                      1. Hello out there!

                        Und was ist an den Kommentaren so schlimm?
                        Sie sind unnütz. Eventuell auch gefährlich (besonders bei JavaScript-Bereichen).
                        Inwiefern? Was stellen die in JavaScript-Bereichen an?

                        In HTML 4.01 nichts Böses. In der Spec wird sogar auf die Auskommentierung von Script- und Style-Bereichen hingewiesen. Naja, die Spec ist ja auch schon paar Tage alt.

                        In XHTML: „Da XML-Parser HTML-Kommentare (und damit auch den enthaltenen JavaScript-Code) entfernen dürfen, sollte auf die früher übliche Auskommentierung des Scripts verzichtet werden, die für die heute verwendeten Browser auch nicht mehr erforderlich ist.“ [http://de.selfhtml.org/html/xhtml/unterschiede.htm#script_style@title=Unterschiede-Script-Style] Das gilt auch für Stylesheets.

                        Auch wäre das nicht erlaubt:

                        <script type="javascript">  
                        <!--  
                        [code lang=javascript]for (var i = 10; i > 0; i--)  
                          document.write(i, " kleine Jägermeister<br />");
                        

                        -->
                        </script>[/code]

                        weil der Inhalt des style-Elements PCDATA ist und damit das Dokument kein wohlgeformtes XML ist: '--' ist innerhalb von Kommentaren in XML verboten. [XML §2.5]

                        Oder würdest du nachträglich in allen Seiten die Kommentare in <style> und <script> herausnehmen?

                        Das vielleicht nicht. Aber in neue würde ich keine einbauen.

                        See ya up the road,
                        Gunnar

                        --
                        “Remember, in the end, nobody wins unless everybody wins.” (Bruce Springsteen)
              2. Hallo,

                <style="text/css">

                Was Du meinst ist:

                <style type="text/css">

                Aufgelistete Bilder sind meiner Meinung nach kein Problem, vor allem wenn sie zueinander in einem bestimmten Bezug stehen (z.B. Bannersammlung, mehere Fotos einer "Serie", eines Themas oder sowas).

                <br> ist nicht per se böse, hat nur (anders als z.B. der Absatz <p> oder die Liste <ul>) keinen semantischen Wert.

                Schöne Grüße,
                stefan

      2. Bessergesagt:

        Es ist eine vertikale Navigations-Leiste, die auf Grafiken basiert. Macht ja vielleicht einen Unterschied ;-)

        Natasja

        1. hi,

          Bessergesagt:

          Es ist eine vertikale Navigations-Leiste, die auf Grafiken basiert. Macht ja vielleicht einen Unterschied ;-)

          Damit wäre die Frage, ob eine Liste zur Auszeichnung tauglich ist, doch schon gut beantwortet.

          gruß,
          wahsaga

          --
          /voodoo.css:
          #GeorgeWBush { position:absolute; bottom:-6ft; }
        2. Hello out there!

          Es ist eine vertikale Navigations-Leiste, die auf Grafiken basiert.

          Also eine _Liste_ von Links.

          http://www.w3.org/QA/Tips/unordered-lists

          See ya up the road,
          Gunnar

          --
          “Remember, in the end, nobody wins unless everybody wins.” (Bruce Springsteen)
        3. Liebe Natasja,

          dann wirst Du eine <ul> nehmen, denn es ist eine _Liste_ von (Achtung!) _Links_ (und nicht etwa von Bildern).

          Da Du (wol aus design-technischen Gründen) die Links mit Bildern darstellen möchtest, musst Du _unbedingt_ in den <img/>-Elementen das alt-Attribut mit einer Text-Version des Links versehen, damit im Falle eines Nicht-anzeigen-könnens der Bilder, die Links immer noch benutzbar sind!

          Beispiel:

            
          <ul>  
             <li><a href="pfad/kontakt.html"><img src="pfad/kontakt-link-bild.png" alt="* Kontakt" /></a></li>  
             <li><a href="pfad/impressum.html"><img src="pfad/impressums-link-bild.png" alt="* Impressum" /></a></li>  
          </ul>
          

          Hilfe für das Gestalten einer <ul> als Navi findest Du im SelfKapitel zu CSS-basierten Navigationsleisten.

          Liebe Grüße aus Ellwangen,

          Felix Riesterer.

          1. Hallo,

            <ul>
               <li><a href="pfad/kontakt.html"><img src="pfad/kontakt-link-bild.png" alt="* Kontakt" /></a></li>
               <li><a href="pfad/impressum.html"><img src="pfad/impressums-link-bild.png" alt="* Impressum" /></a></li>
            </ul>

              
            Wenn wir schon beim Thema »Trennung von Layout und Inhalt« sind:  
            <a href=""><img></a> ist »out«, so etwas man mittlerweile auch mit CSS, Stichwort Image Replacement. Im Übrigen ist es nicht sonderlich klug, gerade den Text der Navigationsleiste in Grafiken unterzubringen. Grafiken sind schlecht skalierbar und die Farben nicht anpassbar. Wenn man Wert auf Zugänglichkeit legt, sollte man sich mit der Gestaltung von solchen wichtigen Elemente zurückhalten.  
              
            Mathias
            
            -- 
            [Visitenkarte](http://community.de.selfhtml.org/visitenkarten/view.php?key=17) · [SELFHTML Weblog](http://aktuell.de.selfhtml.org/weblog/)
            
            1. Lieber molily,

              <a href=""><img></a> ist »out«, so etwas man mittlerweile auch mit CSS, Stichwort Image Replacement.

              Replacement mit oder ohne Javascript?

              Ich verstehe Dich im Moment so:

              <div id="navi">  
                 <h2>Navigation</h2>  
                 <ul>  
                    <li><a href="pfad/impressum.html" id="impressum">Impressum</a></li>  
                    <li><a href="pfad/kontakt.html" id="kontakt">Kontakt</a></li>  
                 </ul>  
              </div>
              

              und im CSS dann:

              #navi { border: 1px solid #dfdfdf; }  
              #navi h2 { display: inline; margin: 0; padding: 0 3em 0 0; }  
              #navi ul { display: inline; list-style: none; margin: 0; padding: 0; }  
              #navi li { display: inline; list-style: none; margin: 0; padding: 0; width: 80px; height: 20px; }  
              #navi #kontakt { background: url(mein/kontakt-bild.png) no-repeat top left; }  
              #navi #impressum { background: url(mein/impressum-bild.png) no-repeat top left; }
              

              oder so ähnlich.

              Im Übrigen ist es nicht sonderlich klug, gerade den Text der Navigationsleiste in Grafiken unterzubringen. Grafiken sind schlecht skalierbar und die Farben nicht anpassbar. Wenn man Wert auf Zugänglichkeit legt, sollte man sich mit der Gestaltung von solchen wichtigen Elemente zurückhalten.

              Zugegeben, da hast Du Recht. Aber wenn es der OP (oder dessen Kunde) so will...

              Liebe Grüße aus Ellwangen,

              Felix Riesterer.

              1. Heyho!

                Also ich packe Navigationen immer grundsätzlich in <ul>'s

                Quasi:

                  
                <ul>  
                 <li id="seite1"><a href="seite1.html">Seite 1</a></li>  
                 <li id="seite2"><a href="seite2.html">Seite 2</a></li>  
                 <li id="seite3"><a href="seite3.html">Seite 3</a></li>  
                 ...  
                </ul>  
                
                

                Bilder kann man jetzt ganz einfach mit CSS einfügen:
                Man schiebt den Link-Text mit text-indent:-9999px aus dem Bildschirm raus, definiert <li> und <a> als Block-Elemente mit fester Breite und Höhe und setzt für <a> ein Hintergrundbild ein.

                Ist m.E. die bestmögliche Art Inhalt und Design voneinander zu trennen.

                Noch kurz am Rande:
                Ferner lässt sich damit auch ein netter JS-loser Image-Mouseover-Effekt bewerkstelligen:
                Man "malt" sich den Button im Zustand 1 und 0 in einem Grafikprogramm seines Vertrauens und fügt beide nebeneinander in eine neue Grafik.

                Nun kann man per CSS und background-position ganz einfach für a:hover die Grafik im Hintergrund verschieben (kein Mouseover: background-position: top left; Mit Mouseover: background-position: top right;)

                Fertig ist der Mouseover-Effekt, der weder JS erfordert, noch Bilder nachladen muss.

                Details auf http://standards.webmasterpro.de

                Gruß

                Mastershrimp

                1. Ja diese Vorgehensweise ist hier alles andere als unbekannt.
                  Und was passiert wenn Du die Bilder abschaltest? Kein Alt-Text, nur leere Flächen.

                  1. Und was passiert wenn Du die Bilder abschaltest? Kein Alt-Text, nur leere Flächen.

                    Man kann nicht alles haben. Entweder Design-Freiheit und die Möglichkeit, eine Seite auch ohne CSS vernünftig betrachten zu können, oder die Freiheit, Bilder abschalten zu können, was m.E. eindeutig zweitrangig ist.

                    Gruß

                    Mastershrimp

                    1. Liebe(r) Mastershrimp,

                      Man kann nicht alles haben. Entweder Design-Freiheit und die Möglichkeit, eine Seite auch ohne CSS vernünftig betrachten zu können, oder die Freiheit, Bilder abschalten zu können, was m.E. eindeutig zweitrangig ist.

                      wenn Du meinst... Ich teile Deine Meinung jedenfalls nicht.

                      Liebe Grüße aus Ellwangen,

                      Felix Riesterer.

                      1. Man kann nicht alles haben. Entweder Design-Freiheit und die Möglichkeit, eine Seite auch ohne CSS vernünftig betrachten zu können, oder die Freiheit, Bilder abschalten zu können, was m.E. eindeutig zweitrangig ist.

                        wenn Du meinst... Ich teile Deine Meinung jedenfalls nicht.

                        Ich auch nicht. Die Methode ist recht einfach aber ab einem gewissen level genügt sie halt nicht mehr.

                    2. Hallo

                      Und was passiert wenn Du die Bilder abschaltest? Kein Alt-Text, nur leere Flächen.

                      Man kann nicht alles haben.

                      Sicher? Ein mit <a href="impressum.html" id="impressum">Impressum<span></span></a> ausgezeichneter Link kann im <span></span> mit einem Hintergrundbild bestückt werden. Dieses ist nur über dem Text zu platzieren und gut ist. Wenn keine Bilder angezeigt werden, ist der Text bei dieser Methode jedenfalls immer noch da.

                      Einziger Nachteil, besonders bei Navigationen mit vielen Links, ist der Aufwand, da jeder Link sein eigenes Bild bekommt.

                      Tschö, Auge

                      --
                      Die Musik drückt aus, was nicht gesagt werden kann und worüber es unmöglich ist zu schweigen.
                      (Victor Hugo)
                      Veranstaltungsdatenbank Vdb 0.1
                      1. Sicher? Ein mit <a href="impressum.html" id="impressum">Impressum<span></span></a> ausgezeichneter Link kann im <span></span> mit einem Hintergrundbild bestückt werden. Dieses ist nur über dem Text zu platzieren und gut ist. Wenn keine Bilder angezeigt werden, ist der Text bei dieser Methode jedenfalls immer noch da.

                        Einziger Nachteil, besonders bei Navigationen mit vielen Links, ist der Aufwand, da jeder Link sein eigenes Bild bekommt.

                        Ich hab das auch schon des öfteren gemacht. Nur: vergrösserst Du die Schrift könnte es optische Probleme geben: der TExt "quillt" unter dem Bilder hervor (mir fällt grad kein besseres Wort ein;). Gibst Du dann dem a ein overflow: hidden; könnte man wieder kritsieren dass das ganze unbrauchbar ist weil man ja den Text bei ganz grosser Schrift nicht lesen kann. Also einen kleinen Schönheitsfehlerhaken gibt es immer.

                        Ich persönlich bin wieder dazu übergegangen das ganze mit JS zu lösen wie Gunnar vorgeschlagen hat. Ich finde dieser Weg hat die wenigsten Barrieren...wobei hier auch schon mal einer das Argument gebracht hat dass das Nachladen der Bilder evtl. zu lange dauern kann ob das nun stimmt vermag ich nicht zu beurteilen.

                        vg mel

                        1. achso ja das hier sollte man natürlich nciht vergessen:

                          http://1ngo.de/web/bildwechsel.html

                          für einen reinen css-bildwechsel die denke ich beste Lösung (bis jetzt ;)

                        2. Hallo

                          Ich hab das auch schon des öfteren gemacht. Nur: vergrösserst Du die Schrift könnte es optische Probleme geben: der TExt "quillt" unter dem Bilder hervor (mir fällt grad kein besseres Wort ein;). Gibst Du dann dem a ein overflow: hidden; könnte man wieder kritsieren dass das ganze unbrauchbar ist weil man ja den Text bei ganz grosser Schrift nicht lesen kann.

                          Das ist leider richtig. Ich wollte ja mastershrimp auch nur aufzeigen, dass seine Lösung nicht der Weisheit letzter Schuss ist. Besonders, weil er so lapidar über die Schwäche seiner Lösung hinwegging.

                          Dass auch die von mir favorisierte Lösung nicht stolperfrei funktioniert, will ich garnicht abstreiten. Wobei sich mir folgende Frage stellt: Wie sieht das Szenario aus, in dem der von dir beschriebene Effekt auftritt?

                          • Die Anzeige von Bildern ist abgeschaltet oder von vornherein nicht möglich.
                          • Das Autoren-CSS wird geparsed (ansonsten bräuchten wir uns keine Gedanken über overflow:hidden; machen).

                          Noch was vergessen?

                          Also einen kleinen Schönheitsfehlerhaken gibt es immer.

                          Ja, leider.

                          Schöne Kreation "Schönheitsfehlerhaken" übrigens. :-)

                          Tschö, Auge

                          --
                          Die Musik drückt aus, was nicht gesagt werden kann und worüber es unmöglich ist zu schweigen.
                          (Victor Hugo)
                          Veranstaltungsdatenbank Vdb 0.1
                          1. Das ist leider richtig. Ich wollte ja mastershrimp auch nur aufzeigen, dass seine Lösung nicht der Weisheit letzter Schuss ist. Besonders, weil er so lapidar über die Schwäche seiner Lösung hinwegging.

                            Ich weiss;) Und ich wollte meinen SEnf dazugeben ;)

                            Wie sieht das Szenario aus, in dem der von dir beschriebene Effekt auftritt?

                            • Die Anzeige von Bildern ist abgeschaltet oder von vornherein nicht möglich.
                            • Das Autoren-CSS wird geparsed (ansonsten bräuchten wir uns keine Gedanken über overflow:hidden; machen).

                            Noch was vergessen?

                            Hmm versteh ich nicht so richtig? Wo spielt das Autoren-Css eine Rolle?
                            Angenommen ein sehtechnisch stark beeinträchtigter Mensch schaltet die Bilder ab um den Alt-text grösser lesen zu können und vergrössert mal locker-flockig auf 150% so hat er dank overflow:hidden keine Chance.
                            Und ohne overflow zerschiesst es unschön das layout..

                            Schöne Kreation "Schönheitsfehlerhaken" übrigens. :-)

                            Ja meine eigene kleine Wort-Erfindung. Ich überlege, sie patentieren zu lassen.

                            vg mel ;)

                    3. Hello out there!

                      Und was passiert wenn Du die Bilder abschaltest? Kein Alt-Text, nur leere Flächen.

                      Man kann nicht alles haben. Entweder Design-Freiheit und die Möglichkeit, eine Seite auch ohne CSS vernünftig betrachten zu können, oder die Freiheit, Bilder abschalten zu können, was m.E. eindeutig zweitrangig ist.

                      Nein!! Zweitrangig ist, ob beim Überfahren mit der Maus das Bild wechselt.

                      Also was spricht gegen

                      <a href="foo"><img src="bar" onmouseout="[code lang=javascript]this.src='bar'" onmouseover="this.src='baz'" alt="quz"/></a>[/code]

                      Man kann CSS abschalten, man kann JavaScript abschalten, man kann die Bildanzeige abschalten, die Seite bleibt benutzbar.

                      See ya up the road,
                      Gunnar

                      --
                      “Remember, in the end, nobody wins unless everybody wins.” (Bruce Springsteen)
                      1. Hallo,

                        Also was spricht gegen
                        <a href="foo"><img src="bar" onmouseout="[code lang=javascript]this.src='bar'" onmouseover="this.src='baz'" alt="quz"/></a>[/code]

                        Die fehlende Trennung von Präsentationslogik und Inhalt spricht dagegen. Nicht-inhaltliche Grafiken hartkodiert im HTML, JavaScript hartkodiert.
                        Das JavaScript kann man zentral auslagern (mit Capturing/Bubbling sogar sehr einfach), zugegeben, aber Image Replacement mit JavaScript kann man genauso auslagern. Es gibt verschiedene IR-Techniken, die mit der Situation abgeschalteter Grafiken zurechtkommen.

                        Mathias

                        1. Hello out there!

                          Die fehlende Trennung von Präsentationslogik und Inhalt spricht dagegen.

                          Schön und gut. Aber – auch wenn ich mich gleich selber über das von mir Gesagte wundern werde – Nutzer interessieren sich doch eher für die Benutzbarkeit einer Webseite als für deren sorgfältig in Struktur, Layout und Dynamik getrennten Quelltext.

                          See ya up the road,
                          Gunnar

                          --
                          “Remember, in the end, nobody wins unless everybody wins.” (Bruce Springsteen)
                          1. Hallo,

                            Schön und gut. Aber – auch wenn ich mich gleich selber über das von mir Gesagte wundern werde – Nutzer interessieren sich doch eher für die Benutzbarkeit einer Webseite als für deren sorgfältig in Struktur, Layout und Dynamik getrennten Quelltext.

                            Es geht bei dieser speziellen Frage auch nicht mehr um den Nutzer, sondern um Vorteile für den Webautor, um möglichst einfachen Quelltext, der möglichst Layout-neutral ist.
                            Das kann aber auch indirekt den Nutzer interessieren. Wenn ich <img> in den Quelltext schreibe, ist es mit CSS nicht so einfach (zumindest nicht praktikabel), im Druckstylesheet, im Handheld-Stylesheet usw. Text statt Grafik anzuzeigen. Dort wären die Grafiken, die nichts anderes als Schmucktext enthalten, die eben für @media screen gedacht sind, fehl am Platze. Schreibe ich sie in den Code, ist der Code weniger unabhängig gegenüber verschiedenen Präsentationen. Will ich die Präsentation für @media screen ändern, muss ich das Markup ändern. Will ich die Präsentation *möglichst* ohne Markup-Änderung vornehmen können, so brauche ich, wie der CSS Zen Garden bis zum Exzess zeigt, Image Replacement.

                            Mathias

            2. Hello out there!

              Wenn wir schon beim Thema »Trennung von Layout und Inhalt« sind:
              <a href=""><img></a> ist »out«

              <a href="foo" src="bar">baz</a> bzw. gleich
              <li href="foo" src="bar">baz</li> sind »in«?
              Welcher Browser versteht schon XHTML 2? SCNR.

              See ya up the road,
              Gunnar

              --
              “Remember, in the end, nobody wins unless everybody wins.” (Bruce Springsteen)