Probleme mit Karte
borisbaer
Probleme mit Karte
borisbaer
Rolf BHallo zusammen,
ich habe ein Problem mit der absoluten Positionierung von Elementen:
Die einzelnen Karten-Elemente (als inputs realisiert) verändern beim Zoomen und bei anderen Auflösungen (z.B. auf mobilen Endgeräten) ihre Position ein wenig, was dazu führt, dass sie falsch platziert sind. Ich habe es mit px, em und % versucht – ohne Erfolg.
Kann man da irgendetwas machen? Vielen Dank schon mal!
Boris
-
Hallo borisbaer,
also zunächstmal solltest Du was wegen background.webp unternehmen. Diese Elefantenhaut ist 4MB groß und lädt, als müsste der Elefant sie persönlich vorbeibringen. Aus Indien… So ein Muster muss man doch durch Kachelung deutlich kleiner bekommen.
Dieser Layout-Bug ist echt subtil.
Die Verschiebung rührt daher, dass deine Checkboxen in divs stecken. Diese divs positionierst Du, und die Checkboxen stecken als INLINE-Element da drin. Ein Inline-Element ist aber ab Werk an die Baseline der Schriftzeile gebunden, und DIE verschiebt sich mit der font-size. Und das tust Du bei Medienwechseln: font-size: 90%.
Lösungsideen:
- gib den Checkboxen in den divs ein vertical-align:top, dann sind sie nicht mehr an die Baseline gebunden. Du musst dann allerdings alle y-Koordinaten der divs nachjustieren
- unprobiert: lass die divs weg und positioniere die Checkboxen absolut - ich vermute aber, dass das am gleichen Problem leidet
- da Du die Größe der .marker.items divs auf 9.5px x 9.5px festnagelst, kannst Du auch die Fontsize darin festnageln. Damit bleibt die Baseline wo sie ist. Das ist vermutlich der geringste Aufwand.
Rolf
--
sumpsi - posui - obstruxi-
Hallo Rolf,
also zunächstmal solltest Du was wegen background.webp unternehmen. Diese Elefantenhaut ist 4MB groß und lädt, als müsste der Elefant sie persönlich vorbeibringen. Aus Indien… So ein Muster muss man doch durch Kachelung deutlich kleiner bekommen.
das verstehe ich nicht ganz. Bei mir ist die Bild-Datei ca. 4 Kilobyte groß. 😵
Die Verschiebung rührt daher, dass deine Checkboxen in divs stecken. Diese divs positionierst Du, und die Checkboxen stecken als INLINE-Element da drin. Ein Inline-Element ist aber ab Werk an die Baseline der Schriftzeile gebunden, und DIE verschiebt sich mit der font-size. Und das tust Du bei Medienwechseln: font-size: 90%.
Danke, das wusste ich nicht!
Lösungsideen:
- gib den Checkboxen in den divs ein vertical-align:top, dann sind sie nicht mehr an die Baseline gebunden. Du musst dann allerdings alle y-Koordinaten der divs nachjustieren
- unprobiert: lass die divs weg und positioniere die Checkboxen absolut - ich vermute aber, dass das am gleichen Problem leidet
- da Du die Größe der .marker.items divs auf 9.5px x 9.5px festnagelst, kannst Du auch die Fontsize darin festnageln. Damit bleibt die Baseline wo sie ist. Das ist vermutlich der geringste Aufwand.
Ich habe die erste Lösungsmöglichkeit gewählt, erschien mir am sinnvollsten.
Vielen Dank für die schnelle Hilfe! 🙂
-
Hallo borisbaer,
das verstehe ich nicht ganz. Bei mir ist die Bild-Datei ca. 4 Kilobyte groß. 😵
Bei mir auch. In /images. Ich habe keine Ahnung, was die darstellen soll, im Browser erscheint sie als graue Fläche, im Bildbearbeitungsprogramm schwarz - es scheint sich dabei um etwas halbtransparentes zu halten, aber die mir zur Verfügung stehenden Malprogramme zeigen das nicht wirklich. Und grau und schnuckelig klein. Vermutlich könntest Du die auch weglassen und einfach das #ccc etwas abdunkeln. Es sei denn, da ist Steganographie am Werk, ein Online-Forensiktool zeigt ein regelmäßiges Punktemuster im Alphakanal.
Die background.webp in /games/demons-souls/images/maps/map dagegen - uh oh...
Rolf
--
sumpsi - posui - obstruxi-
Bei mir auch. In /images. Ich habe keine Ahnung, was die darstellen soll, im Browser erscheint sie als graue Fläche, im Bildbearbeitungsprogramm schwarz - es scheint sich dabei um etwas halbtransparentes zu halten, aber die mir zur Verfügung stehenden Malprogramme zeigen das nicht wirklich.
In Gimp deutlich zu sehen.
ein Online-Forensiktool zeigt ein regelmäßiges Punktemuster im Alphakanal.
Es ist ein Muster.
Ohne Muster, als JPEG (also ohne Transparenz) und mit wenig Wert auf Qualität gespeichert, ergibt sich eine Dateigröße von 1,3KB. Man muss dann aber an den Farben heftig nacharbeiten, weil die Grafik dafür gemacht wurde, auf jeden genügend „unhellgrauen“ Hintergrund die Elefantenhaut zu zaubern.
http://54598532.swh.strato-hosting.eu/images/background.webp
Die lange Zeit bis zum Aufscheinen des Hintergrunds ergibt sich aber vor allem aus einer hin- und wieder sehr langen Wartezeit bis der Server überhaupt beginnt, Daten zu senden, siehe unten). Und, hier auf dem Raspi bemerkbar, dem Auspacken des .webp-formats. Der Transport an sich geht schnell.
Auf dem Strato-Server mit der IP werden laut ipinfo 8055 Domains gehostet. Offenbar dauert es etwas, diese vom Dateisystem zu lesen sobald die nicht mehr im Dateisystem-Cache des Servers sind. Wir haben es hier bei der Kehrseite des niedrigen Preises zu tun.
-
Hallo Raketenwilli,
Gimp, ja, dieses Tool der unbegrenzten Möglichkeiten, kombiniert mit unbegrenzter Unverständlichkeit. Ich hab's auf meinem Computer, habe hin und wieder versucht, es zu verstehen, und bisher jedesmal entnervt aufgegeben. Offenbar bin ich mit der Denke dieser Wühlmäuse nicht kompatibel. Ich konnte die background.webp damit öffnen, sah aber nur Transparenz. Ich habe eine Ebene druntergelegt und bemalt, die background.webp drübergelegt, und außer einer homogenen Abdunkelung nichts bemerkt. Ich bemerke auch auf der Webseite keinen visuellen Effekt dieser Datei.
Wie auch immer - du hast den Unterschied zwischen
/games/demons-souls/images/maps/map/background.webp
und
/images/background.webp
beachtet?
Die zweite ist 4K klein, die erste 4M.
Rolf
--
sumpsi - posui - obstruxi-
Wie auch immer - du hast den Unterschied zwischen
/games/demons-souls/images/maps/map/background.webp
und
/images/background.webp
beachtet?
Ah. Es sind auch noch zwei.
-
-
-
Hallo Rolf,
Die background.webp in /games/demons-souls/images/maps/map dagegen - uh oh...
Ja, ähem, diese Grafik meinst du. Die muss man noch verkleinern, das stimmt.
Werde ich erledigen!
Boris
-