Verschobene Text und Seite wird nicht transparent

waterpolo schrieb am 25.11.2018 um 15:20 Uhr

Hallo,

in der Suche bin ich nicht fündig geworden und zum probieren sind mir jetzt die Ideen ausgegangen, aber wahrscheinlich ist die Lösung wie so oft sehr simple.

Problem 1:
http://essv.org/test1.htm
http://essv.org/arnstdaedter%20traditionswettkampf%202018.htm
Als Beispiel mal diese beiden Seiten. Für beide ist eine mobile Website eingerichtet, jedoch werden auf Smartphones die Texte über die Seitenbegrenzung hinaus angezeigt. Das Textfeld ist kleiner wie die Seite und am Rechner wird es auch bei verkleinertem Browser richtig angezeigt
Kann mir hier jemand eine Lösung nennen?

 

Problem 2:
http://essv.org/kalender-a.htm
https://www.magix.info/de/forum/ein-button-lsung-fr-mobile-seiten-im-wd-10-premium--1100972/
Ich habe nach der Anleitung von BeRo eine Navigationsleiste erstellt, diese ist am beginn der Seite fixiert und scrollt nicht weg. Leider funktioniert es nicht den Hintergrund Transparent einzustellen, so das weiterhin dieses weiße Feld erscheint.
Lediglich wenn ich nur die jeweilige Seite in die Vorschau nehme funktioniert alles wie es soll.

Versionsnummer: MAGIX Web Designer Premium 11.2.4.40985  DL x64 Sep 18 2015

Ich hoffe ich konnte mich genau genug Ausdrücken, vielen Dank schon mal vorab wenn ihr euch mit dem Thema beschäftigt!

Kommentare

marboe schrieb am 25.11.2018 um 18:00 Uhr

Hi, zu deinem erst genannten Textproblem: bei mir wird der Text aus beiden Seiten Smartphone gerecht angezeigt. Aller Text ist sichtbar.

Somit kann ich dein Problem nicht nachvollziehen.

 

Zu deiner Navileiste :

Schau mal wie das auf meinem Smartphone aussieht :

Auch das weiße Feld ist zu sehen. Warum machst du das so? Auch der WD 11 kann doch schon richtige Navileiste auf Smartphone - Varianten. So glaube ich mich jedenfalls zu erinnern.

Ohne deinen Code zu kennen, die verwendeten Größen und der Aufbau in deiner Projektdatei ist Hilfe hier schwierig. Mit diesem Aufbau kannst du auf keinen Fall sinnvoll die Navi in einer Unterebene öffnen lassen. Du solltest also nur eine Hierarchieebene auf den mobilen Seiten nutzen. Gruß marboe

waterpolo schrieb am 25.11.2018 um 18:34 Uhr

Hallo Marboe, danke für deine Antwort.

Bei mir schait es auf dem Smartphone so aus:
Der Text ist an der rechten Seie abgeschnitten, sowohl bei der 320px breite als auch bei 480px

Das Ziel war die Navigationsleiste und den Titel fixiert oben stehen zu haben.Das vom Layout her alles noch etwas verschoben ist, ist mir Bewusst. Ich wollte aber nicht daran weiter arbeiten, wenn das Problem nicht gelöst ist.
Bezüglich den richtigen Navileisten für mobile Seiten weiß ich nicht ganz was du meinst, bzw. habe diese noch nicht finden können.

Von der Erstellung her bin ich der oben verlinkten Anleitung gefolgt. Auf der Seite der Navigationsleiste habe ich im HTML-Code (body) folgendes stehen :

<style type="text/css">
html,body {background-color: transparent; }
</style>

Auf der Testseite ist ein Platzhalter mit folgendem Code im Body abgelegt:
 

<style type="text/css">
 #navbar {position: fixed; left: 411px; top: 0px;}
</style>

<div id="navbar">
<iframe width= "68,6" height="110" allowtransparency="true" scrolling="no" frameborder="0" src="navbar.htm" style="display:block;"
align="left"></iframe>
</div>

Dies habe ich für Titel und Navileiste einzeln gemacht, da ja nur die Navileiste das Dropdown Menü benötigt.

marboe schrieb am 26.11.2018 um 07:56 Uhr

@waterpolo
Das liest sich erst mal alles korrekt so.
Allerdings ist deine navbar.htm zu groß angelegt.

Nur die Größe des roten Buttons soll eingebunden werden.

Die weiteren Links müssen mit der Eigenschaft "parent" geöffnet werden. Es ist somit grundsätzlich möglich, dass sich ein ein größeres Iframe-Fenster über einem kleineren öffnet.

Vielleicht hilft es dir, die Anleitung von BeRo nochmal Schritt für Schritt nachzuarbeiten. Dass sie funktioniert mit deiner WebDesigner-Version - dass kann ich bestätigen. Ich hatte sie damals ja auch eingebaut.
Mit neueren Versionen des WD sind diese "Klimmzüge" nicht mehr nötig, da der WD nun auch fixierte Objekte sehr einfach händeln kann.

Der Text ist an der rechten Seie abgeschnitten, sowohl bei der 320px breite als auch bei 480px

 

Das ist erneut für mich auf den veröffentlichten Seiten nicht reproduzierbar.
Fehlerquellen gibt es hier reichlich. Von der Tatsache, dass die Vorschau nur eine abgespeckte Version des IE zur Voransicht nutzt (und da du mit veralteter Software unterwegs bist ...), über nicht geleerten Browsercache bis hin zur Tatsache, dass ein zu großes Iframe (s.o.) hier in die Quere kommen kann.
Für den momentanen Stand deines Designs kannst du das sicher erst mal vernachlässigen. Wenn deine Navi mal steht, löst sich das Problem vielleicht von alleine auf.
Gruß Marboe

waterpolo schrieb am 27.11.2018 um 19:05 Uhr

Vielen Dank für deine Mühe, leider komme ich nicht weiter.
Habe jetzt die Anleitung nochmal in einem komplett neuen Projekt ausprobiert und habe das selbe Ergebnis.

Die Navbar.htm ist nicht wie du beschreibst zu groß, sondern direkt an den Button angepasst. Das Problem entsteht durch den Code, um das Dropdown Menü komplett angezeigt zu bekommen, muss die Höhe jenes angegeben werden. Dieser Bereich sollte Transparent sein, ist es aber wie zu sehen leider nicht.


Auch bei dem Text Problem auf der mobilen Webseite komme ich nicht weiter, trotz Cache zurück setzen zeigen alle 4 Smartphones die ich bisher probiert habe den Text nicht komplett an.

Hier noch mal ein Beispiel, von der 320px Seite, vielleicht gibt es ja noch Gedanken dazu.

Aus dem Webdesigner

Screenshot von meinem Handy

Gruß waterpolo