Template funktioniert online nicht wie offline (Navigationsleiste, Dropdown-Menü, Breadcrumbs, Banner)

Werte Forenschaft,

nachdem meine Templateproblematik im Backend durch fachmännische Beratung hier erfolgreich behoben wurde, habe ich noch ein paar Fragen zur Template-Umsetzung, da mein Template online nicht genau das macht, was es offline aber korrekterweise tut. Der Link zur entsprechenden Seite ist folgender, allerdings nur noch bis 01.12. aktiv, da das ein Testaccount ist:
http://www.20171101870.joomla-demo.de/

1) Die Navigationsleiste hängt irgendwie mit einem Rand von geschätzt 30px unter dem oberen Rand, sollte aber oben am Rand kleben. Hättest da jemand eine Idee, woran das liegen könnte? Da per css-template alle Margins und Paddings auf 0px gesetzt sind, wüsste ich auf Anhieb nicht, wo ich anfangen sollte, zu suchen. Die Navigationsleiste an sich, die mit dem blauen Hintergrund programmiert ist, ist ja auch ganz oben am Rand und in dieser befindet sich die Liste mit dem das Menü realisiert ist.

2) Zudem habe ich zwar ein Untermenü zu einem Menüpunkt erstellt und auch Untermenüpunkte anzeigen lassen, allerdings funktioniert das online noch nicht ganz so, wie es offline funktioniert. Auch habe ichdie ganzen Einstellungen (Moduleinstellungen & Menüeinstellung) in Joomla! wie im folgenden Video noch einmal überprüft und entsprechend angepasst.
youtube.com/watch?v=NS8of-9Cg1o
Ich habe gesehen, dass es auf dieser Seite schon einen Thread von camouflage über ein ähnliches Problem gibt, aber ich denke, bei mir liegt ein anderes Problem vor, da das Dropdown-Menü im css einwandfrei programmiert sein sollte. Damit das aber jeder noch mal selbst beurteilen kann, habe ich mein Template in den Anhang gepackt. Um die erlaubte Anhanggröße nicht zu überschreiten fehlt eine Schriftart, auf die im CSS verwiesen wird, was aber an der Funktionalität nichts ändern sollte.

Außerdem wird im Obermenü (Karate Dō) in der rechten oberen Ecke ein kleiner Kreis angezeigt (beim Hovern erkennbar). Ich kann mich noch entfernt daran erinnern, das auch bei der Erstellung meines Templates gesehen zu haben, habe das dann aber über die Listeneinstellungen entfernen können. Wie man diesen entsprechend entfernen kann, wüsste ich auch gern, sofern dazu jemand Rat weiß.

3) Die Breadcrumb-Formatierung ist auch nicht so wie erwartet. Obwohl per css-Template die text-decoration auf none gesetzt ist, werden Listenpunkte angezeigt. Außerdem werden die Navigationspunkte alle untereinander aufgeführt, wodurch diese dann irgendwann in den Artikel hineinlaufen und das, obwohl sie eigentlich per css links floaten sollten.

Zudem habe ich zwar inzwischen den Text "Aktuelle Seite:" ausblenden können, allerdings wird auch dessen ursprünglich vorhandener Listenpunkt noch immer angezeigt. Ich denke aber, dass sich das erledigt, wenn die zwei vorgenannten Fehler zu den Breadcrumbs behoben werden.

4) Nicht in erster Linie essentiell aber zur Vollendung der Seite interessant wäre noch, wie ich mein Logo zwischen den dritten und vierten Menüeintrag (siehe Anhang vom offline-Template) bekomme. Zwar habe ich einen Menüeintrag erstellen können, der auf das Bild verweisen kann und ich habe auch eine Banner-Komponente zuweisen können, aber da leider in der Navigation das Banner-Modul hinter dem Menü-Modul
programmiert ist, wird es zwangsweise immer unter/hinter der Menüleiste auftauchen. Gibt es eine Möglichkeit, einen Menüeintrag mit einem Bild zu ersetzen oder das Banner-Modul beziehungsweise die dazugehörige Komponente zwischen den Menü-Einträgen zu platzieren?

Sofern diese Probleme gelöst sind, ist das Grundgerüst der Seite insoweit erstmal fertig, dass ich anfangen kann, die wichtigen Inhalte einzupflegen. Die Sidebars links und rechts würde ich dann irgendwann später hinzufügen und hoffe nur, dass ich dabei nicht auf allzu große Schwierigkeiten stoße.

Freundliche Grüße,
Thomas

BTW @admin: Als ich gerade versuchte, mein zip-Archiv hochzuladen, bekam ich permanent die Fehlermeldung "Beim Hochladen der Datei ist ein unbekannter Fehler aufgetreten." Da ich dann irgendwann vermutete, dass es am Browser (Firefox) liegen könnte, habe ich mich in Chrome angemeldet und da hat es funktioniert. Das gleiche Problem hatte ich zuvor auch, allerdings legte sich das dann irgendwann willkürlich.

Hallo Vorposter und vielen Dank für eure Antworten,

dass die Seite noch nicht ausgereift und lediglich auf ein Format optimiert ist, ist mir im Übrigen klar. Ich wollte aber bei meinem ersten Template erstmal überhaupt ein solides Grundgerüst erschaffen, an dem ich dann hinterher Änderungen für mobile Empfangsgeräte, verschiedene Auflösungen, halbe Bildschirmbreite und so weiter vornehmen kann.

Der NAVIGATION-Text ist tatsächlich einfach der Modulname. In meinem Backend ist er ausgestellt, weswegen er auch im Frontend nicht auftaucht.
EDIT: Ich habe gerade die Einstellungen noch mal geprüft und der Modulname war auf Anzeigen gestellt, wodurch auch der vertikale Versatz entstand. Da Schrift- und Hintergrundfarbe identisch waren, hatte ich das nicht sofort gemerkt. Ich sollte bei sowas öfter STRG-A benutzen...

Zitat

Listenpunkte sind aber das da: w3schools.com/cssref/pr_list-style.asp

Mit Listenpunkten meinte ich, dass links neben den Breadcrumb-Links Punkte auftauchen, die per

#Breadcrumb a{
    text-decoration: none;
}

eigentlich nicht dort sein sollten.

Zitat

Probiers doch mal mit dem Standard Template: Protostar.

Abgesehen davon, dass in erster Linie das Dropdown-Menü lediglich nicht funktioniert, sehe ich keinen Grund dafür, mich noch mal in ein anderes Template einzuarbeiten und dann umzuschreiben, was ich daraus brauche. Ich habe ja nicht grundlos ein eigenes Template einem existierenden Standardtemplate vorgezogen. Beez3 beispielsweise ist so unübersichtlich, dass ich da mehr Zeit hätte investieren müssen, das auf meine Bedürfnisse umzuschreiben, als ein eigenes Template zu schreiben, welches übrigens mit anfangs nur Grundkenntnissen binnen 7 Sitzungen funktionsfähig war und nach weiteren 2 Sitzungen dann auch so aussah, wie ich es haben wollte.

Zitat

wie sieht es bei dir offline aus? Ehrlich gesagt, bei mir hier sieht es schrecklich aus. Wie arbeitest du offline?

Offline funktioniert die Seite bei mir einwandfrei und wird in Firefox wie auch in Chrome identisch angezeigt. Beim IE hatte ich einige Probleme, die ich aber inzwischen auch ausgemerzt habe. Offline sieht die Seite bei mir so aus, wie im template_Preview. Kannst du mal einen Screenshot schicken von dem, was du mit "schrecklich" meinst?

Ich weiß nicht genau, was du meinst, aber offline arbeite ich mit Chrome und Firefox, editier meine Dateien in Notepad++ und hab die Seite Stück für Stück aufgebaut, angefangen beim groben Seitenlayout, dann dem Menü, dessen Formatierung, dann daraus ein Dropdownmenü gemacht und dann das formatiert.

Zitat

Aber generell - da stimmt vieles nicht.

Könntest du mir dann sagen, was daran genau nicht stimmt, außer dass die Seitenmaße fixiert sind? Ich muss dazu sagen, dass das Template momentan auch erst zu 70 % fertig ist, da wie oben beschrieben, noch einige Einstellungen geändert beziehungsweise hinzugefügt werden sollen, die aber an der Grundfunktionalität nicht viel ändern. Wichtig war mir für's Erste, eine funktionierende Seite online schalten zu können, die sich nicht allzu sehr von dem unterscheidet, wie sie später mal aussehen soll.

Freundliche Grüße,
Thomas

@Oberaffe & @JoomlaWunder
Gegen eure persönlichen Meinungen kann ich ja nichts sagen, aber warum soll man ein eigenes Projekt aufgeben, nur weil es nicht von Anfang an reibungslos funktioniert? Wäre das meine Option der Wahl, gäbe es den Verein inzwischen überhaupt nicht mehr. Jeder hat mal irgendwann angefangen, Templates zu schreiben und ich stehe dabei nunmal ganz am Anfang.
Da ich aber offline (siehe Anhang) die Seite exakt so programmieren konnte, wie ich sie zuvor erdacht hatte und es nun lediglich daran scheitert, ein paar Modulpositionen nebeneinander anzuordnen und das Dropdown-Menü auch im Template zum Laufen zu bringen, bin ich noch weit davon entfernt, das Handtuch zu werfen.

Inzwischen habe ich eine Modulposition hinzugefügt, um das Menü in linke und rechte Hälfte zu teilen, damit dazwischen das Banner positioniert werden kann. Das Banner wird auch vom rechten Menüteil umflossen, nachdem ich in der css das Bannermodul gestylt habe, aber obwohl ich das gleiche mit dem Menü-Modul getan habe, reiht sich das nicht mit ein. Am fehlenden Platz kann es nicht liegen, da ich das Banner-Modul auch mal habe ausblenden lassen, ohne eine Änderung zu sehen.

Wenn das Dropdown-Menü online so funktioniere würde, wie es das offline tut und die drei Module sich anständig nebeneinander anreihen ließen, wäre das Problem gelöst. Dann würde es auch nicht mehr so

Zitat

schrecklich

aussehen.

Natürlich wäre eine einfache und schnelle Option, ein gängiges Template anzupassen, aber einerseits bin ich jemand, der ungern Abkürzungen nimmt und andererseits mache ich die meisten Dinge gern selbst, damit ich im Nachhinein auch nur mir Vorwürfe machen kann, wenn was nicht so läuft wie erwünscht.

In dem Sinne würde ich mich also freuen und wäre überaus dankbar, wenn ihr mich mit etwas konstruktiveren Kommentaren unterstützen könntet.

@Oberaffe Wenn es dir so oder so nicht allzu wichtig ist, Anfängern unter die Arme zu greifen, kann ich gern auf solche Kommentare verzichten. Es gibt sicherlich genügend andere Threads, in denen man sich nicht solch schreckliche Dinge ansehen muss.

@firstlady Vielen Dank für deinen Beitrag. Die doppelte Scrollbar, die auf deinem Screenshot zu sehen ist, habe ich im Erstellprozess zwar auch schon mal gesehen, allerdings taucht sie bei meinem Firefox 57.0 nicht auf. Auch sieht das Menü ganz anders aus. Bei dir ist WadoRyu als Untermenü korrekt unter KarateDo, wenngleich nicht richtig formatiert und der restliche Menüteil steht darunter. Ich habe bei mir alles in zwei Reihen (siehe Anhang).
Die Kosten sind nicht das Problem. Kostenlose Templates gibt es zu genüge und der Server wird auch 4,50 € im Monat (DM-Solutions) kosten, aber bevor ich eben für eine öffentlich unzugängliche Plattform bezahle, wollte ich eine vorzeigbare Basis haben, die meinen Vorstellungen gerecht wird.

@christine2 Danke auch für deine Kommentare. Ich versuche mal, wie folgt darauf einzugehen:
<extension ...
Hierbei, wie an vielen anderen Stellen habe ich aus einer Vorlage von joomla.org abgetippt: https://docs.joomla.org/Creating_a_basic_Joomla!_template/de
Beim Namen sowie der Beschreibung kann es gut sein, dass JOOMLA! keine Leerzeichen verarbeiten kann, was überaus traurig wäre, weil ich keine Füllzeichen mag, die so eine Beschreibung nicht gerade leserlicher machen.

Die Dropdown-Einträge in der index.html sind tatsächlich statisch. Das aber auch nur, weil ich nicht weiß, wie man so etwas dann dynamisch umsetzt. Für's erste ist das aber die Anzahl an Untermenüs, die ich benötigen werde.

Wenn jemand für die vorgenannten Problematiken sich und seine kostbare Zeit opfern könnte, wäre ich wirklich überglücklich. Da aber das HTML-Gerüst steht, wäre eine andere Option für mich einfach, die Seite ohne CMS auf einen blanken Server zu packen. Ich weiß, dass das im Nachhinein mit reichlich Arbeit verbunden ist und auch die Erstellung von Kontaktformularen, Kalendern, Login-Bereich und so weiter viel umständlicher wird, aber daran kann man immer noch später arbeiten. Wichtig ist, dass ich erstmal eine angemessene Internetpräsenz schaffe.
Kennt von euch vielleicht jemand einen Anbieter, der sowohl freien Webspace wie auch eine spätere JOOMLA!-Installation darauf bereitstellt?

P.S.: Anhang hochladen funktioniert in Firefox wieder ohne Probleme. Danke, falls daran was getan wurde.

Werte Gemeinde,

da ich der Lösung einige Schritte näher gekommen bin, möchte ich kurz mitteilen, was ich hinsichtlich der Lösungsfindung heute unternommen habe.

Nach etwas Recherche bin ich darauf gekommen, dass ich mich ja mal allmählich mit einem Override versuchen könnte. Gesagt getan, Joomla! 3.8 macht's relativ einfach, da es im Backend die Möglichkeit gibt "Override erstellen" zu klicken, sodass automatisch der nötige Ordner samt Dateien angelegt wird, die man dann editieren kann.

Ich habe also im mod_menu die default.php in Zeile 69 wie folgt geändert:

if ($item->parent)    {        $class .= ' parent';    }    echo '<li class="Dropdown">';    //hier war zuvor lediglich "' . $class . '" eingetragen

Dann habe ich auch noch in Zeile 87 der ungeordneten Liste für das nav-child-element die entsprechende Klasse zugewiesen:

// The next item is deeper.    if ($item->deeper)    {        echo '<ul class="DropdownMenu">';    //hier war die Klasse zuvor mit "nav-child unstyled small" ausgezeichnet    }

Damit funktionierte dann das Dropdownmenü wie gewünscht und damit ich nicht noch irgendwann weitere Probleme bei der Menügestaltung bekomme, habe ich auch noch in Zeile 22 das "nav menu[...]" von <ul class="nav menu<?php echo $class_sfx; ?>"<?php echo $id; ?>> durch "menu[...]" ersetzt. Es lag also einfach daran, dass die von Joomla! automatisch zugewiesenen Klassen nicht mit denen übereinstimmten, die ich selbst definiert hatte.

In der default.php vom mod_banners hatte ich erst mit

<style>.bannergroup {padding-left: 67px;padding right: 67px;float: left;}

das entsprechende div, das das Banner enthält gestylt, bin dann aber auch da auf die Idee gekommen, einfach die schon fertig gestylte id aus dem css zuzuweisen und habe in Zeile 20 aus <div class="banneritem"> einfach <div id="AKD"> gemacht, da das Element so in der template.css definiert ist. Diese id war mit einer entsprechenden Breite von 270px und float: left; definiert, sodass das Banner auch vom links stehenden Menü umflossen werden sollte.

Damit war aber leider immer noch nicht das Problem behoben, dass sich nicht alle Elemente nebeneinanderlegen und ganz durch Zufall ist mir aufgefallen, dass das einfach mal daran lag, dass ja der Klasse "menu" noch eine feste Breite von 1890px zugewiesen war, die logischerweise dann auch auf die beiden getrennten Module angewendet wird. Der Zufall lag übrigens daran, dass ich zur Überprüfung, ob meine Änderungen Effekt haben und wo ein Element genau anliegt, den geänderten Elementen kurzfristig einen Rahmen zuweise. Der Rahmen vom Menü-Modul ragte dann eben 1890px über die gesamte Seite, wodurch kein Platz mehr war, um irgendwas daneben einfließen zu lassen. Fragt mich jetzt nicht, warum sich teilweise das zweite Modul rechts neben das Banner gesetzt hat, denn das habe ich nicht mehr weiter erforscht. Jedenfalls habe ich dann der template.css folgende Anpassungen vorgenommen:

#Navigation     .menu{        margin: auto;        width: auto;         /*stand vorher auf 1890px*/        height: 94px;        list-style-type: none;        float: left;         /*hinzugefügt. damit sich alle Elemente im Menü nebeneinanderreihen*/}

Da durch die automatische Breite der Menümodule und das links floaten die Zentrierung im Eimer war und ich momentan nicht weiß, wie ich die realisiere (margin: auto; greift da jedenfalls nicht), habe ich dem ganzen <nav>-Tag im Prinzip links einen Rand von 13px gegeben.

Bezüglich der Breadcrumb habe ich mir ebenfalls die default.php vom mod_breadcrumbs angeschaut, dort entsprechend für die ungeordnete Liste wieder die class="breadcrumb" mit der in meiner template.css definierten id="Breadcrumb" ersetzt.

Da ich da zum ersten mal gesehen habe, dass nicht einfach nur Links hintereinander gereiht werden, sondern eine Liste erstellt wird, habe ich in der template.css den Eintrag

#Breadcrumb li{         /*adjustment for Breadcrumb list in Joomla!*/    float:left;}

hinzugefügt, damit die Listenelemente sich alle aneinanderreihen. Da aber nun immer noch jeder Link mit einem vorangestellten Punkt angezeigt wurde, habe ich erst wieder mit <style>-Angaben im Modul selbst getestet und habe dann die Formatierung der Listenpunkte gelöscht. Das ganze habe ich auch wieder in die template.css eingepflegt und dann unter #Breadcrumb folgenden Zusatz eingefügt:

#Breadcrumb{
[...]
list-style-type: none;         /*Entfernung der Formatierung/Punkte in Joomla!-Breadcrumb*/
    [...]
}

Wer sich meine Seite jetzt noch mal anschauen möchte, kann das gern unter diesem Link tun:
http://20171101870.joomla-demo.de/
Bis Freitag ist die Seite noch online. Da ich aber jetzt die gröbsten Unstimmigkeiten beseitigt habe, denke ich, dass ich im Dezember die Seite endlich starten kann. Dann sollte man sie per Google-Suche nach "Asahi Karate Do Düsseldorf" hoffentlich finden, wenn meine Suchmaschinenoptimierung sich dann als wirksam erweisen wird. Ansonsten sollte die Domain www.asahikaratedo.de euch zu der Seite bringen.
Sollte sich jemand dazu bereiterklären, mich beim Thema responsiveness und Kompatibilität für mobile Empfangsgeräte zu unterstützen, wäre ich überaus dankbar.

Natürlich nehme ich auch gern jede angebrachte, konstruktive Kritik an, die dazu beiträgt, die darauf abzielt, die Seite stabiler und für mehr Anzeigeformate kompatibel zu machen.

Für die vielen Kommentare möchte ich mich noch einmal bedanken, wenngleich ich die Lösung letztendlich selbst erarbeitet habe, aber manchmal muss man erst in so einen Dialog kommen, um wieder Motivation zu schöpfen und auf andere Idee zu kommen. In diesem Sinne hoffe ich, dass mein Lösungsweg auch anderen eine Hilfe sein wird.

P.S.:
Merke: Beim nächsten Mal nicht versuchen, das Template auf Joomla! zuzuschneiden, sondern Joomla! zurück auf das Template zurückführen. ID-Zuweisung per Overwrites und Überprüfung von css-Formatierungen mit Rahmen ftw.

Nachdem ich die Seite inzwischen offline bis zu bestimmten Mindest- und Maximalbreiten formatabhängig gestaltet habe, bedurfte es noch einigen Änderungen bei der Menü-Gestaltung.

1) Die Breite, die ich offline für einen Menüpunkt verwendet hatte, wurde online auf das gesamte Menümodul angewendet, wodurch sich die verschiedenen Menüpunkte dann den Platz teilen mussten, der sonst für einen einzigen Menüpunkt vorgesehen war. Ich habe dann einfach der .menu-Klasse die Breite der Summe der enthaltenen Menüpunkte zugewiesen. Da ich mittig einen Banner auf 13,5 % der Breite verwende, von dem sich links und rechts die Menümodule mit jeweils 3 Menüpunkten befinden, ergab die Rechnung (100 % - 13,5 %)/2 = 43.25 %, sodass ich dann 43 % für die Modulbreite verwendete.

Da alle weiteren Breitenangaben sich immer auf das Elternelement beziehen, musste ich natürlich weitere Anpassungen vornehmen.

2) Da ein Modul wie schon gesagt 3 Menüs enthält, bekam jeder Listenpunkt\Link im Modul eine Breite von 33,3 % zugewiesen

3) Auch den Menüs, die ein Dropdownmenü enthalten, habe ich inzwischen mit einer einzelnen CSS-Anweisung eine Breite vorgegeben, da diese sonst nicht wie zuvor die gleiche Breite annahmen, wie die Menüs ohne Dropdownmenü. Woran das lag, dass das vorher funktioniert hatte, ist mir bislang schleierhaft, wird aber momentan auch nicht weiter untersucht. Jedenfalls haben dann die Dropdown-Menüpunkte ebenfalls die Breite von 33,3% bekommen.

4) Nun sollte man meinen, dass die Dropdownmenü-Menüpunkte eine Breite von 100 % (gleich breit wie Elternelement) oder ebenfalls 33,3 % bekommen sollten, allerdings waren 100% zu breit, jedoch nicht so breit, wie das Menü-Modul selbst und 33,3 % waren schmaler, als der Menüpunkt, unter dem ausgeklappt wird. Letztendlich habe ich den Wert auf 42 % gesetzt, wodurch das ausgeklappte Menü etwas schmaler ist als der Hauptmenüpunkt.

Nach diesen Änderungen habe ich die Seite mit zwei Handys (Sony Xperia Z1 Compact und Huawei Ascend Mate P7) angesehen und auch mal in meinem Browser rein- und rausgezoomt, sowie die Fenstergröße verändert und kann eigentlich keine großen Fehler mehr erkennen. Sogar die Modulpositionen sehen jetzt nicht mehr so fehlplatziert aus, wenn man sie einblenden lässt.

Sollte in diesem Thread ab und an jemand reinschauen, der konstruktive Kritik zu der Seite äußern kann und möchte, sollte die Seite demnächst unter www.asahikaratedo.de zu finden sein.

Für die Plattform zur Diskussion und die hier erhaltene Unterstützung möchte ich vielmals bedanken. Ich hoffe, der Thread stellt auch für künftige Template-Ersteller eine Hilfe dar. Bei Fragen kann man mich gern auch per privater Nachricht kontaktieren.

Da die Seite für mich momentan so funktioniert, wie erwünscht, und keine gravierenden Fehler aufweist, sehe ich das Problem als erledigt, sodass der Thread geschlossen werden kann.