Problem mit Darstellung durch html-code (g-maps 360°) 
Author: Robert W.Hallo,
habe (noch immer) ein Darstellungsproblem mit einer Seite, auf der der code für ein 360° Bild von google-maps eingebettet ist.
Da dieses Problem auf keiner der anderen Seiten erscheint, mache ich mal diesen Code dafür verantwortlich (? - s.u.)
Am PC (und den verschiedenen Vorschauen in WSX5) sieht es noch OK aus, nur die weißen Ränder links und rechts deuten schon eine Unstimmigkeit an. Könnte ich gut mit leben, aber auf einem "echten" Mobilgerät erstrecken sich die weißen Bereiche über die halbe Seite (hellgraue Schrift auf w. Untergrund - nicht optimal)
Vielleicht hat jemand eine Idee (außer das 360-Bild durch ein statisches zu ersetzen ;) )
Seite:
https://schmuckwerkstatt-nf.de/werkstatt.html
(offizieller) embedding-code:
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d2323.9902275080267!2d9.0885178!3d54.3748226!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47b3812256a97a15%3A0x89c90741aa194c10!2sSchmuckwerkstatt+Nordfriesland!5e0!3m2!1sde!2sde!4v1442563246503" width="325" height="249" frameborder="0" style=" margin-bottom:5px; margin-top:5px;" allowfullscreen></iframe>
Dank im Voraus,
Der Iframe Code ist eine Google Map! Stimmt das oder was meinst du mit 360 Bild ?? Natürlich ist der Code sehr klein weil die WErte von Breite und Höhe nur in Pixel angegeben ist. WEnn dann muss man dies mit "%" Werten machen.
(It > De)
>> siehe Beispiel mit deiner MAP ... 100/100 ... (Ctrl+U) - (temporär)!
>> siehe Beispiel mit deinem 360 ... 100/100 ... (Ctrl+U) - (temporär)!
... versuchen, einige Variationen, die ich vor einigen Jahren für das elastische IFRAME entwickelt hatte, zu integrieren; ... sehen Sie die Variationen und Ergänzungen fett hervorgehoben; ... können Sie kopieren und direkt in das HTML-Code-Objekt einfügen:
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d2323.9902275080267!2d9.0885178!3d54.3748226!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47b3812256a97a15%3A0x89c90741aa194c10!2sSchmuckwerkstatt+Nordfriesland!5e0!3m2!1sde!2sde!4v1442563246503" width="100%" height="200" frameborder="0" allowfullscreen style="position:absolute;height:100%;top:0px;left:0px;" ></iframe>
.
ciao
.
Author
Danke, werde es mal mit Prozenten probieren.
Habe ich zwar glaube ich schon, kann aber auch nur auf der "Kontakt" Seite gewesen sein.
Da ist das Problem (mit den weißen Flächen) übrigens nie aufgetreten, trotz google-maps-code.
(Da bekomme ich nur immer häßliche Schrollbalken, wenn ich von der jetzigen Größe abweiche / OT)
Bildschirmfüllend will ich das auf jeden Fall nicht haben.
Die jetzige Größe des 360-Bildes ist schon gut.
Das Problem ist halt die Darstellung auf Mobilgeräten (mit den weißen Flächen)
also kann schon gut angehen, daß % die Lösung ist .... sage Bescheid.
thx
(It > De) ... mein Code ist speziell, seit mehreren Jahren einzigartig ...
... wie ich Ihnen bereits sagte, fügen Sie einfach meinen Code in ein HTML-Code-Objekt ein, und es passt sich den Maßen dieses Objekts an, alle Maße ...
... wie es in meinem Beispiel der Fall ist, ist es einzigartig, auch wenn es mittlerweile von allgemeinem Nutzen ist ...
.
ciao
Author
Sorry, ich hatte oben den falschen Code angegeben (den für Standort / maps)
Der echte "Problemcode" (360-Bild) ist
<iframe frameborder="0" width="100%" height="360" style="border: 0" src="https://maps.google.com/maps?layer=c&panoid=F:-3euezmxkmh4/VpjKPitwwuI/AAAAAAAAAZs/-WtqXyJYY9g&ie=UTF8&source=embed&output=svembed&cbp=13%2C23%2C%2C-0.06000000000000005%2C12.3" allowfullscreen=true></iframe>
(online zZt mit "width 90%" , macht aber keinen Unterschied)
____________________________________
wenn ich diesen code 1:1 einsetze bekomme ich nur einen ganz schmalen Streifen angezeigt? (siehe Anhang)
Author
Bild
Was ich so sehe bei dem Code steht das height="200" aber "was"? Pixel wahrscheinlich also "200px" !
Oder mal versuchen auf "height="auto"
(It > De) ... Ciao Robert, ...ich hoffe du verstehst die google übersetzung ...
... für die Zeile, die Sie im STAMP sehen, hängt es nicht von meinem Code ab, der, wie Sie gesehen haben, funktioniert, aber vielleicht stimmt etwas nicht mit den Maßen der Höhe des HTML-Codes des Objekts ...
... aber in NET funktioniert die gleiche Seite gut:
>> https://schmuckwerkstatt-nf.de/werkstatt.html
... die weißen Linien, die Sie auf den Seiten des Smartphones sehen, hängen von dem Hintergrund ab, der für den Zweck nicht geeignet ist und der bei "mobilen" Geräten nicht auf der gesamten Seite fixiert bleibt; ... für diese Dinge wäre ein extra Code von mir nötig ...
... Sie können den Fehler jedoch jederzeit mit diesem zusätzlichen Code beheben, indem Sie in Schritt 1, Benutzerdefinierter Code, Option> Einfügen in das Expertenfenster einfügen, bevor Sie den TAG-KOPF schließen:
<style> #imPageExtContainer { background-image: url('');background-color:#222222} </style>
... meinen temporären Fullpage 360 Code finden Sie hier in Zeile 13 :
>> siehe Beispiel mit deinem 360 ... (Ctrl+U) - (temporär)!
... lass es mich wissen, wenn ich andere Dinge falten muss ...
ciao
height="200" >> HTML
height:200px; >> CSS
.
Author
Danke für die Mühe,
habt Ihr euch die (Werkstatt) Seite denn schonmal auf dem Handy angesehen?
Bei mir ist der Header-Hintergrund schwarz (ok), dann viel weiß (360 Bild in Größe und Funktion ok)
dann wieder ein Stück schwarzer Hintergrund, dann wieder weiß (sozusagen "width 100%")
Die 2 schmalen weißen Streifen links/rechts bei PC-Darstellung dieser einen Seite stören mich nicht besonders ;)
Auf der Seite Kontakt (+allen anderen) funktioniert derselbe Hintergrung ja auch inclusive google-maps-code,
also muss es doch am code (des 360-Bildes) liegen, nicht am Hintergrund?
<style> #imPageExtContainer { background-image: url('');background-color:#222222} </style>
Das wäre dann ein anderer, einfarbiger Hintergrund, evtl. eine Notlösung....
thx
(It > De) ... Entschuldigung, vielleicht habe ich nicht verstanden,
aber ich sehe deine 360 Seite gut, richtig auf dem PC, und mit weißen Seiten auf dem Smartphone ...
Author
Ja, auf PC (und in WSX5 alle Auflösungen) ist es OK,
aber auf "echten" Smartphones (3 verschiedene getestet) sieht es so aus (geht gar nicht)
https://drive.google.com/open?id=16ahwdHE87iIVnqNHB3bH73t7vkGPcZwG
... OK! >> smartphone Android:
Author
Genau!
Da oben geht es mit dem Weiß ja noch so gerade, aber weiter unten (mein Link) kann man ja nichts mehr lesen,
mal ganz abgesehen vom Aussehen ;)
... Vielleicht, weil Sie einen hellen Text auf einem weißen Hintergrund haben, wegen des Problems, das ich Ihnen vorher gesagt habe ...
Author
Der weiße Hintergrund (der nur auf dieser Seite und nur bei Smartphone erscheint) ist ja eben nicht von mir, sondern (zu 99%) in dem 360-Bild / Code begründet (siehe post #1)
(It > De) ... ... wie ich dir schon sagte,
hängt vom hintergrund ab, der für den zweck nicht geeignet ist und von "mobilen" geräten...
... Sie können mit dem vorherigen Code, den ich bereitgestellt habe, lösen ...
... ... ... ... ... ... ... ... ...
... oder alternativ zu diesem Code können Sie meine Erfindung mit dem DIV_CUSTOM ausprobieren ...
... Sie können versuchen, diesen neuen Code in die Option Seiteneigenschaften, Expertenfenster, Benutzerdefinierter Code einzufügen: Vor dem Schließen des TAG-KÖRPERS (Vor dem </BODY>):
<style> #imPageExtContainer { background-image: url('');} </style>
<div id="contenitoreK" style="position:fixed;top:0px;width: 100%;height: 100%;z-index:-1;"><div id="div_customK" style="position:absolute; top:0px;width: 100%;height: 100%;z-index:-1; background-repeat: no-repeat;;background-image: url('https://schmuckwerkstatt-nf.de/images/Black-Background-Collapsar-1050x1680.jpg'); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;background-position: center center;"></div></div>
.
ciao
.
Author
SUPER - das funktioniert!
mille grazie
... smarthphone ... OK ... ciao ...