Gunther: Responsive Design

Beitrag lesen

Om nah hoo pez nyeetz, Matthias!

Und jetzt bitte noch die Variante für small screen devices (ausgehend von der tatsächlichen Anzahl, nicht von deiner "verkürzten" Variante) - Stichwort "Responsive Design".

Sollte die Tabelle nicht auf den Bildschirm passen, verhält sich deine Lösung genau wie meine: Scrollbalken

In einer "Übergangsphase" ist meine Lösung sogar fluider als deine.

Ich bin aber aufgrund des verwendeten Markups "wesentlich" flexibler ...!
Und aktuell war mein Beispiel ja auch nicht darauf ausgelegt.

Aber darum ging und geht es mir gar nicht, sondern vielmehr darum aufzuzeigen, dass die Verwendung von semantisch korrektem Markup durchaus sehr "arge" Probleme bei der Darstellung mit sich bringen kann - auch und insbesondere bei Tabellen!

Hier findet man eine ziemlich komplette Übersicht samt Beispielen über die diversen "Verrenkungen", um Tabellen(-Markup) halbwegs "responsive" zu machen.

Und noch eine Anmerkung:
Aktuell haben die Wohnungen in dem Fall vom OP "zufällig" alle die gleichen Eigenschaften.
Was wenn morgen oder übermorgen andere Wohnungen mit (zum Teil) anderen Eigenschaften mit ins Portfolio aufgenommen werden sollen?
Dann füge ich nicht nur die neuen Wohnungen in den Quelltext ein, sondern ändere auch noch den von jeder schon vorhandenen Wohnung!
Und wie "sinnvoll" es ist bei 100 Wohnungen eine leere Spalte zu haben, weil die entsprechende Eigenschaft nur für eine Wohnung zutrifft, halte ich zumindest für "fragwürdig".

Und selbst mit HTML5 bleibt das Problem, dass man keine komplette Tabellenzeile verlinken kann, also

  
... <a href="#"><tr> ... </tr></a> ...  

nach wie vor nicht valide ist.

"Abhilfen", wie du sie z.B. angewandt hast, oder per JS haben größtenteils erhebliche Nachteile im Bezug auf Accessibility & Usability!

Aber Hauptsache semantisch korrektes Markup! ;-)

BTW: Ich will die Diskussion weder neu entfachen, noch fortsetzen, aber wenn doch per Definition jede Tabelle auch eine Liste ist, wie kann dann eigentlich die Verwendung einer Liste semantisch falsch sein? ;-)

Ich möchte mich an dieser Stelle aber auch mal ausdrücklich bei dir und den anderen Teilnehmern an der Diskussion bedanken, und bei allen anderen dafür, dass es keinen "Threaddrift" gab! :-)

Gruß Gunther

0 49

Tabellenzeile soll bei hover eine infobox anzeigen

theatermacher
  • css
  1. 0
    Matthias Apsel
    1. 0
      theatermacher
      1. 0
        Gunther
      2. 0
        Gunnar Bittersmann
        1. 0
          theatermacher
          1. 0
            Gunther
            1. 0
              theatermacher
              1. 1
                Matthias Apsel
                1. 0
                  theatermacher
                  1. 0
                    Der Martin
                    1. 0
                      theatermacher
                      1. 0
                        Gunther
                        1. 0
                          theatermacher
                          1. 0
                            Matthias Apsel
                            1. 0

                              Semantik

                              Gunther
                              • html
                              1. 2
                                Matthias Apsel
                                1. 0
                                  Gunther
                                  1. 0
                                    Matthias Apsel
                                    1. 0
                                      Gunther
                                      1. 1
                                        Der Martin
                                        1. 0
                                          Gunther
                                          1. 0
                                            Matthias Apsel
                                            1. 0
                                              Gunther
                                              1. 0

                                                Link über ganze Tabellenzeile

                                                Matthias Apsel
                                                1. 0

                                                  Link über ganze Tabellenzeile auch für alte Browser

                                                  Matthias Apsel
                                                  1. 0

                                                    Responsive Design

                                                    Gunther
                                                    • design/layout
                                                    1. 0
                                                      Matthias Apsel
                                                      1. 0
                                                        Gunther
                                                        1. 0
                                                          Matthias Apsel
                                                          1. 0
                                                            Gunther
                                                            1. 0

                                                              Das letzte Wort

                                                              Matthias Apsel
                                                              • menschelei
                                      2. 0
                                        Matthias Apsel
                                        1. 0
                                          Matthias Apsel
                                          1. 0
                                            Matthias Apsel
                                  2. 0
                                    Kai345
                                    1. 0
                                      Gunther
                                      1. 0

                                        Zugänglichkeit

                                        Matthias Apsel
                                2. 0
                                  Gunnar Bittersmann
                    2. 0
                      Matthias Apsel
                    3. 0
                      Gunnar Bittersmann
                      1. 0
                        Matthias Apsel
                      2. 0
                        Der Martin
                  2. 0
                    Matthias Apsel
                    1. 0
                      Matthias Apsel
        2. 1
          Kai345
          1. 0
            Gunnar Bittersmann
            1. 0
              Matthias Apsel
            2. 1
              Kai345