Matthias Apsel: Webseite mit div container wird im IE nicht richtig dargestellt

Beitrag lesen

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