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
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
Vielen Dank für den Lösungsansatz.
Meine Sourcen sehen jetzt so aus:
<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
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:
.col-1-2,.col-2-4 { width: 48.4% !important; }
Kommt mir bekannt vor. Baue mal aussen rum noch ein div:
<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.
Danke für die Antworten.
Habe jetzt einiges probiert und auch folgendes in der "fhem-tablet-ui-user.css" hinterlegt:
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
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:
.col-1-2,.col-2-4 { width: 48.4% !important; }
VG
Marc
Währe das Problem nicht eher mit einer entsprechenden table zu lösen? ???
Grüße
Vollkommen richtig, aber versuche gerade folgendes Problem zu lösen:
http://forum.fhem.de/index.php/topic,37378.msg364981.html#msg364981 (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.
Zitat von: Init am 21 Februar 2016, 11:50:35
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