Welches css framework für flexibles grid oder table?

[selfmade01]

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]

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

[selfmade01]

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

$groupid = 2
<div id="box-'.$groupid.'">
<table>
<thead><tr>
        <th></th>
        <th>Überschrift-1 </th>
        <th>Überschrift-2 </th>
        <th>Überschrift-3 </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><button> hile neue Zeile </button></td></tr>)
</tbody>
</table>
</div>

$groupid = 3

<div id="box-'.$groupid.'">
<table>
<thead><tr>
        <th></th>
        <th>Überschrift-1 </th>
        <th>Überschrift-2 </th>
        <th>Überschrift-3 </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><button> hile neue Zeile </button></td></tr>)
</tbody>
</table>
</div>

$groupid = 4

<div id="box-'.$groupid.'">
<table>
<thead><tr>
        <th></th>
        <th>Überschrift-1 </th>
        <th>Überschrift-2 </th>
        <th>Überschrift-3 </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><button> hile 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

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.

[selfmade01]

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)

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

$('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

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

[selfmade01]

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

für jeden browser gibts entwicklertools.

[selfmade01]

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

sorry ich kenne mich mit Frameworks von css nicht aus und frag deshalb

haste die links angeklickert und überflogen?

[selfmade01]

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

Einige kreieren dabei ihre eigenen CSS Dateien.

Wie meinst du das?

[selfmade01]

[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

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

Foundation wird vermutlich etwas ähnlich im Angebot haben, aber damit kenne ich mich nicht besonders aus.

[selfmade01]

ja lottikarotti hat es:

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

Hallo,

was hat foundation?

Grüße Jürgen