4
Div Breite berechnen
Guten Morgen,
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.
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.
Weiterer Versuch: px statt mm und css3 mit calc
Dann ne Funktion, welche border berücksichtigt.
Nächster Ansatz
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 1643px width. Also 23 px weniger. Irgendwo in der Rechnung sind 23 px zu viel gezählt.
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. Optik, wie Margin etc. zum Schluss. Erwähnen sollte ich vielleicht, dass es aktuell an einem Samsung tablet getestet wird.
Alles erfolglos. Es gab auch Versuche mit calc(100% / 32) oder calc (100% / 32 px). Bin schon fast so weit, eine Tabelle zu nehmen. Wo ist der Fehler.? Ich habe auch feste Werte genommen.
Gruß
Aloja
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> Weiterer Versuch: px statt mm und css3 mit calc
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> Nächster Ansatz
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 1643px 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>Aber erstmal möchte ich verstehen wie es berechnet wird. Optik, wie Margin etc. zum Schluss. Erwähnen sollte ich vielleicht, dass es aktuell an einem Samsung tablet getestet wird.
Alles erfolglos. Es gab auch Versuche mit calc(100% / 32) oder calc (100% / 32 px). Bin schon fast so weit, eine Tabelle zu nehmen. Wo ist der Fehler.? Ich habe auch feste Werte genommen.
Gruß
Aloja
Auf Facebook teilen
Auf Twitter teilen
Auf Reddit teilen
Auf Linkedin teilenBitte markiere auch die Kommentare, die zur Lösung des Beitrags beigetragen haben
Content-ID: 51939416948
Url: https://administrator.de/contentid/51939416948
Ausgedruckt am: 23.11.2024 um 10:11 Uhr
4 Kommentare
Neuester Kommentar
Hallo,
Grundatz in 2024: mm Angaben interessieren niemanden, wir bauen Responsive UIs.
Hab dir mal eine Demo gebaut:
codepen.io/epixc0re/pen/XWwJjNL
LG,
Stefan
Grundatz in 2024: mm Angaben interessieren niemanden, wir bauen Responsive UIs.
Hab dir mal eine Demo gebaut:
codepen.io/epixc0re/pen/XWwJjNL
LG,
Stefan
Moin,
kurz am Rande: Nach meinen Erfahrungen funktionieren weder px noch em zuverlässig.
Vermutlich weil die Browser selbstständig die Sachen umrechen in Abhängigkeit vom Display, Webseite und Wetter.
CSS ist der letzte Dreck an dem seit Jahre immer wieder gefummelt wird.
Ich bin mir aber noch nicht sicher ob JS oder CSS schlimmer ist.
Stefan
kurz am Rande: Nach meinen Erfahrungen funktionieren weder px noch em zuverlässig.
Vermutlich weil die Browser selbstständig die Sachen umrechen in Abhängigkeit vom Display, Webseite und Wetter.
CSS ist der letzte Dreck an dem seit Jahre immer wieder gefummelt wird.
Ich bin mir aber noch nicht sicher ob JS oder CSS schlimmer ist.
Stefan
2
Hi, ich glaube, ich habe die Lösung:
So habe ich recht und links noch Rand und es sieht gut aus. Vielen Dank für die Demo. Was genau ist mit Response gemeint?Es kommt oftmals vor. Mm ok. Aber Pixel sind auch nicht intuitiv.
Gruß aloja
<div style="width: max-content; padding: 0 100px;height:60px;box-sizing:border-box;padding: 55px;>
<div style="width: max-content; padding: 0 100px;;border:1px solid red;margin:15px;height:50px;box-sizing:border-box;padding: 5px;vertical-align: middle; text-align: center;overflow-x: scroll; ">
<div style ="width:70px;border:1px solid green;float:left;box-sizing:border-box;display: table-cell;vertical-align: middle; text-align: center; ">1</div>
<div style ="width:70px;border:1px solid green;float:left;box-sizing:border-box;display: table-cell;vertical-align: middle; text-align: center; ">2</div>
<div style ="width:70px;border:1px solid green;float:left;box-sizing:border-box;display: table-cell;vertical-align: middle; text-align: center; ">3</div>
<div style ="width:70px;border:1px solid green;float:left;box-sizing:border-box;display: table-cell;vertical-align: middle; text-align: center; ">4</div>
<div style ="width:70px;border:1px solid green;float:left;box-sizing:border-box;display: table-cell;vertical-align: middle; text-align: center; ">5</div>
<div style ="width:70px;border:1px solid green;float:left;box-sizing:border-box;display: table-cell;vertical-align: middle; text-align: center; ">6</div>
<div style ="width:70px;border:1px solid green;float:left;box-sizing:border-box;display: table-cell;vertical-align: middle; text-align: center; ">7</div>
...
</div></div>
Gruß aloja
Zitat von @StefanKittel:
Vermutlich weil die Browser selbstständig die Sachen umrechen in Abhängigkeit vom Display, Webseite und Wetter.
Vermutlich weil die Browser selbstständig die Sachen umrechen in Abhängigkeit vom Display, Webseite und Wetter.
Erstell normal kaum Seiten. Aber vor Jahren in guten Tutorials schon gelesen, dass am Anfang das "Nullen" steht. Firefox, Opera, IE - alle haben alleine beim Offset schon alleine eigene Vorstellungen.
Die ersten Codeblöcke sind ja Browser Detection und dann - so war es früher meist - IE 6, IE 7 fix, If not....
