der horizontale scroll darf eigentlich nicht auftreten, wenn dein breites hintergrundbild in der pasteboard-background-ebene liegt. vielleicht hast du noch andere grafiken in deiner webseite, die über den seitenrand gehen, dann mußt du in den webeigenschaften > website> den haken "auf seitenrand beschneiden" entfernen.

[...] "Browserbreiite ausfüllen" ist bei mir nur auf der Ebene pasteboard background möglich.[...]

Und genau da sind die meisten Objekte der Beispielseite auch platziert.

Mit Ausnahme der im u. a. Screenshot rot gerahmten Objekte, liegen alle im Pasteboard background.

Den Machern des neuen WD sei Dank, ist es jetzt auch nicht mehr nötig, das Hintergrundbild in Formatfüllender Größe auf dem Webspace abzulegen. Wenn die Ladezeit der Seite klein gehalten werden soll (Smartphones!) ist es sogar empfehlenswert, eine möglichst kleine Bilddatei dafür zu benutzen.

Für unser Beispiel genügt daher ein 1.000 Pixel breites Bild vollkommen.

Als erste Aktion, beim Erstellen der neuen Seite, gehört das für den Hintergrund vorgesehene Bild also in den "Arbeitsbereichshintergrund (Pasteboard background)". Dann wird über das Kontextmenü (Rechtsklick auf den leeren Hintergrund im Editor) eingestellt, dass das Bild das Browserfenster ausfüllen soll.

Anschließend können alle anderen Objekte in die Seite eingefügt werden, wobei alle Objekte, die die Browser-Fensterbreite ausfüllen sollen, ebenfalls in die Ebene "Pasteboard background" gehören (s. Screenshot 1).

Auch die PNG Grafik (Text) mit dem transparenten Hintergrund gehört da hinein, weil andernfalls unliebsame Begleiteffekte mit der Transparenz entstehen!

Die Objekte, die die Breite des Browserfensters ausfüllen sollen, bekommen nach einem Rechtsklick noch das Attribut "Browserbreite ausfüllen"

Und wenn Du alles richtig gemacht hast, sieht das Ergebnis so aus (klick)

Solltest Du Probleme beim Umsetzen haben, kannst Du Dir für weitere Experimente hier die WD Projektdatei herunterladen.

Viel Erfolg

----------------------------

Edit: 15:22 h

Fehler in der Beschreibung korrigiert

bero ist uns wieder weit voraus... ich bin noch auf dem stand des wd9 und arbeite mit dem wd10 nur in meinen "alten" seiten... danke bero, ich lade mir mal deinen projektdatei auch mit runter, hab bissel was nachzuholen...

Vielen Dank auch von mir -mal wieder- an BeRo!!!

Dennoch taucht ein Problem auf. Ich habe anschließend eine eigene Test-Seite (auch mit Varianten für Tablet und smartphone) veröffentlichet, doch da verschwindet auf meinem Smartphone das fixierte Hintergrundbild. Um den Fehler einzugrenzen habe ich Deine Projektdatei auf meiner magix-Seite veröffentlicht und auch da war das Hintergrundbild verschwunden. Warum? Auch die Mouse-Over Effekte funktionieren auf dem smartphone nicht. Was ist passiert und wie wird "alles wieder gut" - auf dem Desktop sieht alles super aus.

Grüße

Stefan

[...] wie wird "alles wieder gut" [...]

Indem Du eine Variante für Smartphones erstellst...

Im Ernst. Ich habe das gerade mal probiert und absolut keine Problem bei der Darstellung sehen können. Das fixierte Hintergrundbild ist da wo es sein soll und auch die Links funktionieren inkl. der MouseOver Effekte. Die Demo kannst Du Dir hier ansehen.

Wo/wie Du jetzt einen Fehler eingebaut hast, weiß ich natürlich nicht. Lade Dir mal hier die erweiterte Projektdatei herunter. Dann findest Du die Ursache evtl. schneller...

Viel Erfolg

------------------

Edit 18.10. - 00:6 h

Ich habe die Projektdatei- und die Demo "repariert". Jetzt sollte alles wie gewünscht funktionieren

In der Original Demo exisitert eine dubiose DIV Box, deren Herkunft unklar ist, die aber für die gewünschte Darstellung auf Mobilgeräten sorgt.

Hi, auf meinem Smartphone ist die Darstellung auch nicht korrekt. Das Bild ist nicht füllend und die Navi scheint nicht korrekt. Leider kann ich keinen Screenshot hier einfügen. Gruß Martina

Die Varianten-Demo, die ich gestern so auf die Schnelle "kreiert" habe, funktionierte zwar in allen Varianten auf dem Desktop, auf Mobilgeräten aber nur sehr eingeschränkt.

Ein Vergleich des Quellcodes, den der WD10 prem. beim Erstellen der Site angelegt hat, mit dem Quellcode der Original Demo, zeigte als Ursache der Probleme das Fehlen von Meta Tags und einer DIV Box.

Das sind die fehlenden Meta Tags:

-----------------------------
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="keywords" content=""/>   (s. Fußnote)
-----------------------------

Und das ist die fehlende DIV Box:

-----------------------------
<div class="xr_ap" id="xr_xrii" style="width: 100%; height: 100%; top:0%; left:0%; overflow:auto; -webkit-overflow-scrolling: touch;">
----------------------------

In der Original Demo stehen die Meta Tags korrekt am Anfang des HTML Heads und die DIV Box steht am Anfang des HTML Body Bereichs (Da gehört sie auch hin).

Damit beide Einträge nun direkt mit dem Export/Upload des Projekts aus dem WD Editor erfolgen, habe ich sie beide (ausnahmsweise) im HTML Head der Website untergebracht.
Das entspricht zwar nicht den Regeln, aber es funktioniert

Achtung! Der Code gehört in den Head der Website, nicht in den Head der Seite.
Scheinbar hat der neue WD10 noch einen weiteren Bug, der dafür sorgt, dass Code, der in den Head der Seite eingeben wird, im Quellcode doppelt erscheint! Zumindest bei Websites mit Varianten ist das der Fall.
Die aktuelle Demo funktioniert nicht, wenn der Code doppelt eingetragen wird!

Wer die DIV Box und die Meta Tags in die Original Demo eingebaut hat (der WD oder der Autor) ist unklar. Der aktuell verfügbare WD10 prem. macht das AFAIK jedenfalls nicht automatisch.

Die Funktionsfähigkeit der "reparierten'" Site kann in der online Demo getestet werden.

Die angepasste Projektdatei kann hier, unter der bekannten Adresse heruntergeladen werden.

Beide o. a. Links sind identisch mit den Links aus meinem letzten Kommentar.

-------------------

Edit 11:25 h

Weitere Korrekturen hinzugefügt (Meta Tags).
Demo und Projektdatei entsprechend angepasst, aktualisiert.

-----

Edit 19.10.  -  10:41 h

Das Meta Tag "<meta name="keywords" content=""/>" muss natürlich nicht zusätzlich und schon garnicht leer eingetragen werden.
Es hat nichts mit der oben beschriebenen Problemlösung zu tun und kann ganz normal mit den für die Website nötigen Schlüsselwörtern gefüllt werden.

-----

Edit 20.10. 18:46 h

Links zur Demo- und zur ZIP Datei repariert

Hallo BeRo,

Vielen Dank für Deine Lösung!!! Ohne Dich wäre dieses Forum um einen Tüftler ärmer!! 

Bis zum nächsten"Problem"

Gruß

Stefan

Jetzt bin ich aber dennoch auf etwas seltsames gestoßen. Und zwar... der ein oder andere Browser hat offenbar ein Problem damit, ein beim WD 10 Prem als "Arbeitsbereichshintergrund - Browerfenster füllen" angelegtes Bild korrekt anzuzeigen. Bei meinem Galaxy S5 zeigen zB der Chrome- als auch der von Samsung mitgelieferte Internetbrowser das eigentlich "füllende" Bild nur klein am oberen Rand an. Der Firefox dagegen zeigt auf dem gleichen Gerät das Bild korrekt an. Beim Safari-Browser auf einem iPhone wird ddas Bild ebenfalls korrekt angezeigt. 

Das Problem ist unabhänig von der Seite, die dargestellt werden soll und tritt eben sofort dann auf, sobald ein BG als im Arbeitsbereich Broweserfüllend bestimmt wird. Hast Du / Hat jemand dafür eine Erklärung und Lösung? Oder ist das ein Bug, den Magix / Xara zu verantworten hat?

Grüße Stefan

[...] der ein oder andere Browser hat offenbar ein Problem damit, [...]

Das von Dir festgestellte Problem ist leider nicht neu.

Seit es mehr als einen Browser auf dem Markt gibt, gibt es auch unterschiedliche Lösungsansätze für die Darstellung von Webseiten.

Die darauf zurückzuführenden Probleme sind mit der Anzahl der verschiedenen Browser zwangsläufig gestiegen. Die Problematik scheint sich sogar potenziert zu haben, weil selbst unterschiedliche Releases eines Browserherstellers nicht miteinander kompatibel sind...

Klar, dass bei der Suche nach einem Schuldigen der "schwarze Peter" munter hin- und hergeschoben wird.

Für den vorsichtigen Website Designer heißt das, dass er tunlichst auf "exotische" Tricks bei der Programmierung neuer Seiten verzichten sollte.
Außerdem ist es (zumindest im kommerziellen Bereich) empfehlenswert, neu erstellte Websites vor der Veröffentlichung auf Verträglichkeit mit den gängigsten Browsern (in verschiedenen Release-Ständen) zu testen.

Da sind wir als "kleine" Entwickler zwar eher außen vor, die Probleme bekommen wir trotzdem gelegentlich zu sehen

Dennoch gerne viel Spaß beim weiteren Website Design...

Genau deswegen bevorzuge ich als Hintergrund ein "größeres " Bild von ca 1900px, dann aber natürlich mit möglichst geringer dpiAnzahl. Damit sind die Probleme kleiner. Gruß Martina

BeRo: der Link "online Demo" vom 18.10. führt leider nicht zum gewünschten Ziel. Zumindest mein Smartphone zeigt mir eine magixforumseite ;-) Gruß Martina

@marboe

[...] der Link "online Demo" vom 18.10. führt leider nicht zum gewünschten Ziel. [...]

Ich habe den 1. Link zur  "Online Demo" gerade nochmal getestet, er funktioniert.
Der 2. Link hat scheinbar tatsächlich eine Macke...

Probier's mal mit der direkten Eingabe von: "http://j.mp/bgfix-2"

Viel Erfolg

Hallo Bero,

noch eine Frage zu einer "frühen" Anmerkung von Dir zu dieser Beispiel-Seite. Du hast geschrieben:

Auch die PNG Grafik (Text) mit dem transparenten Hintergrund gehört da hinein, weil andernfalls unliebsame Begleiteffekte mit der Transparenz entstehen!

Was genau meinst Du damit? Ich würde nämlich gerne auch ein schwarzes, transparentes und browserfüllendes Rechteck über das HG-Bild laufen lassen. Was könnte es für unliebsame Begleiteffekte geben? Beim Herumprobieren ist mir jedenfalls noch nichts blödes aufgefallen, aber Du kennst Dich mit den WD-Fallen besser aus.

Gruß

Stefan

[...] weil andernfalls unliebsame Begleiteffekte mit der Transparenz entstehen! [...] Was genau meinst Du damit? [...]

Wenn Du eine Seite mit einem fixierten Hintergrund ausstattest, wie im Thread beschrieben, dann kann der transparente Hintergrund eingefügter Grafiken (PNG Format) mit dem Teil des Hintergrundbilds gefüllt werden, das von dem Transparenzbereich überdeckt wird.

Der eigentlich transparente Hintergrund der Grafik enthält dann permanent den Teil des fixierten Hintergrundbilds, das zum Zeitpunkt des Einfügens von der Grafik überdeckt wurde.
Beim Scrollen des Seiteninhalts siehst Du dann anstelle der gewünschten Transparenz den kopierten Teil des Bildschirmhintergrunds...

Der Effekt kann nur dann sicher vermieden werden, wenn Objekte mit transparentem Hintergrund ebenfalls in die "Pasteboard background" Ebene gelegt werden und nicht in die MouseOff Ebene...

Die Maßnahme betrifft IMHO nur Websites, die mit dem fixierten Fullscreen Background ausgestattet werden, wie im Thread beschrieben.