Nicht sichtbare Menüteile in der mobilen Ansicht

[SvenLaupitz]

Moin,

Ich bin der Admin einer Schulhomepage (nicht der Ersteller und Designer, nur der technische Betreiber), die inzwischen ziemlich komplex geworden ist.

Das Hauptmenü bereitet mir ziemliches Kopfzerbrechen.

Hauptsächlich zwei Fragen hab ich:

1. Wie bekomme ich es hin, dass das horizontale Menü in dunkelgrau IMMER alle Menüpunkte NEBENEINANDER anzeigt (also ggf. einen Scrollbalken generiert)?

2. In der mobilen Ansicht ist das Menü z.B. auf dem iPhone überhaupt nicht vorhanden. iPad funktioniert problemlos.
Woran kann das liegen? (es gibt keine dezidierte Mobilversion der Seite, bzw. soll es auch nicht geben. Nur die klassische Seite soll auf iPhone etc. voll funktionsfähig sein)

So, ich hoffe als DAU jetzt nicht alle Profis bis zum Milzriss hin amüsiert zu haben.

Über ne Antwort freut sich

Sven Laupitz

www.gymnasium-broich.de

[folkfreund]

Hallo Sven,
das ist eigentlich der typische Fall für die Anwendung einer alternativen Navigation, falls der Platz im Viewport zu klein wird.
Dafür gibt es mehrere Ansätze (dynamisch in der Headernavigation mehr Platz schaffen, damit die Menüpunkte in mehrere Zeilen umbrechen können - oder ein alternatives 'Hamburger'-Menü, das dann auch auf Mobilgeräten eine gute Figur macht). In beiden Fällen muss es dazu keine eigene Mobilversion der Seite geben.

Ich habe jetzt in der Mittagspause zu wenig Zeit das genauer zu erklären. Später mehr - oder du bekommst noch weitere Tipps von den Kollegen hier ;-)

folkfreund

[fusch]

Hallo Sven,

mal auf die Schnelle. Das ist sicherlich nicht perfekt, aber ein Ansatz, an dem Du weiter spielen kannst. Die Webseite -besonders die Menüs - wird damit wieder benutzbar. Es sollte nach Deinem sonstigen CSS geladen werden:

@media screen and (max-width:375px) {
  
  figure, img {
    max-width: 100%;
  }
  
  #main_nav {
    height: auto;
    background: #666;
  }
  
  #main_nav ul {
   display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  
  #main_nav ul li {padding: .5em;}
  
  #main .custom {
    box-sizing: border-box;
  }
  
  
  #main .custom #bildbereich .inside, #main .custom #bildbereich {
    height: calc(.5 * 100vw);
  }
  
	#top_menu, #main_nav, #container, #main, #main .custom, #logo, #bildbereich, .inside, #main .inside {
    width: 100%;
    max-width: 100vw;

  }
  
  #anschrift {
    display: none;
  }
  #container {top: 0}
  #main .inside{
    padding-top:  calc(.5 * 100vw);
  }
}

Viele Grüße
Hella

[SvenLaupitz]

Erstmal Danke für die Antworten.

Da ich ja DAU bin, hab ich noch ein paar (sicherlich furchtbar doofe) Fragen.

Das CSS ist quasi der Code, der ensteht, wenn ich contao mit den jeweiligen Angaben füttere. Klar.

In meiner CSS Übersicht sind aber mehrere Kategorien, die wiederum mehrere Einträge haben,
Z.B. "default", "basic" oder "content_menu"

Wenn ich das richtig kapiert habe, liegt mein problem in der "main_nav"

Wie muss ich den Haufen CSS Codes, den mir Hella vorgeschlagen hat, einpflegen?
Bin ich auf dem richtigen Dampfer, dass das alles zusammen EIN weiterer Eintrag in der main_nav sein muss? Ganz unten, damit das zum Schluss geladen wird?

Sven

[SvenLaupitz]

Okay,

Habs gefunden, als CSS Code eingegeben, funktioniert aber nicht.

Ich versuche jetzt einmal herauszufinden, wo überhaupt das betroffene menu zu finden ist. main-nav ist es nicht.

[fusch]

Hallo Sven,

lege Dir einfach eine Datei mit dem Namen "mobile.css" oder so ähnlich an, am besten in einem simplen Texteditor. Dort kopierst Du den Code rein.
Dann kannst Du ihn in Dein Dateisystem reinladen (am besten in einen Unterordner mit dem Namen CSS oder so).
Als nächstes gehst Du in Dein Seitenlayout (Layout -> Themes -> Seitenlayout) und wählst Dein Layout aus. Unter "Stylsheets" wählst Du bei "externe Stylesheets" die neue Datei mobile.css aus. Dann solltest Du noch einstellen, dass die internen Stylesheets vor den externen geladen werden.
Cache löschen und sehen, ob alles passt.

Ich hoffe, das war nachvollziehbar, sonst frag einfach noch mal.

Viele Grüße
Hella

[SvenLaupitz]

Moin Hella,

Der von dir vorgeschlagene Code bringt überhaupt keine Veränderungen. Ich habe auch nirgendwo die Option gefunden, externe Stylesheets zuerst zu laden. Es ist jetzt einfach ein weiterer Eintrag in der Liste, den ich gestern ja auch schon direkt in Contao eingegeben habe. Der Import hat also keine Veränderung gebracht.

Ich werd jetzt endlich mal das Update machen, was ich aufgrund Schiss vor Datenverlust hinausgezögert hatte. Vielleicht klärt sich dann auch der Fehler, der mir gestern noch aufgefallen ist.

- (Vielleicht hat ja jemand ne Idee) -

Durch Rumprobieren bin ich Stück für Stück dahintergekommen, was die einzelnen Eintrage in der main_nav so machen.
Allerdings ist da ein Fehler drin, den ich nicht verstehe:

Alle Links zeigen dasselbe Verhalten, das ja auch in den Einträgen hover, active, etc definiert ist (Schriftart, Farbe, Uppercase, etc)

Nur der ERSTE ganz links hält sich im active Modus NICHT an die Menüeinstellungen! Zum Mäusemelken, ich krieg den einfach nicht dazu, sich so zu verhalten wie die anderen.

So. Freitag gibts n Update.
Sven

[3dr]

Mache vor dem Update ein Backup deiner Datenbank und aller FTP-Daten. Informiere dich wie du gegebenenfalls eine Datenbanksicherung einspielst und welche sonstigen Maßnahmen bei einem missglückten Update erforderlich sind um den derzeitigen Stand wieder herzustellen.

[folkfreund]

Der von dir vorgeschlagene Code bringt überhaupt keine Veränderungen. Ich habe auch nirgendwo die Option gefunden, externe Stylesheets zuerst zu laden. Es ist jetzt einfach ein weiterer Eintrag in der Liste, den ich gestern ja auch schon direkt in Contao eingegeben habe. Der Import hat also keine Veränderung gebracht.

Dann bist du vermutlich an der ganz falschen Stelle, bzw. hast nicht verstanden, was Hella dir vorgeschlagen hat.
Hast du eine neue Datei mobile.css bei dir lokal auf dem Rechner erzeugt, Hellas Code da reingeschrieben und die dann per FTP hochgeladen in einen Ordner unter files/?

Ich werd jetzt endlich mal das Update machen, was ich aufgrund Schiss vor Datenverlust hinausgezögert hatte.

Dann verrate uns doch mal, mit welcher Contao-Version du aktuell arbeitest.

Edit:

Ich bin der Admin einer Schulhomepage (nicht der Ersteller und Designer, nur der technische Betreiber)

Gibt es den Ersteller der Seite noch und könntest du den evtl. befragen oder um Hilfe bitten?

[SvenLaupitz]

Hi

Dann bist du vermutlich an der ganz falschen Stelle, bzw. hast nicht verstanden, was Hella dir vorgeschlagen hat.
Hast du eine neue Datei mobile.css bei dir lokal auf dem Rechner erzeugt, Hellas Code da reingeschrieben und die dann per FTP hochgeladen in einen Ordner unter files/?

Ja, allerdings bietet contao unter den Themes nur den CSS Import und greift dann auf mein lokales Verzeichnis zu.
Auch die Möglichkeit irgendeine Hierarchie einzustellen finde ich nirgendwo (was mich ja dann auch auf die Idee "Update" gebracht hat)

Dann verrate uns doch mal, mit welcher Contao-Version du aktuell arbeitest.

3.0.6

Update muss ich sowieso machen, da wir demnächst einen Bereich brauchen, in den eine http Datei per ftp hochgeladen werden kann. Ich hab in diversen Forumsbeiträgen gelesen, dass neuere Contao Versionen ihre Datenbank selbstständig synchronisieren, was Voraussetzung hierfür wäre.



Edit:

Gibt es den Ersteller der Seite noch und könntest du den evtl. befragen oder um Hilfe bitten?

Hab ich schon versucht, ist ein ehemaliger Referendar und irgendwie über alle Berge...

Danke
Sven

[folkfreund]

Ja, allerdings bietet contao unter den Themes nur den CSS Import und greift dann auf mein lokales Verzeichnis zu.
Auch die Möglichkeit irgendeine Hierarchie einzustellen finde ich nirgendwo (was mich ja dann auch auf die Idee "Update" gebracht hat)

Nein, du sollst diese Datei nicht über das Contao-Backend, sondern per FTP auf deinen Webspace hochladen.
Und das Layout findest du unter "Layout | Themes", dann aber nicht das Icon (CSS), sondern über das Icon (Seitenlayouts). Dort findest du evtl mehrere Layouts, in denen du überall die hochgeladene mobile.css aktivieren musst.

[SvenLaupitz]

Das war der Entscheidende Hinweis (allerdings ging es trotzdem über das Backend!)

Die Mobilversion zeigt jetzt das Menü an, allerdings wird nicht die gesamte Breite generiert und auch die rechte Spalte wird UNTEN angehängt (was für eine Mobilversion aber eigentlich gar nicht mal schlecht ist.

ALLERDINGS:

Wenn ich das Handy (iPhone) drehe, wird die rechte Spalte generiert, aber das Menü ist wieder weg.

An welche Parameter muss ich ran?

Sven

[mlweb]

Nur der ERSTE ganz links hält sich im active Modus NICHT an die Menüeinstellungen! Zum Mäusemelken, ich krieg den einfach nicht dazu, sich so zu verhalten wie die anderen.

Dem fehlt einfach die Klasse "active", wenn die betreffende Seite die aktuelle Seite ist. Warum das passiert, also warum diese nicht gesetzt wird, kann ich so auf die Schnelle nicht sagen. Meine erste Vermutung geht in Richtung fehlerhaft angepasstes Template.

Für Anpassungen im Layout sollte man solide Kenntnisse in HTML und CSS mitbringen.
Wenn Du eher Redakteursarbeit übernimmst, dann kann es ggf. hilfreich sein für regelmäßige Updates und/oder Layoutanpassungen professionelle Hilfe in Anspruch zu nehmen.

Eure Seite ist ja insgesamt nicht responsiv. Ging das mobile Layout denn schon mal oder machst Du das jetzt neu? Außerdem reicht nur die Navigation anpassen nicht aus, damit eine Webseite auch auf allen Mobilgeräten vernünftig bedienbar ist. Nach meiner Erfahrung ist der saubere Umbau auf eine responsive Website nicht ganz trivial.

Eure Seite hat aber auch noch ein Problem, welches ich in den heutigen Zeiten als ausgesprochen bedenklich einschätze:

• kein eigener Punkt Datenschutzerklärung
• Datenschutzbereich im Impressum nach der neuen DSGVO m.E. nicht ausreichend (Achtung! das ist keine Rechtsberatung, sondern meine Meinung)
• Version 3.0.6 sollte dringend aktualisiert werden, am besten gleich mindestens auf eine Version 4.4 LTS (mit Zwischenschritt 3.5.x)
  da gab es einige Sicherheitsupdates
• https sollte eigentlich auch eingerichtet werden

[SvenLaupitz]

Dem fehlt einfach die Klasse "active", wenn die betreffende Seite die aktuelle Seite ist. Warum das passiert, also warum diese nicht gesetzt wird, kann ich so auf die Schnelle nicht sagen. Meine erste Vermutung geht in Richtung fehlerhaft angepasstes Template.

-- Hm, aber er verändert sich ja und die Veränderungen lassen sich anpassen - sie werden nur optisch nicht umgesetzt wie bei den anderen Menüpunkten.

Für Anpassungen im Layout sollte man solide Kenntnisse in HTML und CSS mitbringen.

-- Jo. Das ist mir klar.

Wenn Du eher Redakteursarbeit übernimmst, dann kann es ggf. hilfreich sein für regelmäßige Updates und/oder Layoutanpassungen professionelle Hilfe in Anspruch zu nehmen.

-- Darüber hab ich schon nachgedacht und auch jemanden ins Auge gefasst.

Eure Seite ist ja insgesamt nicht responsiv. Ging das mobile Layout denn schon mal oder machst Du das jetzt neu?

-- Naja, was heisst "ging"? Grundsätzlich lassen sich alle Seiten aufrufen. Einzig das Hauptnavigationsmenü ist einfach nicht sichtbar.
Wäre das sichtbar, hätte die Seite alles, was sie diesbezüglich haben soll.

Außerdem reicht nur die Navigation anpassen nicht aus, damit eine Webseite auch auf allen Mobilgeräten vernünftig bedienbar ist. Nach meiner Erfahrung ist der saubere Umbau auf eine responsive Website nicht ganz trivial.

--- glaube ich gerne. Nach wie vor weiss ich aber nicht, ob das überhaupt nötig ist.

Eure Seite hat aber auch noch ein Problem, welches ich in den heutigen Zeiten als ausgesprochen bedenklich einschätze:

• kein eigener Punkt Datenschutzerklärung
  
  --- Hier meinst du ein Popup, richtig? Ja, das habe ich auch auf der Liste.
  
• Datenschutzbereich im Impressum nach der neuen DSGVO m.E. nicht ausreichend (Achtung! das ist keine Rechtsberatung, sondern meine Meinung)
• Version 3.0.6 sollte dringend aktualisiert werden, am besten gleich mindestens auf eine Version 4.4 LTS (mit Zwischenschritt 3.5.x)
  da gab es einige Sicherheitsupdates
  
  --- Und die o.g. Autosynchronisation. Allerdings hab ich noch etwas Ehrfurcht vor dem Update Prozess.
  
• https sollte eigentlich auch eingerichtet werden
  
  --- Hab mich mal schlau gemacht. Ist auch auf der Liste, aber eher unten, da es keinen Datenaustausch User --> Page gibt.
  

Danke!

[mlweb]

Du solltest Deine jeweiligen Antworten vom Zitat trennen.

Hm, aber er verändert sich ja und die Veränderungen lassen sich anpassen - sie werden nur optisch nicht umgesetzt wie bei den anderen Menüpunkten.

Man braucht dem ersten Navigations-Punkt, wenn man auf der Seite "Aktuelles" ist in den Entwicklertools temporär nur die Klasse "activ" zu geben und schon verhält sich der Menüpunkt genauso wie jeder andere, der gerade Menüpunkt einer aktiven Seite ist. Das css für den jeweils aktuellen Menüpunkt ist nun mal in der Klasse "activ" festgelegt (nicht zu verwechseln mit dem aktiven Zustand eines Links).

Grundsätzlich lassen sich alle Seiten aufrufen. Einzig das Hauptnavigationsmenü ist einfach nicht sichtbar.
Wäre das sichtbar, hätte die Seite alles, was sie diesbezüglich haben soll. ... Nach wie vor weiss ich aber nicht, ob das überhaupt nötig ist.

Das mag Ansichtssache sein. Ich sehe da so einige Problemstellen. Außerdem hast Du ja inzwischen offensichtlich das css von @fusch geschafft einzubauen. Die hat ja diesbezüglich für die Displays bis 375px einiges justiert.

Hier meinst du ein Popup, richtig?

Nein, ich meine einen Menüpunkt "Datenschutz" oder "Datenschutzerklärung" mit einer reguläre Seite mit der Datenschutzerklärung nach der neuen DSGVO.

Und die o.g. Autosynchronisation.

Was bitte ist damit gemeint?

Allerdings hab ich noch etwas Ehrfurcht vor dem Update Prozess.

Mit ordentlichem Backup (DB, Files und Konfigurationsdateien, ggf. manuell installierte Erweiterungen) und Update in einer zweiten, parallelen Installation ist das mit keinem Risiko verbunden.