Nele: Tabellen JA oder Nein

Guten Abend,

ich gestallte gerade meine Seite etwas neu, hab eine Auflistung, die wie folgt aussieht

http://s1.directupload.net/images/140412/u2u6eyms.jpg

soll ich dieses mit DIVS oder mit Tabellen umsetzten oder gar ganz anderes?

Gruß
Nele

  1. Hallo,

    ich gestallte ...

    wohl kaum - "gestalten" kommt von "Gestalt", nicht von "Stall".

    http://s1.directupload.net/images/140412/u2u6eyms.jpg
    soll ich dieses mit DIVS oder mit Tabellen umsetzten oder gar ganz anderes?

    Eine Tabelle finde ich hier durchaus gerechtfertigt, denn du stellst Merkmale und deren Ausprägungen gegenüber. Ob man die Darstellung in zwei logischen Spalten auch gleich in der Tabellenstruktur ausdrücken mag? - Eigentlich eher nicht, aber Tabellen über mehrere Spalten "fließen" zu lassen, überfordert wohl die Möglichkeiten von CSS.

    Ciao,
     Martin

    --
    Die Zeit, die man zur Fertigstellung eines Projekts wirklich braucht, ist immer mindestens doppelt so lang wie geplant.
    Wurde dieser Umstand bei der Planung bereits berücksichtigt, gilt das Prinzip der Rekursion.
    Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
    1. Eigentlich eher nicht, aber Tabellen über mehrere Spalten "fließen" zu lassen, überfordert wohl die Möglichkeiten von CSS.

      Dachte ich auch zuerst, doch es geht tatsächlich:
      http://forum.de.selfhtml.org/archiv/2014/2/t216490/#m1484633

  2. Om nah hoo pez nyeetz, Nele!

    hab eine Auflistung,

    Genau. Eine AufLISTung. Nimm eine Beschreibungsliste dl, den Umbruch nach Wunsch erreichst du mithilfe von CSS via column-*

    Matthias

    --
    Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Messie und Messier-Katalog.

    1. Hallo Matthias,

      meinst du so?

        
        
      dl {  
          float: left;  
          margin-right: 2em;  
          width: 300px;  
      }  
        
      dt {  
          float: left;  
          font-size: 0.9em;  
          font-weight: bold;  
          margin-bottom: 0.7em;  
          width: 120px;  
      }  
        
      dd {  
          color: #444444;  
          font-size: 0.7em;  
          line-height: 1.5em;  
          margin: 0 0 2em;  
          padding-left: 4.5em;  
      }  
      
      
        
      <dl>  
      	<dt>  
      		PHP  
      	</dt>  
      	<dd>  
      		5.3, 5.4 und 5.5  
      	</dd>  
        
      	<dt>  
      		 	mod_rewrite  
      	</dt>  
      	<dd>  
      		ja  
      	</dd>  
      </dl>  
      
      

      Ich finde das ist aber sehr viel HTML Code im Gegensatz zu HTML?

      1. Hallo,

        Ich finde das ist aber sehr viel HTML Code im Gegensatz zu HTML?

        Ich finde deine Problembeschreibung sehr kurz im Gegensatz zur Problembeschreibung.

        Gruß
        Kalk

      2. Hallo,

        von der Semantik ausgehend ist das dl-Element für deine Auflistung die beste Lösung. Zusätzlich bleibt der Quelltext so am übersichtlichtigsten. Ansonsten lasse ich mir gerne durch eine andere konkrete Lösung überraschen. Weiterhin kann mit dem dl-Element auch sehr flexibel auf verschiedene Bildschirm- / Fenstergrößen reagiert werden.

        Ich habe mal ein Beispiel erstellt:

        http://foreninfo.bplaced.net/seiten_fremdprobleme/2014_04_13_nele_01_dl_liste.html

        Weitere Anpassungen sind dann nur noch etwas CSS-Spielerei. Zum Beispiel, wenn der rechte Block wie in deinem Beispiel weiter rechts stehen soll. Oder wenn es auch mal 3 oder 4 Spalten sein dürfen.

        Gruss

        MrMurphy

        1. Hallo MrMurphy,

          vielen vielen Dank für dein Beispiel. Eine Frage habe ich noch, wie sicher sind die Elemente

          dl - dt - dd

          also auf Bezug der Browser? Kann man das schon ohne Probleme nutzen?

          Gruß
          Nele

          1. Hallo

            Kann man das schon ohne Probleme nutzen?

            Ja, die Elemente gibt es bereits seit CSS2, die Benutzung stellt für die Browser kein Problem dar.

            Gruss

            MrMurphy

            1. Hallo MrMurphy,

              Ja, die Elemente gibt es bereits seit CSS2, die Benutzung stellt für die Browser kein Problem dar.

              Danke für die Info!

              Gruß
              Nele

            2. Hallo MrMurphy,

              wenn ich dein Beispiel bei mir teste, sieht alles wie folgt aus

              http://s1.directupload.net/images/140413/3rs32xgg.jpg

              ich gehe davon aus, das liegt an deiner Schrift die ich leider nicht habe. Wenn ich Arial nehme sieht es aus wie auf dem Screen

              1. Hallo,

                zum Darstellen der Haken benutze ich Font-Awesome. Diese icon-Fonts haben den Vorteil, das sie beliebig vergrößert werden können ohne pixelig zu werden.

                http://fortawesome.github.io/Font-Awesome/

                Allerdings sollte es auch mit ganz normalen Grafiken funktionieren. Wichtig ist nur, das im dd-Element etwas vorhanden ist, da es sonst wohl keine Breite erhält.

                Gruss

                MrMurphy

                1. Hallo MrMurphy,

                  zum Darstellen der Haken benutze ich Font-Awesome. Diese icon-Fonts haben den Vorteil, das sie beliebig vergrößert werden können ohne pixelig zu werden.

                  ach jetzt verstehe ich was du damit

                    
                  <i class="fa fa-check"></i>  
                  
                  

                  erreichst, damit werden die Hacken geladen? richtig?

                  Gruß
                  Nele

                  1. Hallo

                    ... damit werden die Hacken geladen? richtig?

                    Genau.

                    Gruss

                    MrMurphy

                    1. Hallo MrMurphy

                      Genau.

                      ich frag mich warum man von den DL Listen nicht mehr sieht bzw. hört. In keinem Tutorial wurde etwas erwähnt. Werden diese Listen nicht gerne eingesetzt? Überall hört man von DIVS bzw. Tabellen.

                      Gruß
                      Nele

                      1. Hallo

                        ich frag mich warum man von den DL Listen nicht mehr sieht bzw. hört. In keinem Tutorial wurde etwas erwähnt. Werden diese Listen nicht gerne eingesetzt? Überall hört man von DIVS bzw. Tabellen.

                        Das liegt daran, das viele Webseitenersteller mit den dl-Elementen überfordert waren und sind.

                        Weiterhin haben viele immer noch Schwierigkeiten mit Responsive Design. Die können nur mit festen Größen, wie DIN A4 bei einem Word Dokument oder einem pdf-File oder einem Flyer, umgehen und wollen das dann ins Internet übertragen. Das das nicht funktionieren kann, da das Internet ein selbstständiges Medium ist und, noch grauseliger, das Ausgabemedium bei den Usern nicht mal feststeht, wollen die schlicht nicht akzeptieren.

                        Solche Webseitenersteller können die Seite in der Regel auch nur in feststehende waagerechte und senkrechte Abschnitte unterstellen. Denen liegt es natürlich am nächsten auf Tabellen und DIVs (möglichst mit absoluter Position) zurückzugreifen und das als perfekt zu deklarieren, um die eigenen Defizite zu verdecken.

                        Mit Listen, die zudem bei verschiedenen Bildschirmgrößen auch noch umbrechen, haben die natürlich nichts am Hut und schweigen die tot oder verteufeln die sogar als Hexenwerk.

                        Fachlich versierte Autoren weisen sehr wohl seit Jahren auf die Vorteile des dl-Elements hin.

                        Gruss

                        MrMurphy

                        1. Hallo MrMurphy,

                          ich versuche die Trennlinie die du in der Mitte gesetzt hast, weiter nach Links zu bekommen, dass sie quasi wirklich in der Mitte ist, derzeit ist sie sehr rechtslastig. Ich bekomme es nicht hin. Könntest du mir vielleicht sagen an welcher Stelle ich drehen muss?

                          Gruß
                          Nele

                          1. Hallo

                            ich versuche die Trennlinie die du in der Mitte gesetzt hast, weiter nach Links zu bekommen, dass sie quasi wirklich in der Mitte ist, derzeit ist sie sehr rechtslastig.

                            Das kann ich nicht nachvollziehen. Ich habe grade mal mit den Lineal nachgemessen, bei meinen Beispielen ist die Linie in der Mitte, auch bei unterschiedlichen Browsern und Fensterbreiten.

                            Hast du dich vielleicht von der Optik täuschen lassen ohne selbst nachzumessen?

                            Hast du mal einen Link zu deinem Beispiel?

                            Gruss

                            MrMurphy

                      2. Hallo,

                        ich frag mich warum man von den DL Listen nicht mehr sieht bzw. hört. In keinem Tutorial wurde etwas erwähnt. Werden diese Listen nicht gerne eingesetzt? Überall hört man von DIVS bzw. Tabellen.

                        Es gibt hunderte HTML-Elemente, die zur Auszeichnung verwenden werden können. Tutorials, die sich mit korrekter Textauszeichnung befassen, und nicht nur mit Layouting, stellen natürlich auch dl vor.

                        http://de.selfhtml.org/html/text/
                        http://webkompetenz.wikidot.com/html-handbuch:text
                        http://html5doctor.com/element-index/
                        https://developer.mozilla.org/de/docs/HTML/HTML5/HTML5_element_list

                        Grüße
                        Mathias

                  2. @@Nele:

                    nuqneH

                    ach jetzt verstehe ich was du damit
                    <i class="fa fa-check"></i>
                    erreichst,

                    Den Missbrauch des i-Elements. »i« steht für alles mögliche, aber nicht für »Icon«. Richtig wäre span.

                    damit werden die Hacken geladen? richtig?

                    Nein.

                    Qapla'

                    --
                    „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
                2. Hello,

                  zum Darstellen der Haken benutze ich Font-Awesome. Diese icon-Fonts haben den Vorteil, das sie beliebig vergrößert werden können ohne pixelig zu werden.

                  http://fortawesome.github.io/Font-Awesome/

                  Der Tipp ist gut.
                  Aber wie bekommst Du die Zeichen in deinen Quelltext?

                  Ich habe ganz schön lange geprokelt, um mal eine Tabelle auszugeben.
                  http://selfhtml.bitworks.de/codierung/FontAwesome.php

                  Ich muss gestehen, verstanden habe ich noch nicht, was da abläuft.
                  Wenn ich mir den Quelltext anzeigen lasse aus dem Browserfenster, bekomme ich nur diese "UniChar"-Kästchen, obwohl der Browser die Grafiksymbole anzeigt.

                  Wie heißt der Font für die
                  @font-face-Anweisung?
                  Ich habe "FontAwesome" aus den Extrainformationen für CSS entnommen, aber mein Debian-Lappi will das nicht berücksichtigen (per http:).

                  Auf dem lokalen Webserver bekomme ich eine hübsche Tabelle mit den Grafiksysmbolen, aber ich befürchte, dass die auf Clients, die den Font noch nicht haben, noch nicht ankommt.

                  Und dann muss ich an meinem Scriptlein noch basteln, um die ungültigen Codepoints rauszulassen. Ich zähle ja einfach hoch, was aber ja wohl nicht richtig ist.

                  Und die letzte Frage (für dieses Posting) wie immer zum Schluss:
                  Wie kann ich vorher ermitteln, bis zu welchem Codepoint die Tabelle belegt ist?

                  Liebe Grüße aus dem schönen Oberharz

                  Tom vom Berg

                  --
                   ☻_
                  /▌
                  / \ Nur selber lernen macht schlau
                  http://bikers-lodge.com
                  1. Hello,

                    Screenshot: http://selfhtml.bitworks.de/codierung/FontAwesome.png

                    Wie heißt der Font für die
                    @font-face-Anweisung?
                    Ich habe "FontAwesome" aus den Extrainformationen für CSS entnommen, aber mein Debian-Lappi will das nicht berücksichtigen (per http:).

                    Ok, das Problem scheint erledigt zu sein. Es musste der *.ttf sein. Die anderen wollte Iceweasel nicht anzeigen.

                    http://selfhtml.bitworks.de/codierung/FontAwesome.php

                    Liebe Grüße aus dem schönen Oberharz

                    Tom vom Berg

                    --
                     ☻_
                    /▌
                    / \ Nur selber lernen macht schlau
                    http://bikers-lodge.com
            3. Hallo,

              dl - dt - dd
              Ja, die Elemente gibt es bereits seit CSS2

              Meinst du vielleicht HTML 2.0? ;)

              Mathias

    2. @@Matthias Apsel:

      nuqneH

      Nimm eine Beschreibungsliste dl

      Wegen des in HTML immer noch fehlenden di-Elements oft problematisch.

      Qapla'

      --
      „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)