+ Antworten
Ergebnis 1 bis 9 von 9

Thema: Responsive Design: Col 1 wird nicht korrekt ausgeblendet bei vertikalem Menü

  1. #1
    Benutzer
    Registriert seit
    22.11.2009
    Beiträge
    31

    Responsive Design: Col 1 wird nicht korrekt ausgeblendet bei vertikalem Menü

    Hallo!
    Seit gaaanz langer Zeit bin ich wieder hier, weil ich meine Joomla 3.x Websites auf Responsive ändern will. Ich bitte also um Nachsehen, weil ich kein Programmierer bin und eher auf Anfängernievau.

    Ich habe das Template und das vertikale Menü in Col1 auf responsive eingestellt. Der Main-Content ersterckt sich auf Col 2 und Col3. An den für die responsive-Funktionen wichtuigen CSS habe ich nichst geändert. Es tritt folgender Effekt auf:
    Wenn ich die Anzeigebreite im Firefox unter ca. 770px bringe, erscheint korrekter Weise oben links der sandwichförmige Button für die mobile Navigation. Zugleich verschwindet korrekter Weise das vertikale Menü in der Col 1.
    Aber am oberen Rand von Col1 bleibt eine graue Linie und die Col1 wird nicht ausgeblendet, sodass der MainContent sich nicht wie gewünscht, nun auf die Seitenbreite erstreckt.
    Dieses Verhalten bleibt im Bereich bis ca. 490px Breite gleich. Danach verschwindet auch die graue Linie und die Col 1 und der Content erstreckt sich wie gewünscht auf die gesamte Seitenbreite.

    Frage:
    Ist dieses Phänomen ein Fehler? Wie kann ich den beheben?

    Wozu gibt es diesen Ziwschenbereich zwischen ca. 760px und ca. 500px überhaupt?

    Optimal würde ich empfinden, wenn die Schwelle, ab der die Col 1 ausgeblendet und das Mobile-Menü erscheint, auf etwa 600px herabgesetzt würde. Zugleich müsste der Inhalt sich auf die Seitenbreite erstrecken.
    Diese Form der Anzeige kann dann bis zur Min-Width der gesamten Seite aufrecht erhalten bleiben.

    Wie kann ich das verwirklichen?

    Beste Grüße und vielen Dank im Voraus!


    PS: Den störenden Effekt habe ich in Firefox analysiert und einen Screenshot erstellt für die Anzeigebreite, in der das Problem auftritt.

    PS-2: Die URL zu der in Entwicklung befindlichen Site möchte ich nur per PN posten, da die bereits eingestellten Inhalte noch nicht der Öffentlichkeit zugänglich gemacht werden sollen.
    Angehängte Grafiken
    Geändert von Clemens-x (02.11.2015 um 23:29 Uhr)

  2. #2
    Hallo,
    in col1 könnten ja noch andere Module vorhanden sein und das Menü könnte auch ganz wo anders sein. Daher erfolgt keine automatisches ausblenden übergeordneter Elemente.

    Du musst die Spalte in dem Fall manuell ausblenden.
    Wenn du in den Body schaust, siehst du dass eine spezielle CSS Klasse hinzugefügt wird sobald das Mobile Menü erscheint.

    Folgendes z.B. in die basemod css einfügen:
    Code:
    body.jyaml-mobilenav-active .ym-column .ym-col1 { display: none !important }
    body.jyaml-mobilenav-active .ym-column .ym-col3 { margin-left: 0 !important; border-left: 0 !important }
    EDIT:
    Alle weiteren breakpoints kannst in der screen.responsive.css nach belieben bearbeiten und erweitern.
    :: JYAML :: HieblMedia :: Twitter ::
    Zufrieden mit meinem Support? Ich lasse mich gerne überraschen - Meine Wunschliste / oder Spende.

  3. #3
    Benutzer
    Registriert seit
    22.11.2009
    Beiträge
    31
    Danke für die schnelle Antwort! Mir ist natrülich klar, dass Col 1 nicht "automatisch ausgeblendet werden kann", solange dort noch Content platziert ist. Bei der schilderung meines Problems bin ich davon ausgegangen, dass außer dem vertikalen menü kein weiterer Inhalt in Col 1 liegt.
    Es ist doch ein genereller Vorteil des JAML-Templates, dass bei Nichtbenutzung einer der drei Cols diese automatisch ausgeblendet werden. Und so kam ich zu der Annahme, dass dieses Verhalten auch bei der Umschaltung auf Responsive Menü stattfinden würde.

    Immerhin existieren ja offensichtlich CSS-Definitionen, durch die das von mir gewünschte Ergebnis (Wegfall der Col 1 mitsamt dem dort platzierten vertiaklen Menümodul) zustande kommt.... sofern man unterhalb 500px oder 480px Breite bleibt. Also ist das grundsätzlich machbar, was ich mir wünsche!

    Extrem lästig und unschön ist der Bereich von ca. 760px Breite bis ca. 500px Breite, weil da eben in der Col 1 das Menü ausgeblendet weird, aber die Col 1 selbst leer da stehen bleibt und nur am obersten Rand ein Strich existiert.

    Ich stelle dann mal meine Frage anders:
    Was muss ich tun, damit das visuelle Ergebnis, das ich bei unterhalb ca. 480ps erhalte, bereits bei Werten unterhalb ca. 600px Breite entsteht?
    Und was muss ich tun, dass die Aktivierung des Responsive Menü ebenfalls erst unterhalb ca. 600px Breite erfolgt?

    Mit solch einer Anpassung wäre ich ja bereits glücklich! (Später verfeinern kann man immer noch.)

  4. #4
    Danke für die schnelle Antwort! Mir ist natrülich klar, dass Col 1 nicht "automatisch ausgeblendet werden kann", solange dort noch Content platziert ist. Bei der schilderung meines Problems bin ich davon ausgegangen, dass außer dem vertikalen menü kein weiterer Inhalt in Col 1 liegt.
    Es ist doch ein genereller Vorteil des JAML-Templates, dass bei Nichtbenutzung einer der drei Cols diese automatisch ausgeblendet werden. Und so kam ich zu der Annahme, dass dieses Verhalten auch bei der Umschaltung auf Responsive Menü stattfinden würde.
    Ja das ist auch so. Allerdings geschieht das Server-Seitig - zählen der vorhandenen Module. Das hier ist eine aber Client-Seitige Anforderung und bedarf individueller Anpassungen.
    (Beim Horizontalen Menü, was meinst verwendet wird als Mobile-Menü, besteht das Problem initial erstmal nicht.)

    Immerhin existieren ja offensichtlich CSS-Definitionen, durch die das von mir gewünschte Ergebnis (Wegfall der Col 1 mitsamt dem dort platzierten vertiaklen Menümodul) zustande kommt.... sofern man unterhalb 500px oder 480px Breite bleibt. Also ist das grundsätzlich machbar, was ich mir wünsche!
    Extrem lästig und unschön ist der Bereich von ca. 760px Breite bis ca. 500px Breite, weil da eben in der Col 1 das Menü ausgeblendet weird, aber die Col 1 selbst leer da stehen bleibt und nur am obersten Rand ein Strich existiert.
    Ja das ist das serialisieren der Spalten über CSS3 Media-Queries (Responsives Verhalten) und auch nur eine allgemeine Vorlage. Diese sind natürlich wie alles andere individuell ans Layout/Design und den Gegebenheiten des Inhalts anzupassen.

    Ich stelle dann mal meine Frage anders:
    Was muss ich tun, damit das visuelle Ergebnis, das ich bei unterhalb ca. 480ps erhalte, bereits bei Werten unterhalb ca. 600px Breite entsteht?
    Und was muss ich tun, dass die Aktivierung des Responsive Menü ebenfalls erst unterhalb ca. 600px Breite erfolgt?
    Du kannst wie gesagt die breakpoints der Media-Queries in der screen.responsive.css anpassen und erweitern.
    Für das Mobile-Menü gibt es im Modul eine Einstellung wann es einsetzten soll. Diese ist per Default auf 768px gesetzt.
    :: JYAML :: HieblMedia :: Twitter ::
    Zufrieden mit meinem Support? Ich lasse mich gerne überraschen - Meine Wunschliste / oder Spende.

  5. #5
    Benutzer
    Registriert seit
    22.11.2009
    Beiträge
    31

    zusätzl. Problem: Unterschiede in Browsern

    Herzlichen Dank!
    Hab gerade noch mal mit Chrom getestet (auf dem desktop und dann das Browserfenster immer weiter zusammen geschoben):
    Chrome begrenzt die minimale Breite auf 640px, zeigt dann das von mir beschriebene "Ärgernis" im Bereich ca. 750px bis 640px

    Firefox hat unterhalb ca. 755px das beschriebene "Ärgernis", und zeigt unterhalb 458px das gewünschte Erscheinungsbild.

    Ich hänge mal die Screenshots dran (musste aber die Site-URL bzw. den Titel unkenntlich machen).

    Frage:
    Kann ich also meine Wünsche durch alleineige Änderung an der screen.responsive.css erreichen, oder muss ich weitere CSS-Definitionen ebenfalls ändern, damit das alles noch zusammen passt?

    Und wie kann ich eine möglichst gleiche Anzeige auf allen Browsern erreichen, speziell die minimale darstellbare Breite der Site?
    Angehängte Grafiken

  6. #6
    Die Breakpoints bzw. Media-Queries verhalten sich eigentlich in jedem Browser soweit gleich.
    Ich will aber jetzt keine Grundlagen erklären :D

    Kann ich also meine Wünsche durch alleineige Änderung an der screen.responsive.css erreichen, oder muss ich weitere CSS-Definitionen ebenfalls ändern, damit das alles noch zusammen passt?
    Die screen.responsive.css ist dafür vorgesehen. Du kannst natürlich die Media-Queries auch wo anders platzieren. Das ist dir überlassen.

    Und wie kann ich eine möglichst gleiche Anzeige auf allen Browsern erreichen, speziell die minimale darstellbare Breite der Site?
    In der screen.responsive.css siehst du min-width: 0 beim wrapper. Den kannst du z.B. auf min-width: 320px setzten. Das wäre die die Empfehlung bzw. maximal empfohlene Mindestbreite des Google Mobile Testers.
    :: JYAML :: HieblMedia :: Twitter ::
    Zufrieden mit meinem Support? Ich lasse mich gerne überraschen - Meine Wunschliste / oder Spende.

  7. #7
    Benutzer
    Registriert seit
    22.11.2009
    Beiträge
    31
    OK und vielen Dank!

    Hab jetzt mit der screen.responsive.css herumprobiert und ich konnte die Definition der kleinsten Breite (also derjenigen, mit der ich meinen Darstellungswunsch erreiche) von 480px auf 600px festlegen und dieser Bereich funktioniert prima.

    Dann habe ich die Definition mit dem Kommentar: small screens and tablet(portrait) schrittweise reduziert. Da tut sich aber wenig! Selbst wenn ich definiere:
    @media screen and (max-width: 500px), screen and (max-width: 500px)

    bleibt immer ein Variationsbereich der Darstellungsbreite, in der der unerwünschte Effekt auftritt.

    Es wäre für mich ja bereits hilfreich, wenn ich erreichen könnte, dass das Responsive Menü einschließlich dem Verschwinden von Col 1 schlagartig bei unter 600px einsetzen würde und dieser merkwürdige Übergangsbereich komplett wegfällt.

    Tut mir Leid, dass ich mit der Handhabung von CSS nicht so fit bin. Bei mir reicht es bisher gerade mal für die Elementarfunktionen in CSS.

  8. #8
    Benutzer
    Registriert seit
    22.11.2009
    Beiträge
    31
    Kleine Ergänzung, warum ich kein horizontales Menü verwenden will:
    Natürlich könnte ich auch ein horizontales Menü verwenden. Allerdings habe ich spezielle Anforderungen an die Navigation, weil es vier unterschiedliche Themenschwerpunkte auf meiner Website gibt und zu jedem der vier Schwerpunkte existieren zahlreiche Menüpunkte. Da wird sosowhl die Navigation unübersichtlich als auch die Orientierung des Besuchers, wo er sich denn gerade befindet - und das trotz Breadrumbs!
    Man glaubt gar nicht, wie wenig die Besucher bereit sind, ein wenig Hirnschmalz zu investieren, um sich auf Websites zurecht zu finden. Da wird sehr sehr schnell weggeklickt mit den Gedanken "ist mir zu lästig" oder "Find ich nicht". - Genau das will ich mit dem vertilkalen Menü vermeiden.

    Ich hatte bereits eine Lösung ausprobiert, bei der die vier Themenfelder im horizontalen Menü sind und separat dann das vertikale eingeblendet bleibt für die einzelnen Menüpunkte eines Themas. Auch das erschein mir wenig intuitiv zu bedienen, weil zwischen der Mobil-Navigation und der vertikalen Navigation dann bei schmalen Displays das Logo und evtl. auch der Breadcrumb standen. Das wirkte chaotisch.

  9. #9
    Benutzer
    Registriert seit
    22.11.2009
    Beiträge
    31
    Hallo!
    Jetzt hab ich die Ursache meines Problems gefunden: Im Modul des vertikalen Menüs lässt sich unter dem Tab "Responsive Design" die Pixelbreite einetsllen, ab der das Menü verschwinden soll zu Gunsten des Mobile-Menü. Hier hatte ich versehentlich immer noch 768px eingesteltl gehabt.

    Na dann kann ich lange an der screen.responsive.css herumschrauben....

    Meine Site tut jetzt jedenfalls das, was ich wollte! Und ich habe begriffen, dass es drei Bereiche für die Breite der Seite gibt, in denen alles unterschiedlich dargestellt wird. Im breitesten Bereich alles wie "normal". Im nächst schmaleren Bereich werden die Cols übereinander in Reihenfolge dargestellt, sodass das vlist-Menü auf die Seitenbreite ausgedehnt wird und oberhalb des MainContent liegt.
    Im ganz schmalen Bereich wird das vlist-Menü ausgeblendet und das Mobile-Menü als Button in seiner Leiste oben eingeblendet.

    Tja, als Anfänger muss ich das erst mal begreifen. :-)

    Besten Dank für die Antworten!

+ Antworten

Stichworte

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein