Css div Berechnung

[tsunami]

Guten Abend,
Ich verzweifle gerade am Thema css div und Breite. Ich habe 32 divs a 15mm. Die sollen auf eine Seite. Mit Scrollbalken. Meine Überlegung 32x15 mm =480 mm.plus äußere divs + 2mm, plus 32 x 2mm =544mm. Der Browser gibt sich aber mit 537 mm/ 536,5 mm zufrieden . Wo ist der Denkfehler? Die Anzahl wird irgendwann dynamisch, daher muss ich berechnen.

<div style ="width:537mm; border:1mm solid blue;height: 14mm;">
<?php
echo '<div style="border:1mm solid red;width:15mm;height:12mm;float:left;"></div>';


for($x=1;$x<=$number;$x++)
{
echo "<div style='border:1mm solid green;width:15mm;height:12mm;text-align:center;float:left;font-size:0.5em;'>".$x.".".$selmonth.".".$selyear."</div>";

}?></<div>

Also nichts wildes.ok bisschen php. Aber das wirft eigentlich nur die Anzahl der Tage im Mai raus. 1.5.24 -31.5.24 =31 Tage plus vorne eine Blankobox also die og 32 boxen. Any idea?Danke für Anregungen
Tsunami

 

[MrMurphy]

Der grundsätzliche Fehler sind wohl die mm. Mit mm kannst du bei Ausdrucken rechnen, in der Regel in Textprogrammen. In HTML und CSS für die Bildschirmausgabe haben die nichts verloren. Der Browser muss dann immer mit einer eigentlich für ihn unsinnigen Einheit umrechnen. Wobei es keine festen Umrechnungswerte gibt.

Um Container wie div nebeneinander anzuordnen gibt man heutzutage eigentlich die Anzahl (im HTML-Quelltext) an und lässt die Breiten und Abstände durch den Browser mittels CSS berechnen.

Die Anzahl der Container erstellst du mit PHP, welches im HTML 32 Container erzeugt. Ich sehe bei deinem Problem CSS-Grid (display: grid) als am geeignetsten an, um die Anordnung (nebeneinander) und die Abstände (padding, border, margin, gap) zu bestimmen.

 

[tsunami]

Vielen Dank für die schnelle Antwort. Grrr. Dachte ,wenn mm angeboten wird, funktionert es auch. Css3.
Logisch finde ich es nicht, wenn alles in mm ist. Ob nun 1mm 12 oder 25 Pixel sind. 32 Boxen x 15 mm sind 480 mm Pixel oder mm. Warum dann das Produkt nicht passt. ...

 

[tsunami]

Ok umgesetzt. 50px width x 32 =1600.
Passt nicht.ab width 1643 für das Umgebende div, gibt es keinen Umbruch mehr. Dachte das border jeweils auch einen px braucht. Wären aber 1664 bzw 1632.passt aber auch nicht.

 

[MrMurphy]

Berechnungen kannst du nur auf korrekten und konkreten Grundlagen vornehmen. Mit "dachte" wirst du nie zu einem richtigen Ergebnis kommen.

Du willst offensichtlich die erforderliche Breite des umgebenden Containers ausrechnen.

Dann musst du zunächst entscheiden, ob der umgebende Container einen Innenabstand (padding) haben soll. Und hat der umgebende Container einen Rahmen (border) innerhalb seiner Außengrenzen?

Dort hinein sollen dann 32 Container nebeneinander.

Sollen die 32 Container jeweils einen Rahmen (border) haben? Soll der Rahmen sich in den Containern befinden oder ihn umranden? Das kannst / musst du mittels CSS bestimmen. Wie breit soll der Rahmen sein?

Sollen die Container einen Abstand zum umgebenden Container (margin) haben?

Sollen die Container Abstände (margin) zueinander haben? Soll die Abstände genau so groß sein wie die beiden Außenabstände zum umgebenden Container? (Zur Erinnerung: Es geht nur um die Berechnung in der Breite, nicht in der Höhe.)

Die Angaben müssen alle für eine Berechnung bekannt sein. Und zum Schluß musst du noch richtig rechnen.

Beim Erstellen der Seite musst du dann die notwendigen CSS-Angaben hinzufügen beziehungsweise bei einer schon bestehenden Seite unsinnige / störende CSS-Angaben löschen.

 

[tsunami]

Also, im ersten Schritt möchte ich nur 32 Boxen nebeneinander. Damit man es lesen kann, gerne mit hor. Scrollbalken. Wegen der Optik und wegen Scrollen habe ich um divs einen weiteren gepackt. Damit man es sieht, mit border.

Beispielsweise für den Mai. Der April hat 30 Tage, der Februar 28/29 usw. Deswegen berechnen.

Die Überlegung: 32 boxen a 1 px border =64 px.die Außenborder 2 px=66 px plus die width mal 32.zb width:50px =1600 plus 66 px. Gleich 1666 px. Optisch passen tut es aber mit 1643 width. Also 23 px weniger. Irgendwo in der Rechnung sind 23 px zu viel gezählt.

Echo "der Mai hat ".$maxdatumboxbreite." Pixel und ".$number." datumsfelder";?>

<div style ="width:calc(32 * 70px); border:1px solid blue;height: 15px;margin:30px;">
<?php
echo '<div style="border:1px solid red;width:70px;height:15px;float:left;"></div>';


for($x=1;$x<=$number;$x++)
{
echo "<div style='border:1px solid green;width:70px;height:15px;text-align:center;float:left;font-size:0.8em;'>".$x.".".$selmonth.".".$selyear."</div>";

}?></<div>

Im zweiten Schritt, soll dann eine Spalte links dazu kommen. 06:00 - 22:00 unterteilt in 15 Minuten. Also 16 h mal 4 viertel = 64 boxen plus 64 mal border:1px mal 2 rechts und links.

Aber erstmal möchte ich verstehen wie es berechnet wird. Optisch, wie Margin etc. Zum Schluss. Erwähnen sollte ich vielleicht, dass es aktuell an einem Samsung tablet getestet wird.

Neuer Versuch mit calc

 

[Rolf B]

Erste These: Das Tablet skaliert möglicherweise herum. Hast Du die meta viewport Angabe drin?

Zweite These: Mathematik ist wie CSS. Die Kunst ist, das Rechnen zu vermeiden. Es gibt mehr Möglichkeiten, Elemente nebeneinander zu setzen.
- Man könnte mit display:inline-block und white-space: pre herumfummeln. Macht mehr Mühe als es nützt.
- Man könnte jede Zeile zu einer Flexbox machen. Umständlich
- Man kann den Kalender als Grid aufbauen.
- Und manchmal ist eine Tabelle auch einfach nur eine Tabelle. Ich rate Dir zu table. Mr Murphy wird - wenn er der gleiche Mr Murphy ist, den ich von Selfhtml kenne - einen Herzklappenstillstand bekommen, aber ein Kalender mit Tagen als Spalten und Viertelstunden als Zeilen **ist** eine Tabelle.

Guck mal

Variante 1: Mit einer Zelle je Uhrzeit
Variante 2: Mittels rowspan="4" dehnen sich die Tagesspalten über die 4 Uhrzeitzeilen. Bei 64 Zeilen natürlich rowspan="64". Das ganze Aussehen kommt via CSS aus dem Stylesheet.

Wichtig ist die Angabe width:max-content für die Tabelle, damit der Browser die Spaltenbreiten nicht zusammenquetscht. Soll der doch rechnen!