Ankündigung

Einklappen
Keine Ankündigung bisher.

Welches css framework für flexibles grid oder table?

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Welches css framework für flexibles grid oder table?

    Hallo,

    ich möchte ein fertiges css Framework einsetzen und hatte zu Testzwecken html-kickstart.

    Ich möchte mir noch weitere Alternativen ansehen vor allem benötige ich eine flexible Möglichkeit (es wäre super wenn das css-Framework dies schon hätte)
    um Tabellen oder auch grid's zu gestalten .
    Die Design-Möglichkeiten sollten auch umfangreich sein.

    Gibt es dazu eine Empfehlung

    Grüße Jürgen

    Ps. Noch eine Frage:

    Wenn man ein Formular aufbaut, in das ständig neue Zeilen nachladbar wird (das wird über php und Javascript und Ajax realisiert) und bei dem die Eingabefelder wenn möglich ohne padding und margins zu designen sind da wenig Platz vorhanden ist, und man muss mit ID's arbeiten in die sich die anderen Templates (z.B. eine neue Zeile nachladen) ist es hier besser mit <table> oder einem guten Grid-System zu arbeiten?


  • #2
    Hallöchen,

    vielleicht hilft dir diese Aufstellung: 31 CSS-Frontend-Frameworks im Vergleich (t3n).

    Hervorzuheben sind an dieser Stelle sicherlich Bootstrap und Foundation. Für die Individualisierung (Farben, Schriften, Abstände, ..) bietet Bootstrap ein umfangreiches Tool an: Bootstrap Customize. Foundation wird vermutlich etwas ähnlich im Angebot haben, aber damit kenne ich mich nicht besonders aus.

    Wenn man ein Formular aufbaut, in das ständig neue Zeilen nachladbar wird (das wird über php und Javascript und Ajax realisiert) und bei dem die Eingabefelder wenn möglich ohne padding und margins zu designen sind da wenig Platz vorhanden ist, und man muss mit ID's arbeiten in die sich die anderen Templates (z.B. eine neue Zeile nachladen) ist es hier besser mit <table> oder einem guten Grid-System zu arbeiten?
    Wenn du Daten tabellarisch darstellen willst, dann solltest du - aus semantischer Sicht - das <table>-Element nutzen. Das ist kein Ausschlusskriterium für das dynamische Nachladen von Daten.

    Viele Grüße,
    lotti

    Kommentar


    • #3
      Hallo,

      ich glaube das Bootstrap ist ganz gut, da gibt es einiges an Doku (was ich gerade so via google mal grob gesehen habe).
      Danke für den Tipp.

      Andere Frage zu Frameworks und css:

      Wenn man eine Seite aufbaut die flexibel(in den Zellen) bis zu einer maximalen Breite (damit sie unter Tablets auch ansehbar ist) und hier ein Formular hat mit kleinen Eingabefelder für 2,2 stellige Zahlen und man die Eingabefelder enger zusammenlegen möchte, es jedoch alles sauber geordnet sein muss.

      Nimmt man dazu ein GRID des Frameworks oder besser eine Table ?

      Ich habe den Unterschied noch nicht ganz verstanden wann welche Art wo am besten oder sogar zwingen sein sollte.

      Grüße Jürgen

      Von der style Möglichkeit stelle ich mir sowas vor (einfach, clean und übersichtlich )
      dort auf der Seite, das letzte Bild.
      http://gumbyframework.com/showcase#

      Kommentar


      • #4
        ja lottikarotti hat es:

        http://foundation.zurb.com/develop/download.html

        Kommentar


        • #5
          Hallo,

          was hat foundation?

          Grüße Jürgen

          Kommentar


          • #6
            moin Jürgen, klicken heute nicht so dein fall?
            ich bezog mich auf:

            Zitat von lottikarotti Beitrag anzeigen
            Foundation wird vermutlich etwas ähnlich im Angebot haben, aber damit kenne ich mich nicht besonders aus.

            Kommentar


            • #7
              [QUOTE=lottikarotti;830292]Hallöchen,

              vielleicht hilft dir diese Aufstellung: 31 CSS-Frontend-Frameworks im Vergleich (t3n).

              Hervorzuheben sind an dieser Stelle sicherlich Bootstrap und Foundation. Für die Individualisierung (Farben, Schriften, Abstände, ..) bietet Bootstrap ein umfangreiches Tool an: Bootstrap Customize. Foundation wird vermutlich etwas ähnlich im Angebot haben, aber damit kenne ich mich nicht besonders aus.


              Hallo,
              bin gerade am intslallieren und Probieren von Bootstrap.

              Habe auch schon einige Tutorials gesehen.

              Frage:
              Einige kreieren dabei ihre eigenen CSS Dateien.
              Ist dies so üblich ? auch bei Bootstrap oder solllte man Beispiel css-Templates die im Netz so rumschwirren und diese abändern?

              Viele Grüße

              Jürgen

              Ps. die man bei Bootstrab auf sich anpassen kann, das ist mir a) zu umfangreich und b) kann ich nicht gleich sehen welche Farbe ich vergebe, da müsste ich bei jeder Schriftart und jeder Farbe erst nachsehen.

              Das hätten sie ein bisschen komfortabler lösen können

              Kommentar


              • #8
                Einige kreieren dabei ihre eigenen CSS Dateien.
                Wie meinst du das?

                Kommentar


                • #9
                  Zitat von Phpyton Beitrag anzeigen
                  Wie meinst du das?
                  Hallo,
                  ich vermute man erstellt noch zusätzlich sein eigenes Design und erstellt deshalb eine zusätzliche eigenen css...
                  sorry ich kenne mich mit Frameworks von css nicht aus und frag deshalb so doof

                  Grüße Jürgen

                  Kommentar


                  • #10
                    sorry ich kenne mich mit Frameworks von css nicht aus und frag deshalb
                    haste die links angeklickert und überflogen?

                    Kommentar


                    • #11
                      Hallo,

                      ja ich habe mir beide angesehen.
                      Bin mir noch nicht ganz sicher welches.
                      Bei Bootstrap ist es so, dass ich eine gute Auswahl von Erweiterungen erhalte.
                      Da meine Anwendung mehr auf ein Admin-Design ausgelegt sein soll und ich flexible Tabellen benötige ist die Entscheidung nicht ganz einfach.


                      Ich bin gerade am Basteln mit einem anderen CSS Framework das was ich wohl gerne austauschen würde.

                      HTML Kickstart.

                      Dabei habe ich seltsame Verhalten
                      wenn ich eine Tabelle in einem <div> Container einschliesse und der DIV-Container mit einem Grid-Css-Style formatiert ist und ich eine Breite von 750px habe verstehe ich nicht weshalb sie im Chrome sauber dargestellt wird und im Firefox
                      sieht es so aus, als ob die Tabelle aus dem <div class="grid750"> heraus ragt.
                      Es ist eben alles verschoben.
                      Obwohl mein Container und auch die <table> bzw. ihre tr´und td's werden alle sauber geschlossen

                      Weiß jemand wie man hier vorgeht um einen Fehler zu finden?

                      Grüße Jürgen

                      Kommentar


                      • #12
                        für jeden browser gibts entwicklertools.

                        Kommentar


                        • #13
                          Hallo,
                          ja die versuche ich auch zu verwenden.
                          Leider habe ich noch nicht gefunden wonach ich in den Entwicklertools suchen muss.
                          Ich verwende Firebugs

                          Kommentar


                          • #14
                            html -> /node suchen/ -> berechnet und regeln anschauen,
                            oder element untersuchen (ab version 10):
                            http://www.wintotal.de/tipparchiv/?id=1950

                            Kommentar


                            • #15
                              Hallo

                              ich habe noch eine andere wichtige Frage.

                              ich verwende auf meiner Seite jQuery um Zeilen u.a. zu manipulieren oder eben radio auf off zu setzen usw.
                              Ich muss nun eine Möglichkeit suchen um auf einfachste Art immer auf die Zeilen zugreifen zu können

                              Das wäre im Grund eigentlich einfach, da ich auch Zeilen via Ajax nachlade und ich in jeder Regsiterkarte(ich arbeite hier mit Regsiterkarten ul/li)
                              eine Art Formular habe mit input's habe ich jedem Formular eine eindeutige ID vergeben was so aussieht


                              (in PHP... hier nur als Beispiel alles ohne echo geschrieben)
                              Code:
                              <div id="box-"'.$inmaligeid.'">
                              
                              // darin baue ich meine Table auf
                              
                              <table>
                              <thead></thead>
                              <tbody>
                              <tr><td id=radio-'.$zeile.'><input type=radio> </td><tr>
                              <tr><td></td></tr>
                              </tbody
                              </table>
                              
                              </div>
                              jetzt möchte ich direkt auf den richtigen Container und dann auf die richtige Zeile zugreifen

                              Irgendwie klappt das nicht


                              ich habe das so gemacht (die Kindeelemente gibt er noch aus)

                              Code:
                              $('input:radio').click(function(){
                              						var testTypeId 		= $(this).attr('data-testTypeId');
                              						var week 			= $(this).attr('data-week');
                              						var child = 3;
                              						alert("das ist groupid nr test : "+testTypeId+ " und das week : "+week);
                              						var veg = $('#box-'+testTypeId+' table:nth-child('+child+') input:radio:checked[name="radio-'+week+'"]').val();
                              						alert("das ist der value= :"+veg);
                              						var anzahl = $('#box-'+testTypeId +' tbody tr' ).length;
                              						
                              						$( "#box-"+testTypeId+" table:nth-child("+child+") input[name*='"+veg+"']" ).each(function() {
                              							var name 		= $(this).attr("name");
                              							alert("merkt man was ");
                              							$(this).val("");		
                              							$("#box-"+testTypeId+" table:nth-child("+child+") input[name='"+name+"']").prop('disabled', true);
                              						});
                              vielleicht mache ich das auch komplett falsch und habe den falschen Ansatz,

                              Grüße Jürgen

                              Kommentar

                              Lädt...
                              X