Meowsalot: Footer immer ganz unten?

0 48

Footer immer ganz unten?

  1. 0
    1. 0
      1. 0
        1. 0
        2. 1
          1. 0
            1. 1
              1. 0
              2. 0
                1. 0
                  1. 0
                    1. 0
                2. 1
            2. 0
        3. 0
          1. 1
            1. 0
            2. 0
              1. 0
                1. 1
                2. 0
          2. 0
            1. 0
              1. 0
                1. 0
                  1. 0
                    1. 1
                      1. 0
                        1. 0
                        2. 0
              2. 0
                1. 0
                  1. 1
                    1. 0
                      1. 0
                        1. 0
                          1. 0
                            1. 1
                            2. 1
                            3. 2
                      2. 1
                        1. 0
                          1. 0
                      3. 1
                        1. 0
                2. 0
          3. 1

Hallo alle,

ich möchte gerne meinen Footer immer ganz unten haben. Ist dieses möglich ohne zu wissen wie viel Inhalt auf meiner Seite vorhanden ist?

http://example-website.bplaced.net/footer.html

Bis bald! Meowsalot (Bernd)

akzeptierte Antworten

  1. @@Meowsalot

    ich möchte gerne meinen Footer immer ganz unten haben. Ist dieses möglich ohne zu wissen wie viel Inhalt auf meiner Seite vorhanden ist?

    Ja, z.B. mit Flexbox.

    LLAP 🖖

    --
    „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
    1. Hallo Gunnar,

      Ja, z.B. mit Flexbox.

      Dankeschön!

      Bis bald!
      Meowsalot (Bernd)

      1. Hallo Meowsalot,

        Ja, z.B. mit Flexbox.

        Dankeschön!

        hmmm, wundert mich. Bei mir funktioniert das Beispiel von Gunnar nicht so(FF + IE), wie ich die Frage verstehen würde…

        und nur aus Neugierde, warum nutzt du eigentlich Bootstrap zusätzlich in deiner Seite?

        Nachtrag: Ach ja position:fixed;bottom:0;würde evtl. auch gehen, je nachdem was du genau vorhast.

        Gruss
        Henry

        1. hallo

          Nachtrag: Ach ja position:fixed;bottom:0;würde evtl. auch gehen, je nachdem was du genau vorhast.

          Aber bitte nicht auf mobiles.

        2. @@Henry

          Nachtrag: Ach ja position:fixed;bottom:0;würde evtl. auch gehen, je nachdem was du genau vorhast.

          Das „evtl.“ lässt sich genauer angeben: in so ziemlich gar keinem Fall.

          Ein fixed positionierter Footer würde das Ende des Hauptinhalts zudecken. Da man nicht weiß, wie hoch der Footer ist, kann man nicht wissen, wie viel Platz man freihalten müsste.

          LLAP 🖖

          --
          „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
          1. Hallo Gunnar,

            Das „evtl.“ lässt sich genauer angeben: in so ziemlich gar keinem Fall.

            Oh doch, bin gerade mit so einem Design beschäftigt. Daher auch zuletzt die Fragen wegen scroll, usw.

            Ein fixed positionierter Footer würde das Ende des Hauptinhalts zudecken. Da man nicht weiß, wie hoch der Footer ist, kann man nicht wissen, wie viel Platz man freihalten müsste.

            Vielleicht ist das Zudecken ja gewünscht? Bei mir ist das aktuell so, allerdings in verschiedenen Variationen. Als Basis dient ein flexibles Design mit festem Footer und Header, die sich je nach Bildschirm anpassen und zusätzlich noch mal beim Content und beim Scrollen entfernen/kleiner werden/transparenter werden, oder von allem etwas. Sieht sehr schön aus und ist sehr funktionell. Würde ungern das zurecht pflücken um es hier zu posten, aber wenn gewünscht, mache ich das.

            @beatovich
            doch auch mobil

            Gruss
            Henry

            1. @@Henry

              Ein fixed positionierter Footer würde das Ende des Hauptinhalts zudecken. Da man nicht weiß, wie hoch der Footer ist, kann man nicht wissen, wie viel Platz man freihalten müsste.

              Vielleicht ist das Zudecken ja gewünscht?

              Das glaube ich kaum. Wenn man Inhalte hat, die nie zu sehen sein sollen, weil sie hinter anderen Elementen versteckt sind, warum tut man sie dann überhaupt auf dein Seite?

              Ich denke, der Hauptinhalt soll bis zum Ende vollständig lesbar sein. Das wäre bei einem fixed positionierten Footer nicht gewährleistet. Also nicht machen!

              Wenn Header und Footer ständig im Viewport bleiben sollen … – warum eigentlich? Wenn der Nutzer sich dem Hauptinhalt widmet, will sie wohl nicht durch andere Elemente davon abgelenkt werden? Der Wunsch nach feststehenden Headern/Footern ist wohl nur seitens des Seitenbetreibers, der denkt, dem Nutzer könnte sonst irgendwas verlorengehen. Darüber sollte man mal reiflich nachdenken, bevor man sowas implementiert.

              Wenn Header und Footer ständig im Viewport bleiben sollen, dann ist nicht position: fixed das Mittel der Wahl, sondern position: sticky. Damit bleibt der Hauptinhalt vollständig sichtbar. Ich hab das in diesem Beispiel mal hinzugefügt – im media query; bei geringer Viewporthöhe sollen Header und Footer nicht sticky sein, sonst wäre der Hauptinhalt nur durch einen schmalen Sehschlitz sichtbar.

              Und ja, ich weiß, dass Header und Footer im IE dann eben nicht ständig oben bzw. untem im Viewport zu sehen sind. Und das ist auch ziemlich egal! Es wird sich kein Nutzer darüber beschweren.

              LLAP 🖖

              --
              „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
              1. hallo

                Wenn Header und Footer ständig im Viewport bleiben sollen, dann ist nicht position: fixed das Mittel der Wahl, sondern position: sticky. Damit bleibt der Hauptinhalt vollständig sichtbar. Ich hab das in diesem Beispiel mal hinzugefügt – im media query; bei geringer Viewporthöhe sollen Header und Footer nicht sticky sein, sonst wäre der Hauptinhalt nur durch einen schmalen Sehschlitz sichtbar.

                Das sieht ja nicht schlecht aus: https://caniuse.com/#search=sticky

              2. Hallo Gunnar,

                Vielleicht ist das Zudecken ja gewünscht?

                Das glaube ich kaum. Wenn man Inhalte hat, die nie zu sehen sein sollen, weil sie hinter anderen Elementen versteckt sind, warum tut man sie dann überhaupt auf dein Seite?

                Weil sie beim Scrollen eben doch zu sehen sind. Ist ne Frage des Designs, aber mir ist natürlich klar, dass Designansichten hier im Forum nicht unbedingt mit normalen Usern übereinstimmen.

                Ich denke, der Hauptinhalt soll bis zum Ende vollständig lesbar sein. Das wäre bei einem fixed positionierten Footer nicht gewährleistet. Also nicht machen!

                Das stimmt nicht ganz, hatte ja schon auf viewport- und scrollbezogene Änderungen hingewiesen, zumindest in meinem Fall.

                Der Wunsch nach feststehenden Headern/Footern ist wohl nur seitens des Seitenbetreibers, der denkt, dem Nutzer könnte sonst irgendwas verlorengehen.

                Nein, eine Frage des Designs. Das Auge isst mit.

                Wenn Header und Footer ständig im Viewport bleiben sollen, dann ist nicht position: fixed das Mittel der Wahl, sondern position: sticky. Damit bleibt der Hauptinhalt vollständig sichtbar.

                Ja, aber nur wenn das Verhalten exakt so gewünscht ist.

                Ich hab das in diesem Beispiel mal hinzugefügt – im media query; bei geringer Viewporthöhe sollen Header und Footer nicht sticky sein, sonst wäre der Hauptinhalt nur durch einen schmalen Sehschlitz sichtbar.

                Wollte eigentlich ein paar Änderungen/Variationen davon machen aber, bei Codepen? viel zu hakelig und wieder mühsam zusammenpflücken, nee. Wollte eigentlich auch nur zeigen/wissen, wozu dann überhaupt sticky? scrollst hoch => Header weg, scrollst runter => Footer weg, ist auch bei statischem Layout so. Klar, kenne ich die Interaktion dabei, aber nur sichtbar oder weg, reicht mir nicht und wenn ich dann schon mehr über JS/CSS mache, dann nehme ich auch lieber gleich das leichte kontrollierbare fixed.

                Gruss
                Henry

                1. Hej Henry,

                  Vielleicht ist das Zudecken ja gewünscht?

                  Das glaube ich kaum. Wenn man Inhalte hat, die nie zu sehen sein sollen, weil sie hinter anderen Elementen versteckt sind, warum tut man sie dann überhaupt auf dein Seite?

                  Weil sie beim Scrollen eben doch zu sehen sind. Ist ne Frage des Designs, aber mir ist natürlich klar, dass Designansichten hier im Forum nicht unbedingt mit normalen Usern übereinstimmen.

                  Doch! Sie stimmen nur oft nciht mit denn Annahmen von Designern und Seitenbetreibern überein!

                  Manchmal auch nicht mit den Ansichten von „Freunden“ und „Mutti“ und „allen die man kennt, die das alle toll finden“…

                  Der eine oder andere hier ist ähnlich unbeliebt wie Dieter Bohlen bei DSDS, weil er ausspricht, wenn ein Gesang schlichtweg Scheiße ist.

                  Der Wunsch nach feststehenden Headern/Footern ist wohl nur seitens des Seitenbetreibers, der denkt, dem Nutzer könnte sonst irgendwas verlorengehen.

                  Nein, eine Frage des Designs. Das Auge isst mit.

                  Nein. Schönheit ist nicht absolut. Sie liegt vielmehr im Auge des Betrachters, ist Moden unterworfen und hängt neben vielem anderen von persönlichen Empfindungen, kulturellem Background und sogar der persönlichen Tagesstimmung ab. Was hunderten gefällt, kann zehn andere anwidern!

                  In einem halben Jahr können sich hunderte am Effekt satt gesehen haben und ihn ebenfalls unerträglich finden. Oder die zehn anderen finden das plötzlich toll.

                  Unzugänglichkeit dagegen ist definiert, messbar, experimentell nachweisbar und objektiv nachvollziehbar.

                  Marc

                  1. @@marctrix

                    Der eine oder andere hier ist ähnlich unbeliebt wie Dieter Bohlen bei DSDS, weil er ausspricht, wenn ein Gesang schlichtweg Scheiße ist.

                    ICH WILL HIER NICHT MIT DIETER BOHLEN VERGLICHEN WERDEN!!1elf

                    Wenn, dann mit Simon Cowell. Den mag ich.

                    LLAP 🖖

                    --
                    „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
                    1. Hej @Dieter Bohlen,

                      wie meinen? 😂

                      Marc

                      PS: Man zieht sich nur Schuhe an, die passen — es sei denn, man ist eine böse Stiefschwester von Aschenputtel… >:->

                2. @@Henry

                  Vielleicht ist das Zudecken ja gewünscht?

                  Das glaube ich kaum. Wenn man Inhalte hat, die nie zu sehen sein sollen, weil sie hinter anderen Elementen versteckt sind, warum tut man sie dann überhaupt auf dein Seite?

                  Weil sie beim Scrollen eben doch zu sehen sind.

                  Nein, eben nicht.

                  Du kannst bei dir nachmessen und feststellen, dass der Header 183 Pixel hoch ist und der Footer 237 Pixel hoch. Dann machst du
                  main { padding-top: 183px; padding-bottom: 237px }?

                  Bei anderen brauchen Header und Footer aber womöglich mehr Höhe: andere Schriftart, Schriftgröße, was bei dir in drei Zeilen passt benötigt bei anderen vier und und und …

                  Und schon sind eben nicht alle Inhalte durch Scrollen zu erreichen, sondern Teile auf Nimmerwiedersehen verdeckt. Es gibt keine magic number, die sicherstellt, das alles erreichbar wäre.

                  und wenn ich dann schon mehr über JS/CSS mache, dann nehme ich auch lieber gleich das leichte kontrollierbare fixed.

                  Du willst per JavaScript die Höhe von Header und Footer nach dem Rendern (und nach jedem Neurendern bei resize) auslesen und das Padding entspreched setzen? Das ist nicht das, was ich „leicht kontrollierbar“ nennen würde.

                  position: sticky nenne ich leicht kontrollierbar. Und wenn das in alten Browsern keine Wirkung zeigt, geht die Welt nicht unter.

                  LLAP 🖖

                  --
                  „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
            2. Hej Henry,

              Vielleicht ist das Zudecken ja gewünscht? Bei mir ist das aktuell so, allerdings in verschiedenen Variationen. Als Basis dient ein flexibles Design mit festem Footer und Header, die sich je nach Bildschirm anpassen und zusätzlich noch mal beim Content und beim Scrollen entfernen/kleiner werden/transparenter werden, oder von allem etwas. Sieht sehr schön aus und ist sehr funktionell. Würde ungern das zurecht pflücken um es hier zu posten, aber wenn gewünscht, mache ich das.

              Klingt heikel, aber interessant. Ich würde das gerne mal sehen!

              Marc

        3. Hallo Henry,

          hmmm, wundert mich. Bei mir funktioniert das Beispiel von Gunnar nicht so(FF + IE), wie ich die Frage verstehen würde…

          wie verstehst du denn die Frage? Bei mir geht es sowohl im FF als auch im IE

          und nur aus Neugierde, warum nutzt du eigentlich Bootstrap zusätzlich in deiner Seite?

          weil ich darüber die Font Awesome einbinde.

          Bis bald!
          Meowsalot (Bernd)

          1. hallo

            weil ich darüber die Font Awesome einbinde.

            Dafür brauchst du doch nicht bootstrap.

            1. Hallo beatovich,

              stimmt, ich überlege derzeit ob ich meine ganze Seite auf Bootstrap umstelle. Ich fummel schon viel zu lange am Design rum. Die Seite sollte schön längst online sein. Bootstrap hätte alles fertig was ich benötige.

              Bis bald!
              Meowsalot (Bernd)

            2. Hej beatovich,

              weil ich darüber die Font Awesome einbinde.

              Dafür brauchst du doch nicht bootstrap.

              Doch! Sonst muss man das doch selber machen!

              Ich gehe mal meine Kanonen laden. Die Spatzen sind zwar weg, aber ich habe da eine Mücke im Schlafzimmer gehört…

              Marc

              1. Hallo marctrix,

                weil ich darüber die Font Awesome einbinde.

                Dafür brauchst du doch nicht bootstrap.

                Doch! Sonst muss man das doch selber machen!

                Humor- oder Ironie-Tag vergessen?

                Bis demnächst
                Matthias

                --
                Rosen sind rot.
                1. Moin

                  Humor- oder Ironie-Tag vergessen?

                  Steht doch darunter:

                  Ich gehe mal meine Kanonen laden. Die Spatzen sind zwar weg, aber ich habe da eine Mücke im Schlafzimmer gehört…

                  Fred

                  --
                  I � Unicode
                2. Hej Matthias,

                  Hallo marctrix,

                  weil ich darüber die Font Awesome einbinde.

                  Dafür brauchst du doch nicht bootstrap.

                  Doch! Sonst muss man das doch selber machen!

                  Humor- oder Ironie-Tag vergessen?

                  Das käme mir vor wie mit Katzen auf Kanonen… — ach egal. Ich habe es nachgereicht… 😂

                  Marc

          2. Hallo Meowsalot,

            hmmm, wundert mich. Bei mir funktioniert das Beispiel von Gunnar nicht so(FF + IE), wie ich die Frage verstehen würde…

            wie verstehst du denn die Frage? Bei mir geht es sowohl im FF als auch im IE

            Ich hätte vermutet, du meinst einen Footer der, zumindest am Anfang, unbedingt sichtbar sein soll. Weil, ansonsten ist der Footer als Blockelement, ja sowieso immer unten wenn im HTML richtig angeordnet. Bei Bedarf u.U. noch Feinjustierung des Body (Höhe) mit vh. Na dann OK, im FF funktioniert Gunnars Beispiel, IE müsste angepasst werden, wenn benötigt.

            Gruss
            Henry

            1. Nachtrag:

              habe eben was übersehen:

              wie verstehst du denn die Frage? Bei mir geht es sowohl im FF als auch im IE

              Was hast du denn für eine IE-Version? Bei mir sieht das so aus:

              Gruss
              Henry

              1. Hallo Henry,

                ich habe den Microsoft Edge

                Bis bald!
                Meowsalot (Bernd)

                1. Hallo Meowsalot,

                  ich habe den Microsoft Edge

                  rofl 😉 Edge != IE

                  Gruss
                  Henry

                  1. Hallo Henry,

                    oh nein :/ Da sieht es wirklich scheiße aus. Laut https://caniuse.com/#search=flex steht es um den IE 10/11 auch nicht gut. Also vergesse ich Flex ganz schnell wieder.

                    Ich glaube ich gehe doch zu Bootstrap über.

                    Bis bald! Meowsalot (Bernd)

                    1. Hallo Meowsalot,

                      oh nein :/ Da sieht es wirklich scheiße aus. Laut https://caniuse.com/#search=flex steht es um den IE 10/11 auch nicht gut. Also vergesse ich Flex ganz schnell wieder.

                      Ich glaube ich gehe doch zu Bootstrap über.

                      +++ Stop +++

                      Nein eher umgekehrt.

                      • IE Präsenz geht immer weiter zurück
                      • Bootstrap war mal eine Alternative bevor es GRID gab, aber nun m.m.n. nicht sinnvoll.
                      • Flex geht auch im IE, wenn angepasst.

                      Wenn du einen Entwurf hast, wie deine Seite am Ende aussehen soll, versuchen hier sicher einige zu helfen.

                      Gruss
                      Henry

                      1. Hallo Henry,

                        http://example-website.bplaced.net/footer.html
                        Im IE 11 sollte es jetzt auch funktionieren. Ich habe folgendes hinzugefügt:

                        html, body {
                        	  margin: 0;
                        	  padding: 0;
                            height: 100%;
                        }
                        body {
                             min-height: 100vh;
                             display: -ms-flexbox;
                             display: -webkit-flex;
                             display: flex;
                             flex-flow: column nowrap;
                        }
                        main {
                            -ms-flex: 1;
                            -webkit-flex: 1;
                            flex: 1;
                        }
                        

                        Ein älteren Browser habe ich leider nicht unter Windows 10

                        Bis bald! Meowsalot (Bernd)

                        1. Hallo Meowsalot,

                          Im IE 11 sollte es jetzt auch funktionieren.

                          sieh selbst, links FF, rechts IE11

                          Ob du das Ganze aber überhaupt so angehen solltest (vielleicht macht du es dir unnötig kompliziert), kann man erst sagen, wenn dein Beispiel mehr zeigt oder du Entwürfe vom Endresultat hast. Denn ich glaube zb. nicht, dass der übergroße Kopfbereich so bleiben soll, wenn weitere Inhalte gezeigt werden?

                          Gruss
                          Henry

                        2. Hej Meowsalot,

                          Ein älteren Browser habe ich leider nicht unter Windows 10

                          Brauchst du auch cniht. Nimm lieber einen Neuren. So wie alle (Ausnahmen bestätigen die Regel).

                          Marc

              2. @@Henry

                Was hast du denn für eine IE-Version? Bei mir sieht das so aus:

                Vermutlich einen, der main nicht kennt.

                Dem ist aber mit main { display: block} schnell auf die Sprünge geholfen. Im Pen ergänzt.

                LLAP 🖖

                --
                „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
                1. Hallo Gunnar,

                  Dem ist aber mit main { display: block} schnell auf die Sprünge geholfen. Im Pen ergänzt.

                  Nicht ganz, IE akzeptiert auch kein CSS auf main, es bleibt nur wieder <div id="main">

                  Gruss
                  Henry

                  1. @@Henry

                    Dem ist aber mit main { display: block} schnell auf die Sprünge geholfen. Im Pen ergänzt.

                    Nicht ganz, IE akzeptiert auch kein CSS auf main,

                    Von was für einem Steinzeit-IE sprichst du?

                    es bleibt nur wieder <div id="main">

                    Falsch. Es gibt html5shim.

                    Außerdem müsste es wennschon, dennschon <div role="main"> heißen.

                    Eine ID "main" kann natürlich zusätzlich sinnvoll sein – für Skip-Links.

                    LLAP 🖖

                    --
                    „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
                    1. Hallo Gunnar,

                      Von was für einem Steinzeit-IE sprichst du?

                      rofl 😉 letzte aktuelle Version IE11

                      Falsch. Es gibt html5shim.

                      echt jetzt? Wieder ein Script einbinden anstatt einfach <main> umzubennen? (Sofern man denn überhaupt Rücksicht auf IE nehmen möchte)

                      Eine ID "main" kann natürlich zusätzlich sinnvoll sein – für Skip-Links.

                      Auch. Ich bevorzuge ID aber auch sonst, wenn das Element nur einmal vorkommen wird.

                      Gruss
                      Henry

                      1. Hallo Henry,

                        echt jetzt? Wieder ein Script einbinden anstatt einfach <main> umzubennen? (Sofern man denn überhaupt Rücksicht auf IE nehmen möchte)

                        auf den IE sollte man schon achten vor allem wenn man sich an Firmen richtet. Ich kenne Firmen da wird noch mit Windows Vista gearbeitet 😨

                        Bis bald! Meowsalot (Bernd)

                        1. Hej Meowsalot,

                          echt jetzt? Wieder ein Script einbinden anstatt einfach <main> umzubennen?

                          Oder mit der anderen Darstellung leben. main ist wichtig. Ein sticky footer überhaupt nicht, eher schädlich, wenn man den nicht gut umsetzt…

                          auf den IE sollte man schon achten vor allem wenn man sich an Firmen richtet.

                          Das heißt aber nicht, dass es im Ie so aussehen muss, wie in anderen Browsern!

                          Marc

                          1. Hallo marctrix,

                            Oder mit der anderen Darstellung leben. main ist wichtig. Ein sticky footer überhaupt nicht, eher schädlich, wenn man den nicht gut umsetzt…

                            na wenn der Footer mitten im Bildschirm schwebt finde ich dieses doch nervig, du etwa nicht? Dann lieber ganz auf den Footer verzichten?

                            auf den IE sollte man schon achten vor allem wenn man sich an Firmen richtet. Das heißt aber nicht, dass es im Ie so aussehen muss, wie in anderen Browsern!

                            da bin ich etwas anderer Meinung. Ich eine Seite sollte in jedem Browser gleich aussehen? Sonst heißt es doch "Schau mal die Seite an, sind nicht in der Lage ein vernünftiges Design umzusetzen?"

                            Bis bald!
                            Meowsalot (Bernd)

                            1. Hallo Meowsalot,

                              da bin ich etwas anderer Meinung. Ich eine Seite sollte in jedem Browser gleich aussehen? Sonst heißt es doch "Schau mal die Seite an, sind nicht in der Lage ein vernünftiges Design umzusetzen?"

                              Nein, eine Seite sollte die Möglichkeiten der Browser nutzen. Sie sollte in jedem Browser benutzbar sein.

                              Bis demnächst
                              Matthias

                              --
                              Rosen sind rot.
                            2. Hej Meowsalot,

                              Oder mit der anderen Darstellung leben. main ist wichtig. Ein sticky footer überhaupt nicht, eher schädlich, wenn man den nicht gut umsetzt…

                              na wenn der Footer mitten im Bildschirm schwebt finde ich dieses doch nervig, du etwa nicht?

                              Überhaupt nicht. Passiert immer wieder und hat mich noch nicht ein einziges Mal genervt. Gut für den Seitenbetreiber: so wird die Bannerblindheit abgemildert.

                              Dann lieber ganz auf den Footer verzichten?

                              Wenn da nur nutzloses Zeug drin steht: unbedingt!

                              Wenn da sinnvolle oder gar nötige Informationen drin stehen, die in ein footer-Element gehören: auf gar keinen Fall!

                              auf den IE sollte man schon achten vor allem wenn man sich an Firmen richtet. Das heißt aber nicht, dass es im Ie so aussehen muss, wie in anderen Browsern!

                              da bin ich etwas anderer Meinung. Ich eine Seite sollte in jedem Browser gleich aussehen? Sonst heißt es doch "Schau mal die Seite an, sind nicht in der Lage ein vernünftiges Design umzusetzen?"

                              Tja, von Hundertwasser mag mancher auch glauben, dass er nicht in der Lage war, vernünftige Häuser zu entwerfen.

                              Auch wenn man vielleicht missverstanden wird, sollte man nicht aufhören, das zu tun, was man für das richtige hält…

                              Meiner Meinung und Erfahrung nach lohnt es nicht, Zeit und Geld zu investieren, damit Webseiten überall gleich aussehen. Es wäre auch Betrug an weniger rückständigen Nutzern. Stichwort: progressive enhancement

                              Marc

                            3. @@Meowsalot

                              Oder mit der anderen Darstellung leben. main ist wichtig. Ein sticky footer überhaupt nicht, eher schädlich, wenn man den nicht gut umsetzt…

                              na wenn der Footer mitten im Bildschirm schwebt finde ich dieses doch nervig, du etwa nicht?

                              Dagegen gibt’s ein einfaches Mittel: dem html-Element die Hintergrundfarbe des Footers verpassen, weißen Hintergrund und schwarze Textfarbe für main (oder für für body) – und schon schwebt nichts mehr. Hier mal simuliert.

                              Dann lieber ganz auf den Footer verzichten?

                              Das Styling bestimmt nicht das Markup. Der Inhalt bestimmt das Markup.

                              auf den IE sollte man schon achten

                              Wie auch auf Textbrowser wie Lynx.

                              Das heißt aber nicht, dass es im Ie so aussehen muss, wie in anderen Browsern!

                              da bin ich etwas anderer Meinung.

                              Na da fragen wir doch mal nach: WWW Do websites need to look exactly the same in every browser? dot com

                              Sonst heißt es doch "Schau mal die Seite an, sind nicht in der Lage ein vernünftiges Design umzusetzen?"

                              Kein Nutzer vergleicht das Aussehen einer Webseite in verschiedenen Browsern auf demselben Gerät. Die einzigen, die das tun, sind die Seitenersteller. Und die verstehen oftmals nicht, mit dem verschiedenen Aussehen richtig umzugehen.

                              Wenn der Footer in einem alten IE bei wenig Seiteninhalt nicht unten am Viewport klebt, dann ist das halt so. Na und? Die Seite sieht ja deshalb nicht schlecht aus. Und der Funktionalität tut das schon gar keinen Abbruch.

                              Nutzer vergleichen womöglich das Aussehen einer Webseite auf verschiedenen Geräten. Da sollte ein corporate design erkennbar sein. Aber die Seite darf auf dem Desktop und auf dem Smartphone gar nicht gleich aussehen, sondern jeweils an das Gerät angepasst.

                              LLAP 🖖

                              --
                              „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
                      2. Hallo Henry,

                        IE akzeptiert auch kein CSS auf main,

                        Von was für einem Steinzeit-IE sprichst du?

                        rofl 😉 letzte aktuelle Version IE11

                        Das wäre mir neu.

                        Falsch. Es gibt html5shim. echt jetzt? Wieder ein Script einbinden anstatt einfach <main> umzubennen? (Sofern man denn überhaupt Rücksicht auf IE nehmen möchte)

                        Durch die Umbenennung nutzt du für 95% der Browser nicht die besten Möglichkeiten. Das Script ist gepackt 3 kB groß. - Würd ich als im Grundrauschen untergehend bezeichnen.

                        Wenn du IE-Nutzer ein bisschen ärgern möchtest:

                        <meta http-equiv="X-UA-Compatible" content="IE=9">
                        <!--[if IE]>
                          <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
                        <![endif]-->
                        

                        Eine ID "main" kann natürlich zusätzlich sinnvoll sein – für Skip-Links.

                        Auch. Ich bevorzuge ID aber auch sonst, wenn das Element nur einmal vorkommen wird.

                        Die Rolle wäre wichtiger.

                        Bis demnächst
                        Matthias

                        --
                        Rosen sind rot.
                        1. Hallo Matthias,

                          rofl 😉 letzte aktuelle Version IE11 Das wäre mir neu.

                          laut Microsoft ist die IE 11 wirklich die letzte aktuelle Version:
                          https://support.microsoft.com/de-de/help/4028118/windows-run-the-latest-version-of-internet-explorer-11 bevor es dann zum Microsoft Edge geht.

                          Bis bald!
                          Meowsalot (Bernd)

                          1. hallo

                            laut Microsoft ist die IE 11 wirklich die letzte aktuelle Version:

                            Das ist doch mal eine gute Nachricht.

                      3. @@Henry

                        Von was für einem Steinzeit-IE sprichst du?

                        rofl 😉 letzte aktuelle Version IE11

                        Der hat andere Probleme.

                        Es gibt html5shim. echt jetzt? Wieder ein Script einbinden anstatt einfach <main> umzubennen?

                        Wenn du kein externes Script einbinden möchtest, genügt hier auch

                        <!--[if lt IE 9]>
                        <script>
                        document.createElement('header');
                        document.createElement('main');
                        document.createElement('footer');
                        </script>
                        <![endif]-->
                        

                        im HTML und

                        header, main, footer { display: block } 
                        

                        im Stylesheet (was html5shim mit erledigt).

                        Und schon kannst du das main-Element ebenso wie header und footer bedenkenlos auch in alten Browsern verwenden.

                        es bleibt nur wieder <div id="main"> Außerdem müsste es wennschon, dennschon <div role="main"> heißen. Auch. Ich bevorzuge ID aber auch sonst, wenn das Element nur einmal vorkommen wird.

                        <div id="main"> ist aber semantisch wertlos. Damit hat der Hauptinhalt nicht die landmark role "main". Genau solche landmarks helfen aber Nutzern assistiver Technologien (wie Screenreader), um sich auf der Seite zurechtzufinden.

                        Nutzer alter IEs liegen dir am Herzen (obwohl die auch einen anderen Browser verwenden könnten), Nutzer assistiver Technologien (die auf das Funktionieren der Seite angewiesen sind) nicht? Ich hoffe, ich irre mich hier. Ansonsten: Prioritäten nochmals überdenken.

                        LLAP 🖖

                        --
                        „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
                        1. Hallo

                          … letzte aktuelle Version IE11

                          Es gibt html5shim. echt jetzt? Wieder ein Script einbinden anstatt einfach <main> umzubennen?

                          Wenn du kein externes Script einbinden möchtest, genügt hier auch

                          <!--[if lt IE 9]>
                          <script>
                          document.createElement('main');
                          </script>
                          <![endif]-->
                          

                          im HTML und

                          main { display: block } 
                          

                          im Stylesheet (was html5shim mit erledigt).

                          Und schon kannst du das main-Element ebenso wie header und footer bedenkenlos auch in alten Browsern verwenden.

                          Das weiß er schon seit mindestens einer Woche (gezeigt am Beispiel main). 😉

                          Nutzer alter IEs liegen dir am Herzen (obwohl die auch einen anderen Browser verwenden könnten), Nutzer assistiver Technologien (die auf das Funktionieren der Seite angewiesen sind) nicht? Ich hoffe, ich irre mich hier. Ansonsten: Prioritäten nochmals überdenken.

                          FACK

                          Tschö, Auge

                          --
                          Wenn man ausreichende Vorsichtsmaßnahmen trifft, muss man keine Vorsichtsmaßnahmen mehr treffen.
                          Toller Dampf voraus von Terry Pratchett
                2. @@Gunnar Bittersmann

                  Dem ist aber mit main { display: block} schnell auf die Sprünge geholfen. Im Pen ergänzt.

                  Das war es aber nicht.

                  (Hab auf meinem MacBook Air keine VM, komme erst jetzt dazu, mir das mal anzusehen.)

                  Vermutlich hängt es mit den auf Can I use genannten Bugs zusammen:

                  • In IE10 and IE11, containers with display: flex and flex-direction: column will not properly calculate their flexed childrens' sizes if the container has min-height but no explicit height property.
                  • IE 11 does not vertically align items correctly when min-height is used.

                  Warum IE 11 den Hintergrund des Footers halbtransparent macht, kann ich mir auch nicht erklären.

                  Die Lösung ist simpel: ein @supports (display: flex)-Block. IE 11 flext dann halt nicht. Funzt.

                  LLAP 🖖

                  --
                  „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
          3. @@Meowsalot

            weil ich darüber die Font Awesome einbinde.

            Dass du dafür kein 300 Kilo schweres Framework brauchst, wurde ja schon gesagt.

            Aber mal nachgefragt: Wie bindest du bzw. Bootstrap die ein? Doch hoffentlich nicht als Webfont‽

            Seriously, Don’t Use Icon Fonts. S.a. diesen Thread.

            Man kann Font Awesome auch als SVG einbinden. Sollte man.

            LLAP 🖖

            --
            „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann