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

  • selfmade01
    hat ein Thema erstellt Welches css framework für flexibles grid oder table?.

    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?

  • j.durini
    antwortet
    Ich tendiere auch zu Bootstrap. Das kommt deinen Wünschen am nächsten.

    Einen Kommentar schreiben:


  • selfmade01
    antwortet
    Hallo ich will versuchen es noichmal zu erklären..
    Ps.. der Link war super... ich bin noch drüber mir alles im Inspektor anzusehen

    Ob delegate passt... keine Ahnung?

    hier mein Beispiel
    PHP-Code:
    $groupid 2
    <div id="box-'.$groupid.'">
    <
    table>
    <
    thead><tr>
            <
    th></th>
            <
    th>Überschrift-</th>
            <
    th>Überschrift-</th>
            <
    th>Überschrift-</th>
            <
    th></th>
            </
    tr>
    </
    thead>
    <
    tbody>
    <
    tr><td// das ist die erste Zeile
            
    <input type="radio" name="radio-1" vlaue="suess">
            <
    input type="radio" name="radio-1" vlaue="salz">
        </
    td>
        <
    td><input type="text" name="ecsuess" /></td>
        <
    td><input type="text" name="ecsalz" /></td>
        <
    td><input type="text" name="phsalz" /></td>
        <
    td><input type="text" name="phsuess" /></td>
    <
    tr>
    <
    tr><td// das ist die zweite Zeile
            
    <input type="radio" name="radio-1" vlaue="suess">
            <
    input type="radio" name="radio-1" vlaue="salz">
        </
    td>
        <
    td><input type="text" name="ecsuess" /></td>
        <
    td><input type="text" name="ecsalz" /></td>
        <
    td><input type="text" name="phsalz" /></td>
        <
    td><input type="text" name="phsuess" /></td>
    <
    tr>
    <
    tr><td><buttonhile neue Zeile </button></td></tr>)
    </
    tbody>
    </
    table>
    </
    div>

    $groupid 3

    <div id="box-'.$groupid.'">
    <
    table>
    <
    thead><tr>
            <
    th></th>
            <
    th>Überschrift-</th>
            <
    th>Überschrift-</th>
            <
    th>Überschrift-</th>
            <
    th></th>
            </
    tr>
    </
    thead>
    <
    tbody>
    <
    tr><td// das ist die erste Zeile
            
    <input type="radio" name="radio-1" vlaue="suess">
            <
    input type="radio" name="radio-1" vlaue="salz">
        </
    td>
        <
    td><input type="text" name="ecsuess" /></td>
        <
    td><input type="text" name="ecsalz" /></td>
        <
    td><input type="text" name="phsalz" /></td>
        <
    td><input type="text" name="phsuess" /></td>
    <
    tr>
    <
    tr><td// das ist die zweite Zeile
            
    <input type="radio" name="radio-1" vlaue="suess">
            <
    input type="radio" name="radio-1" vlaue="salz">
        </
    td>
        <
    td><input type="text" name="ecsuess" /></td>
        <
    td><input type="text" name="ecsalz" /></td>
        <
    td><input type="text" name="phsalz" /></td>
        <
    td><input type="text" name="phsuess" /></td>
    <
    tr>
    <
    tr><td><buttonhile neue Zeile </button></td></tr>)
    </
    tbody>
    </
    table>
    </
    div>

    $groupid 4

    <div id="box-'.$groupid.'">
    <
    table>
    <
    thead><tr>
            <
    th></th>
            <
    th>Überschrift-</th>
            <
    th>Überschrift-</th>
            <
    th>Überschrift-</th>
            <
    th></th>
            </
    tr>
    </
    thead>
    <
    tbody>
    <
    tr><td// das ist die erste Zeile
            
    <input type="radio" name="radio-1" vlaue="suess">
            <
    input type="radio" name="radio-1" vlaue="salz">
        </
    td>
        <
    td><input type="text" name="ecsuess" /></td>
        <
    td><input type="text" name="ecsalz" /></td>
        <
    td><input type="text" name="phsalz" /></td>
        <
    td><input type="text" name="phsuess" /></td>
    <
    tr>
    <
    tr><td// das ist die zweite Zeile
            
    <input type="radio" name="radio-1" vlaue="suess">
            <
    input type="radio" name="radio-1" vlaue="salz">
        </
    td>
        <
    td><input type="text" name="ecsuess" /></td>
        <
    td><input type="text" name="ecsalz" /></td>
        <
    td><input type="text" name="phsalz" /></td>
        <
    td><input type="text" name="phsuess" /></td>
    <
    tr>
    <
    tr><td><buttonhile neue Zeile </button></td></tr>)
    </
    tbody>
    </
    table>
    </
    div
    wie zu sehen ist,

    habe ich 3 Tabellen.. die in sich gleich sind.

    Darin befinden sich Eingabefelder (ich läöse nichts über submit aus!!! alles wird im Hintergrund bei onclick auf den button via ajax zum Server gesendet und verarbeitet

    Die 3 Tabellen unterscheiden sich eindeutig in der div id die um jede Tabelle gelegt wurde.

    Nun suche ich nach einer Möglichkeit um auf die Zeilen in diesen Tabellen, deren Elemente und Eingabefelder zuzugreifen

    ich dachte ich könne das gut und übersichtlich mit nth-child von jQuery

    Grüße Jürgen

    Einen Kommentar schreiben:


  • Gast-Avatar
    Ein Gast antwortete
    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)
    habs nicht verstanden. du schickst das formaular ab, und es kommt nicht das zurück was du willst?

    -dein html und dein js code passen nicht zusammen.

    bei überfliegen kam mir aber der gedanke: http://api.jquery.com/delegate/

    ich gehe davon aus, der rest hat sich geklärt.

    Einen Kommentar schreiben:


  • selfmade01
    antwortet
    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

    Einen Kommentar schreiben:


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

    Einen Kommentar schreiben:


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

    Einen Kommentar schreiben:


  • Gast-Avatar
    Ein Gast antwortete
    für jeden browser gibts entwicklertools.

    Einen Kommentar schreiben:


  • selfmade01
    antwortet
    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

    Einen Kommentar schreiben:


  • Gast-Avatar
    Ein Gast antwortete
    sorry ich kenne mich mit Frameworks von css nicht aus und frag deshalb
    haste die links angeklickert und überflogen?

    Einen Kommentar schreiben:


  • selfmade01
    antwortet
    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

    Einen Kommentar schreiben:


  • Gast-Avatar
    Ein Gast antwortete
    Einige kreieren dabei ihre eigenen CSS Dateien.
    Wie meinst du das?

    Einen Kommentar schreiben:


  • selfmade01
    antwortet
    [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

    Einen Kommentar schreiben:


  • Gast-Avatar
    Ein Gast antwortete
    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.

    Einen Kommentar schreiben:


  • selfmade01
    antwortet
    Hallo,

    was hat foundation?

    Grüße Jürgen

    Einen Kommentar schreiben:

Lädt...
X