marsei: Webseite mit div container wird im IE nicht richtig dargestellt

0 197

Webseite mit div container wird im IE nicht richtig dargestellt

marsei
  • browser
  • sonstiges
  • validator
  1. 0
    MrMurphy1
    1. 0
      Der Martin
      • html
      • validator
      1. 0
        Gunnar Bittersmann
        • html
        • internationalisierung
    2. 0
      Martin Seidel
  2. 0
    Gunnar Bittersmann
    • design/layout
    • internationalisierung
    1. 0
      Martin Seidel
      1. 0
        Martin Seidel
        • design/layout
        • internationalisierung
        • netzpsychose
        1. 0
          Matthias Apsel
  3. 0
    Martin Seidel
    1. 0

      Rechtschreibung

      Der Martin
      • rechtschreibung
      • sonstiges
      1. 0
        Martin Seidel
        1. 0
          Der Martin
          1. 0
            Gunnar Bittersmann
            1. 0
              Der Martin
              1. 0
                Gunnar Bittersmann
                1. 0
                  Der Martin
                  1. 0
                    Gunnar Bittersmann
                    1. 2
                      Rolf b
                      1. 0
                        Matthias Apsel
        2. 0
          Tabellenkalk
          1. 0
            Der Martin
          2. 0
            marctrix
            1. 0
              Der Martin
        3. 0
          Gunnar Bittersmann
          1. 0
            Gunnar Bittersmann
            1. 0
              Tabellenkalk
  4. 0
    Martin Seidel
    1. 2
      Der Martin
      1. 0
        Martin Seidel
        1. 0
          Der Martin
          1. 0
            Martin Seidel
            1. 0
              Martin Seidel
              1. 0
                Auge
                1. 0
                  Martin Seidel
                  1. 0
                    Der Martin
            2. 0
              Der Martin
              1. 0
                Martin Seidel
                1. 0
                  Der Martin
                  1. 0
                    Auge
                  2. 0
                    Gunnar Bittersmann
                    • browser
                    • css
                    1. 0
                      marctrix
                      1. 0
                        Der Martin
                        1. 0
                          Gunnar Bittersmann
                          • sonstiges
                          1. 0
                            Auge
                            1. 0
                              Gunnar Bittersmann
                              1. 0
                                marctrix
                                1. 0
                                  Auge
                                  • hardware
                                  • sonstiges
                                  1. 0
                                    marctrix
                                  2. 0
                                    Der Martin
                                  3. 0
                                    Matthias Apsel
                                    1. 0

                                      Windows-10-Erfahrungen

                                      Auge
                  3. 0
                    Martin Seidel
                    1. 0
                      Der Martin
                      1. 0
                        marctrix
                        1. 0
                          Der Martin
                          1. 0
                            Martin Seidel
                            1. 0
                              Auge
                              1. 0
                                Martin Seidel
                                1. 0
                                  Auge
                                2. 0
                                  Der Martin
                                  1. 0
                                    Martin Seidel
                                    1. 0
                                      Auge
                                  2. 0
                                    Gunnar Bittersmann
                          2. 0
                            marctrix
                  4. 0
                    Martin Seidel
                    1. 0
                      Der Martin
                      1. 0
                        Martin Seidel
                        1. 0
                          Der Martin
                      2. 0
                        Martin Seidel
                        1. 0
                          Der Martin
                          1. 0
                            Martin Seidel
                            1. 1
                              Der Martin
                              1. 0
                                Gunnar Bittersmann
                                • css
                                • html
                                1. 0
                                  Martin Seidel
                                  1. 1
                                    marctrix
                                    1. 0
                                      Gunnar Bittersmann
                                      • svg
                                      1. 0
                                        Martin Seidel
                                        1. 0
                                          Gunnar Bittersmann
                                          1. 0
                                            Martin Seidel
                                            1. 0
                                              MrMurphy1
                                              1. 0
                                                Gunnar Bittersmann
                                                1. 0
                                                  Der Martin
                              2. 0
                                Martin Seidel
                                1. 0
                                  marctrix
                              3. 0
                                Martin Seidel
                                1. 0
                                  Auge
                                  1. 0
                                    Martin Seidel
                                    1. 0
                                      Auge
              2. 0
                marctrix
                1. 0
                  Der Martin
                  1. 0
                    marctrix
                    1. 0
                      Der Martin
                      1. 0
                        Mitleser
                        1. 0
                          Der Martin
                          1. 0
                            Mitleser
                          2. 0
                            marctrix
                            1. 0
                              Der Martin
                              1. 0
                                marctrix
                                1. 1
                                  Der Martin
                      2. 0
                        marctrix
                        1. 0
                          Der Martin
                      3. 0
                        Mitleser
                    2. 0
                      Martin Seidel
                      1. 0
                        marctrix
                2. 1
                  Mitleser
          2. 1
            Gunnar Bittersmann
            • html
            1. 0
              Gunnar Bittersmann
              1. 0
                Gunnar Bittersmann
                1. 0
                  Tabellenkalk
                  1. 0
                    Der Martin
                  2. 0
                    marctrix
                    1. 0
                      Gunnar Bittersmann
                      1. 0
                        marctrix
                        1. 0
                          Gunnar Bittersmann
                  3. 1
                    Gunnar Bittersmann
          3. 0
            Martin Seidel
            1. 0
              Auge
            2. 0
              Der Martin
              1. 0
                Auge
                1. 0
                  Der Martin
              2. 0
                Martin Seidel
                1. 0
                  Gunnar Bittersmann
                  • browser
            3. 1
              Gunnar Bittersmann
              • browser
              • css
              1. 0
                Gunnar Bittersmann
            4. 0
              marctrix
              1. 0
                Martin Seidel
                1. 0
                  marctrix
                2. 0
                  Gunnar Bittersmann
                  • browser
              2. 1
                Matthias Apsel
                1. 0
                  marctrix
          4. 0
            Martin Seidel
            1. 0
              Martin Seidel
              1. 0
                marctrix
              2. 0
                marctrix
            2. 0
              Gunnar Bittersmann
              • html
  5. 0
    Martin Seidel
    1. 0
      marctrix
      1. 0

        figure-Element

        Gunnar Bittersmann
        • html
        1. 0
          marctrix
    2. 0
      Gunnar Bittersmann
      • design/layout
      1. 0
        Martin Seidel
        1. 0
          Gunnar Bittersmann
          1. 0
            Martin Seidel
          2. 1
            Der Martin
            • meinung
            1. 0
              Gunnar Bittersmann
              1. 0
                Der Martin
                1. 0
                  Gunnar Bittersmann
                2. 0
                  marctrix
          3. 0
            Martin Seidel
            1. 0
              Gunnar Bittersmann
              • css
              • html
            2. 0
              Der Martin
              • css
              • html
              1. 0
                Gunnar Bittersmann
                • css
                1. 0
                  Der Martin
                  1. 0
                    Gunnar Bittersmann
            3. 2
              marctrix
        2. 0
          Matthias Apsel
          1. 1
            Gunnar Bittersmann
            • html
            1. 0
              Der Martin
              1. 0
                Gunnar Bittersmann
                1. 0
                  Der Martin
                  1. 0
                    Gunnar Bittersmann
                    1. 0
                      Der Martin
                      1. 0
                        Gunnar Bittersmann
                        1. 0
                          Der Martin
                          1. 0
                            Gunnar Bittersmann
                            1. 0
                              Gunnar Bittersmann
                              1. 0
                                Der Martin
                                1. 0
                                  Gunnar Bittersmann
                                  1. 0
                                    marctrix
                                    1. 0
                                      Gunnar Bittersmann
                                      • css
                                      • menschelei
                                      1. 0
                                        marctrix
                                        1. 0
                                          Matthias Apsel
                                        2. 0
                                          MudGuard
                                      2. 0
                                        Der Martin
                                        1. 0
                                          Gunnar Bittersmann
                                          • menschelei
                                        2. 0
                                          Tabellenkalk
                                          • menschelei
                            2. 0
                              Der Martin
                              1. 0
                                Gunnar Bittersmann
                                • menschelei
                                1. 0
                                  Der Martin
                                  1. 0
                                    Gunnar Bittersmann
                                    1. 0
                                      Der Martin
                                      1. 0
                                        Gunnar Bittersmann
                                        • typografie
                                        1. 0
                                          Der Martin
                                          1. 0
                                            Gunnar Bittersmann
                                            1. 0
                                              Der Martin
                                              1. 0
                                                Gunnar Bittersmann
                                2. 0
                                  MudGuard
                      2. 0
                        Gunnar Bittersmann
                        • menschelei
                        1. 0
                          Der Martin
                          1. 0
                            Gunnar Bittersmann
                    2. 0
                      Matthias Apsel
                      • css
                      • html
                      1. 0
                        Gunnar Bittersmann
                        • html
                        1. 0
                          Matthias Apsel
                          1. 0
                            Gunnar Bittersmann
                2. 0
                  Martin Seidel
  6. 0
    MrMurphy1

problematische Seite

Hallo,

kann mir bitte jemand Tipps geben, wie ich die oben angegebene Webseite so ändern kann dass sie im Internet Explorer richtig dargestellt wird?

Vielen Dank!

Gruß Martin

  1. problematische Seite

    Hallo

    Auf der Seite machen JQuery / JavaScript Probleme.

    Als Lösung sollten die erstmal komplett gelöscht werden und dann nur noch die wirklich erforderlichen eingebunden werden. Also zum Beispiel nicht bei der Navigation. Dabei auf aktuelle Versionen achten.

    Zudem passt der Zeichencode in der charset-Angabe wohl nicht zu dem der gespeicherten Datei. Damit hat der IE mehr Probleme als andere Browser.

    Gruss

    MrMurphy

    1. problematische Seite

      Hi,

      Auf der Seite machen JQuery / JavaScript Probleme.

      so weit bin ich beim Anschauen noch gar nicht gekommen.

      Zudem passt der Zeichencode in der charset-Angabe wohl nicht zu dem der gespeicherten Datei.

      Ja. Angeblich wird UTF-8 verwendet; da, wo tatsächlich Umlaute verwendet werden (in den Keywords), sieht es aber eher nach ISO-8859-x oder Windows-1252 aus.

      Damit hat der IE mehr Probleme als andere Browser.

      Ist das so?

      Der nächste Punkt wäre massiv fehlerhaftes HTML: Der OP behauptet im DOCTYPE, HTML 4.01 zu verwenden. HTML 4.01 kennt aber kein main-Element. Und ein Link oder ein h4-Element kann niemals Kindelement von ul sein.

      Die Überschriftenfolge ist nicht in Ordnung; ich sehe h3, h4 und h5, aber keine h1 und h2. Und verschachtelt dürfen sie auch nicht sein. Überhaupt: Ein h4 als Container für die Navigation? Bitte nicht.

      Bleibt noch die inflationäre, größtenteils überflüssige Verwendung von div-Containern und die nicht sinnvolle Verstümmelung von Umlauten. Ach ja, und Galerie leitet sich nicht von Galle ab, also kein Grund für ein Doppel-l.

      Mein Fazit: Am besten nochmal von vorn anfangen. Ist ja noch ganz am Anfang, viel verliert man also nicht.

      So long,
       Martin

      --
      Nothing travels faster than the speed of light with the possible exception of bad news, which obeys its own special laws.
      - Douglas Adams, The Hitchhiker's Guide To The Galaxy
      1. problematische Seite

        @@Der Martin

        Der nächste Punkt wäre massiv fehlerhaftes HTML: Der OP behauptet im DOCTYPE, HTML 4.01 zu verwenden.

        Und in der nächsten Zeile <html lang="en"> behauptet er, die Seite wäre auf englisch, obwohl sie auf deutsch ist. Man sollte die Sprache angeben, aber es muss die richtige sein.

        Und auf die richtige Art angegeben werden; <meta http-equiv="Content-Language" content="English" /> kommt in die Tonne.

        LLAP 🖖

        --
        “There’s no such thing as an ‘average’ user, but there is such a thing as an average developer.” —Vitaly Friedman in Accessibility Matters: Meet Our New Book, “Inclusive Design Patterns”
        Selfcode: sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|
    2. problematische Seite

      Ich hab die Scripte deaktiviert, die Seite sieht dann aber immernoch komisch aus, z.b. wird das Hintergrundbild nicht angezeigt. Welche Datei meinst du wegen des charsets? im jquery ist auch utf-8 eingestellt. Also letztendlich scheint der IE mit dem jquery nicht klarzukommen. Das benötige ich um links in einem div container zu öffnen. Gibt es sonst eine Alternative dafür?

      Hallo

      Auf der Seite machen JQuery / JavaScript Probleme.

      Als Lösung sollten die erstmal komplett gelöscht werden und dann nur noch die wirklich erforderlichen eingebunden werden. Also zum Beispiel nicht bei der Navigation. Dabei auf aktuelle Versionen achten.

      Zudem passt der Zeichencode in der charset-Angabe wohl nicht zu dem der gespeicherten Datei. Damit hat der IE mehr Probleme als andere Browser.

      Gruss

      MrMurphy

  2. problematische Seite

    @@marsei

    kann mir bitte jemand Tipps geben, wie ich die oben angegebene Webseite so ändern kann dass sie im Internet Explorer richtig dargestellt wird?

    In meinem Safari wird die Seite auch falsch dargestellt: Die Schrift ist viel zu klein und der Inhalt ragt aus dem Browserfenster raus. Ändern kannst du das mit flexiblem Layout, dass sich dem Browser anpasst. Responsive design.

    Übrigens wird die Seite in allen Browsern falsch dargestellt: auf Deutsch, auch wenn der Browser Englisch als bevorzugte Sprache angibt. Ändern kannst du das, indem du Sprachvereinbarung (language negotiation) einsetzt.

    LLAP 🖖

    --
    “There’s no such thing as an ‘average’ user, but there is such a thing as an average developer.” —Vitaly Friedman in Accessibility Matters: Meet Our New Book, “Inclusive Design Patterns”
    Selfcode: sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|
    1. problematische Seite

      Ich gebe zu meine html Kentnisse sind nicht sehr fundiert, deshalb meine Frage: ist jemand bereit gegen Bezahlung die Webseite so zu bearbeiten dass sie auf allen Browsern läuft und vernünftig aussieht?

      1. problematische Seite

        Ist es wirklich so hoffnungslos???

        1. problematische Seite

          Hallo Martin Seidel,

          Ist es wirklich so hoffnungslos???

          Grundsätzlich nicht. Nur ist die Intension des Forums eine andere.

          Bis demnächst
          Matthias

          --
          Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.
  3. problematische Seite

    Ich versuchs mal mit Website baker. Trotzdem vielen Dank für die Hinweise!

    btw.

    Das Wort Galerie ist auf das italienische galleria sowie auf das lateinische Substantiv galilea zurückzuführen. Dennoch ist die Schreibweise Gallerie falsch. Das Wort ist nämlich dem französischen galérie entlehnt, das nur mit einem l geschrieben wird. Zwar gibt es im Englischen die gallery, doch im Deutschen bleibt es bei Galerie mit einem l.
    

    also so ganz falsch lag ich nicht ;)

    1. Hallo,

      Das Wort Galerie ist auf das italienische galleria sowie auf das lateinische Substantiv galilea zurückzuführen. Dennoch ist die Schreibweise Gallerie falsch. Das Wort ist nämlich dem französischen galérie entlehnt, das nur mit einem l geschrieben wird. Zwar gibt es im Englischen die gallery, doch im Deutschen bleibt es bei Galerie mit einem l.
      

      das stimmt schon, im Italienischen und im Englischen schreibt man das Wort mit Doppel-l. Vielleicht auch noch in anderen Sprachen. Aber im Deutschen jedenfalls nicht.

      also so ganz falsch lag ich nicht ;)

      Wie man's nimmt. Aber das ist immerhin ein sehr häufig anzutreffender Schreibfehler, ähnlich häufig wie Standard mit 't' am Schluss oder voraus mit Doppel-r. Beim Standard kann ich das noch halbwegs nachvollziehen, weil manche Leute das Wort tatsächlich mit hartem Auslaut aussprechen (obwohl es bei standardisieren wieder vollkommen klar wird). Aber beim voraus fehlt mir jegliche Erklärung für die oft gesehene Schreibweise mit Doppel-r.

      So long,
       Martin

      --
      Nothing travels faster than the speed of light with the possible exception of bad news, which obeys its own special laws.
      - Douglas Adams, The Hitchhiker's Guide To The Galaxy
      1. Also die "Gallerie" habe irgendwie aus dem Englischen Übernommen, da mein Auftraggeber die Menüpunkte in Englisch haben möchte. Natürlich ist es trotzdem falsch und ich hätte gleich gallery schreiben sollen.

        aus "voraus" machen bestimmt Viele "vorraus", weil sie das Wort unbewusst in "vor" und "raus" teilen ^^.

        Was mich immer wundert ist wie viele studierende oder studierte Leute von "Praktikas" reden.

        Gruß Martin

        [Vollzitat entfernt]

        1. Lieber Namensvetter,

          Also die "Gallerie" habe irgendwie aus dem Englischen Übernommen

          das verleitet natürlich.

          ich hätte gleich gallery schreiben sollen.

          Ja, wenn's später sowieso Englisch (und nur Englisch) sein soll ...

          aus "voraus" machen bestimmt Viele "vorraus", weil sie das Wort unbewusst in "vor" und "raus" teilen ^^.

          Hmm. Dann müssten die mit der gleichen Begründung auch hinnüber schreiben. .oO(?)

          Was mich immer wundert ist wie viele studierende oder studierte Leute von "Praktikas" reden.

          Autsch. Ja. Auch schon oft gehört. Ganz zu schweigen vom falschen Steigern von Begriffen, die ohnehin schon den Charakter eines Superlativs haben:

          • Am optimalsten wäre es, ...
          • ... das bestmöglichste Ergebnis ...

          Von falscher Groß/Kleinschreibung oder der eher zufällig wirkenden Auswahl zwischen 's', 'ss' und 'ß' will ich gar nicht erst anfangen.

          Ciao,
           Martin

          --
          Nothing travels faster than the speed of light with the possible exception of bad news, which obeys its own special laws.
          - Douglas Adams, The Hitchhiker's Guide To The Galaxy
          1. @@Der Martin

            Von falscher Groß/Kleinschreibung oder der eher zufällig wirkenden Auswahl zwischen 'ss' und 'ß' will ich gar nicht erst anfangen.

            Das sind ja auch Lappalien gegenüber Deppenleerzeichen und Deppenapostrophen. ;-)

            LLAP 🖖

            --
            “There’s no such thing as an ‘average’ user, but there is such a thing as an average developer.” —Vitaly Friedman in Accessibility Matters: Meet Our New Book, “Inclusive Design Patterns”
            Selfcode: sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|
            1. Hallo,

              Von falscher Groß/Kleinschreibung oder der eher zufällig wirkenden Auswahl zwischen 'ss' und 'ß' will ich gar nicht erst anfangen.

              Das sind ja auch Lappalien gegenüber Deppenleerzeichen und Deppenapostrophen. ;-)

              boah, stimmt. Die gibt's ja auch noch. Frucht Joghurt. Pflege Balsam. *schauder*

              Und Unfälle, die dadurch entstehen, dass jemand ein Deppenapostroph setzen möchte, stattdessen aber ein Gravis oder Acute nimmt, das mit dem folgenden Buchstaben verschmilzt. Hier in der Gegend fährt ab und zu ein Lieferwagen eines Gärtnerbetriebs herum, dessen Inhaber sich wohl Karle nennt. Nun ist er aber wohl dem Irrglauben erlegen, das mundartlich angehängte 'e' verdiene es, mit einem Apostroph abgetrennt zu werden. Im Endeffekt prangt auf dem Auto in großer Schrift der verkorkste Name Karlè.

              So long,
               Martin

              --
              Nothing travels faster than the speed of light with the possible exception of bad news, which obeys its own special laws.
              - Douglas Adams, The Hitchhiker's Guide To The Galaxy
              1. @@Der Martin

                Nun ist er aber wohl dem Irrglauben erlegen, das mundartlich angehängte 'e' verdiene es, mit einem Apostroph abgetrennt zu werden. Im Endeffekt prangt auf dem Auto in großer Schrift der verkorkste Name Karlè.

                Noch schlimmer wäre Karl`e.

                LLAP 🖖

                --
                “There’s no such thing as an ‘average’ user, but there is such a thing as an average developer.” —Vitaly Friedman in Accessibility Matters: Meet Our New Book, “Inclusive Design Patterns”
                Selfcode: sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|
                1. Hi,

                  Nun ist er aber wohl dem Irrglauben erlegen, das mundartlich angehängte 'e' verdiene es, mit einem Apostroph abgetrennt zu werden. Im Endeffekt prangt auf dem Auto in großer Schrift der verkorkste Name Karlè.

                  Noch schlimmer wäre Karl`e.

                  aber genau so hat's der Karle vermutlich gemeint.

                  So long,
                   Martin

                  --
                  Nothing travels faster than the speed of light with the possible exception of bad news, which obeys its own special laws.
                  - Douglas Adams, The Hitchhiker's Guide To The Galaxy
                  1. @@Der Martin

                    Nun ist er aber wohl dem Irrglauben erlegen, das mundartlich angehängte 'e' verdiene es, mit einem Apostroph abgetrennt zu werden. Im Endeffekt prangt auf dem Auto in großer Schrift der verkorkste Name Karlè.

                    Noch schlimmer wäre Karl`e.

                    aber genau so hat's der Karle vermutlich gemeint.

                    Da kann man ja von Glück sprechen, dass es dem Karle nicht gelungen ist, das umzusetzen.

                    Apropos umsetzen. Ich setz mich jetzt ins Caf`e.

                    LLAP 🖖

                    --
                    “There’s no such thing as an ‘average’ user, but there is such a thing as an average developer.” —Vitaly Friedman in Accessibility Matters: Meet Our New Book, “Inclusive Design Patterns”
                    Selfcode: sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|
                    1. Welch ein akuter, gravierender Irrtum. Ich würde ja lieber ins Café gehen...

                      ;-)))

                      1. Hallo Rolf b,

                        Welch ein akuter, gravierender Irrtum. Ich würde ja lieber ins Café gehen...

                        Welch tolles Wortspiel.

                        Bis demnächst
                        Matthias

                        --
                        Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.
        2. Hallo,

          Was mich immer wundert ist wie viele studierende oder studierte Leute von "Praktikas" reden.

          Das ist die Anlehnung an das ebenso flasche „Visas“, man will ja kontingent bleiben :)

          Gruß
          Kalk

          1. Hi,

            Was mich immer wundert ist wie viele studierende oder studierte Leute von "Praktikas" reden.

            Das ist die Anlehnung an das ebenso flasche „Visas“, man will ja kontingent bleiben :)

            grünau, und deshalb macht man das vorsichtshalber auch bei allen anderen Wörtern, deren Plural auf -a endet: Lexikas, Internas, Bananas, ...

            So long,
             Martin

            --
            Nothing travels faster than the speed of light with the possible exception of bad news, which obeys its own special laws.
            - Douglas Adams, The Hitchhiker's Guide To The Galaxy
          2. Hej Tabellenkalk,

            Was mich immer wundert ist wie viele studierende oder studierte Leute von "Praktikas" reden.

            Das ist die Anlehnung an das ebenso flasche „Visas“, man will ja kontingent bleiben :)

            Also ich will vor allem kontinent bleiben. ;-)

            Marc

            1. Hi,

              Was mich immer wundert ist wie viele studierende oder studierte Leute von "Praktikas" reden.

              Das ist die Anlehnung an das ebenso flasche „Visas“, man will ja kontingent bleiben :)

              Also ich will vor allem kontinent bleiben. ;-)

              ja bist du denn noch ganz dicht? *g*

              So long,
               Martin

              --
              Nothing travels faster than the speed of light with the possible exception of bad news, which obeys its own special laws.
              - Douglas Adams, The Hitchhiker's Guide To The Galaxy
        3. @@Martin Seidel

          Was mich immer wundert ist wie viele studierende oder studierte Leute von "Praktikas" reden.

          Richtig wäre: Prakticas mit c. SKNR.

          LLAP 🖖

          --
          “There’s no such thing as an ‘average’ user, but there is such a thing as an average developer.” —Vitaly Friedman in Accessibility Matters: Meet Our New Book, “Inclusive Design Patterns”
          Selfcode: sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|
          1. @@Gunnar Bittersmann

            Was mich immer wundert ist wie viele studierende oder studierte Leute von "Praktikas" reden.

            Richtig wäre: Prakticas mit c. SKNR.

            Wobei ich jedes Mal am Überlegen bin, ob das c vorne oder hinten hinkommt. Oder am Nachschlagen.

            LLAP 🖖

            --
            “There’s no such thing as an ‘average’ user, but there is such a thing as an average developer.” —Vitaly Friedman in Accessibility Matters: Meet Our New Book, “Inclusive Design Patterns”
            Selfcode: sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|
            1. Hallo,

              Oder am Nachschlagen.

              War das nicht die Baumarktkette für Zuschauer?

              Gruß
              Kalk

  4. problematische Seite

    Ich wäre schon motiviert die Seite nochmal neu zu bauen, bin mir aber nicht sicher welche Technik ich benutzen sollte damit die Seite auf allen gängigen Browsern (IE ab Version 6) in gängigen Auflösungen von 1024x768 bis 1900x1080 gut aussieht. Von Iframes wurde mir abgeraten, deshalb habe ich das jquery script eingebunden.

    1. problematische Seite

      Hallo,

      Ich wäre schon motiviert die Seite nochmal neu zu bauen, bin mir aber nicht sicher welche Technik ich benutzen sollte

      herzlich willkommen im interaktiven Workshop. ;-)

      Nein, im Ernst: Es ist toll, wenn du die Kritik so positiv aufnimmst und bereit bist, es besser zu machen. Ich bin auch sicher, dass du hier unter diesen Bedingungen jede Menge Hilfe bekommst.

      Als Basistechnologie würde ich dir zunächst reines HTML ans Herz legen. Ohne Javascript oder JS-Bibliotheken wie jQuery. Das kann man später als Zucker hinzunehmen, wenn die Basis mal steht, funktioniert und einigermaßen so aussieht wie gewünscht.

      damit die Seite auf allen gängigen Browsern (IE ab Version 6) in gängigen Auflösungen von 1024x768 bis 1900x1080 gut aussieht.

      Vergiss erstmal, dass es sowas wie Bildschirmauflösungen gibt. HTML skaliert von ganz allein, wenn man es nicht hier und da einschränkt.

      Zunächst frage dich also: Wie sieht die grundlegende Seitenstruktur aus? Nach dem, was ich aus dem ursprünglichen Entwurf erkennen konnte, hast du einen Headerbereich mit einem Logo, eine Navigation und einen großen Block, in dem der eigentliche Inhalt steht. Das sind drei Blöcke, die du - wenn du von HTML 4.01 auf HTML 5 umschwenken möchtest - als header, nav und main auszeichnen könntest.

      Was der Header alles enthalten soll, weiß ich nicht, aber vermutlich ein Logo (img) und einen Schriftzug (h1). Kann man ja bei Bedarf noch weiter ausbauen.

      Die Navigation besteht vermutlich aus einer Überschrift (h2) und einer Linkliste (ul oder ol).

      Im Inhaltsblock hattest du bisher nur ein paar Bilder, aber das ist wohl noch etwas dürftig.

      Mit diesem Grundlayout solltest du anfangen, vielleicht sogar erstmal ungestylt, also ohne dir über die genaue Darstellung Gedanken zu machen. Das kommt dann im nächsten Schritt.

      So, Sie sind am Zug. ;-)

      Von Iframes wurde mir abgeraten, deshalb habe ich das jquery script eingebunden.

      Das eine hat auch mit dem anderen nicht viel zu tun.

      So long,
       Martin

      --
      Nothing travels faster than the speed of light with the possible exception of bad news, which obeys its own special laws.
      - Douglas Adams, The Hitchhiker's Guide To The Galaxy
      1. problematische Seite

        Gut hab das Grundgerüst soweit fertig, was nun?

        1. problematische Seite

          Hi,

          Gut hab das Grundgerüst soweit fertig

          najaaa ...

          Du deklarierst laut DOCTYPE XHTML 1.1 - warum? Es gibt IMO nur wenige Fälle, in denen das sinnvoll ist. Sinnvoller wäre XHTML 1.0 (Strict), HTML 4.01 oder eben zeitgemäß HTML 5. Wenn letzteres, dann könntest du auch einige der div-Elemente durch passendere aud damit aussagekräftigere Elemente austauschen. Zum Beispiel header anstatt div#head, nav anstatt div#nav und main anstatt div#main. Wenn du wirklich XHTML nehmen wolltest, wäre auch das Logo-Bild fehlerhaft, weil das img-Element nicht geschlossen ist.

          Du setzt viele überflüssige div-Container ein. Zum Beispiel div#logo und div#adresse. Die beiden haben jeweils nur ein einziges Kindelement, gruppieren also nichts und sind somit unnötig. Die ID, die du vermutlich brauchst, um das Element mit CSS selektieren zu können, kannst du ebensogut dem img- bzw. dem h1-Element geben.

          Die Navigation ist Unfug: Alle Links in ein h2-Element? Nein. Die Links bilden doch keine Überschrift. Das h2-Element könnte aber eine Gesamtüberschrift der Navigationsleiste sein. Wenn du sowas nicht haben möchtest - weg damit. Die Links könnte man als Liste auszeichnen. Muss man nicht, ist aber gängige Praxis. Für mich käme also sowas in der Art heraus (die meta-Elemente habe ich mal weggelassen, dafür eines ergänzt, das die Zeichencodierung angibt):

          <!DOCTYPE html>
          <html lang="de">
          <head>
             <meta charset="utf-8">
             <title>bisbee Teppichhandel Hüxstraße 38, 23552 Lübeck</title>
             <link href="style.css" rel="stylesheet" type="text/css">
          </head>
             
          <body>
           <header>
            <img id="logo" src="images/bisbee.png" width="175" alt="logo">
            <h1 id="adresse">GOLDMANN International Carpet Collection<br>bisbee (Hüxstr. 38, 23552 Lübeck Germany)</h1>
           </header>
          	
           <nav>
            <h2>Platzhalter</h2>
            <ul>
             <li><a href="home.html">Home</a></li>
             <li><a href="galery.html">Gallerie</a>/li>
             <li><a href="collection.html">Sammlung</a>/li>
             <li><a href="service.html">Service</a>/li>
             <li><a href="about.html">Über uns</a>/li>
             <li><a href="contact.html">Kontakt</a>/li>
             <li><a href="links.html">Links</a>/li>
             <li><a href="en/index.html" >EN</a>/li>
            </ul>
           </nav>   
          	
           <main>
          
           </main>	
          </body> 
          </html>
          

          Schauen wir uns nun mal das Stylesheet an. Da sind eine Menge fester Breiten- und Höhenangaben in Pixel (px). Weg damit! Größen in px passen praktisch nie zum Browserfenster des Besuchers, und sie verhindern, dass die Seite sauber mit der Größe mitskaliert. Auch Schriftgrößen in px sind eine schlechte Idee, verwende besser Prozent oder em.

          Einige Elemente hast du mit position:relative versehen - vermutlich weißt du selbst nicht, warum. Ebenfalls weg damit. So, und dann sehen wir weiter.

          So long,
           Martin

          --
          Nothing travels faster than the speed of light with the possible exception of bad news, which obeys its own special laws.
          - Douglas Adams, The Hitchhiker's Guide To The Galaxy
          1. problematische Seite

            Hallo,

            vielen Dank erst mal für das Feedback! Die festen Höhen und Breiten Angaben habe ich verwendet damit der Inhalt in dem Hintergrundbild (Rahmen) bleibt, oder ist das nicht sinnvoll, bzw. ist es möglich den Rahmen auch über Codezeilen nachzubilden?

            Eine andere Sache die mir noch Sorgen bereitet: wie schaffe ich es dass die Links im Main Bereich geöffnet werden?

            [Vollzitat entfernt]

            1. problematische Seite

              die Bereiche nav und head sind position:relative damit sie untereinander aufgebaut werden

              [Vollzitat entfernt]

              1. problematische Seite

                Hallo

                die Bereiche nav und head sind position:relative damit sie untereinander aufgebaut werden

                Die Elemente stehen als Blockelemente, die sie sind, auch ohne position:relative; von sich aus untereinander. Zudem nehmen sie, ohne Angabe zur Position (top, right, bottom oder left) genau dort, wo sie auch ohne position:relative; stünden. Eine solche Positionierung ist nur in Ausnahmefällen sinnvoll. Beispielsweise dann, wenn innerhalb einer dieser Boxen (eines oder mehrere) dessen Kindelemente absolut positioniert werden sollen.

                Tschö, Auge

                PS: Bitte lösche den Teil des Vorpostings, auf das du dich nicht beziehst, beim schreiben deines Postings aus dem Eingabebereich. Den Schmonz braucht keiner.

                --
                Wo wir Mängel selbst aufdecken, kann sich kein Gegner einnisten.
                Wolfgang Schneidewind *prust*
                1. problematische Seite

                  Die Elemente stehen als Blockelemente, die sie sind, auch ohne position:relative; von sich aus untereinander.

                  Leider klappt das nicht, wenn ich bei head und nav postition:absolut einstelle, rutscht alles nach oben. in head und nav habe ich keine left, right, top, bottom angaben gemacht.

                  Eine solche Positionierung ist nur in Ausnahmefällen sinnvoll. Beispielsweise dann, wenn innerhalb einer dieser Boxen (eines oder mehrere) dessen Kindelemente absolut positioniert werden sollen.

                  Aber genau das ist doch der Fall?!?

                  1. problematische Seite

                    Hallo,

                    Die Elemente stehen als Blockelemente, die sie sind, auch ohne position:relative; von sich aus untereinander.

                    Leider klappt das nicht, wenn ich bei head und nav postition:absolut einstelle

                    nein, gar nicht positionieren! Weglassen!

                    rutscht alles nach oben. in head und nav habe ich keine left, right, top, bottom angaben gemacht.

                    Klar. Bevor man absolute Positionierung verwendet (und das sollte man nur in seltenen Ausnahmefällen), sollte man zunächst verstanden haben, wie sie funktioniert.

                    Eine solche Positionierung ist nur in Ausnahmefällen sinnvoll. Beispielsweise dann, wenn innerhalb einer dieser Boxen (eines oder mehrere) dessen Kindelemente absolut positioniert werden sollen.

                    Aber genau das ist doch der Fall?!?

                    Wieso? Davon war bisher nichts zu erkennen, und meistens gibt es auch bessere Wege.

                    So long,
                     Martin

                    --
                    Nothing travels faster than the speed of light with the possible exception of bad news, which obeys its own special laws.
                    - Douglas Adams, The Hitchhiker's Guide To The Galaxy
            2. problematische Seite

              Hi,

              Die festen Höhen und Breiten Angaben habe ich verwendet damit der Inhalt in dem Hintergrundbild (Rahmen) bleibt, oder ist das nicht sinnvoll, bzw. ist es möglich den Rahmen auch über Codezeilen nachzubilden?

              das verstehe ich noch nicht so recht, aber vielleicht ergibt sich das noch aus dem Kontext. Generell passt sich ein Element eigentlich immer seinem Inhalt und dem verfügbaren Platz an. Blockelemente wie div oder p nehmen per Default erstmal die gesamte verfügbare Breite ein, skalieren in der Breite automatisch mit, wenn das Browserfenster größer oder kleiner wird, und passen ihre Höhe dynamisch an ihren Inhalt an. Das ist zunächst mal der Grundgedanke.

              Eine andere Sache die mir noch Sorgen bereitet: wie schaffe ich es dass die Links im Main Bereich geöffnet werden?

              Wie meinst du das? Der Link fordert ein neues Dokument vom Server an, das wird geladen und angezeigt. Natürlich hat es dann einen anderen Inhalt im main-Element.

              Oder suchst du nach Möglichkeiten, wie du das Drumherum (Header, Navigation, Meta-Informationen) nicht für jede Seite neu machen musst? Dazu gibt es mehrere Ansätze, aber der erste, den ich empfehle, ist zunächst mal Copy&Paste: Jedes Dokument ist in sich vollständig.
              Etwas angenehmer ist es, mit PHP nachzuhelfen, das heutzutage in fast jedem Hosting-Paket inklusive ist. Mit PHP kann man bereits auf dem Server Teile des Dokuments, die immer gleich bleiben, mit einer include-Anweisung einfügen. Dann muss man diese Teile als Autor nur einmal pflegen, der Nutzer hat aber trotzdem für jede URL ein vollständiges Dokument.

              die Bereiche nav und head sind position:relative damit sie untereinander aufgebaut werden

              Das werden sie doch sowieso. Das ist das normale Verhalten von Blockelementen.

              Hi,
              [...]
              So long,
               Martin

              Und für die Zukunft: Bitte zitiere nicht den ganzen vorangegangenen Text, sondern nur das, was nötig ist, um den Zusammenhang herzustellen. Du wiederholst ja schließlich auch nicht die gesamte Rede des Vorstands, bevor du einen Einwand äußerst.

              So long,
               Martin

              --
              Nothing travels faster than the speed of light with the possible exception of bad news, which obeys its own special laws.
              - Douglas Adams, The Hitchhiker's Guide To The Galaxy
              1. problematische Seite

                das verstehe ich noch nicht so recht, aber vielleicht ergibt sich das noch aus dem Kontext.

                Also ich habe für die Seite in Gimp einen Rahmen mit abgerundeten Ecken gebastelt, der die Maße 1320x790 hat (was ein Kompromiss für die Auflösungen 1024x768 und 1900x1080 sein soll, vermutlich nicht optimal). Meine Idee ist wenn ich den Rahmen einigermaßen schön über border Anweisungen erstellen kann, wäre die Webseite natürlich viel besser skalierbar in der Größe. Wobei sich dann auch die Anordnung der Bilder in der Galerie automatisch anpassen müsste, ich vermute das wird zu kompliziert...

                Wie meinst du das? Der Link fordert ein neues Dokument vom Server an, das wird geladen und angezeigt. Natürlich hat es dann einen anderen Inhalt im main-Element.

                ich klicke im nav Bereich auf einen Link, dieser soll weiter unten im main Bereich geöffnet werden. Also sinngemäß wie es <a href="..." target="..."> bei frames machen würde.

                Oder suchst du nach Möglichkeiten, wie du das Drumherum (Header, Navigation, Meta-Informationen) nicht für jede Seite neu machen musst? Dazu gibt es mehrere Ansätze, aber der erste, den ich empfehle, ist zunächst mal Copy&Paste: Jedes Dokument ist in sich vollständig.

                Wenn das mit PHP nicht allzu kompliziert ist würde ich das machen, ansonsten gehe ich gerne auf Nummer sicher.

                1. problematische Seite

                  Hallo,

                  das verstehe ich noch nicht so recht, aber vielleicht ergibt sich das noch aus dem Kontext.

                  Also ich habe für die Seite in Gimp einen Rahmen mit abgerundeten Ecken gebastelt, der die Maße 1320x790 hat (was ein Kompromiss für die Auflösungen 1024x768 und 1900x1080 sein soll, vermutlich nicht optimal).

                  das ist nicht nur "nicht optimal", es ist ganz ungünstig. Eine Sackgasse. Wenn Gunnar das liest, wird er dich reflexartig darauf hinweisen, dass die Mehrheit der Bildschirme heute deutlich kleiner sind (Mobilgeräte). Und ich ergänze schon jetzt, dass jede x-beliebige Größe vorkommen kann, weil die Browserfenstergröße nicht viel mit der Bildschirmgröße zu tun hat (Browser nicht im Vollbildmodus, Sidebars, virtueller Desktop über 2 oder mehr Bildschirme, Zoom).

                  Ich weiß nicht, ob dieser Rahmen graphisch aufwendig ist. Falls es eine gewöhnliche Rahmenlinie ist, kann man die mit einem einfachen CSS-border ersetzen (ja, auch mit abgerundeten Ecken). Für aufwendigere Rahmen käme eventuell border-image in Frage. Wie es da mit der Browserunterstützung aussieht, kann ich nicht sagen - aber wenn jemand mit einem älteren Browser dann eben als Ersatzlösung einen stinknormalen gewöhnlichen Rahmen sieht, ist das auch kein Beinbruch.

                  Meine Idee ist wenn ich den Rahmen einigermaßen schön über border Anweisungen erstellen kann, wäre die Webseite natürlich viel besser skalierbar in der Größe. Wobei sich dann auch die Anordnung der Bilder in der Galerie automatisch anpassen müsste, ich vermute das wird zu kompliziert...

                  Das wird gar nicht kompliziert, du denkst zu kompliziert. Wenn du die Bilder einfach der Reihe nach auflistest, ordnen sie sich wie Fließtext automatisch je nach verfügbarem Platz an. Nicht eingreifen!

                  Oder suchst du nach Möglichkeiten, wie du das Drumherum (Header, Navigation, Meta-Informationen) nicht für jede Seite neu machen musst? Dazu gibt es mehrere Ansätze, aber der erste, den ich empfehle, ist zunächst mal Copy&Paste: Jedes Dokument ist in sich vollständig.

                  Wenn das mit PHP nicht allzu kompliziert ist würde ich das machen, ansonsten gehe ich gerne auf Nummer sicher.

                  Die PHP-Lösung ist so einfach oder so kompliziert, wie du sie haben möchtest. Die Basis ist sehr einfach, aber ich vermute, du wirst schnell auf den Geschmack kommen und weitere Features nutzen wollen. ;-)

                  So long,
                   Martin

                  --
                  Nothing travels faster than the speed of light with the possible exception of bad news, which obeys its own special laws.
                  - Douglas Adams, The Hitchhiker's Guide To The Galaxy
                  1. problematische Seite

                    Hallo

                    Für aufwendigere Rahmen käme eventuell border-image in Frage. Wie es da mit der Browserunterstützung aussieht, kann ich nicht sagen …

                    Can I Use? sagt „Geht so“. Aber wie du sagst, kein Beinbruch.

                    … aber wenn jemand mit einem älteren Browser dann eben als Ersatzlösung einen stinknormalen gewöhnlichen Rahmen sieht, ist das auch kein Beinbruch.

                    Tschö, Auge

                    --
                    Wo wir Mängel selbst aufdecken, kann sich kein Gegner einnisten.
                    Wolfgang Schneidewind *prust*
                  2. problematische Seite

                    @@Der Martin

                    Wenn Gunnar das liest, wird er dich reflexartig darauf hinweisen, dass die Mehrheit der Bildschirme heute deutlich kleiner sind (Mobilgeräte).

                    Ach was, ich kucke erst mal, ob das schon jemand anderes getan hat. ;-)

                    Ich weiß nicht, ob dieser Rahmen graphisch aufwendig ist. Falls es eine gewöhnliche Rahmenlinie ist, kann man die mit einem einfachen CSS-border ersetzen (ja, auch mit abgerundeten Ecken). Für aufwendigere Rahmen käme eventuell border-image in Frage.

                    Und für nicht ganz so aufwendige gibt’s ja noch box-shadow.

                    LLAP 🖖

                    --
                    “There’s no such thing as an ‘average’ user, but there is such a thing as an average developer.” —Vitaly Friedman in Accessibility Matters: Meet Our New Book, “Inclusive Design Patterns”
                    Selfcode: sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|
                    1. problematische Seite

                      Hej Gunnar,

                      Wenn Gunnar das liest, wird er dich reflexartig darauf hinweisen, dass die Mehrheit der Bildschirme heute deutlich kleiner sind (Mobilgeräte).

                      Ach was, ich kucke erst mal, ob das schon jemand anderes getan hat. ;-)

                      Ich weiß nicht, ob dieser Rahmen graphisch aufwendig ist. Falls es eine gewöhnliche Rahmenlinie ist, kann man die mit einem einfachen CSS-border ersetzen (ja, auch mit abgerundeten Ecken). Für aufwendigere Rahmen käme eventuell border-image in Frage.

                      Und für nicht ganz so aufwendige gibt’s ja noch box-shadow.

                      Um mal zum Ausgang zurück zu kommen, es ging wohl einfach um border-radius ;-)

                      Klar kann man noch ganz viele, ganz tolle Sachen machen. Schöne Efekte gibt es auch immer mit Hintergrundbildern, die durch Lücken zwischen Elementen zu sehen sind, die durch Außenabstände entstehen.

                      Überhaupt (teil-)transparente Bereich... - vieles geht. Rahmen mag ich persönlich gar nicht so gerne - am allerliebsten sind mir ausreichend große Weißräume um Bereiche optisch zu gliedern.

                      Ist aber Geschmackssache...

                      Marc

                      1. problematische Seite

                        Hi,

                        Rahmen mag ich persönlich gar nicht so gerne

                        ich schon, aber nur, wenn sie maßvoll und sparsam eingesetzt werden.

                        am allerliebsten sind mir ausreichend große Weißräume um Bereiche optisch zu gliedern.

                        Solange diese Weißräume nicht weiß sind, okay. Weiß ist eine Farbe, die ich am Bildschirm meide bzw. nur für kleine Flächen einsetze.
                        Erstens der Ästhetik wegen: Weiß wirkt meist sehr steril und abweisend, ein helles Blau oder Gelb, eventuell sogar ein heller Grauton wirkt angenehmer. Zweitens der Ergonomie wegen: Sobald die Beleuchtung im Raum nicht mehr optimal ist (z.B. nachlassendes Tageslicht), empfindet man den Bildschirm bei viel Weißfläche als Lichtquelle. Das ist unangenehm und strengt die Augen an.

                        Ist aber Geschmackssache...

                        Auch das. :-)

                        Ciao,
                         Martin

                        --
                        Nothing travels faster than the speed of light with the possible exception of bad news, which obeys its own special laws.
                        - Douglas Adams, The Hitchhiker's Guide To The Galaxy
                        1. problematische Seite

                          @@Der Martin

                          Zweitens der Ergonomie wegen: Sobald die Beleuchtung im Raum nicht mehr optimal ist (z.B. nachlassendes Tageslicht), empfindet man den Bildschirm bei viel Weißfläche als Lichtquelle. Das ist unangenehm und strengt die Augen an.

                          Dann passt man die Helligkeit seines Bildschirms der Umgebungshelligkeit an. Wenn es der Bildschirm nicht schon automatisch tut.

                          LLAP 🖖

                          --
                          “There’s no such thing as an ‘average’ user, but there is such a thing as an average developer.” —Vitaly Friedman in Accessibility Matters: Meet Our New Book, “Inclusive Design Patterns”
                          Selfcode: sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|
                          1. problematische Seite

                            Hallo

                            Zweitens der Ergonomie wegen: Sobald die Beleuchtung im Raum nicht mehr optimal ist (z.B. nachlassendes Tageslicht), empfindet man den Bildschirm bei viel Weißfläche als Lichtquelle. Das ist unangenehm und strengt die Augen an.

                            Dann passt man die Helligkeit seines Bildschirms der Umgebungshelligkeit an.

                            Tut „man“ das tatsächlich? Früher hatten Monitore gut erreichbare Drehregler oder [-]- und [+]-Tasten um die Einstellungen vorzunehmen bzw. zu verändern. Heute gibt es die an vielen Monitoren nicht mehr oder die Funktionen sind über oft nur schlecht zu bedienende Menüs erreichbar.

                            Ich würde mich hüten, andauernd etwas an den Einstellungen zu ändern. Das müsste ich ja bei anderen Lichtbedingungen wieder tun (typischerweise verändern sich die Bedingungen ja zweimal täglich).

                            Wenn es der Bildschirm nicht schon automatisch tut.

                            Ja dann … Das ist so einfach, dass es wohl nur was für Warmduscher und Weicheier ist! ;-)

                            Tschö, Auge

                            --
                            Wo wir Mängel selbst aufdecken, kann sich kein Gegner einnisten.
                            Wolfgang Schneidewind *prust*
                            1. problematische Seite

                              @@Auge

                              Dann passt man die Helligkeit seines Bildschirms der Umgebungshelligkeit an.

                              Tut „man“ das tatsächlich?

                              Na klar. Dafür hat man doch die Tasten oben auf der Tastatur:

                              Tasten zur Steuerung der Bildschirmhelligkeit beim MacBook

                              LLAP 🖖

                              --
                              “There’s no such thing as an ‘average’ user, but there is such a thing as an average developer.” —Vitaly Friedman in Accessibility Matters: Meet Our New Book, “Inclusive Design Patterns”
                              Selfcode: sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|
                              1. problematische Seite

                                Hej Gunnar,

                                Dann passt man die Helligkeit seines Bildschirms der Umgebungshelligkeit an.

                                Tut „man“ das tatsächlich?

                                Na klar. Dafür hat man doch die Tasten oben auf der Tastatur:

                                You made my day ;-)

                                Appler sind halt klar im Vorteil. Aber davon mal abgesehen: Menschen mit einer tatsächlichen Blendempfindlichkeit nutzen ggfs. Benutzer-Style-Sheets, ein entsprechendes Browser-PlugIn oder schlicht die Einstellmöglichkeiten der Browser.

                                Darauf zu achten, dass das die Seite nicht kaputt macht ist natürlich höchst sinnvoll!

                                Und hat auch nichts mehr mit persönlichem Geschmack zu tun.

                                Marc

                                1. problematische Seite

                                  Hallo

                                  Dann passt man die Helligkeit seines Bildschirms der Umgebungshelligkeit an.

                                  Tut „man“ das tatsächlich?

                                  Na klar. Dafür hat man doch die Tasten oben auf der Tastatur:

                                  You made my day ;-)

                                  Appler sind halt klar im Vorteil.

                                  Tasten zur Helligkeitssteuerung gibt es ja beileibe nicht nur an Apple-Geräten. Sowohl mein Privat-Linux-Notebook als auch mein Arbeits-Windows-Laptop haben die auch und ich musste beim Arbeitsgerät die in der letzten Zeit viel zu häufig nutzen, weil das Windows-10-Zwangsupdate dazu geführt hat, dass die Bildschirmhelligkeit ca. 10 Sekunden nach der Benutzeranmeldung stark absank, egal, was ich vorher eingestellt hatte. Trotzdem verstelle ich auch ohne eine solche Fehlersituation die Helligkeit nur selten.

                                  Allerdings gilt das von mir gesagte auch eher für Desktop-Monitore. Deren Einstellungsdialoge sind oft nur mit Klimmzügen erreichbar, was dazu führt, dass der typische Nutzer solcher beileibe nicht seltenen Geräte die Helligkeit des Bildschirms eben nicht oder nur einmal bei der Einrichtung verstellt. Dem hilft Gunnars „Schaut mal, wie einfach das bei mir ist“-Foto keinen Deut weiter.

                                  Tschö, Auge

                                  --
                                  Wo wir Mängel selbst aufdecken, kann sich kein Gegner einnisten.
                                  Wolfgang Schneidewind *prust*
                                  1. problematische Seite

                                    Hej Auge,

                                    Appler sind halt klar im Vorteil.

                                    Tasten zur Helligkeitssteuerung gibt es ja beileibe nicht nur an Apple-Geräten.

                                    Warum beschwerst du dich dann? ;-)

                                    Allerdings gilt das von mir gesagte auch eher für Desktop-Monitore. Deren Einstellungsdialoge sind oft nur mit Klimmzügen erreichbar, was dazu führt, dass der typische Nutzer solcher beileibe nicht seltenen Geräte die Helligkeit des Bildschirms eben nicht oder nur einmal bei der Einrichtung verstellt. Dem hilft Gunnars „Schaut mal, wie einfach das bei mir ist“-Foto keinen Deut weiter.

                                    Ach deshalb ;-)

                                    Fand es übrigens gerade darum witzig!

                                    Marc

                                  2. problematische Seite

                                    Hi,

                                    Tasten zur Helligkeitssteuerung gibt es ja beileibe nicht nur an Apple-Geräten. Sowohl mein Privat-Linux-Notebook als auch mein Arbeits-Windows-Laptop haben die auch

                                    ja, aber dieses Feature ist eben auf Notebooks oder AiO-Geräte beschränkt und bei herkömmlichen Desktop-PCs mit separatem Monitor nicht möglich, weil sich die Helligkeit der Hintergrundbeleuchtung in der Regel nicht von extern steuern lässt.
                                    Ja, es soll Monitore geben, bei denen über einen USB-Anschluss und Spezialsoftware (die vermutlich nur für Windows verfügbar ist) auch sämtliche geräteinternen Einstellungen vorgenommen werden können. Ist aber wohl die Ausnahme.

                                    und ich musste beim Arbeitsgerät die in der letzten Zeit viel zu häufig nutzen, weil das Windows-10-Zwangsupdate dazu geführt hat, dass die Bildschirmhelligkeit ca. 10 Sekunden nach der Benutzeranmeldung stark absank, egal, was ich vorher eingestellt hatte.

                                    Wie lästig!

                                    Allerdings gilt das von mir gesagte auch eher für Desktop-Monitore. Deren Einstellungsdialoge sind oft nur mit Klimmzügen erreichbar, was dazu führt, dass der typische Nutzer solcher beileibe nicht seltenen Geräte die Helligkeit des Bildschirms eben nicht oder nur einmal bei der Einrichtung verstellt.

                                    ACK. Wie du vorher schon erwähnt hast: Wenn das über einen Drehregler (optimal!) oder wenigstens über leicht erreichbare Tasten an der Frontseite geht - okay. Bei meinen Monitoren muss ich aber auch erst das zentrale Einstellmenü aufrufen, wenn ich die Helligkeit verstellen will. Einer hat die dazu nötigen Tasten wenigstens an der Frontseite, bei zwei anderen sind sie seitlich (also nicht direkt sichtbar) und so schwergängig, dass man sie nur bedienen kann, wenn man den Monitor mit der anderen Hand an der anderen Seite abstützt. Und man muss quasi blind tasten. Ergonomie geht anders.

                                    Ciao,
                                     Martin

                                    --
                                    Nothing travels faster than the speed of light with the possible exception of bad news, which obeys its own special laws.
                                    - Douglas Adams, The Hitchhiker's Guide To The Galaxy
                                  3. problematische Seite

                                    Hallo Auge,

                                    Tasten zur Helligkeitssteuerung gibt es ja beileibe nicht nur an Apple-Geräten. Sowohl mein Privat-Linux-Notebook als auch mein Arbeits-Windows-Laptop haben die auch und ich musste beim Arbeitsgerät die in der letzten Zeit viel zu häufig nutzen, weil das Windows-10-Zwangsupdate dazu geführt hat, dass die Bildschirmhelligkeit ca. 10 Sekunden nach der Benutzeranmeldung stark absank, egal, was ich vorher eingestellt hatte.

                                    Stromsparmodus deaktiviert? Außerdem lässt sich unter Systemsteuerung\Hardware und Sound\Energieoptionen und Systemsteuerung\Hardware und Sound\Energieoptionen\Energiesparplaneinstellungen bearbeiten, dort Erweiterte Energieeinstellungen ändern eine ganze Menge (auch kaputt-)konfigurieren, aber das hast du sicher schon probiert.

                                    Bis demnächst
                                    Matthias

                                    --
                                    Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.
                                    1. problematische Seite

                                      Hallo

                                      … ich musste beim Arbeitsgerät die in der letzten Zeit viel zu häufig nutzen, weil das Windows-10-Zwangsupdate dazu geführt hat, dass die Bildschirmhelligkeit ca. 10 Sekunden nach der Benutzeranmeldung stark absank, egal, was ich vorher eingestellt hatte.

                                      Stromsparmodus deaktiviert?

                                      Aber sicher. Stromanschluss geprüft, Helligkeit in den Einstellungen und in der Systemsteuerung verändert, alles ohne Erfolg. Stromsparmodus noch einmal explizit ein- und wieder ausgeschaltet. Nächster Start, gleiches Problem.

                                      Außerdem lässt sich [in der] Systemsteuerung … eine ganze Menge (auch kaputt-)konfigurieren, aber das hast du sicher schon probiert.

                                      Klar doch. Mittlerweile ist das aber kein Problem mehr. Seit dem Anniversary-Update vor dem Wochenende tritt das Problem nicht mehr auf. Auch dauert es, wie es vor dem Update war, auf dem Desktop und im Dateimanager (Explorer) nicht mehr fünf (in Worten fünf) Sekunden vom Rechtsklick bis zur Anzeige des Kontextmenüs. Das nervte mich noch viel mehr als das ständige Nachjustieren der Helligkeit. Sowas ist ein echter Showstopper!

                                      Tschö, Auge

                                      --
                                      Wo wir Mängel selbst aufdecken, kann sich kein Gegner einnisten.
                                      Wolfgang Schneidewind *prust*
                  3. problematische Seite

                    Die PHP-Lösung ist so einfach oder so kompliziert, wie du sie haben möchtest. Die Basis ist sehr einfach, aber ich vermute, du wirst schnell auf den Geschmack kommen und weitere Features nutzen wollen. ;-)

                    OK, also gibt es da einen Leitfaden oder ist es sinnvoll dieses Tutorial durchzuarbeiten?

                    1. problematische Seite

                      Hallo,

                      Die PHP-Lösung ist so einfach oder so kompliziert, wie du sie haben möchtest. Die Basis ist sehr einfach, aber ich vermute, du wirst schnell auf den Geschmack kommen und weitere Features nutzen wollen. ;-)

                      OK, also gibt es da einen Leitfaden oder ist es sinnvoll dieses Tutorial durchzuarbeiten?

                      was das Tutorial taugt, kann ich auf die Schnelle nicht beurteilen. Aber ichhalte es auch für etwas übertrieben, jetzt sofort bis zum Hals einzusteigen, wenn du zunächst nur zwei, drei includes nutzen willst. Wenn du später etwas tiefer einsteigen möchtest, ist es immer noch früh genug, sich ein wenig mit den Grundlagen zu befassen.
                      Für den Augenblick könnte aber die Kochrezept-Methode genügen.

                      • Sicherstellen, dass dein Hosting-Paket PHP unterstützt. Die Chancen sind hoch. Wenn nicht, denke eventuell über einen Tarifwechsel nach, es könnte sich auch für zukünftige Ideen lohnen.
                      • Die vorhandene HTML-Datei hernehmen und analysieren: Welche Abschnitte wären auf allen Seiten identisch? Diese Blöcke rauskopieren und als separate Datei speichern (z.B. als header.inc).
                      • Die herauskopierten Blöcke in der HTML-Datei ersetzen durch:
                        <?php
                        include "header.inc";
                        ?>
                        wobei der Dateiname natürlich entsprechend anzupassen ist.
                      • Die HTML-Datei in *.php umbenennen und die Verlinkungen in der Navi auch auf *.php korrigieren.

                      So. Die übriggebliebene Rumpfdatei enthält jetzt nur noch eine Art Skelett mit einem weitgehend leeren head-Element (das seitenspezifische title-Element bleibt darin wohl übrig) und dem main-Element. Der Rest ist durch PHP-include-Anweisungen ersetzt. Diese Datei kannst du nun beliebig kopieren, anpassen und brauchst nur die navi.inc (oder wie immer du sie genannt hast) anzupassen.

                      So long,
                       Martin

                      --
                      Nothing travels faster than the speed of light with the possible exception of bad news, which obeys its own special laws.
                      - Douglas Adams, The Hitchhiker's Guide To The Galaxy
                      1. problematische Seite

                        Hej Der Martin,

                        was das Tutorial taugt, kann ich auf die Schnelle nicht beurteilen. Aber ichhalte es auch für etwas übertrieben, jetzt sofort bis zum Hals einzusteigen, wenn du zunächst nur zwei, drei includes nutzen willst.

                        er will aber mehr, nämlich mindestens

                        die navi.inc (oder wie immer du sie genannt hast)

                        anpassen!

                        Marc

                        1. problematische Seite

                          Hi,

                          was das Tutorial taugt, kann ich auf die Schnelle nicht beurteilen. Aber ichhalte es auch für etwas übertrieben, jetzt sofort bis zum Hals einzusteigen, wenn du zunächst nur zwei, drei includes nutzen willst.

                          er will aber mehr, nämlich mindestens

                          die navi.inc (oder wie immer du sie genannt hast)

                          anpassen!

                          für diese (IMO optionale) Ausbaustufe hatte ich ja auch schon Unterstützung angeboten.

                          Ciao,
                           Martin

                          --
                          Nothing travels faster than the speed of light with the possible exception of bad news, which obeys its own special laws.
                          - Douglas Adams, The Hitchhiker's Guide To The Galaxy
                          1. problematische Seite

                            für diese (IMO optionale) Ausbaustufe hatte ich ja auch schon Unterstützung angeboten.

                            hab den Faden verloren, was kann die Aufbaustufe?

                            1. problematische Seite

                              Hallo

                              für diese (IMO optionale) Ausbaustufe hatte ich ja auch schon Unterstützung angeboten.

                              hab den Faden verloren,

                              Ja, das passiert schon mal. :-)

                              was kann die Aufbaustufe?

                              Die Ausbaustufe sollte in einem mit PHP einzubindenden Menü dafür sorgen, dass die aktuell zu ladende Seite im Menü selbst nicht verlinkt wird.

                              Tschö, Auge

                              --
                              Wo wir Mängel selbst aufdecken, kann sich kein Gegner einnisten.
                              Wolfgang Schneidewind *prust*
                              1. problematische Seite

                                Die Ausbaustufe sollte in einem mit PHP einzubindenden Menü dafür sorgen, dass die aktuell zu ladende Seite im Menü selbst nicht verlinkt wird.

                                das verstehe ich nicht

                                1. problematische Seite

                                  Hallo

                                  Die Ausbaustufe sollte in einem mit PHP einzubindenden Menü dafür sorgen, dass die aktuell zu ladende Seite im Menü selbst nicht verlinkt wird.

                                  das verstehe ich nicht

                                  Die aktuell geladene/zu ladende Seite soll nicht im Menü verlinkt sein, denn ein Link zu sich selbst ist überflüssig und verwirrt zudem den einen oder anderen Nutzer der Seite. Also soll dafür gesorgt werden, dass der Menüpunkt vorhanden aber nicht bedienbar ist. Das macht man bestenfalls auf dem Server beim Zusammenbau der Seite, im diskutierten Szenario also mit PHP.

                                  Tschö, Auge

                                  --
                                  Wo wir Mängel selbst aufdecken, kann sich kein Gegner einnisten.
                                  Wolfgang Schneidewind *prust*
                                2. problematische Seite

                                  Hallo,

                                  Die Ausbaustufe sollte in einem mit PHP einzubindenden Menü dafür sorgen, dass die aktuell zu ladende Seite im Menü selbst nicht verlinkt wird.

                                  das verstehe ich nicht

                                  was genau nicht?

                                  Bei deinem jetzigen Stand ist in den Navigationsmenüs immer jeder Menüpunkt auch verlinkt. Auch der, der zur aktuell angezeigten Seite gehört. Und es gibt Leute, die finden das nicht gut.

                                  Deswegen hatte ich schon daran gedacht, die Navigation(en) so zu "pimpen", dass die jeweils aktuelle Seite nicht mehr verlinkt ist - und was ich persönlich noch viel sinnvoller finde: Dass der Menüpunkt der aktuellen Seite irgendwie hervorgehoben werden kann.

                                  So long,
                                   Martin

                                  --
                                  Nothing travels faster than the speed of light with the possible exception of bad news, which obeys its own special laws.
                                  - Douglas Adams, The Hitchhiker's Guide To The Galaxy
                                  1. problematische Seite

                                    was genau nicht?

                                    also statt xyz.html #xyz ?

                                    1. problematische Seite

                                      Hallo

                                      was genau nicht?

                                      also statt xyz.html #xyz ?

                                      ???

                                      Statt …

                                      <ul>
                                       <li><a href="vorige.html">vorige Seite</a></li>
                                       <li><a href="diese.html">diese Seite</a></li>
                                       <li><a href="naechste.html">nächste Seite</a></li>
                                      </ul>
                                      

                                      … besser …

                                      <ul>
                                       <li><a href="vorige.html">vorige Seite</a></li>
                                       <li><a>diese Seite</a></li>
                                       <li><a href="naechste.html">nächste Seite</a></li>
                                      </ul>
                                      

                                      Tschö, Auge

                                      --
                                      Wo wir Mängel selbst aufdecken, kann sich kein Gegner einnisten.
                                      Wolfgang Schneidewind *prust*
                                  2. problematische Seite

                                    @@Der Martin

                                    dass die jeweils aktuelle Seite nicht mehr verlinkt ist - und was ich persönlich noch viel sinnvoller finde: Dass der Menüpunkt der aktuellen Seite irgendwie hervorgehoben werden kann.

                                    Wobei sich Letzteres aus Ersterem ergibt: Man stylt a-Elemente ohne href-Attribut anders als solche mit.

                                    LLAP 🖖

                                    --
                                    “There’s no such thing as an ‘average’ user, but there is such a thing as an average developer.” —Vitaly Friedman in Accessibility Matters: Meet Our New Book, “Inclusive Design Patterns”
                                    Selfcode: sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|
                          2. problematische Seite

                            Hej Der Martin,

                            was das Tutorial taugt, kann ich auf die Schnelle nicht beurteilen. Aber ichhalte es auch für etwas übertrieben, jetzt sofort bis zum Hals einzusteigen, wenn du zunächst nur zwei, drei includes nutzen willst.

                            er will aber mehr, nämlich mindestens

                            die navi.inc (oder wie immer du sie genannt hast)

                            anpassen!

                            für diese (IMO optionale) Ausbaustufe hatte ich ja auch schon Unterstützung angeboten.

                            Nicht optional. Dann finde ich das auch ok. Auf das aktuell geöffnete Dokument zu verlinken, ist Blödsinn, es in der Navi nicht optisch und semantisch korrekt hervorzuheben ist schlechte Usability.

                            Marc

                  4. problematische Seite

                    Kannst du mir noch einen Tipp geben, wie ich den Inhalt der Links aus dem nav Bereich bei Anklicken im main Bereich geöffnet werden? Oder anders gefragt, gibt es eine unkomplizierte Alternative für eine Aufteilung der Seite in Frames, sonst würde ich das jetzt machen.

                    1. problematische Seite

                      Hallo,

                      Kannst du mir noch einen Tipp geben, wie ich den Inhalt der Links aus dem nav Bereich bei Anklicken im main Bereich geöffnet werden? Oder anders gefragt, gibt es eine unkomplizierte Alternative für eine Aufteilung der Seite in Frames, sonst würde ich das jetzt machen.

                      nein, wenn du die include-Methode mit PHP verwendest, ist diese Krücke nicht mehr nötig. Aus der Sicht des Browsers ist dann jede Anforderung ein komplettes Dokument.

                      So long,
                       Martin

                      --
                      Nothing travels faster than the speed of light with the possible exception of bad news, which obeys its own special laws.
                      - Douglas Adams, The Hitchhiker's Guide To The Galaxy
                      1. problematische Seite

                        OK, ich glaube dann hab ichs,

                        meine index.php sieht nun so aus:

                        <?php
                        include "header.inc";
                        ?>
                        	
                        <div id="main" >
                        
                        </div>	
                           
                           
                        </body> 
                        </html>
                        
                        
                        1. problematische Seite

                          Hi,

                          <?php
                          include "header.inc";
                          ?>
                          	
                          <div id="main" >
                          
                          </div>	
                             
                             
                          </body> 
                          </html>
                          

                          hehe, sieht ziemlich übersichtlich aus. Ich würde es trotzdem anders gliedern, etwa so:

                          <!DOCTYPE html>
                          <html lang="de">
                          <head>
                             <title>bisbee Teppichhandel Hüxstraße 38, 23552 Lübeck</title>
                          <?php
                          include "head.inc";
                          ?>
                          </head>
                             
                          <body>
                          <?php
                          include "header.inc";
                          include "nav.inc"
                          ?>
                          	
                           <main>
                          
                           </main>	
                          </body> 
                          </html>
                          

                          Ich bin dabei vom HTML-5-Skelett ausgegangen, das ich vorher schonmal als Beispiel gepostet hatte. Wesentliche Unterschiede:

                          • Der head-Bereich ist nicht komplett ausgelagert, damit das title-Element noch in der Hauptdatei bleiben kann. Das ist ja immerhin von Seite zu Seite unterschiedlich (sollte zumindest sein).
                          • Header und Navigation habe ich in getrennte Includes gepackt. Ich denke, das ist im Hinblick auf die Pflege günstiger. Ist aber nur meine persönliche Ansicht. Als Schmankerl könnte jetzt noch kommen, dass die aktuell angezeigte Seite in der Navigation nicht verlinkt ist. Das, liebe Zuschauer, zeigen wir Ihnen morgen. ;-)

                          So long,
                           Martin

                          --
                          Nothing travels faster than the speed of light with the possible exception of bad news, which obeys its own special laws.
                          - Douglas Adams, The Hitchhiker's Guide To The Galaxy
                      2. problematische Seite

                        der Link "Über uns" enthält Text und 4 Bilder. Mein Ziel ist nun dass der Text 75% der Breite einnimmt und die Bilder in den restlichen 25% maximal skaliert untereinander erscheinen. Brauche ich dafür 2 oder 3 divs (1 Eltern div 2 Kind div)? Oder macht es Sinn einfache eine Tabelle in der "Über uns" Datei zu erstellen, die in 75%/25% teilt?

                        1. problematische Seite

                          Hi,

                          der Link "Über uns" enthält Text und 4 Bilder.

                          der Link oder die verlinkte Seite?

                          Mein Ziel ist nun dass der Text 75% der Breite einnimmt und die Bilder in den restlichen 25% maximal skaliert untereinander erscheinen. Brauche ich dafür 2 oder 3 divs (1 Eltern div 2 Kind div)?

                          Weder noch. Meine erste Idee wäre, die Bilder mit float:left und max-width:25% zu formatieren, und das umgebende main- oder div-Element mit padding-left:25%; (oder eben entsprechend right, wenn die Bilder rechts stehen sollen). Bei den Bildern max-width und nicht width, damit breite Bilder zwar verkleinert, schmale aber nicht vergrößert werden.

                          Oder macht es Sinn einfache eine Tabelle in der "Über uns" Datei zu erstellen, die in 75%/25% teilt?

                          Das ist die Methode der 90er Jahre. ;-)

                          So long,
                           Martin

                          --
                          Nothing travels faster than the speed of light with the possible exception of bad news, which obeys its own special laws.
                          - Douglas Adams, The Hitchhiker's Guide To The Galaxy
                          1. problematische Seite

                            So, habs erstmal geschafft. Puh! Sieht schon ganz gut aus oder? :)

                            1. problematische Seite

                              Moin,

                              So, habs erstmal geschafft. Puh! Sieht schon ganz gut aus oder? :)

                              ja, "von außen" betrachtet auf jeden Fall. Mir persönlich ist der visuelle Gesamteindruck ein bisschen zu nüchtern. Klar, es soll seriös wirken und nicht verspielt, aber vielleicht könnte man es doch durch dezente farbige Akzente noch etwas aufwerten. Ein Hintergrund, der von oben nach unten in einer zarten Pastellfarbe zu Weiß hin verläuft? Vielleicht auch der sparsame(!) Einsatz von Rahmenlinien bei einzelnen Elementen, evtl. in Kombination mit Schatten?

                              Wenn ich mal durch die übrigen Seiten blättere, fällt mir negativ auf, dass du noch einen bunten Mix aus Deutsch und Englisch hast - vor allem englische Überschriften. Da würde ich nochmal sorgfältig drübergehen. Das eine oder andere Bild ist noch optimierungsbedürftig, etwa die übereinander liegenden Teppiche auf "Sammlung". Das würde ich auch noch in JPEG umwandeln, dann kommst du vermutlich mit 50k gut aus (momentan ist es ein PNG mit fast 400k).

                              Ein Blick unter die Haube enthüllt noch ein paar Kleinigkeiten.

                              • Anführungszeichen: Wenn Attributwerte nur aus Buchstaben und Ziffern bestehen, dürfen die Anführungszeichen weggelassen werden (so wie bei <html lang=DE>). Es ist aber üblich und empfohlen, grundsätzlich Anführungszeichen zu setzen.
                              • Du notierst das bisbee-Logo als <img ...></img>. Das ist falsch. Erlaubt ist die XHTML-Schreibweise <img ... />, oder eben die gewöhnliche HTML-Schreibweise <img ...>. Bei den meta-Elementen verwendest du übrigens beide Schreibweisen im Mix. Nicht schön. Entscheide dich doch bitte für eine.
                              • Da hat sich direkt im Anschluss an die Hauptnavigation ein schließendes body-Tag eingeschlichen, das da nichts verloren hat. Nach der Sub-Navigation (wo eine existiert) übrigens ebenso, da ist sogar ein schließendes </html>.
                              • In der Sub-Navigation auf Sammlung steht ein h3-Element als Kindelement in der Liste (ul). Nicht erlaubt. Ein ul darf nur li als Kindelemente haben. Die Überschrift muss also raus aus der Liste.

                              Nachdem du nun schon den HTML-5-DOCTYPE verwendest, bleibt noch die Frage, warum du nicht auch die sinntragenden Elemente von HTML 5 nimmst (vor allem header, nav und main), sondern immer noch bei neutralen div-Elementen bleibst.

                              So long,
                               Martin

                              --
                              Nothing travels faster than the speed of light with the possible exception of bad news, which obeys its own special laws.
                              - Douglas Adams, The Hitchhiker's Guide To The Galaxy
                              1. problematische Seite

                                @@Der Martin

                                • Du notierst das bisbee-Logo als <img ...></img>. Das ist falsch.

                                In XHTML[1] wäre das durchaus richtig.

                                Der HTML-Parser kommt damit auch klar: er wertet das <img …>-Tag aus und ignoriert das ihm unbekannte </img>-Tag. Was aber nicht heißen soll, dass man die Schreibweise verwenden sollte.

                                Was beim Logo noch falsch ist: durch die Angabe der Breite in Prozent wird es auf kleinen Viewports zu klein. Es sollte noch eine Mindestbreite (CSS: min-width) verpasst bekommen.

                                LLAP 🖖

                                --
                                “There’s no such thing as an ‘average’ user, but there is such a thing as an average developer.” —Vitaly Friedman in Accessibility Matters: Meet Our New Book, “Inclusive Design Patterns”
                                Selfcode: sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|

                                1. im HTML5-Verständnis, was XHTML ist: nicht nur XML-Syntax, sondern auch Auslieferung/Verarbeitung als application/xhtml+xml ↩︎

                                1. problematische Seite

                                  Was beim Logo noch falsch ist: durch die Angabe der Breite in Prozent wird es auf kleinen Viewports zu klein. Es sollte noch eine Mindestbreite (CSS: min-width) verpasst bekommen.

                                  Ich werde das Logo wohl durch Schrift ersetzen, da es mobil und im IE nicht gut aussieht.

                                  1. problematische Seite

                                    Hej Martin,

                                    Was beim Logo noch falsch ist: durch die Angabe der Breite in Prozent wird es auf kleinen Viewports zu klein. Es sollte noch eine Mindestbreite (CSS: min-width) verpasst bekommen.

                                    Ich werde das Logo wohl durch Schrift ersetzen, da es mobil und im IE nicht gut aussieht.

                                    Wann immer möglich ist es gut auf Schriftgrafiken zu verzichten. Ein Logo ist da so ein Sonderfall. Man kann das hinbekommen, wenn man Einfluss nehmen kann auf ein (noch zu entwickelndes) Corporate Design. Man nimmt dabei allerdings Einschränkungen und Kauf und sollte sich immer bewusst sein, dass mit CSS gestylte Schrift anders aussieht, wenn jemand eigene Styles verwendet. Kommt selten vor und ich persönlich könnte mit so einem Szenario gut leben. Da bin ich aber eine Ausnahme und wollte darauf hinweisen.

                                    Oft sind SVG eine gute Alternative zu png oder jpeg.

                                    Aber das wäre IMHO eine weitere Ausbaustufe. Vielleicht tut es ja Schrift für das erste. Kann man auch sehr schöne Sachen mit machen. Hier würde ich aber besonders darauf achten, Techniken zu verwenden, die von allen Browsern unterstützt werden, denn das Logo soll sicher nicht in jedem Browser anders aussehen...

                                    Marc

                                    1. problematische Seite

                                      @@marctrix

                                      Oft sind SVG eine gute Alternative zu png oder jpeg.

                                      Für Logos ist SVG gut, aber nicht Alternative – alternativlos gut.

                                      Hier würde ich aber besonders darauf achten, Techniken zu verwenden, die von allen Browsern unterstützt werden

                                      Grün soweit das Auge reicht.

                                      denn das Logo soll sicher nicht in jedem Browser anders aussehen...

                                      do logos need to look exactly the same in every browser .com ;-)

                                      Wenn’s denn sein muss, kann man ja als Fallback noch ein PNG anbieten – zusätzlich zum Alternativtext, der auf jeden Fall da sein muss.

                                      LLAP 🖖

                                      --
                                      “There’s no such thing as an ‘average’ user, but there is such a thing as an average developer.” —Vitaly Friedman in Accessibility Matters: Meet Our New Book, “Inclusive Design Patterns”
                                      Selfcode: sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|
                                      1. problematische Seite

                                        Oft sind SVG eine gute Alternative zu png oder jpeg.

                                        hab das Logo jetzt als SVG drin, jetzt sieht es auch mobil und im IE gut aus!

                                        1. problematische Seite

                                          @@Martin Seidel

                                          hab das Logo jetzt als SVG drin

                                          Nein, nicht wirklich.

                                          jetzt sieht es auch mobil und im IE gut aus!

                                          Im Firefox auf dem Laptop sieht’s scheußlich aus.

                                          Es bringt nichts, eine Pixelgrafik in einen SVG-Container zu tun.

                                          SVG ist ein Vektorgrafik-Format. Du musst darin die Pfade (Konturen der Buchstaben) angeben.

                                          Womit ist das Logo erstellt? Mit einem Vektorgrafik-Programm (Illustrator, Inkscape, …?) Wenn nicht, dann müsstest du anhand der Pixelgrafik die Pfade in einem Vektorgrafik-Programm nachzeichen. Dauert je nach Übung etwa 5 bis 15 Minuten.

                                          LLAP 🖖

                                          --
                                          “There’s no such thing as an ‘average’ user, but there is such a thing as an average developer.” —Vitaly Friedman in Accessibility Matters: Meet Our New Book, “Inclusive Design Patterns”
                                          Selfcode: sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|
                                          1. problematische Seite

                                            Womit ist das Logo erstellt? Mit einem Vektorgrafik-Programm (Illustrator, Inkscape, …?) Wenn nicht, dann müsstest du anhand der Pixelgrafik die Pfade in einem Vektorgrafik-Programm nachzeichen. Dauert je nach Übung etwa 5 bis 15 Minuten.

                                            Ist mit inkscape gemahct, da kümmere ich mich dann noch mal drum .

                                            1. problematische Seite

                                              Hallo

                                              Ist mit inkscape gemahct, da kümmere ich mich dann noch mal drum .

                                              Dazu würde ich auch raten. Bei mir (Win 7) sieht das SVG-Logo unter Firefox und IE11 grausam aus. In Chrome und Opera ok.

                                              Nebenbei ist es auch deutlich größer als im png-Format.

                                              Das ist eher ein gewaltiger Rückschritt.

                                              Gruss

                                              MrMurphy

                                              1. problematische Seite

                                                @@MrMurphy1

                                                Nebenbei ist es auch deutlich größer als im png-Format.

                                                Das sollte nicht verwundern, wenn die PNG-Daten base64-codiert drinstehen:

                                                <image
                                                     width="1492"
                                                     height="302"
                                                     preserveAspectRatio="none"
                                                     style="image-rendering:optimizeQuality"
                                                     xlink:href="data:image/png;base64, data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABdQAAAEuCAYAAACH95CRAAAABmJLR0QA/wD/AP+gvaeTAAAACXBI
                                                WXMAAC4jAAAuIwF4pT92AAAAB3RJTUUH4AgEDgEn0w3ElAAAIABJREFUeNrs3XdUFdf+NvBnAEHp
                                                ⋮
                                                /wGYQDUUrEvpogAAAABJRU5ErkJggg==
                                                "
                                                     id="image3414"
                                                     x="0"
                                                     y="0" />
                                                

                                                Aua.

                                                LLAP 🖖

                                                --
                                                “There’s no such thing as an ‘average’ user, but there is such a thing as an average developer.” —Vitaly Friedman in Accessibility Matters: Meet Our New Book, “Inclusive Design Patterns”
                                                Selfcode: sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|
                                                1. problematische Seite

                                                  Hallo,

                                                  Nebenbei ist es auch deutlich größer als im png-Format.

                                                  Das sollte nicht verwundern, wenn die PNG-Daten base64-codiert drinstehen:

                                                  achso, ich hatte "größer" jetzt so verstanden, dass es größer dargestellt wird.

                                                  So long,
                                                   Martin

                                                  --
                                                  Nothing travels faster than the speed of light with the possible exception of bad news, which obeys its own special laws.
                                                  - Douglas Adams, The Hitchhiker's Guide To The Galaxy
                              2. problematische Seite

                                ja, "von außen" betrachtet auf jeden Fall. Mir persönlich ist der visuelle Gesamteindruck ein bisschen zu nüchtern. Klar, es soll seriös wirken und nicht verspielt, aber vielleicht könnte man es doch durch dezente farbige Akzente noch etwas aufwerten. Ein Hintergrund, der von oben nach unten in einer zarten Pastellfarbe zu Weiß hin [verläuft

                                ja da wird noch was gemacht.

                                Wenn ich mal durch die übrigen Seiten blättere, fällt mir negativ auf, dass du noch einen bunten Mix aus Deutsch und Englisch hast - vor allem englische Überschriften. Da würde ich nochmal sorgfältig drübergehen.

                                Ich muss noch mit dem Auftraggeber klären wie er das haben will, Anfangs hieß es alle Menüpunkte auf Englisch, jetzt hat der Sohn mir gesagt soll wohl doch teilweise Deutsch. Ist etwas anstregened wenn die Leute selbst noch nicht genau wissen was sie wollen.

                                Das eine oder andere Bild ist noch optimierungsbedürftig, etwa die übereinander liegenden Teppiche auf "Sammlung". Das würde ich auch noch in JPEG umwandeln, dann kommst du vermutlich mit 50k gut aus (momentan ist es ein PNG mit fast 400k).

                                done...

                                Ein Blick unter die Haube enthüllt noch ein paar Kleinigkeiten.

                                • Anführungszeichen: Wenn Attributwerte nur aus Buchstaben und Ziffern bestehen, dürfen die Anführungszeichen weggelassen werden (so wie bei <html lang=DE>). Es ist aber üblich und empfohlen, grundsätzlich Anführungszeichen zu setzen.
                                • Du notierst das bisbee-Logo als <img ...></img>. Das ist falsch. Erlaubt ist die XHTML-Schreibweise <img ... />, oder eben die gewöhnliche HTML-Schreibweise <img ...>. Bei den meta-Elementen verwendest du übrigens beide Schreibweisen im Mix. Nicht schön. Entscheide dich doch bitte für eine.
                                • Da hat sich direkt im Anschluss an die Hauptnavigation ein schließendes body-Tag eingeschlichen, das da nichts verloren hat. Nach der Sub-Navigation (wo eine existiert) übrigens ebenso, da ist sogar ein schließendes </html>.

                                done...

                                Nachdem du nun schon den HTML-5-DOCTYPE verwendest, bleibt noch die Frage, warum du nicht auch die sinntragenden Elemente von HTML 5 nimmst (vor allem header, nav und main), sondern immer noch bei neutralen div-Elementen bleibst.

                                also statt <div id="nav"> <nav>?

                                1. problematische Seite

                                  Hej Martin,

                                  also statt <div id="nav"> <nav>?

                                  Ja

                                  Marc

                              3. problematische Seite

                                • In der Sub-Navigation auf Sammlung steht ein h3-Element als Kindelement in der Liste (ul). Nicht erlaubt. Ein ul darf nur li als Kindelemente haben. Die Überschrift muss also raus aus der Liste.

                                Ich weiß nicht wie ich das anders machen kann,

                                <h3>Carpets</h3>
                                	
                                	<ul id="gal-nav">
                                            <li><a href="gal-carpets-zg.php">Zeitgenössisch</a></li>
                                            <li><a href="gal-carpets-kl.php">Klassisch</a></li>
                                            <li><a href="gal-carpets-nom.php">Nomaden- und <br>Dorfteppiche</a>
                                        </ul>
                                        <h3>Kilims</h3>
                                        	
                                	<ul id="gal-nav">
                                	    <li><a href="gal-kilims-zg.php">Zeitgenössisch</a></li>
                                            <li><a href="gal-kilims-nom.php">Nomaden- und <br>Dorfteppiche</a>
                                	</ul>
                                

                                so klappt es jedenfalls nicht...

                                1. problematische Seite

                                  Hallo

                                  … ein h3-Element als Kindelement in der Liste (ul). Nicht erlaubt. Ein ul darf nur li als Kindelemente haben. Die Überschrift muss also raus aus der Liste.

                                  Ich weiß nicht wie ich das anders machen kann,

                                  Grundsätzlich garnicht. Die Struktur sieht schlüssig aus. Ohne die Kenntnis des umgebenden Codes ist das aber nur eine grobe Einschätzung.

                                  <h3>Carpets</h3>
                                  	
                                  	<ul id="gal-nav">
                                              <li><a href="gal-carpets-zg.php">Zeitgenössisch</a></li>
                                              <li><a href="gal-carpets-kl.php">Klassisch</a></li>
                                              <li><a href="gal-carpets-nom.php">Nomaden- und <br>Dorfteppiche</a>
                                          </ul>
                                          <h3>Kilims</h3>
                                          	
                                  	<ul id="gal-nav">
                                  	    <li><a href="gal-kilims-zg.php">Zeitgenössisch</a></li>
                                              <li><a href="gal-kilims-nom.php">Nomaden- und <br>Dorfteppiche</a>
                                  	</ul>
                                  

                                  so klappt es jedenfalls nicht...

                                  Was „klappt … nicht“?

                                  Tschö, Auge

                                  --
                                  Wo wir Mängel selbst aufdecken, kann sich kein Gegner einnisten.
                                  Wolfgang Schneidewind *prust*
                                  1. problematische Seite

                                    Was „klappt … nicht“?

                                    die beiden Menüpunkte sind nicht mehr untereinander sondern schräg nebeneinander

                                    1. problematische Seite

                                      Hallo

                                      Was „klappt … nicht“?

                                      die beiden Menüpunkte sind nicht mehr untereinander sondern schräg nebeneinander

                                      Hmm, ich selbst bin momentan mit dem Firefox unterwegs. Auf der mit dem Punkt „Galerie“ verlinkten Seite sehe ich ein zentral angeordnetes Bild mit fünf Teppichen und links daneben die in deinem Vorposting gezeigte Navigation zu den einzelnen Sub-Galerien. Da ist aber weder in einer typischen Viewport-Breite eines Desktops (etwas über 1000px Breite) noch im Webentwickler-Tool „Bildschirmbreiten testen“ (mit 400px Breite) eine Verschiebung, wie du sie hier beschreibst, zu sehen.

                                      Allerdings überlagert das Bild in der Ecke links unten in schmalen Viewports den Hauptinhalt der Seite. Hier bietet sich der Einsatz der CSS-Eigenschaft background-image mit background-position, background-attachment, etc. oder allgemeiner background dringend an (siehe SelfWiki).

                                      Tschö, Auge

                                      --
                                      Wo wir Mängel selbst aufdecken, kann sich kein Gegner einnisten.
                                      Wolfgang Schneidewind *prust*
              2. problematische Seite

                Hej Der Martin und Martin Seiler (vor allem ;-),

                Die festen Höhen und Breiten Angaben habe ich verwendet damit der Inhalt in dem Hintergrundbild (Rahmen) bleibt, oder ist das nicht sinnvoll, bzw. ist es möglich den Rahmen auch über Codezeilen nachzubilden?

                das verstehe ich noch nicht so recht,

                er möchte wohl, dass sich das Hintergrund an die Größe seines Elementes anpasst. Das geht natürlich rein mit CSS, aber da sind wir noch nicht ;-)

                Behalte den Punkt mal im Kopf, @Martin Seidel...

                Eine andere Sache die mir noch Sorgen bereitet: wie schaffe ich es dass die Links im Main Bereich geöffnet werden?

                Wie meinst du das? Der Link fordert ein neues Dokument vom Server an, das wird geladen und angezeigt. Natürlich hat es dann einen anderen Inhalt im main-Element.

                Mit PHP kann man bereits auf dem Server Teile des Dokuments, die immer gleich bleiben, mit einer include-Anweisung einfügen. Dann muss man diese Teile als Autor nur einmal pflegen, der Nutzer hat aber trotzdem für jede URL ein vollständiges Dokument.

                Wirft aber Sicherheitsfragen auf, die beantwortet werden möchten und erzeugt eine langsamere Webseite. Nichts ist schneller als statisches HTML.

                Außerdem gibt es sinnvollerweise kaum Bereiche, die sich nicht ändern. Da sind ein paar Zeilen im header und - wenn vorhanden - der Footer. Die erstelle ich aber nicht jedesmal mit Copy&Paste. Ich speichere einfach ein vorhandenes Dokument unter einem neuen Namen.

                Dann schmeiße ich den Inhalt raus und ersetze ihn durch den, der in dieser Seite angezeigt werden soll. Außerdem passe ich Überschriften, title und natürlich die Navigation an, die sich selbstverstänbdlich ändern muss (man will schließlich nicht auf bereits geöffnete Seiten verlinken, die will man dagegen hervorheben, z.B. mittels strong).

                Verwende ich in dieser Seite eine andere Sprache, muss die Sprachangabe auch noch angepasst werden.

                Unverändert bleiben höchsten header und footer. An alles andere muss man immer ran!

                Sind aber nur Kleinigkeiten, die im Verhältnis zu der Mühe, die für sinnvollen Inhalt anfallen, vernachlässigbar sind. Bevor man da noch sicheres (!) php lernt und auf seinem Server aktuell hält und sichere Einstellungen aktiviert, macht man das schneller händisch.

                die Bereiche nav und head sind position:relative damit sie untereinander aufgebaut werden

                Das werden sie doch sowieso. Das ist das normale Verhalten von Blockelementen.

                So isses - aber genau das möchte er ja nicht. Feststehende header und footer sind aber nicht wirklich sinnvoll. Kann man natürlich machen, dann muss man sich aber um alle Bildschirme kümmern und z. B. mittels Schatten klar machen, was passiert.

                So zum Beispiel...

                Marc

                1. problematische Seite

                  Hallo,

                  Die festen Höhen und Breiten Angaben habe ich verwendet damit der Inhalt in dem Hintergrundbild (Rahmen) bleibt, oder ist das nicht sinnvoll, bzw. ist es möglich den Rahmen auch über Codezeilen nachzubilden?

                  das verstehe ich noch nicht so recht,

                  er möchte wohl, dass sich das Hintergrund an die Größe seines Elementes anpasst.

                  ja, hat er ja zwischenzeitlich erklärt: Das Hintergrundbild ist wohl "nur" ein Rahmen.

                  Das geht natürlich rein mit CSS, aber da sind wir noch nicht ;-)

                  Wenn du auf background-size anspielst: Da muss man beachten, dass sich dann die Rahmenstärke ändert. Kritisch anschauen und bewerten, wie's tatsächlich aussieht. Deswegen hatte ich border-image als Alternative ins Spiel gebracht.

                  Mit PHP kann man bereits auf dem Server Teile des Dokuments, die immer gleich bleiben, mit einer include-Anweisung einfügen. Dann muss man diese Teile als Autor nur einmal pflegen, der Nutzer hat aber trotzdem für jede URL ein vollständiges Dokument.

                  Wirft aber Sicherheitsfragen auf, die beantwortet werden möchten

                  Hatte ich auch schon dran gedacht. Aber solange man nur eine Handvoll includes verwendet, sehe ich da noch kein Risiko. Wenn man allerdings tiefer einsteigen möchte ...

                  und erzeugt eine langsamere Webseite. Nichts ist schneller als statisches HTML.

                  Ja. Aber im Verhältnis zur üblichen Latenz eines HTTP-Servers von zwei, drei Zehntelsekunden und mehr fällt das normalerweise nicht ins Gewicht.

                  Außerdem gibt es sinnvollerweise kaum Bereiche, die sich nicht ändern.

                  Header, Footer, Navigation. Je nachdem, wie aufwendig die gebaut und gestaltet sind, kann sich das durchaus lohnen - vor allem dann, wenn man an genau diesen Blöcken wieder Änderungen einpflegen will (oder muss). Habe ich die als separate Blöcke zum includen ausgelagert, muss ich nur an einer Stelle ändern, sonst in jeder einzelnen HTML-Datei.
                  Als Ausbaustufe dann eine dynamisch erzeugte Navigation, wie ich auch schon angedeutet habe.

                  Unverändert bleiben höchsten header und footer. An alles andere muss man immer ran!

                  Nicht unbedingt. Aber ich selbst praktiziere auch normalerweise den umgekehrten Weg: Ich habe nur ein PHP-Script als Hauptdokument, das das gesamte Seitengerüst erzeugt, variable Stellen (Seitentitel) dynamisch ersetzt und den eigentlichen Inhalt per include einfügt.

                  die Bereiche nav und head sind position:relative damit sie untereinander aufgebaut werden

                  Das werden sie doch sowieso. Das ist das normale Verhalten von Blockelementen.

                  So isses - aber genau das möchte er ja nicht.

                  Nicht? - Ich denke doch schon.

                  Feststehende header und footer sind aber nicht wirklich sinnvoll.

                  Davon war hier auch keine Rede. Oder hab ich was übersehen?

                  So long,
                   Martin

                  --
                  Nothing travels faster than the speed of light with the possible exception of bad news, which obeys its own special laws.
                  - Douglas Adams, The Hitchhiker's Guide To The Galaxy
                  1. problematische Seite

                    Hej Der Martin,

                    Mit PHP kann man bereits auf dem Server Teile des Dokuments, die immer gleich bleiben, mit einer include-Anweisung einfügen. Dann muss man diese Teile als Autor nur einmal pflegen, der Nutzer hat aber trotzdem für jede URL ein vollständiges Dokument.

                    Wirft aber Sicherheitsfragen auf, die beantwortet werden möchten

                    Hatte ich auch schon dran gedacht. Aber solange man nur eine Handvoll includes verwendet, sehe ich da noch kein Risiko. Wenn man allerdings tiefer einsteigen möchte ...

                    Es reicht schon eine nicht aktuelle Version laufen zu haben. Und das nur, um Bereiche, die sich eh nciht ändern, zu includen? Was spart man dabei? Die sind doch eh in jeder Datei drin, wenn ich eine bestehende Seite unter neuem Namen abspeicher. Ob da jetzt der gesamte Kladeradatsch steht oder nur das include kann mir doch egal sein...

                    und erzeugt eine langsamere Webseite. Nichts ist schneller als statisches HTML.

                    Ja. Aber im Verhältnis zur üblichen Latenz eines HTTP-Servers von zwei, drei Zehntelsekunden und mehr fällt das normalerweise nicht ins Gewicht.

                    Das ist mehr, als die meisten HTML-Seiten benötigen, um geladen zu werden. Also verändert sich die Ladezeit um 200 bis 300 Prozent - zum schlechten!

                    Außerdem gibt es sinnvollerweise kaum Bereiche, die sich nicht ändern.

                    Header, Footer, Navigation.

                    Header sind hier drei Zeilen, Footer gibt es nicht, Navi muss sich ändern. Bei der vorliegenden Seite nicht sinvoll...

                    Je nachdem, wie aufwendig die gebaut und gestaltet sind, kann sich das durchaus lohnen

                    Wie aufwändig muss es denn sein, damit es sich lohnt? Wir kennen doch die Seite, um die es geht.

                    vor allem dann, wenn man an genau diesen Blöcken wieder Änderungen einpflegen will (oder muss). Habe ich die als separate Blöcke zum includen ausgelagert, muss ich nur an einer Stelle ändern, sonst in jeder einzelnen HTML-Datei.

                    Ja, suchen und ersetzen. Ob nun in einer Datei oder in 1000 - ist ein Häkchen im Editor...

                    Als Ausbaustufe dann eine dynamisch erzeugte Navigation, wie ich auch schon angedeutet habe.

                    Unverändert bleiben höchsten header und footer. An alles andere muss man immer ran!

                    Nicht unbedingt. Aber ich selbst praktiziere auch normalerweise den umgekehrten Weg: Ich habe nur ein PHP-Script als Hauptdokument, das das gesamte Seitengerüst erzeugt, variable Stellen (Seitentitel) dynamisch ersetzt und den eigentlichen Inhalt per include einfügt.

                    Macht für komplexe Sites ja auch Sinn, wenn man sich um die Navigation z. B. gar nicht mehr kümmern möchte, sondern das Dateisystem ausliest und die Ordnerstruktur automatisch in die Navigation übertragen lässt.

                    Für so was ist php schließlich gedacht.

                    Ist dann aber mehr als ein include ;-)

                    die Bereiche nav und head sind position:relative damit sie untereinander aufgebaut werden

                    Das werden sie doch sowieso. Das ist das normale Verhalten von Blockelementen.

                    So isses - aber genau das möchte er ja nicht.

                    Nicht? - Ich denke doch schon.

                    Das kann @Martin Seidel ja aufklären. - Ich dachte, der header soll im sichtbaren Bereich bleiben, was ja auch gerade modern ist.

                    Feststehende header und footer sind aber nicht wirklich sinnvoll.

                    Davon war hier auch keine Rede. Oder hab ich was übersehen?

                    s. o. mal schauen, was der OP dazu sagt...

                    Marc

                    1. problematische Seite

                      Mahlzeit,

                      Wirft aber Sicherheitsfragen auf, die beantwortet werden möchten

                      Hatte ich auch schon dran gedacht. Aber solange man nur eine Handvoll includes verwendet, sehe ich da noch kein Risiko. Wenn man allerdings tiefer einsteigen möchte ...

                      Es reicht schon eine nicht aktuelle Version laufen zu haben.

                      das hat man als Hosting-Kunde aber nicht in der Hand - höchstens insofern, als man sich dann von einem Hoster verabschiedet.

                      und erzeugt eine langsamere Webseite. Nichts ist schneller als statisches HTML.

                      Ja. Aber im Verhältnis zur üblichen Latenz eines HTTP-Servers von zwei, drei Zehntelsekunden und mehr fällt das normalerweise nicht ins Gewicht.

                      Das ist mehr, als die meisten HTML-Seiten benötigen, um geladen zu werden.

                      Nein, das ist die Ladezeit einer x-beliebigen HTTP-Ressource. An meinem heimischen DSL-Anschluss liegen die ping-Antwortzeiten je nach Host so bei 30..50ms, aber die Wartezeit auf eine HTTP-Antwort liegt typischerweise bei 300..500ms, was sowohl Wireshark, als auch die Entwicklertools der Browser zeigen. Unabhängig vom Rechner, vom verwendeten Browser, sogar unabhängig vom Betriebssystem.
                      Schlussfolgerung: Die Ursache für die Verzögerung liegt "da draußen". Die Netzwerk-Infrastruktur kann's nicht sein, dann würden Pings auch länger brauchen, bleibt also nur der Server da draußen, denn wenn ich mit meinem Apachen im LAN rede, liegen die Antwortzeiten unter 100ms.

                      Also verändert sich die Ladezeit um 200 bis 300 Prozent - zum schlechten!

                      Nein, der zusätzliche Zeitbedarf durch PHP geht in der HTTP-Verzögerung komplett unter.

                      Ich habe nur ein PHP-Script als Hauptdokument, das das gesamte Seitengerüst erzeugt, variable Stellen (Seitentitel) dynamisch ersetzt und den eigentlichen Inhalt per include einfügt.

                      Macht für komplexe Sites ja auch Sinn, wenn man sich um die Navigation z. B. gar nicht mehr kümmern möchte, sondern das Dateisystem ausliest und die Ordnerstruktur automatisch in die Navigation übertragen lässt.

                      Nicht das Dateisystem, sondern eine Konfigurationsdatei. Aber das läuft auf dasselbe raus.

                      So long,
                       Martin

                      --
                      Nothing travels faster than the speed of light with the possible exception of bad news, which obeys its own special laws.
                      - Douglas Adams, The Hitchhiker's Guide To The Galaxy
                      1. problematische Seite

                        [... ]die Wartezeit auf eine HTTP-Antwort liegt typischerweise bei 300..500ms,

                        Das ist viel.

                        was sowohl Wireshark, als auch die Entwicklertools der Browser zeigen. Unabhängig vom Rechner, vom verwendeten Browser, sogar unabhängig vom Betriebssystem.
                        Schlussfolgerung: Die Ursache für die Verzögerung liegt "da draußen". Die Netzwerk-Infrastruktur kann's nicht sein, dann würden Pings auch länger brauchen, bleibt also nur der Server da draußen, denn wenn ich mit meinem Apachen im LAN rede, liegen die Antwortzeiten unter 100ms.

                        Gerade getestet, 82ms, DSL16K, Telekom:

                        http://www.spiegel.de/

                        Nein, der zusätzliche Zeitbedarf durch PHP geht in der HTTP-Verzögerung komplett unter.

                        Naja, den PHP-Interpreter anwerfen ist schön teurer als eine statische Ressource auszuliefern. Wenn dann noch DB-Connections und andere, teure Operationen dazu kommen, kann das bei enstprechendem Traffic zu einem Problem werden.

                        1. problematische Seite

                          Hallo,

                          [... ] die Wartezeit auf eine HTTP-Antwort liegt typischerweise bei 300..500ms,

                          Das ist viel.

                          kann schon sein, aber ich kenne es nicht anders.

                          Gerade getestet, 82ms, DSL16K, Telekom:

                          Das sind Zeiten, die ich mit dem Apachen im LAN erreiche.

                          Nein, der zusätzliche Zeitbedarf durch PHP geht in der HTTP-Verzögerung komplett unter.

                          Naja, den PHP-Interpreter anwerfen ist schön teurer als eine statische Ressource auszuliefern.

                          Klar, aber verglichen mit fast einer halben Sekunde Latenz? Da fällt das nicht mehr ins Gewicht. Aber selbst die knapp 100ms, die du eben gemessen hast, liegen um Größenordnungen höher als das, was der Server "wegen PHP" zusätzlich an Zeit braucht.

                          Ciao,
                           Martin

                          --
                          Nothing travels faster than the speed of light with the possible exception of bad news, which obeys its own special laws.
                          - Douglas Adams, The Hitchhiker's Guide To The Galaxy
                          1. problematische Seite

                            [... ] die Wartezeit auf eine HTTP-Antwort liegt typischerweise bei 300..500ms, Das ist viel. kann schon sein, aber ich kenne es nicht anders.

                            Kann schon sein, aber normal ist das nicht g

                            Nein, der zusätzliche Zeitbedarf durch PHP geht in der HTTP-Verzögerung komplett unter. Naja, den PHP-Interpreter anwerfen ist schön teurer als eine statische Ressource auszuliefern. Klar, aber verglichen mit fast einer halben Sekunde Latenz? Da fällt das nicht mehr ins Gewicht.

                            Naja, wenn die Latenz bei 10 Sekunden läge und PHP würde zusätzliche 500ms brauchen, würde das im Verhältnis auch nicht ins Gewicht fallen ;-)

                            Aber selbst die knapp 100ms, die du eben gemessen hast, liegen um Größenordnungen höher als das, was der Server "wegen PHP" zusätzlich an Zeit braucht.

                            Kommt darauf an. Zum einen ob PHP als mod_php oder als CGI läuft. Dann natürlich ganz wichtig, was man mit dem PHP dann anfängt: "Wenn dann noch DB-Connections und andere, teure Operationen dazu kommen, kann das bei enstprechendem Traffic zu einem Problem werden..."

                          2. problematische Seite

                            Hej Der Martin,

                            Klar, aber verglichen mit fast einer halben Sekunde Latenz? Da fällt das nicht mehr ins Gewicht.

                            Eine Sekunde (oder auch nur eine halbe) spart man selten an einer einzigen Stelle. Die Denke "das ist doch nicht viel" sollte sich gerade bei einem Beginner nicht festsetzen, sonst hat er bald Seiten die vier, fünf Sekunden brauchen, bevor sie übertragen und gerendert sind. - Eine Horror-Vorstellung!

                            Da ist so mancher Besucher schon weg. Im Mobilnetz kommt dann noch ein längerer Verbindungsaufbau on top...

                            Nicht nur wegen zwei include-Befehlen, aber wie gesagt, das Argument "ist doch nicht viel im Vergleich zum Rest" klingt mir zu sehr nach "darauf kommt es jetzt auch nicht mehr an" - und damit schaufelt man sich sein eigenes Performance-Grab. Sei froh, dass es so etwas nicht in Wirklichkeit gibt ;-)

                            Marc

                            1. problematische Seite

                              Hi,

                              Klar, aber verglichen mit fast einer halben Sekunde Latenz? Da fällt das nicht mehr ins Gewicht.

                              Eine Sekunde (oder auch nur eine halbe) spart man selten an einer einzigen Stelle. Die Denke "das ist doch nicht viel" sollte sich gerade bei einem Beginner nicht festsetzen

                              es ist eine Gratwanderung: Entweder Mikrooptimierung, oder kleine Performance-Einbußen einfach hinnehmen. Wenn systembedingt bereits Verzögerungen von deutlich über 100ms auftreten (ungeachtet der Tatsache, dass es wohl auch schneller geht), an denen ich nichts ändern kann, dann nützt es nichts, wenn ich irgendwo im Detail 2ms einsparen kann. Das ist wie bei einer Autofahrt von 400km Autobahn, die fast überall auf Tempo 100 begrenzt ist: Wenn ich auf den 10km, wo kein Templimit gilt, mal so richtig auf den Pinsel trete, ändert das an der Gesamt-Fahrzeit auch fast nichts (am Spritverbrauch aber einiges).

                              Nicht nur wegen zwei include-Befehlen, aber wie gesagt, das Argument "ist doch nicht viel im Vergleich zum Rest" klingt mir zu sehr nach "darauf kommt es jetzt auch nicht mehr an"

                              Aber genau so meinte ich das. Das wäre anders, wenn man eine Chance hätte, auch die relativ großen Verzögerungen kleiner zu kriegen. Aber dann würde ich auch vorzugsweise dort ansetzen.

                              So long,
                               Martin

                              --
                              Nothing travels faster than the speed of light with the possible exception of bad news, which obeys its own special laws.
                              - Douglas Adams, The Hitchhiker's Guide To The Galaxy
                              1. problematische Seite

                                Hej Der Martin,

                                Eine Sekunde (oder auch nur eine halbe) spart man selten an einer einzigen Stelle. Die Denke "das ist doch nicht viel" sollte sich gerade bei einem Beginner nicht festsetzen

                                Wenn ich auf den 10km, wo kein Templimit gilt, mal so richtig auf den Pinsel trete, ändert das an der Gesamt-Fahrzeit auch fast nichts (am Spritverbrauch aber einiges).

                                Es soll nur nicht zur Gewohnheit werden, auch dort wo keine Geschwindigkeitsbegrenzung ist, immer wieder mal kurz auf die Bremse zu treten. So entstehen nämlich Staus...

                                Marc

                                1. problematische Seite

                                  Hallo,

                                  Wenn ich auf den 10km, wo kein Templimit gilt, mal so richtig auf den Pinsel trete, ändert das an der Gesamt-Fahrzeit auch fast nichts (am Spritverbrauch aber einiges).

                                  Es soll nur nicht zur Gewohnheit werden, auch dort wo keine Geschwindigkeitsbegrenzung ist, immer wieder mal kurz auf die Bremse zu treten. So entstehen nämlich Staus...

                                  ja, und der Stau an sich ist noch das Harmloseste dabei.

                                  Letzten Juni, unterwegs mit den Eltern in Papas Auto. Niederländische Autobahn A50 bei Tempolimit 110. Lebhafter Verkehr, aber es fließt mit etwa 100km/h. Plötzlich latscht vier oder fünf Fahrzeuge weiter vorn ohne erkennbaren Grund einer auf die Bremse. Die Reaktion verstärkt sich von Fahrzeug zu Fahrzeug nach hinten, ich kann gar nicht mehr anders als blitzartig und volle Kanne in die Klötze zu treten. Der Brems-Assistent hilft noch nach, ABS setzt ein, ich ziehe noch beim Bremsen auf die Standspur. Gut so, denn dem Wagen hinter uns hätte es sonst nicht mehr gereicht. Im Rückspiegel sehe ich, dass es geschätzte fünf Autos hinter uns tatsächlich geknallt hat.
                                  Einmal tief durchschnaufen, Schweiß abwischen. Papa vom Beifahrersitz: "Hast aber klasse reagiert." Mit Lob ist er normalerweise sehr sparsam ...

                                  So long,
                                   Martin

                                  --
                                  Nothing travels faster than the speed of light with the possible exception of bad news, which obeys its own special laws.
                                  - Douglas Adams, The Hitchhiker's Guide To The Galaxy
                      2. problematische Seite

                        Hej Der Martin,

                        Wirft aber Sicherheitsfragen auf, die beantwortet werden möchten

                        Hatte ich auch schon dran gedacht. Aber solange man nur eine Handvoll includes verwendet, sehe ich da noch kein Risiko. Wenn man allerdings tiefer einsteigen möchte ...

                        Es reicht schon eine nicht aktuelle Version laufen zu haben.

                        das hat man als Hosting-Kunde aber nicht in der Hand - höchstens insofern, als man sich dann von einem Hoster verabschiedet.

                        Sag ich doch: Sicherheitsfragen um die man sich kümmern muss: Hosterwechsel (mit nachfolgendem DNS-bedingter Unerreichbarkeit der Seite für gefühlte 24 Stunden, vorher Unterschrift des Kunden einholen usw) oder eigenen Server betreiben mit nem Haufen Software, die aktuell gehalten werden muss usw

                        Dann ist man bald Frontender und Backender uns Sysadmin und Projektleiter - geht nicht gut!

                        Und alls nur, weil man den header und vielleicht noch die Navi nicht in jeder Seite drin haben will?

                        Mir wäre das zu viel Aufwand. Ich biete ja auch WP-Seiten an. Da hat man dann einen echten Mehrwert durch die Verwendung von php (dessen Vorteile ich schätze!), Hier aber scheint mir der Overhead in keinem Verhältnis zum "Gewinn".

                        Ich mache noch regelmäßig Seiten von der Hand für Kunden, von denen ich weiß, dass die selten oder nie neue Inhalte liefern.

                        und erzeugt eine langsamere Webseite. Nichts ist schneller als statisches HTML.

                        Ja. Aber im Verhältnis zur üblichen Latenz eines HTTP-Servers von zwei, drei Zehntelsekunden und mehr fällt das normalerweise nicht ins Gewicht.

                        Das ist mehr, als die meisten HTML-Seiten benötigen, um geladen zu werden.

                        Nein, das ist die Ladezeit einer x-beliebigen HTTP-Ressource. An meinem heimischen DSL-Anschluss liegen die ping-Antwortzeiten je nach Host so bei 30..50ms, aber die Wartezeit auf eine HTTP-Antwort liegt typischerweise bei 300..500ms, was sowohl Wireshark, als auch die Entwicklertools der Browser zeigen. Unabhängig vom Rechner, vom verwendeten Browser, sogar unabhängig vom Betriebssystem.
                        Schlussfolgerung: Die Ursache für die Verzögerung liegt "da draußen". Die Netzwerk-Infrastruktur kann's nicht sein, dann würden Pings auch länger brauchen, bleibt also nur der Server da draußen, denn wenn ich mit meinem Apachen im LAN rede, liegen die Antwortzeiten unter 100ms.

                        Mir ging es um die Skript-Laufzeit, die hinzu kommt. Hatte mich schon gewundert, dass die so lange sein soll bei einfachen include. - Hast du dazu interesshalber eine Zahl? Eine WP-Seite kommt deutlich spürbar langsamer als eine statische Seite. Belastbareres kann ich jetzt aus dem Kopf nicht liefern. Nur zur Info vorab: Mir ist klar, dass hinter einer WP-Seite deutlich mehr als ein include abzuarbeiten ist... ;-)

                        Also verändert sich die Ladezeit um 200 bis 300 Prozent - zum schlechten!

                        Nein, der zusätzliche Zeitbedarf durch PHP geht in der HTTP-Verzögerung komplett unter.

                        OK, muss ich so glauben. - Klingt auch plausibel.

                        Ich habe nur ein PHP-Script als Hauptdokument, das das gesamte Seitengerüst erzeugt, variable Stellen (Seitentitel) dynamisch ersetzt und den eigentlichen Inhalt per include einfügt.

                        Macht für komplexe Sites ja auch Sinn, wenn man sich um die Navigation z. B. gar nicht mehr kümmern möchte, sondern das Dateisystem ausliest und die Ordnerstruktur automatisch in die Navigation übertragen lässt.

                        Nicht das Dateisystem, sondern eine Konfigurationsdatei. Aber das läuft auf dasselbe raus.

                        Iiieh - Handarbeit! ;-)

                        Aber im Ernst: wenn man eine solche auch noch pflegen muss, wäre es dann nicht einfacher gewesen, man hätte header und navi im HTML gelassen?

                        Marc

                        1. problematische Seite

                          Hi,

                          Mir wäre das zu viel Aufwand. Ich biete ja auch WP-Seiten an.

                          die beiden Sätze stehen irgendwie im Widerspruch. Ist nicht gerade Wordpress ein Musterbeispiel für gigantisch viel Aufwand für Einrichtung, Konfiguration und Betrieb? Ich habe mich noch nicht näher damit befasst, hatte aber schon beim flüchtigen Hinsehen immer den Eindruck, das wäre ein Tieflader, obwohl ich eigentlich meist nur eine Sackkarre bräuchte. Das scheint aber für einige andere CMS auch zu gelten.

                          Mir ging es um die Skript-Laufzeit, die hinzu kommt.

                          Plus die Zeit, um den PHP-Prozess zu starten, das Script zu parsen und zu übersetzen. Die reine Script-Laufzeit ist da vermutlich nur ein kleiner Beitrag.

                          Hast du dazu interesshalber eine Zahl? Eine WP-Seite kommt deutlich spürbar langsamer als eine statische Seite.

                          Kein Wunder, das ist ja auch eine große Maschinerie, die da angeworfen wird.

                          Belastbareres kann ich jetzt aus dem Kopf nicht liefern. Nur zur Info vorab: Mir ist klar, dass hinter einer WP-Seite deutlich mehr als ein include abzuarbeiten ist... ;-)

                          Na also. ;-)

                          Nein, der zusätzliche Zeitbedarf durch PHP geht in der HTTP-Verzögerung komplett unter.

                          OK, muss ich so glauben. - Klingt auch plausibel.

                          Denke ich auch, da man hin und wieder Angaben liest, dass professionelle Server mehrere hundert Requests in der Sekunde bedienen können.

                          Nicht das Dateisystem, sondern eine Konfigurationsdatei. Aber das läuft auf dasselbe raus.

                          Iiieh - Handarbeit! ;-)

                          Auf jeden Fall. Ich bin ein großer Freund von expliziten Anweisungen und Konfigurationen.

                          Aber im Ernst: wenn man eine solche auch noch pflegen muss, wäre es dann nicht einfacher gewesen, man hätte header und navi im HTML gelassen?

                          Du vermengst zwei Dinge: Ich hatte hier nur als Alternative beschrieben, wie ich ein Webprojekt normalerweise organisiere.

                          Ciao,
                           Martin

                          --
                          Nothing travels faster than the speed of light with the possible exception of bad news, which obeys its own special laws.
                          - Douglas Adams, The Hitchhiker's Guide To The Galaxy
                      3. problematische Seite

                        Nein, das ist die Ladezeit einer x-beliebigen HTTP-Ressource. An meinem heimischen DSL-Anschluss liegen die ping-Antwortzeiten je nach Host so bei 30..50ms, aber die Wartezeit auf eine HTTP-Antwort liegt typischerweise bei 300..500ms, was sowohl Wireshark, als auch die Entwicklertools der Browser zeigen. Unabhängig vom Rechner, vom verwendeten Browser, sogar unabhängig vom Betriebssystem.

                        http://www.sport1.de/

                        73ms mit DNS-Auflösung(12ms). Ping:8-9ms. Irgendwo hast Du (oder Dein Provider / auf dem Weg dahin) einen Flaschenhals.

                    2. problematische Seite

                      Das kann @Martin Seidel ja aufklären. - Ich dachte, der header soll im sichtbaren Bereich bleiben, was ja auch gerade modern ist.

                      Feststehende header und footer sind aber nicht wirklich sinnvoll.

                      Davon war hier auch keine Rede. Oder hab ich was übersehen?

                      also wenn gemeint ist, dass header und nav beim runterscrollen sichtbar bleiben, dann kann ich das verneinen, das nimmt zuviel Platz weg, der wird zum Teppich angucken benötigt ;)

                      Macht für komplexe Sites ja auch Sinn, wenn man sich um die Navigation z. B. gar nicht mehr kümmern möchte, sondern das Dateisystem ausliest und die Ordnerstruktur automatisch in die Navigation übertragen lässt.

                      Meine Seite ist schon recht komplex geworden, sind knapp 100 php Seiten (durch die vielen Teppiche die alle eine eigene Beschreibung haben). Mir gefällt die php Sache ganz gut, ist es nicht sinnvoll das so zu lassen? Wobei es wirklich im Prinzip ja einfach ist am Ende der Bastelei alle php Anweisungen in den entsprechenden Dokumenten durch den Inhalt der .inc Datei zu ersetzen. Ich benuzte den Bluefish Editor, da geht sowas ganz gut.

                      1. problematische Seite

                        Hej Martin,

                        Macht für komplexe Sites ja auch Sinn, wenn man sich um die Navigation z. B. gar nicht mehr kümmern möchte, sondern das Dateisystem ausliest und die Ordnerstruktur automatisch in die Navigation übertragen lässt.

                        Meine Seite ist schon recht komplex geworden, sind knapp 100 php Seiten (durch die vielen Teppiche die alle eine eigene Beschreibung haben). Mir gefällt die php Sache ganz gut, ist es nicht sinnvoll das so zu lassen? Wobei es wirklich im Prinzip ja einfach ist am Ende der Bastelei alle php Anweisungen in den entsprechenden Dokumenten durch den Inhalt der .inc Datei zu ersetzen. Ich benuzte den Bluefish Editor, da geht sowas ganz gut.

                        Ja, aber wozu dann erst php überhaupt? ;-)

                        Für mich ist die Frage nicht so sehr, wie viele Seiten es gibt, sondern wie viele Seitentypen (also unterschiedliche Seiten) und wie strukturiert die Daten sind. Sind die strukturiert und sollen womöglich oft getauscht werden, macht php ggfs. mit DB dahinter sehr viel Sinn. Geht es darum mal hundert Seiten zu erstellen und da tut sich kaum was dran, kann es den Aufwand lohnen, das händisch zu machen, zumal Webangebote ohne php und DB ein paar Euro günstiger sind.

                        PHP und HTML lernen macht zwar Sinn, aber ggfs. wärest du mit einem CMS auch schneller und besser am Ziel. Denn dafür gibt es tonnenweise fertige professionelle Layouts, die man meist sehr komfortabel an das bestehende Corporate Design anpassen kann.

                        Aber das sind jetzt ganz grundlegende Gedanken, die zu sehr von Deiner konkreten Umsetzung weg führen. PHP ist hier vermutlich ok - insbesondere wenn man bedenkt, dass die Seite nach und nach mit mehr php angereichert wird!

                        Marc

                2. problematische Seite

                  Nichts ist schneller als statisches HTML.

                  Als Faustregel ist das OK, fachlich aber nicht ganz richtig. Ein eigens vorgeschalteter Caching-Proxy (z.B. Varnish) kann durchaus schneller sein, als ein Apache, der statische Ressourcen ausgibt.

          2. problematische Seite

            @@Der Martin

            Du deklarierst laut DOCTYPE XHTML 1.1 - warum? Es gibt IMO nur wenige Fälle, in denen das sinnvoll ist.

            Kannst du das genauer quantifizieren? Ich kann’s. ;-)

            Sinnvoller wäre XHTML 1.0 (Strict), HTML 4.01

            Nein, nein.

            oder eben zeitgemäß HTML 5.

            Ja, eben. Ohne „oder“.

            Wenn letzteres, dann könntest du auch einige der div-Elemente durch passendere aud damit aussagekräftigere Elemente austauschen.

            Wenn → Da. könntest → solltest.

            Der dritte Tippfehler ist unwichtig, den lass ich unkorrigiert. ;-)

            Da letzteres, solltest du dann auch einige der div-Elemente durch passendere aud damit aussagekräftigere Elemente austauschen.

            Das h2-Element könnte aber eine Gesamtüberschrift der Navigationsleiste sein. Wenn du sowas nicht haben möchtest - weg damit.

            Nicht so hastig, junger Freund. Sowas möchte man haben.

            Die Links könnte man als Liste auszeichnen. Muss man nicht,

            Sollte man aber. [ebenda]

            Für mich käme also sowas in der Art heraus (die meta-Elemente habe ich mal weggelassen, dafür eines ergänzt, das die Zeichencodierung angibt):

            Eines fehlt aber noch, sonst wird das nichts mit der Darstellung auf Mobilgeräten:

               <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
            
              <h1 id="adresse">GOLDMANN International Carpet Collection<br>bisbee (Hüxstr. 38, 23552 Lübeck Germany)</h1>
            

            Die Adresse als h1 auszuzeichnen ist aber auch eher grenzwertig.

            Ich würde das eher so machen:

            <header>
              <img src="images/bisbee.png" width="175" alt="logo">
              <h1>GOLDMANN International Carpet Collection</h1>
              <p><address>bisbee (Hüxstr. 38, 23552 Lübeck Germany)</address></p>
            </header>
            

            Und schon ist auch das br-Element weg.

             <nav>
              <h2>Platzhalter</h2>
            

            Da sollte natürlich nicht „Platzhalter“ stehen, sondern was Sinnvolles wie „Hauptnavigation“. Die Überschrift kann gern auch visuell versteckt werden.

               <li><a href="en/index.html" >EN</a>/li>
            

            Da sollte nicht „EN“ stehen, sondern was Sinnvolles wie „English“. Und das gehört auch nicht wirklich in die Hauptnavigation.

            LLAP 🖖

            --
            “There’s no such thing as an ‘average’ user, but there is such a thing as an average developer.” —Vitaly Friedman in Accessibility Matters: Meet Our New Book, “Inclusive Design Patterns”
            Selfcode: sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|
            1. problematische Seite

              @@Gunnar Bittersmann

              Die Adresse als h1 auszuzeichnen ist aber auch eher grenzwertig.

              Ich würde das eher so machen:

              <header>
                <img src="images/bisbee.png" width="175" alt="logo">
                <h1>GOLDMANN International Carpet Collection</h1>
                <p><address>bisbee (Hüxstr. 38, 23552 Lübeck Germany)</address></p>
              </header>
              

              Oder das bisbee-Logo ist die Überschrift; dann aber nicht mit „logo“ als Alternativtext, sondern eben „bisbee“:

              <header>
                <h1><img src="images/bisbee.png" width="175" alt="bisbee"></h1>
                <p><address>GOLDMANN International Carpet Collection<br/>
                bisbee (Hüxstr. 38, 23552 Lübeck Germany)</address></p>
              </header>
              

              Da sollte nicht „EN“ stehen, sondern was Sinnvolles wie „English“. Und das gehört auch nicht wirklich in die Hauptnavigation.

              Aber man könnte die Hauptnavigation und den Sprachwechsler mit in den header packen.

              LLAP 🖖

              --
              “There’s no such thing as an ‘average’ user, but there is such a thing as an average developer.” —Vitaly Friedman in Accessibility Matters: Meet Our New Book, “Inclusive Design Patterns”
              Selfcode: sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|
              1. problematische Seite

                @@Gunnar Bittersmann

                Aber man könnte die Hauptnavigation und den Sprachwechsler mit in den header packen.

                … und die Adresse aus dem header rausnehmen; die gehört eher in ein footer-Element.

                Was nicht heißen soll nach unten. header und footer sagen etwas über den Inhalt aus; nicht über die Plazierung auf der Seite.

                LLAP 🖖

                --
                “There’s no such thing as an ‘average’ user, but there is such a thing as an average developer.” —Vitaly Friedman in Accessibility Matters: Meet Our New Book, “Inclusive Design Patterns”
                Selfcode: sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|
                1. problematische Seite

                  Hallo,

                  header und footer sagen etwas über den Inhalt aus; nicht über die Plazierung auf der Seite.

                  sicher? Ich hatte bisher Header mit Kopfzeile, footer mit Fußzeile übersetzt. Klingt für mich exakt nach Bedeutung der Platzierung, ohne Information über den Inhalt. Wenn ich in meinen Briefen die Adresse jeweils oben auf jeder Seite haben möchte, soll ich die Zeile(n) da jetzt neuerdings "Fußzeile mit Position an der oberen Kante" benennen?

                  Gruß
                  Kalk

                  1. problematische Seite

                    Hi,

                    header und footer sagen etwas über den Inhalt aus; nicht über die Plazierung auf der Seite.

                    sicher? Ich hatte bisher Header mit Kopfzeile, footer mit Fußzeile übersetzt.

                    ja, ist auch schlüssig und logisch. Nur ist das Web kein Printmedium. Was man auf einem Blatt Papier typischerweise oben anordnet, muss auf einer Webseite nicht zwangsläufig auch am oberen Rand sein, sondern könnte stattdessen auch am linken Rand angeordnet sein.

                    Klingt für mich exakt nach Bedeutung der Platzierung, ohne Information über den Inhalt.

                    In den meisten Fällen werden Semantik (also Inhalt) und Gestaltung (also Position) vermutlich nicht gar so weit auseinanderliegen. Aber vielleicht sollte man zumindest ein bisschen abstrahieren und von den Bezeichnungen nicht zwingend auf die Positionierung schließen.

                    Wenn ich in meinen Briefen die Adresse jeweils oben auf jeder Seite haben möchte, soll ich die Zeile(n) da jetzt neuerdings "Fußzeile mit Position an der oberen Kante" benennen?

                    Wenn dir das gefällt. ;-)

                    So long,
                     Martin

                    --
                    Nothing travels faster than the speed of light with the possible exception of bad news, which obeys its own special laws.
                    - Douglas Adams, The Hitchhiker's Guide To The Galaxy
                  2. problematische Seite

                    Hej Tabellenkalk,

                    header und footer sagen etwas über den Inhalt aus; nicht über die Plazierung auf der Seite.

                    sicher?

                    Ja. Es gibt in HTML5 kein einziges Element, dass Rückschlüsse auf Position, Größe oder irgendeine andere optische Darstellung zuließe, auch wenn die Namen mancher Elemente das vermuten lassen.

                    Diese kann man sich so "übersetzen": Ein header enthält Informationen, die man meistens am oberen Ende präsentiert - es kommt aber nicht darauf an, wo diese Indormationen stehen, sondern welcher Art sie sind.

                    Das gilt auch für die in html5 nicht mehr unerwünschten (deprecated) Elemente b und i.

                    Nur weil Browser diese üblicherweise fett (bold) oder kursiv (italic) darstellen, heißt das nicht, dass sie für "fetten Text" oder "kursiven Text" stehen.

                    Jedes HTML5-Element ist eine semantische Aussage.

                    Ausnahmen: div und span, die lediglich der Gruppierung dienen.

                    Marc

                    1. problematische Seite

                      @@marctrix

                      Das gilt auch für die in html5 nicht mehr unerwünschten (deprecated) Elemente b und i.

                      b und i sind nicht unerwünscht.

                      Nur weil Browser diese üblicherweise fett (bold) oder kursiv (italic) darstellen, heißt das nicht, dass sie für "fetten Text" oder "kursiven Text" stehen.

                      Das ist richtig. Sie haben eine andere Bedeutung bekommen. (So wie auch hr.)

                      Guckst du Spec. Den W3C-i18n-Artikel dazu hatte ich eben schon verlinkt.

                      Jedes HTML5-Element ist eine semantische Aussage.

                      Ausnahmen: div und span, die lediglich der Gruppierung dienen.

                      Wobei die durch typeof- und property-Attribute oder deren microdata-Pendants oder microformat-Klassen durchaus auch eine semantische Aussage bekommen können. Und zwar eine wirklich semantische – bezogen auf den Inhalt, nicht auf die Dokumentstruktur.

                      LLAP 🖖

                      --
                      “The best way to help people learn: answer their coding question an hour later, they’ll have likely figured it out by then.” —Todd Motto
                      Selfcode: sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|
                      1. problematische Seite

                        Hej Gunnar,

                        @@marctrix

                        Das gilt auch für die in html5 nicht mehr unerwünschten (deprecated) Elemente b und i.

                        b und i sind nicht unerwünscht.

                        Ich rechne das mal dem warmen Wetter in Kombination mit der doppelten Verneinung zu... ;-)

                        Sie haben eine andere Bedeutung bekommen. (So wie auch hr.)

                        Oder dl...

                        Jedes HTML5-Element ist eine semantische Aussage.

                        Ausnahmen: div und span, die lediglich der Gruppierung dienen.

                        Wobei die durch typeof- und property-Attribute oder deren microdata-Pendants oder microformat-Klassen durchaus auch eine semantische Aussage bekommen können. Und zwar eine wirklich semantische – bezogen auf den Inhalt, nicht auf die Dokumentstruktur.

                        Sehr schöner Hinweis. Viele implizite Dinge muss man sich immer wieder ins Bewusstsein rufen, um sie dem aktiven Wortschatz hinzuzufügen und nicht im passiven Wortschatz versauern zu lassen!

                        Marc

                        1. problematische Seite

                          @@marctrix

                          Das gilt auch für die in html5 nicht mehr unerwünschten (deprecated) Elemente b und i.

                          b und i sind nicht unerwünscht.

                          Ich rechne das mal dem warmen Wetter in Kombination mit der doppelten Verneinung zu... ;-)

                          Oh, du sagtest dasselbe wie ich‽

                          Das Wetter bei uns ist gerade recht angenehm:

                          Berlin, Kultubrauerei, Sommerhimmel

                          Heiter, nicht zu heiß … Aber ich will mir jetzt nicht meine Ausrede verderben.

                          LLAP 🖖

                          --
                          “The best way to help people learn: answer their coding question an hour later, they’ll have likely figured it out by then.” —Todd Motto
                          Selfcode: sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|
                  3. problematische Seite

                    @@Tabellenkalk

                    header und footer sagen etwas über den Inhalt aus; nicht über die Plazierung auf der Seite.

                    sicher?

                    Sicher.

                    Es geht um header und footer, nicht um Header und Footer. Die Typographie macht den Unterschied.

                    Ich hatte bisher Header mit Kopfzeile, footer mit Fußzeile übersetzt.

                    Und du übersetzst auch b mit bold; i mit italic?

                    Klingt für mich exakt nach Bedeutung der Platzierung, ohne Information über den Inhalt.

                    Alle HTML-Elemente sagen was über den Inhalt[1], auch wenn sich ihre Bezeichnung ursprünglich aus ihrer häufig anzutreffenden Darstellung ableitet.[2]

                    Guckst du Spec: “The header element represents introductory content for its nearest ancestor sectioning content or sectioning root element. A header typically contains a group of introductory or navigational aids.”

                    Guckst du Spec: “The footer element represents a footer for its nearest ancestor sectioning content or sectioning root element. A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.”

                    Das liest sich für mich so, dass die Adresse eher in einen footer denn in einen header gehört.

                    Ein Beispiel, wo der footer gleich nach dem header oben auf der Seite steht, hab ich natürlich auch parat.[3] Beachte, dass es unten noch einen weiteren footer gibt; das ist aber nicht immer so.

                    LLAP 🖖

                    --
                    “The best way to help people learn: answer their coding question an hour later, they’ll have likely figured it out by then.” —Todd Motto
                    Selfcode: sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|

                    1. Naja, fast alle. br und hr sind Mut zur Lücke. ↩︎

                    2. Hier kann hr als Beispiel mithalten; das steht nicht (mehr) für horizontal rule. ↩︎

                    3. Was auch gleich ein Beispiel für die Auszeichnung von Zeilen, nicht von br-Lücken ist. ↩︎

          3. problematische Seite

            Schauen wir uns nun mal das Stylesheet an. Da sind eine Menge fester Breiten- und Höhenangaben in Pixel (px). Weg damit! Größen in px passen praktisch nie zum Browserfenster des Besuchers, und sie verhindern, dass die Seite sauber mit der Größe mitskaliert. Auch Schriftgrößen in px sind eine schlechte Idee, verwende besser Prozent oder em.

            Hab die Schrift auf em gestellt. Jetzt ist die schrift im Internet explorer 6 so klein dass man sie kaum lesen kann.

            1. problematische Seite

              Hallo

              Zwei Fragen.

              Hab die Schrift auf em gestellt. Jetzt ist die schrift im Internet explorer 6 so klein dass man sie kaum lesen kann.

              1. Welche Werte – nicht Einheit(en) – für die Schriftgröße benutzt du denn?
              2. Welchen Grund gibt es für dich, noch den IE6 zu unterstützen?

              Tschö, Auge

              --
              Wo wir Mängel selbst aufdecken, kann sich kein Gegner einnisten.
              Wolfgang Schneidewind *prust*
            2. problematische Seite

              Hi,

              Auch Schriftgrößen in px sind eine schlechte Idee, verwende besser Prozent oder em.

              Hab die Schrift auf em gestellt.

              und wieviel em?

              Jetzt ist die schrift im Internet explorer 6 so klein dass man sie kaum lesen kann.

              Sitzt du gerade in einem Museum?? Du willst dich nicht ernsthaft noch um einen IE6 kümmern? Ehrlich, XP ist eigentlich tot, dennoch findet man noch zahlreiche Exemplare in freier Wildbahn. Aber selbst unter XP kann man den IE bis Version 8 upgraden.
              AFAIR gab es bei alten IEs tatsächlich mal einen Bug bei der Berechnung der Schriftgröße. Ist aber meines Erachtens wirklich nicht mehr relevant.

              Bedenke, dass sowohl % als auch em relativ zur Schriftgröße des Elternelements sind. Die Angaben multiplizieren sich also entlang der Ahnenreihe. Das gilt aber für alle Browser.

              So long,
               Martin

              --
              Nothing travels faster than the speed of light with the possible exception of bad news, which obeys its own special laws.
              - Douglas Adams, The Hitchhiker's Guide To The Galaxy
              1. problematische Seite

                Hallo

                Jetzt ist die schrift im Internet explorer 6 so klein dass man sie kaum lesen kann.

                Sitzt du gerade in einem Museum?? Du willst dich nicht ernsthaft noch um einen IE6 kümmern? Ehrlich, XP ist eigentlich tot, dennoch findet man noch zahlreiche Exemplare in freier Wildbahn. Aber selbst unter XP kann man den IE bis Version 8 upgraden.

                … oder einen anderen Browser verwenden.

                AFAIR gab es bei alten IEs tatsächlich mal einen Bug bei der Berechnung der Schriftgröße.

                Das war vermutlich der Rundungsbug, dessentwegen man die Schriftgröße des Wurzelelements mit 100.1% oder 100.01% angab.

                Man, ist das lange her.

                Tschö, Auge

                --
                Wo wir Mängel selbst aufdecken, kann sich kein Gegner einnisten.
                Wolfgang Schneidewind *prust*
                1. problematische Seite

                  Hi,

                  Aber selbst unter XP kann man den IE bis Version 8 upgraden.

                  … oder einen anderen Browser verwenden.

                  stimmt, das geht natürlic hauch. Ich meinte das auch nur als Rechtfertigung, den IE8 eventuell doch noch in die Reihe der Testkandidaten aufzunehmen und zumindest soweit zu berücksichtigen, dass die Seite auch damit noch benutzbar bleibt. Nicht unbedingt schön oder modern.

                  AFAIR gab es bei alten IEs tatsächlich mal einen Bug bei der Berechnung der Schriftgröße.

                  Das war vermutlich der Rundungsbug, dessentwegen man die Schriftgröße des Wurzelelements mit 100.1% oder 100.01% angab.

                  Stimmt, das war's!

                  Man, ist das lange her.

                  Da sagst du was ...

                  Ciao,
                   Martin

                  --
                  Nothing travels faster than the speed of light with the possible exception of bad news, which obeys its own special laws.
                  - Douglas Adams, The Hitchhiker's Guide To The Galaxy
              2. problematische Seite

                Sitzt du gerade in einem Museum?? Du willst dich nicht ernsthaft noch um einen IE6 kümmern?

                Ich nicht, mein Auftraggeber leider schon und es könnte sogar sein, dass Leute die alte Teppiche kaufen auch einen antiken Computer zuhause rumstehen haben auf dem noch Windows XP läuft, gruselig aber nicht unrealistisch.

                1. problematische Seite

                  @@Martin Seidel

                  Du willst dich nicht ernsthaft noch um einen IE6 kümmern?

                  Ich nicht, mein Auftraggeber leider schon

                  Erkläre es ihm so.

                  LLAP 🖖

                  --
                  “There’s no such thing as an ‘average’ user, but there is such a thing as an average developer.” —Vitaly Friedman in Accessibility Matters: Meet Our New Book, “Inclusive Design Patterns”
                  Selfcode: sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|
            3. problematische Seite

              @@Martin Seidel

              Hab die Schrift auf em gestellt. Jetzt ist die schrift im Internet explorer 6 so klein dass man sie kaum lesen kann.

              Wenn du das Stylesheet so einbindest, sollte die Schrift im IE 6 lesbar sein:

              <![if gte IE 8]>
              <link href="style.css" rel="stylesheet"/>
              <![endif]>
              

              Ist vielleicht die beste Strategie, IE < 8 nicht falsch stylen zu lassen, sondern (so gut wie) gar nicht.

              LLAP 🖖

              --
              “There’s no such thing as an ‘average’ user, but there is such a thing as an average developer.” —Vitaly Friedman in Accessibility Matters: Meet Our New Book, “Inclusive Design Patterns”
              Selfcode: sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|
              1. problematische Seite

                @@Gunnar Bittersmann

                <![if gte IE 8]>
                <link href="style.css" rel="stylesheet"/>
                <![endif]>
                

                Oder richtig auskommentiert:

                <!--[if gte IE 8]><!-->
                <link href="style.css" rel="stylesheet"/>
                <!--<![endif]-->
                

                LLAP 🖖

                --
                “The best way to help people learn: answer their coding question an hour later, they’ll have likely figured it out by then.” —Todd Motto
                Selfcode: sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|
            4. problematische Seite

              Hej Martin,

              Hab die Schrift auf em gestellt. Jetzt ist die schrift im Internet explorer 6 so klein dass man sie kaum lesen kann.

              Spielt der IE6 bei deinem Projekt denn noch eine Rolle? - Hast du HTML-Fehler, die ihn in den Quirks-Modus schicken?

              Geht der nicht automatisch in den Quirks-Modus beim HTML-5-Doctype?

              Marc

              1. problematische Seite

                Spielt der IE6 bei deinem Projekt denn noch eine Rolle? - Hast du HTML-Fehler, die ihn in den Quirks-Modus schicken?

                Mein Auftraggeber möchte dass WinXP noch unterstützt wird...

                1. problematische Seite

                  Hej Martin,

                  Spielt der IE6 bei deinem Projekt denn noch eine Rolle? - Hast du HTML-Fehler, die ihn in den Quirks-Modus schicken?

                  Mein Auftraggeber möchte dass WinXP noch unterstützt wird...

                  Verstehe. Versuch doch mal mit ihm zu reden: alles was im IE6 nicht gut aussieht erst mal außen vor zu lassen und später "in Ordnung" zu bringen, falls die Statistiken das rechtfertigen.

                  Ist einen Versuch wert. - Vermutlich hättest du dann nichts mehr diesbezüglich zu tun...

                  Oder du erledigst das und bedankst dich für den extra verdienst höflich :-)

                  Marc

                2. problematische Seite

                  @@Martin Seidel

                  Mein Auftraggeber möchte dass WinXP noch unterstützt wird...

                  Wie Jeremy Keith sagte: „Ich unterstütze jeden Browser, ich optimiere für keinen.“

                  Müssen Webseiten in jedem Browser exakt gleich aussehen?

                  Sieh zu, dass die Website im IE 6 benutzbar ist. Das sollte genügen.

                  Mache deinem Auftraggeber klar, dass es doppelten Aufwand bedeuten würde, die Seiten im IE 6 so aussehen zu lassen wie in modernen Browsern. Heißt doppelte Kosten für ihn.

                  Schade ums Geld und um die Zeit.

                  LLAP 🖖

                  --
                  “There’s no such thing as an ‘average’ user, but there is such a thing as an average developer.” —Vitaly Friedman in Accessibility Matters: Meet Our New Book, “Inclusive Design Patterns”
                  Selfcode: sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|
              2. problematische Seite

                Hallo marctrix,

                Geht der [IE6] nicht automatisch in den Quirks-Modus beim HTML-5-Doctype?

                Der Doctype gerade deshalb so gewählt, weil kein Browser (der zwischen mehreren Modi wechseln kann) in den Quirksmodus wechselt.

                Bis demnächst
                Matthias

                --
                Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.
                1. problematische Seite

                  Hej Matthias,

                  Geht der [IE6] nicht automatisch in den Quirks-Modus beim HTML-5-Doctype?

                  Der Doctype gerade deshalb so gewählt, weil kein Browser (der zwischen mehreren Modi wechseln kann) in den Quirksmodus wechselt.

                  Ah - wieder was gelernt! - Oder wusste ich das schon mal?

                  Ist irgendwie alles schon eine gefühlte Ewigkeit her...

                  Marc

          4. problematische Seite

            Zum Beispiel header anstatt div#head, nav anstatt div#nav und main anstatt div#main.

            Ich habe jetzt <nav> und <header> in die .inc eingebaut. Ist das so richtig?

            1. problematische Seite

              Ich habe ein neues "Navigationsmenü" für die Einzelansicht erstellt. Dieses platzt aktuell in den Header rein, was vermutlich nicht sehr elegant ist, aber Platz ist Platz ;) Ist es möglich dem div container ein "on-top" attribut zu geben, damit bei der Mouseover Zoom funktion des Teppichs nicht das Menü verdeckt wird?

              Hier gehts zur Seite

              die Links Next und Previous werden aktuell durch <img hspace="2"/> etwas getrennt, was leider nicht funktioniert, da der Abstand real viel größer ist. Gibt es da eine bessere Alternative?

              1. problematische Seite

                Hej Martin,

                Ist es möglich dem div container ein "on-top" attribut zu geben, damit bei der Mouseover Zoom funktion des Teppichs nicht das Menü verdeckt wird?

                Z-Index

                Marc

              2. problematische Seite

                Hej Martin,

                die Links Next und Previous werden aktuell durch <img hspace="2"/> etwas getrennt, was leider nicht funktioniert, da der Abstand real viel größer ist. Gibt es da eine bessere Alternative?

                Immer mit css. ˋmarginˋ oder ˋpaddingˋ sollten das Problem lösen

                die Links verdecken bei mir das Menü...

                Marc

            2. problematische Seite

              @@Martin Seidel

              Ich habe jetzt <nav> und <header> in die .inc eingebaut. Ist das so richtig?

              Die Elemente kommen im generierten HTML an, also hast du wohl was richtig gemacht.

              Das Innere des header-Elements ist nicht so richtig. Dazu hatte ich schon was gesagt.

              LLAP 🖖

              --
              “There’s no such thing as an ‘average’ user, but there is such a thing as an average developer.” —Vitaly Friedman in Accessibility Matters: Meet Our New Book, “Inclusive Design Patterns”
              Selfcode: sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|
  5. problematische Seite

    Guten Abend,

    ich möchte dass in der Vorschau der Galerie 5 Bilder pro Reihe die Breite des Bildschirms füllen. Ich weiß aber nicht recht wie ich das machen soll, da Breiten Angaben sich in der img Anweisung ja auf das Bild selbst beziehen und nicht auf die Bildschirmbreite. Den Verfügbaren Platz in % kenne ich leider nicht, da ich für den Galerie Navigationsbereich links width=min eingestellt habe.

    Gruß Martin

    1. problematische Seite

      Hej Martin,

      eine Liste von Bildern ist in einer ul gut aufgehoben. Die Bilder befinden sich in den li - ggfs in einem zusätzlichen figure, insbesondere wenn sie eine Beschriftung erhalten sollen.

      Sorge dafür dass die li zu flexiblen Boxen werden, die sich den verfügbaren Platz gleichmäßig untereinander aufteilen. Flexboxen machen das. ul ist auch schon ein prima flex-box-Container, list-items machen sich auch prima als flex-items. ;-)

      Es gibt einen complete Guide to flexbox

      Den findest du sicher mit Google ;-)

      Dann musst du nur noch dafür sorgen, dass die Bilder genauso breit sind wie die li und sich ihre Höhe automatisch entsprechend anpasst...

      Marc

      1. problematische Seite

        @@marctrix

        ggfs in einem zusätzlichen figure, insbesondere wenn sie eine Beschriftung erhalten sollen.

        Eine Bildbeschriftung ist noch kein hinreichendees Kriterium dafür, dass figure angebracht wäre.

        “The figure element represents some flow content, optionally with a caption, that is self-contained (like a complete sentence) and is typically referenced as a single unit from the main flow of the document.” [HTML5]

        Also Abbildungen (innerhalb von Texten) – das können Bilder sein, aber auch Tabellen, Diagramme o.a. Bildunterschriften üblicherweise „Abb. 42: $Beschreibung“. Im Text könnte sowas stehen wie „wie in Abb. 42 zu sehen“ oder „siehe Abb. 42“.

        Trifft auf Thumbnailbilder in einer Liste zu, dass sie „self-contained“ wären?

        LLAP 🖖

        --
        “The best way to help people learn: answer their coding question an hour later, they’ll have likely figured it out by then.” —Todd Motto
        Selfcode: sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|
        1. problematische Seite

          Hej Gunnar,

          ggfs in einem zusätzlichen figure, insbesondere wenn sie eine Beschriftung erhalten sollen.

          Also Abbildungen (innerhalb von Texten) – das können Bilder sein, aber auch Tabellen, Diagramme o.a. Bildunterschriften üblicherweise „Abb. 42: $Beschreibung“. Im Text könnte sowas stehen wie „wie in Abb. 42 zu sehen“ oder „siehe Abb. 42“.

          Richtig!

          Trifft auf Thumbnailbilder in einer Liste zu, dass sie „self-contained“ wären?

          Nein, ich habe nicht genug nachgedacht vor diesem Satz. Tatsächlich weist eine Liste darauf hin, dass figure unangebracht ist. Es mag Ausnahmen geben, spontan fällt mir jedoch keine einzige ein.

          Danke für's Aufpassen, @Gunnar Bittersmann!

          Marc

    2. problematische Seite

      @@Martin Seidel

      ich möchte dass in der Vorschau der Galerie 5 Bilder pro Reihe die Breite des Bildschirms füllen.

      Könnte gerade so passen …

      da ich für den Galerie Navigationsbereich links width=min eingestellt habe.

      … aber nicht mit einem Menü daneben.

      Dabei gehe ich von üblichen Viewportbreiten aus, meine ist 320px.

      Wie soll die Seite auf dem Smartphone aussehen?

      LLAP 🖖

      --
      “The best way to help people learn: answer their coding question an hour later, they’ll have likely figured it out by then.” —Todd Motto
      Selfcode: sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|
      1. problematische Seite

        bei gehe ich von üblichen Viewportbreiten aus, meine ist 320px.

        Wie soll die Seite auf dem Smartphone aussehen?

        ja stimmt, das geht so nicht, also mein Arbeitgeber möchte dass bei normalem Bildschirm 5 Bilder nebeneinander sind, beim Smartphone sollte das natürlich nicht gelten.

        bis jetzt habe ich das mit einer heigth=200px Angabe erreicht und nach dem 5. Bild mit <br> einen Seitenumbruch erreicht. Der wird aber auch auf einem Smartphone gemacht, da sieht es dann nicht gut aus.

        1. problematische Seite

          @@Martin Seidel

          ja stimmt, das geht so nicht, also mein Arbeitgeber möchte dass bei normalem Bildschirm 5 Bilder nebeneinander sind, beim Smartphone sollte das natürlich nicht gelten.

          Was ist ein „normaler Bildschirm“?

          Heutzutage dürfte übrigens (je nach Zielgruppe) die Nutzung des Webs per Mobilgerät der Normalfall sein, per Desktop-PC die Ausnahme.

          „Beim Smartphone sollte das natürlich nicht gelten“ beantwortet nicht die Frage Was dann?

          LLAP 🖖

          --
          “The best way to help people learn: answer their coding question an hour later, they’ll have likely figured it out by then.” —Todd Motto
          Selfcode: sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|
          1. problematische Seite

            Was ist ein „normaler Bildschirm“?

            normaler Bildschirm in diesem Kontext: > 1024x768

            „Beim Smartphone sollte das natürlich nicht gelten“ beantwortet nicht die Frage Was dann?

            Beim Smartphone sehen 2 Bilder nebeneinander, wie es aktuell der Fall ist, recht gut aus. Nur wird zur Zeit noch beim 5. Bild ein Zeilenubmruch gemacht, was wiederum nicht gut aussieht. Link

          2. problematische Seite

            Hi,

            Heutzutage dürfte übrigens (je nach Zielgruppe) die Nutzung des Webs per Mobilgerät der Normalfall sein, per Desktop-PC die Ausnahme.

            das behauptest du gern und oft, ohne irgendwelche Zahlen zur Hand zu haben, die das unterfüttern. Würdest du die Aussage weniger extrem formulieren, wäre ich sogar geneigt, sie einfach zu glauben. Beispielsweise dass Mobilgeräte inzwischen genauso bedeutend sind wie Desktop-Geräte, oder dass der Anteil mobiler Nutzung stark zugenommen hat.

            Dass aber der Anteil der Mobil-Nutzung so hoch ist, dass er die Desktop-Fraktion zur "Ausnahme" deklassiert hat, halte ich für eine maßlose Übertreibung.

            Schönen Sonntag noch,
             Martin

            --
            Nothing travels faster than the speed of light with the possible exception of bad news, which obeys its own special laws.
            - Douglas Adams, The Hitchhiker's Guide To The Galaxy
            1. problematische Seite

              @@Der Martin

              Heutzutage dürfte übrigens (je nach Zielgruppe) die Nutzung des Webs per Mobilgerät der Normalfall sein, per Desktop-PC die Ausnahme.

              das behauptest du gern und oft, ohne irgendwelche Zahlen zur Hand zu haben, die das unterfüttern.

              Sowas in der Art?

              Nun ist das Fratzenbuch nicht das Maß aller Dinge (und wird es hoffentlich auch nie werden), in Deutschland mag die Nutzung von Desktop-PC gegenüber Mobilgeräten noch verbreiteter sein als weltweit und der jeweilige Anteil sowieso je nach Zielgruppe der Webseite/Applikation variieren.

              Ich hatte „je nach Zielgruppe“ aus stilistischen Gründen (Sprechpause) in Klammern getan, nicht weil es weniger bedeutend wäre. Gedankenstriche wären vielleicht passender gewesen.

              Aber der generelle Trend dürfte für alle Zielgruppen gleich sein: mobil rauf, Desktop runter. Bei etlichen Zielgruppen haben sich die Graphen längst gekreuzt, bei manchen steht das noch bevor – aber es kommt.

              Würdest du die Aussage weniger extrem formulieren, wäre ich sogar geneigt, sie einfach zu glauben. Beispielsweise dass Mobilgeräte inzwischen genauso bedeutend sind wie Desktop-Geräte, oder dass der Anteil mobiler Nutzung stark zugenommen hat.

              Jaja, schon gut, das war etwas polemisch formuliert …

              Dass aber der Anteil der Mobil-Nutzung so hoch ist, dass er die Desktop-Fraktion zur "Ausnahme" deklassiert hat, halte ich für eine maßlose Übertreibung.

              … doch aus dem Zusammenhang sollte hervorgehen, dass „Normalfall“/„Ausnahme“ für „Mehrheit“/„Minderheit“ stehen sollen. Ich hatte hier des anderen Martins Formulierung „normaler Bildschirm“ aufgegriffen.

              LLAP 🖖

              --
              “The best way to help people learn: answer their coding question an hour later, they’ll have likely figured it out by then.” —Todd Motto
              Selfcode: sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|
              1. problematische Seite

                Moin,

                das behauptest du gern und oft, ohne irgendwelche Zahlen zur Hand zu haben, die das unterfüttern.

                Sowas in der Art?

                ja, zum Beispiel, auch wenn ...

                Nun ist das Fratzenbuch nicht das Maß aller Dinge (und wird es hoffentlich auch nie werden)

                ... ich da derselben Meinung bin. Sicher ist die Menge der facebook-Nutzer eine riesige, aber doch sehr spezifische Zielgruppe. Aber wenn man von Internet-Nutzung spricht, meint man oft nur die private Nutzung, vergisst aber die Millionen von Arbeitsplatz-PCs in Firmen und Behörden. Und oft auch die Tatsache, dass das Internet ja nicht auf das WWW beschränkt ist.

                Würdest du die Aussage weniger extrem formulieren, wäre ich sogar geneigt, sie einfach zu glauben. Beispielsweise dass Mobilgeräte inzwischen genauso bedeutend sind wie Desktop-Geräte, oder dass der Anteil mobiler Nutzung stark zugenommen hat.

                Jaja, schon gut, das war etwas polemisch formuliert …

                Ich hatte den Vorwurf der Polemik schon dastehen, hab's dann aber doch wieder entschärft. ;-)

                Dass aber der Anteil der Mobil-Nutzung so hoch ist, dass er die Desktop-Fraktion zur "Ausnahme" deklassiert hat, halte ich für eine maßlose Übertreibung.

                … doch aus dem Zusammenhang sollte hervorgehen, dass „Normalfall“/„Ausnahme“ für „Mehrheit“/„Minderheit“ stehen.

                Natürlich. Aber gerade die Verhältnisse zueinander kann ich nicht einschätzen und halte den Desktop über alle Arten der Internet-Nutzung betrachtet immer noch für führend, auch wenn du zweifellos recht hast, was die Trends angeht.

                Ich hatte hier des anderen Martins Formulierung „normaler Bildschirm“ aufgegriffen.

                Ja. Und da wären wir wieder bei schwierigen Einschätzungen. Zählt ein Notebook mit UMTS-Modem (oder angeschlossenem Handy als Modem) zu den Mobilgeräten? Für mich zweifellos. Auch wenn es ein Full-HD-Display hat. Es funktioniert also nicht, die Unterscheidung stationär vs. mobil an die Bildschirmgröße zu koppeln.
                Aber das hat Martin Seidel ja auch gar nicht vor; für ihn geht es tatsächlich um den verfügbaren Platz auf dem Display. Da den Begriff der Mobilgeräte ins Spiel zu bringen, ist eigentlich irreführend.

                So long,
                 Martin

                --
                Nothing travels faster than the speed of light with the possible exception of bad news, which obeys its own special laws.
                - Douglas Adams, The Hitchhiker's Guide To The Galaxy
                1. problematische Seite

                  @@Der Martin

                  Ich hatte den Vorwurf der Polemik schon dastehen, hab's dann aber doch wieder entschärft. ;-)

                  Also wegen mir[1] hättest du das nicht tun müssen. ;-)

                  Zählt ein Notebook mit UMTS-Modem (oder angeschlossenem Handy als Modem) zu den Mobilgeräten?

                  Auch wenn es mobil ist: nein, nach allgemeinem Sprachgebrauch nicht. Auch wenn du und ich das anders sehen.

                  Es funktioniert also nicht, die Unterscheidung stationär vs. mobil an die Bildschirmgröße zu koppeln.

                  Meine Rede.

                  LLAP 🖖

                  --
                  “The best way to help people learn: answer their coding question an hour later, they’ll have likely figured it out by then.” —Todd Motto
                  Selfcode: sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|

                  1. Rettet den Genitiv, meinetwegen. ↩︎

                2. problematische Seite

                  Hej Der Martin,

                  Nun ist das Fratzenbuch nicht das Maß aller Dinge (und wird es hoffentlich auch nie werden)

                  ... ich da derselben Meinung bin. Sicher ist die Menge der facebook-Nutzer eine riesige, aber doch sehr spezifische Zielgruppe.

                  Bekannte oder gar homogene Gruppen sind toll zum Experimentieren!

                  Dass aber der Anteil der Mobil-Nutzung so hoch ist, dass er die Desktop-Fraktion zur "Ausnahme" deklassiert hat, halte ich für eine maßlose Übertreibung.

                  … doch aus dem Zusammenhang sollte hervorgehen, dass „Normalfall“/„Ausnahme“ für „Mehrheit“/„Minderheit“ stehen.

                  Natürlich. Aber gerade die Verhältnisse zueinander kann ich nicht einschätzen

                  Dafür trittst du aber sehr bestimmt auf! ;-)

                  Es gibt reichlich solcher Statistiken und ob die Desktop-Nutzung nun bereits von mobilen Geräten überholt wurde oder nicht: Wenn man eine neue Webseite erstellt, sollte man davon ausgehen, dass wenn nicht bereits von Anfang an, so doch bald mobile Nutzer den größeren Anteil in der Besucher-Statistik ausmachen werden.

                  Es sei denn, man schließt diese große Gruppe durch schlechtes Design/Konzept/Nutzerführung aus.

                  Marc

          3. problematische Seite

            Moin,

            mein Seitenmenü sieht zur Zeit so aus:

            	<ul id="gal-nav">
            		<h3>Teppiche</h3>
            		     <li><a href="gal-carpets-zg.php">Zeitgenössisch</a></li>
            		     <li><a href="gal-carpets-kl.php">Klassisch</a></li>
            		     <li><a href="gal-carpets-nom.php">Nomaden- und <br>Dorfteppiche</a>
                    	<h3>Kelims</h3>
            		     <li><a href="gal-kilims-zg.php">Zeitgenössisch</a></li>
            		     <li><a href="gal-kilims-nom.php">Nomaden- und <br>Dorfteppiche</a>
            	</ul>
            

            Wie kann ich bei einem einzelnen Menüpunkt die Hintergrundfarbe ändern (so soll die gerade aktive Seite gekennzeichnet werden)? Habe es mit <style background-color=...>, damit wurde dann aber die Funktion des Links deaktiviert

            Gruß Martin

            1. problematische Seite

              @@Martin Seidel

              	<ul id="gal-nav">
              		<h3>Teppiche</h3>
              		     <li><a href="gal-carpets-zg.php">Zeitgenössisch</a></li>
              		     <li><a href="gal-carpets-kl.php">Klassisch</a></li>
              		     <li><a href="gal-carpets-nom.php">Nomaden- und <br>Dorfteppiche</a>
                      	<h3>Kelims</h3>
              		     <li><a href="gal-kilims-zg.php">Zeitgenössisch</a></li>
              		     <li><a href="gal-kilims-nom.php">Nomaden- und <br>Dorfteppiche</a>
              	</ul>
              

              Dass h3 nicht Kindelement von ul sein darf, sagte doch schon jemand?

              Und wozu die br? Die Zeilenumbrüche macht der Browser automatisch.

              Das sollte eher so aussehen:

                  <h3>Teppiche</h3>
                  <ul id="gal-carpets-nav">
                      <li><a href="gal-carpets-zg.php">Zeitgenössisch</a></li>
                      <li><a href="gal-carpets-kl.php">Klassisch</a></li>
                      <li><a href="gal-carpets-nom.php">Nomaden- und Dorfteppiche</a>
                  </ul>
                  <h3>Kelims</h3>
                  <ul id="gal-kilims-nav">
                      <li><a href="gal-kilims-zg.php">Zeitgenössisch</a></li>
                      <li><a href="gal-kilims-nom.php">Nomaden- und Dorfteppiche</a>
                  </ul>
              

              oder wenn du Überschrift und Listen jeweils gruppieren möchtest:

                  <section id="gal-carpets-nav">
                      <h3>Teppiche</h3>
                      <ul>
                          <li><a href="gal-carpets-zg.php">Zeitgenössisch</a></li>
                          <li><a href="gal-carpets-kl.php">Klassisch</a></li>
                          <li><a href="gal-carpets-nom.php">Nomaden- und Dorfteppiche</a>
                      </ul>
                  </section>
                  <section id="gal-kilims-nav">
                      <h3>Kelims</h3>
                      <ul>
                          <li><a href="gal-kilims-zg.php">Zeitgenössisch</a></li>
                          <li><a href="gal-kilims-nom.php">Nomaden- und Dorfteppiche</a>
                      </ul>
                  </section>
              

              Dass bei <li><a href="gal-kilims-nom.php">Nomaden- und Dorfteppiche</a> die Beschriftung nicht stimmt, willst du sicher noch ändern.

              Wie kann ich bei einem einzelnen Menüpunkt die Hintergrundfarbe ändern (so soll die gerade aktive Seite gekennzeichnet werden)? Habe es mit <style background-color=...>, damit wurde dann aber die Funktion des Links deaktiviert

              ??

              Im style-Element müssen CSS-Regeln stehen, und zwar im Inhalt, nicht in einem Attribut. In etwa dasselbe, was auch in einem externen Styelsheet stehen kann.

              Wenn du die aktuelle Seite nicht im Menü verlinkst, sieht dein Markup für Menü auf der Teppiche-klassisch-Seite bspw. so aus:

                  <h3>Teppiche</h3>
                  <ul id="gal-carpets-nav">
                      <li><a href="gal-carpets-zg.php">Zeitgenössisch</a></li>
                      <li><a>Klassisch</a></li>
                      <li><a href="gal-carpets-nom.php">Nomaden- und Dorfteppiche</a>
                  </ul>
                  <h3>Kelims</h3>
                  <ul id="gal-kilims-nav">
                      <li><a href="gal-kilims-zg.php">Zeitgenössisch</a></li>
                      <li><a href="gal-kilims-nom.php">Nomaden- und Dorfteppiche</a>
                  </ul>
              

              (bzw. mit sections)

              Nun kannst du das a-Element, das kein href-Attribut hat, gezielt stylen:

              a:not([href])
              {
                  background-color:;
              }
              

              Oder besser als Nachfahre des Navigationscontainers. (Das war vorher <ul id="gal-nav">, aber das sind ja jetzt zwei Listen.

              Zur Not ginge auch

              #gal-carpets-nav a:not([href]),
              #gal-kilims-nav a:not([href])
              {
                  background-color:;
              }
              

              Aber nur zur Not.)

              LLAP 🖖

              --
              “The best way to help people learn: answer their coding question an hour later, they’ll have likely figured it out by then.” —Todd Motto
              Selfcode: sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|
            2. problematische Seite

              Hallo,

              mein Seitenmenü sieht zur Zeit so aus:

              	<ul id="gal-nav">
              		<h3>Teppiche</h3>
              		     <li><a href="gal-carpets-zg.php">Zeitgenössisch</a></li>
              		     <li><a href="gal-carpets-kl.php">Klassisch</a></li>
              		     <li><a href="gal-carpets-nom.php">Nomaden- und <br>Dorfteppiche</a>
                      	<h3>Kelims</h3>
              		     <li><a href="gal-kilims-zg.php">Zeitgenössisch</a></li>
              		     <li><a href="gal-kilims-nom.php">Nomaden- und <br>Dorfteppiche</a>
              	</ul>
              

              das ist immer noch falsch, wie ich schon einmal erklärt habe: h3 darf kein Kindelement von ul sein. Aber das sieht mir sehr stark nach einer strukturierten, also verschachtelten Liste aus:

              <ul id="gal-nav">
               <li><h3>Teppiche</h3>
                <ul>
                 <li><a href="gal-carpets-zg.php">Zeitgenössisch</a></li>
                 <li><a href="gal-carpets-kl.php">Klassisch</a></li>
                 <li><a href="gal-carpets-nom.php">Nomaden- und Dorfteppiche</a>
                </ul>
               </li>
               <li><h3>Kelims</h3>
                <ul>
                 <li><a href="gal-kilims-zg.php">Zeitgenössisch</a></li>
                 <li><a href="gal-kilims-nom.php">Nomaden- und Dorfteppiche</a>
                </ul>
               </li>
              </ul>
              

              Wie kann ich bei einem einzelnen Menüpunkt die Hintergrundfarbe ändern (so soll die gerade aktive Seite gekennzeichnet werden)? Habe es mit <style background-color=...>, damit wurde dann aber die Funktion des Links deaktiviert

              Dann hast du irgendwas falsch gemacht. Allein durch CSS mag der Link vielleicht völlig anderes aussehen, aber zumindest funktionieren sollte er nach wie vor.

              Besser ist es aber, beim Link, der zur aktuellen Seite gehört, das href-Attribut wegzulassen. Dann kannst du diesen Nicht-Link auch mit CSS auf unterschiedliche Weise selektieren und abweichend von seinen Artgenossen formatieren.

              Beispiele für unterschiedliche Selektoren:

              a
               { CSS-Deklarationen
                 für alle a-Elemente
               }
              a:link
               { CSS-Deklarationen
                 nur für echte Links
               }
              

              Alternativ:

              a
               { CSS-Deklarationen
                 für alle a-Elemente
               }
              a[href]
               { CSS-Deklarationen
                 nur für echte Links,
                 die ein href haben
               }
              

              So long,
               Martin

              --
              Nothing travels faster than the speed of light with the possible exception of bad news, which obeys its own special laws.
              - Douglas Adams, The Hitchhiker's Guide To The Galaxy
              1. problematische Seite

                @@Der Martin

                a:link
                 { CSS-Deklarationen
                   nur für echte Links
                 }
                

                Du bist drauf reingefallen, dass :link nicht für alle Links steht, sondern nur für noch nicht besuchte.

                Ja, das ist in CSS falsch benannt worden. Wer immer das war, wird vermutlich am liebsten vor Scham in den Boden versinken wollen.

                Alle Links wären (zukünftig?) :any-link. Oder eben a[href].

                LLAP 🖖

                --
                “The best way to help people learn: answer their coding question an hour later, they’ll have likely figured it out by then.” —Todd Motto
                Selfcode: sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|
                1. problematische Seite

                  Hi,

                  a:link
                   { CSS-Deklarationen
                     nur für echte Links
                   }
                  

                  Du bist drauf reingefallen, dass :link nicht für alle Links steht, sondern nur für noch nicht besuchte.

                  you're right, I stand corrected.

                  Ja, das ist in CSS falsch benannt worden. Wer immer das war, wird vermutlich am liebsten vor Scham in den Boden versinken wollen.

                  Ich könnte mir vorstellen, dem ist das heute herzlich egal.

                  Ciao,
                   Martin

                  --
                  Nothing travels faster than the speed of light with the possible exception of bad news, which obeys its own special laws.
                  - Douglas Adams, The Hitchhiker's Guide To The Galaxy
                  1. problematische Seite

                    @@Der Martin

                    Ja, das ist in CSS falsch benannt worden. Wer immer das war, wird vermutlich am liebsten vor Scham in den Boden versinken wollen.

                    Ich könnte mir vorstellen, dem ist das heute herzlich egal.

                    IIRC war ich mal in ein Gespräch u.a. mit Chris Lilley[1] und Lea Verou verwickelt, wo es um Sprachdesignfehler in CSS ging, die man heute gern korrigieren würde, aber nicht mehr korrigieren kann.

                    (Was nicht heißen soll, dass er es war, der :link verbockt hat.)

                    LLAP 🖖

                    --
                    “The best way to help people learn: answer their coding question an hour later, they’ll have likely figured it out by then.” —Todd Motto
                    Selfcode: sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|

                    1. dem Chris Lilley, nicht dem Chris Lilley ↩︎

            3. problematische Seite

              Hej Martin,

              mein Seitenmenü sieht zur Zeit so aus:

              	<ul id="gal-nav">
              		<h3>Teppiche</h3>
              		     <li><a href="gal-carpets-zg.php">Zeitgenössisch</a></li>
              		     <li><a href="gal-carpets-kl.php">Klassisch</a></li>
              		     <li><a href="gal-carpets-nom.php">Nomaden- und <br>Dorfteppiche</a>
                      	<h3>Kelims</h3>
              		     <li><a href="gal-kilims-zg.php">Zeitgenössisch</a></li>
              		     <li><a href="gal-kilims-nom.php">Nomaden- und <br>Dorfteppiche</a>
              	</ul>
              

              Das solltest du so nicht lassen. Es gibt PlugIns für Browser, Screenreader und diverse andere Software, die Links aus einer Seite übersichtlich auflisten kann. Dann lässt sich nicht mehr feststellen, was die beiden Links "Zeitgenössisch" unterscheidet. Darum sollten Links immer eindeutige Namen haben. Besonders wichtig ist das natürlich für Screenreader-Nutzer, die auch von Link zu Link springen können und von den h3 dann nichts mitbekommen. Eine Linkbeschreibung sollte daher immer eindeutig und vollständig sein.

              Tatsächlich lesen auch Sehende oft nur die Linktexte und nicht die Überschriften.

              Siehe auch: Die barrierefreie Website - Verweise

              Marc

        2. problematische Seite

          Hallo Martin Seidel,

          ja stimmt, das geht so nicht, also mein Arbeitgeber möchte dass bei normalem Bildschirm 5 Bilder nebeneinander sind, beim Smartphone sollte das natürlich nicht gelten.

          Ich weiß nicht, ob es sinnvoll ist, mich hier auch noch reinzuhängen, weil du schon sehr kompetente Hilfe hast, aber ich mach es einfach mal.

          Das ist recht einfach zu lösen unter der der Voraussetzung, dass deine Bilder alle dieselben Abmessungen haben: Stecke die die Bilder in ein übergeordnetes div-Element, gib diesem eine maximale Breite (5 × Breite + 4 × Abstand) und text-align: center.

          Und schon sollten sich die Bilder von selbst wie gewünscht anordnen. Wenn du nun allerdings bei zum Beispiel 5 Bildern und etwas zu schmalem Viewport die Darstellung „4 Bilder in der ersten Zeile, dann nur eins“ vermeiden möchtest, sind Mediaqueries (eventuell in Verbindung mit Flexbox) dein Freund.

          bis jetzt habe ich das mit einer heigth=200px Angabe erreicht und nach dem 5. Bild mit <br> einen Seitenumbruch erreicht.

          Es gibt normalerweise in einer Webseite keinen Seitenumbruch ;-) br-Elemente sind praktisch nur für Gedichte oder Adressen sinnvoll.

          Was in diesem Thread schon oft gesagt wurde, gilt auch hier: Der Browser weiß selbst am besten, wie er die Inhalte anordnet.

          Bis demnächst
          Matthias

          --
          Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.
          1. problematische Seite

            @@Matthias Apsel

            Es gibt normalerweise in einer Webseite keinen Seitenumbruch ;-)

            Eine Zeile macht noch keinen Sommer.

            br-Elemente sind praktisch nur für Gedichte oder Adressen sinnvoll.

            Theoretisch auch dafür nicht. br-Elemente sind praktisch nur ein Sprachdesignfehler in HTML.

            LLAP 🖖

            --
            “The best way to help people learn: answer their coding question an hour later, they’ll have likely figured it out by then.” —Todd Motto
            Selfcode: sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|
            1. problematische Seite

              Hallo,

              Es gibt normalerweise in einer Webseite keinen Seitenumbruch ;-)

              Eine Zeile macht noch keinen Sommer.

              Matthias sprach von Seitenumbruch. Versehen? Wahrscheinlich.

              br-Elemente sind praktisch nur für Gedichte oder Adressen sinnvoll.

              Theoretisch auch dafür nicht. br-Elemente sind praktisch nur ein Sprachdesignfehler in HTML.

              Nein, ich stehe immer noch zu meiner Ansicht, die ich schon mehrfach geäußert habe, dass das br-Element genau das richtige für einen "schwachen" Schnitt innerhalb eines Absatzes ist, analog zur Unterscheidung zwischen Zeilenumbruch und Absatzwechsel in Textverarbeitungen.

              Damit verhält sich br zu p ungefähr wie ein Semikolon zum Punkt am Satzende. Beide haben ihre Berechtigung. Nur dass es beim Semikolon weniger Möglichkeiten des "Missbrauchs" gibt.

              Ciao,
               Martin

              --
              Nothing travels faster than the speed of light with the possible exception of bad news, which obeys its own special laws.
              - Douglas Adams, The Hitchhiker's Guide To The Galaxy
              1. problematische Seite

                @@Der Martin

                Es gibt normalerweise in einer Webseite keinen Seitenumbruch ;-)

                Eine Zeile macht noch keinen Sommer.

                Matthias sprach von Seitenumbruch.

                Martin tat das.

                Versehen? Wahrscheinlich.

                Ja. Wahrscheinlich aus Versehen.

                br-Elemente sind praktisch nur für Gedichte oder Adressen sinnvoll.

                Damit verhält sich br zu p ungefähr wie ein Semikolon zum Punkt am Satzende.

                Nein, nicht mal ungefähr. p steht für nicht für den Punkt am Satzende, sondern für den ganzen Satz.

                Eben das macht den Unterschied. Da hätte ich auch gern ein Element, was nicht für das Semikolon, sondern für die ganze Zeile steht.

                LLAP 🖖

                --
                “The best way to help people learn: answer their coding question an hour later, they’ll have likely figured it out by then.” —Todd Motto
                Selfcode: sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|
                1. problematische Seite

                  Hi,

                  Matthias sprach von Seitenumbruch.

                  Martin tat das.

                  ah, stimmt. Hab ich übersehen.

                  Damit verhält sich br zu p ungefähr wie ein Semikolon zum Punkt am Satzende.

                  Nein, nicht mal ungefähr. p steht für nicht für den Punkt am Satzende, sondern für den ganzen Satz.

                  Richtig, und der Punkt am Ende macht den Satz erst zum Satz. Der Unterschied ist nur, dass in HTML das p-Element den Absatz umschließt, während der Punkt als Interpunktionszeichen den Satz abschließt. Die Semantik ist aber dieselbe: Sie bilden eine zusammenhängende Einheit - auch wenn Absatz und Satz nicht dasselbe sind. Deswegen schrieb ich ja verhält sich zu ...

                  Eben das macht den Unterschied. Da hätte ich auch gern ein Element, was nicht für das Semikolon, sondern für die ganze Zeile steht.

                  Wir reden von verschiedenen Dingen. Du möchtest ein Element, das für eine Zeile steht. Das ist das br aber nicht, sondern es steht für einen Umbruch, eine Trennfuge innerhalb des umgebenden Textes. Wie das Semikolon. Beide haben gemeinsam, dass man sie sparsam und überlegt einsetzen sollte.

                  Ciao,
                   Martin

                  --
                  Nothing travels faster than the speed of light with the possible exception of bad news, which obeys its own special laws.
                  - Douglas Adams, The Hitchhiker's Guide To The Galaxy
                  1. problematische Seite

                    @@Der Martin

                    ah, stimmt. Hab ich übersehen.

                    Wahrscheinlich auch aus Versehen.

                    Damit verhält sich br zu p ungefähr wie ein Semikolon zum Punkt am Satzende.

                    Nein, nicht mal ungefähr. p steht für nicht für den Punkt am Satzende, sondern für den ganzen Satz.

                    Richtig, und der Punkt am Ende macht den Satz erst zum Satz. Der Unterschied ist nur, dass in HTML das p-Element den Absatz umschließt, während der Punkt als Interpunktionszeichen den Satz abschließt.

                    Darauf wollte ich hinaus.

                    Deswegen schrieb ich ja verhält sich zu ...

                    Es verhält sich eben nicht so. Weil das br-Element die Zeile nicht umschließt, sondern ebenso wie das Semikolon als Interpunktionszeichen die Zeile abschließt.

                    Bei „während“ (im Sinne von „im Gegensatz zu“) vs. „ebenso wie“ würde ich nicht von „verhält sich zu …“ sprechen.

                    Du möchtest ein Element, das für eine Zeile steht.

                    Ja. HTML ist doch dafür gedacht, Inhalt bzw. dessen Struktur auszuzeichnen.

                    Gegenwärtig hat man zur Auszeichnung von Zeilen innerhalb von p nur das span-Element. Das ist aber unspezifisch, wobei man mit einer Klasse nachhelfen könnte. Dann wird das Markup aber lang. Und vor allem blöd, dass ohne CSS kein Zeilenumbruch gerendert wird.

                    LLAP 🖖

                    --
                    “The best way to help people learn: answer their coding question an hour later, they’ll have likely figured it out by then.” —Todd Motto
                    Selfcode: sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|
                    1. problematische Seite

                      Hi,

                      Damit verhält sich br zu p ungefähr wie ein Semikolon zum Punkt am Satzende.

                      Nein, nicht mal ungefähr. p steht für nicht für den Punkt am Satzende, sondern für den ganzen Satz.

                      Richtig, und der Punkt am Ende macht den Satz erst zum Satz. Der Unterschied ist nur, dass in HTML das p-Element den Absatz umschließt, während der Punkt als Interpunktionszeichen den Satz abschließt.

                      Darauf wollte ich hinaus.

                      schon klar, aber dieser Unterschied ist nur ein formaler, kein semantischer.

                      Deswegen schrieb ich ja verhält sich zu ...

                      Es verhält sich eben nicht so. Weil das br-Element die Zeile nicht umschließt, sondern ebenso wie das Semikolon als Interpunktionszeichen die Zeile abschließt.

                      Ein Semikolon schließt nicht ab, sondern trennt Sätze oder Satzteile. Stärker als ein Komma, schwächer als ein Punkt. Wie das br-Element, das Teile eines Absatzes trennt.

                      Die Aussage von <p>...</p> ebenso wie dem Satzende-Punkt (dessen Counterpart am Satzanfang man sich denken möge[1]) ist doch: Das bildet eine zusammengehörende Einheit.
                      Die Aussage von <br> und dem Semikolon ist dagegen: Hier ist ein kleiner Einschnitt zwischen zwei Abschnitten, die aber logisch immer noch zusammengehören.

                      Du möchtest ein Element, das für eine Zeile steht.

                      Ja. HTML ist doch dafür gedacht, Inhalt bzw. dessen Struktur auszuzeichnen.

                      Eben. Und eine kurze Sprech- oder Denkpause, auch innerhalb einer übergeordneten Einheit, ist nach meinem Dafürhalten auch Inhalt. Ebenso wie ein Pausenzeichen in der Musik.

                      So long,
                       Martin

                      --
                      Nothing travels faster than the speed of light with the possible exception of bad news, which obeys its own special laws.
                      - Douglas Adams, The Hitchhiker's Guide To The Galaxy

                      1. Manche Sprachen schließen in bestimmten Fällen tatsächlich den ganzen Satz zwischen zwei Symbole ein, etwa das Spanische bei Frage- und Ausrufesätzen. ¿Es correcto? ↩︎

                      1. problematische Seite

                        @@Der Martin

                        während der Punkt als Interpunktionszeichen den Satz abschließt.

                        sondern ebenso wie das Semikolon als Interpunktionszeichen die Zeile abschließt.

                        Ein Semikolon schließt nicht ab, sondern trennt Sätze oder Satzteile …

                        Auf der Ebene, wo wir hier fachsimpeln, tut es dasselbe wie ein Punkt: Es schließt einen Satzteil ab.

                        Oder du müsstest auch sagen: Ein Punkt schließt nicht ab, sondern trennt Sätze.

                        … Stärker als ein Komma, schwächer als ein Punkt.

                        Siehste, du setzt selbst gerade Semikolon und Punkt gleich (qualitativ, mit unterschiedlicher Quantität).

                        Die Aussage von <p>...</p> ebenso wie dem Satzende-Punkt (dessen Counterpart am Satzanfang man sich denken möge) ist doch: Das bildet eine zusammengehörende Einheit.

                        Das tun mit Semikolon getrennte Satzteile auch.

                        Die Aussage von <br> und dem Semikolon ist dagegen: Hier ist ein kleiner Einschnitt zwischen zwei Abschnitten, die aber logisch immer noch zusammengehören.

                        Das tun mit Punkt getrennte Sätze innerhalb eines Absatzes auch.

                        Manche Sprachen schließen in bestimmten Fällen tatsächlich den ganzen Satz zwischen zwei Symbole ein, etwa das Spanische bei Frage- und Ausrufesätzen. ¿Es correcto?

                        ¡Sí!

                        LLAP 🖖

                        --
                        “The best way to help people learn: answer their coding question an hour later, they’ll have likely figured it out by then.” —Todd Motto
                        Selfcode: sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|
                        1. problematische Seite

                          Hallo,

                          Ein Semikolon schließt nicht ab, sondern trennt Sätze oder Satzteile …

                          Auf der Ebene, wo wir hier fachsimpeln, tut es dasselbe wie ein Punkt: Es schließt einen Satzteil ab.

                          Oder du müsstest auch sagen: Ein Punkt schließt nicht ab, sondern trennt Sätze.

                          nein, denn das impliziert, dass ein einzelner Satz keinen Punkt bräuchte. Es gibt ja nichts zu trennen.

                          Die Aussage von <br> und dem Semikolon ist dagegen: Hier ist ein kleiner Einschnitt zwischen zwei Abschnitten, die aber logisch immer noch zusammengehören.

                          Das tun mit Punkt getrennte Sätze innerhalb eines Absatzes auch.

                          Aber jeder Satz ist als Aussage in sich vollständig. Die mit Semikolon getrennten Teile dagegen nicht unbedingt. Sie sollten syntaktisch komplett sein (obwohl auch das nicht immer der Fall ist), aber sie gehören in ihrer Aussage so zusammen, dass sie nicht isoliert voneinander betrachtet werden sollten. Sei es als Gegensätze, als Ergänzung, oder als Gegenüberstellung.
                          Dazu ein paar Beispiele aus Holländisches Roulette:

                          Ein zufälliger Besucher hätte beim Namen Trollhaus vielleicht ein nordisch geprägtes Gasthaus vermutet; tatsächlich hatte das Lokal aber bis auf den Namen nicht den Hauch eines nordischen Charakters.

                          David hasste es eigentlich, wenn Robert ihn Dickerchen nannte; andererseits konnte er nicht verheimlichen, dass die häufigen Geschäftsessen bei ihm schon einen leichten Stau im mittleren Ring verursachten.

                          Das bezeichneten manche seiner Freunde als paranoid und übertrieben; Robert fand es dagegen selbstverständlich.

                          In allen drei Fällen könnte man anstelle des Semikolons ebensogut einen Punkt setzen und die Sätze so vollständig voneinander trennen. Aber gerade die Gegenüberstellung von zwei Aspekten schreit geradezu nach einer weniger starken Trennung. So wie ein <br> zwischen zwei Sätzen eines Absatzes. ;-)

                          So long,
                           Martin

                          --
                          Nothing travels faster than the speed of light with the possible exception of bad news, which obeys its own special laws.
                          - Douglas Adams, The Hitchhiker's Guide To The Galaxy