Positionierung innerhalb von gridster mit class="row" und class="col"

[Init]

Hallo zusammen,

gibt es eine lib, welche hinter der Positionierung der div's steckt?

Ich möchte innerhalb meines <li> die div wie folgt anordnen:

aaaaaaaaaaaaaaaaaaaaa
bbbb cccccccccccccccc dddd
eeee cccccccccccccccc ffffffff
gggggggggghhhhhhhhhhh

Hat jemand eine Idee?

VG
Marc

[setstate]

row col-1-1 A
row col-1-5 B E col-1-2 C col-1-5 D F
row col1-2 G col-1-2 H

Wenn B breit genug ist, bricht E autom. auf die neue Zeile. Wenn nicht, kann man mit class="newline" arbeiten

[Init]

Vielen Dank für den Lösungsansatz.

Meine Sourcen sehen jetzt so aus:

Code Auswählen Erweitern

<div class="gridster">
<ul>
<li data-row="1" data-col="1" data-sizex="6" data-sizey="4" class="semitransparent">
<header>Test1</header>
<div class="row">
<div class="col-1-4 bg-red">A1</div>
<div class="col-1-4 bg-red">B1</div>
<div class="col-1-4 bg-red">C1</div>
<div class="col-1-4 bg-red">D1</div>
</div>
<div class="row">
<div class="col-1-4 bg-blue">
<div class="row">
<div class="col-1-1 bg-red">A2</div>
</div>
<div class="row">
<div class="col-1-1 bg-red">A3</div>
</div>
</div>
<div class="col-2-4 bg-red">2 - 3<br>B - C</div>
<div class="col-1-4 bg-blue">
<div class="row">
<div class="col-1-1 bg-red">D2</div>
</div>
<div class="row">
<div class="col-1-1 bg-red">D3</div>
</div>
</div>
<div class="row">
<div class="col-1-4 bg-red">A4</div>
<div class="col-1-4 bg-red">B4</div>
<div class="col-1-4 bg-red">C4</div>
<div class="col-1-4 bg-red">D4</div>
</div>
</li>
</ul>
</div>


Aber irgendwie habe ich leichte Versetzungen im Aufbau. Einen Screenshot habe ich angehängt.

Hat jemand eine Idee, wie ich die DIV's sauber ausgerichtet bekomme?

VG
Marc

[setstate]

Die Columns müssten eigentlich 75%, 50%, 25%, 12,5% usw. sein. Einige Browser kommen in Summe dann aber immer über 100%. Deshalb der Trick mit den unrunden Zahlen der col-*-*

Eine Korrektur im CSS ist nötig, damit dein Konstrukt passt:

Code Auswählen Erweitern

.col-1-2,.col-2-4 { width: 48.4% !important; }

[zap]

Kommt mir bekannt vor. Baue mal aussen rum noch ein div:

Code Auswählen Erweitern


<div style="margin: 0px 0px 0px 0px !important;">
...
</div>


Wenn es hilft, kannst Du Dir dafür auch eine eigene CSS Klasse in css/fhem-ftui-ui-user.css anlegen.  Das Problem scheint zu sein, dass in Gridster oder wo auch immer per Default ein breiter Rand definiert ist. Das führt dann dazu, dass 4x1/4 > 1 ist.

Wenn es nicht hilft: nimm <table>, das funktioniert bei mir zuverlässig.

[Init]

Danke für die Antworten.

Habe jetzt einiges probiert und auch folgendes in der "fhem-tablet-ui-user.css" hinterlegt:

Code Auswählen Erweitern

div[class^="col-"], div[class*="col-"] {
    margin: 0px 0px 0px 0px !important;;color:red;
}

Verwendet wird das css. Sehen kann man dies an der roten Schriftfarbe.

Aber die Abstände zwischen den div's bleiben erhalten. padding, border und margin sind alle auf 0px. Kann man im angehängten screenshot sehen.

Werde später mal mit den ungraden col-*-* testen.

Wurde schonmal drüber nachgedacht Bootstrap zu integieren?

VG
Marc

[Init]

Nach dem Hinzufügen des Vorschlags (Lösung) von setstate sieht es im FF gut aus.

Habe der Datei "fhem-tablet-ui-user.css" folgende Zeile hinzugefügt:

Code Auswählen Erweitern

.col-1-2,.col-2-4 { width: 48.4% !important; }

VG
Marc

[takaze]

Währe das Problem nicht eher mit einer entsprechenden table zu lösen? 

Grüße

[Init]

Vollkommen richtig, aber versuche gerade folgendes Problem zu lösen:
http://forum.fhem.de/index.php/topic,37378.msg364981.html#msg364981

Und da wollte ich eigentlich nur kurz ausschließen, dass es mit div's sofort funktioniert.

[setstate]

Wurde schonmal drüber nachgedacht Bootstrap zu integieren?

Es steht dir jetzt frei, Boostrap oder ähnliche Gridlayouts anstatt Gridster zu nutzen:

http://forum.fhem.de/index.php/topic,49807.msg415496.html#msg415496