Kompatibilität mit Smartphones / Tablets

    sehr geehrte/r frau/herr,


    Nach Erstellung und Veröffentlichung, testete ich meine Website auf einem Samrtphone später dann auf einem Tablet. Es sind jedoch einige Darstellungsfehler aufgetreten. Es handelt sich bei dem Layout um das "FLAT RESPONSIVE", probleme bei der Darstellung gibt es in den Bereichen "HEADER" / "INHALTSBEREICH" / "FOOTER".


    Zu beachten: Probleme bei der Darstellung gibt es nicht nur auf Smartphones oder Tablets, sondern ebenfalls bei verkleinerten Fenstern am Laptop/PC.


    Zum "HEADER":


    a. Scrollen vom Text:


    Mein Header besteht aus einem Hintergrundbild und Text. Ist das Fenster verkleinert bzw. auf einem smartphone dargestellt, lässt sich der Text-bereich nicht vollständig bis zum Ende scrollen. (Bild: Footer - Smartphone).


    Zu beachten: Das problem tritt lediglich auf der "Startseite" und "Impressum" auf, bei der Darstellung der anderen Seiten, gibt es kein Problem beim Scrollen.


    b. Vererben


    Ich habe versucht den "HEADER" von den anderen Seiten zu kopieren / vererben, jedoch funktionieren die Prozeduren in dem Handbuch nicht. (Das "Auf allen Seiten anzeigen - Kästchen" fehlt auf den anderen Seiten, auch wenn sie als "Wurzelseite" definiert wurden.)


    Die Einstellungen (Layout) der jeweiligen "Header" ist jedoch immer identisch.



    2. Zum "FOOTER":


    Der Footer ist versetzt (chaotisch) auf Smartphones bzw. verkleinerten Fenstern dargestellt (siehe Bilder zu "FOOTER"). Es sind einzelne Bilder die mit dem jeweiligen Link versehen worden sind. (Das Verlinken einzelner Bilder in einem Album ist nicht möglich!?).



    Benutzte Version:

    Zeta Producer 14 Premium




    Vielen Dank für Ihre Bemühungen

    Wie ist die URL zur entsprechenden Website? Wir müssen den Quellcode sehen können um die geschilderten Probleme analysieren zu können.

    OK, danke. Das mit dem Footer ist klar. Sie haben jedes Icon in einem eigenen Artikel in einer Spalte platziert. Und Spalten reagieren eben So auf kleinen Bildschirmen (25%-Spalten werden zu 100%-Spalten…). Besser alle Icons in einem Textartikel in einer Spalte nebeneinander platzieren.


    Was den Header betrifft, scheint hier ein Fehler im Layout vorzuliegen. Das müssen wir noch genauer untersuchen.

    vielen Dank für die schnelle Antwort.


    Ich habe Ihren Rat befolgt, jedoch bleiben einige Mängel in Bezug auf den "FOOTER" bestehen:


    - Unter den Icons befindet sich jetzt ein "unterbrochene graue Linie" Ich schätze dass dies durch das Verlinken im Textfeld entstand. Die Verlinken wird durch eine blaue Umrandung angezeigt, diese ist nicht auf der Website zu erkennen, jedoch erkennt man ein "Überbleibsel" in Form einer grauen unterbrochenen Linie.


    - Auf dem Smartphone bleibt das Problem der "Abordnung" bestehen (ein Zeilensprung) siehe Bild Samrtphone.



    Danke für Ihre Mühe

    Zitat von Heisy

    - Unter den Icons befindet sich jetzt ein "unterbrochene graue Linie" Ich schätze dass dies durch das Verlinken im Textfeld entstand. Die Verlinken wird durch eine blaue Umrandung angezeigt, diese ist nicht auf der Website zu erkennen, jedoch erkennt man ein "Überbleibsel" in Form einer grauen unterbrochenen Linie.

    Dies lässt sich wie folgt korrigieren:


    "Layout" -> "Inhaltsbereich" -> "Hyperlinks": den Eintrag "Textauszeichnung" auf "keine" ändern.

    Zitat von Heisy

    - Auf dem Smartphone bleibt das Problem der "Abordnung" bestehen (ein Zeilensprung) siehe Bild Samrtphone.

    Der Umbruch erfolgt, da die Breite des Smartphones eine Darstellung aller Elemente in einer Reihe nicht zulässt. Hier kann hilfsweise mit 2 Textartikel nebeneinander gearbeitet werden. Solange die breite es zulässt, werden alle 4 Symbole in einer Reihe gezeigt, wenn die Breite nicht mehr ausreicht, werden jeweils 2 Symbole pro Reihe angezeigt.

    Hallo,


    die Ursache für die Fehldarstellung des Header habe ich auch eben entdeckt. Dem Header haben Sie selbst etwas Inline-CSS hinzugefügt, nämlich margin-bottom: -10em; und das verursacht die Fehldarstellung. Einfach dieses CSS wieder entfernen (Header zum Bearbeiten doppelklicken > Mischpult-Icon unten links anklicken > Mehr (unten rechts) anklicken).