Gestaltung horizontale Navigation

[radobo]

Hallo, ich weiß, das Thema an sich ist nicht neu, aber die anderen Threads haben mir alle nicht den entscheidenden Tipp gegeben. Die Seite, an der ich rumbastel, ist "denkmalverein-Bonn-aktuell.de".

Ich habe dort eine horizontale Navigation mit 2 Ebenen. Die zweite Ebene wird eingeblendet, wenn ein entsprechender Ebene-1-Punkt ausgewählt wird. Im momentanen Stadium z.B. bei "Der Verein" und "Haus Stroof". Ich möchte die Zeile mit der Anzeige der zweiten Ebene genau linksbündig unter die erste Zeile setzen und auch in voller Länge anzeigen; die erforderliche farbliche Gestaltung kommt dann noch. Von der Idee her wie bei beim OpenSauce-Theme: "https://demo.rocksolidthemes.com/?theme=contao-opensauce&language=de"

Ich experimentiere dafür mit css-Elementen für ".level_2", kriege aber den Effekt nicht hin. Ich bin auch nicht sonderlich erfahren mit der Thematik (siehe meine bisherigen Fragen) Kann mir jemand helfen?

[lucina]

#header .mod_navigation .level_2{
left:0;}

[radobo]

Ja, das hätte ich auch gedacht, hatte es auch schon probiert und aktuell auch noch aktiv, falls jemand reinschauen möchte. Hat aber keinerlei Effekt. Da muss noch irgend ein anderer Trick dabei sein...

[Samuell]

Nein, genau das reicht. Hab es gerade testweise im Browser probiert.

Schau dass der geänderte Wert nach dem originalen Wert steht oder Du das Original direkt ersetzt.

[tab]

Momentan steht da bei dir "left:auto;" ... wenn ich das auf "left: 0;" ändere, passiert genau das Gewünschte.
Edit: Sehe gerade, du hast den selben Selektor wohl zweimal im CSS, aber bei beiden steht nicht "left:0;" drin.

[radobo]

Danke! Ich hatte den berühmten Wald vor Augen. Das left:0 habe ich jetzt in der css-Eingabemaske von contao als "eigener Code" eingegeben. Bislang hatte ich nur bei den Positionierungsoptionen verschiedenes probiert. Aber da kann man nur die Position left numerisch eingeben, nicht das float. Jetzt hab ich richtig!

Die letzte kleine Baustelle: wie krieg ich denn hin, dass die zweite Zeile über die ganze Breite geht?

[lucina]

Schaut stark danach aus als ob Dir

#header .mod_navigation .level_2{
width: 100%;}

helfen sollte ... ;-)

(mit den Entwicklertools Deines Browsers kannst Du das auch leicht selbst herausfinden)

[radobo]

Ja, diese Angabe fehlte. Den berechtigten Hinweis auf die Browsertools aufgreifend: was benutzt man denn da am besten? Ich habe Windows 10 und schalte im Edge-Browser die Entwicklertools ein, dort dann den Reiter Debug. Das ist aber fürchterlich schwer zu lesen, und irgendwelche Optionen ausprobieren, wie im Beitrag oben erwähnt, kann ich dort auch nicht. Ich würde es ja gerne mal lernen....

[lucina]

Ich denke, dass die meisten keinen Microsoft-Browser nutzen, ausser um abschliessend die Fehler auszutreiben.

Ich persönlich finde die Entwicklertools von Chrome sehr nett (die auch auf allen Browsern laufen, die sich die Engine mit Chrome teilen, also beispielsweise Opera, Vivaldi, Chromium), aber auch Mozilla (oder Iceweasel) hat seine Berechtigung. Für Firefox gibt es (noch) die Extension Firebug, die manche gerne zusätzlich einsetzen.

Safari hat unter OSX ebenfalls einigermassen brauchbare Entwicklertools. Aus meiner Sicht nicht die Sahne auf dem Café, aber es geht.

IE oder Edge nutze ich da nur wenn mir jemand Schmerzensgeld zahlt (oder zum Debuggen von absonderlichem Verhalten ... ;-)

[Andreas]

Genau wie lucina sagt benutzen wir den IE oder Edge nur um vor Abgabe auf Fehler zu prüfen. Ich persölich komme mit Firebug oder den Dev-Tools im Firefox am besten klar. Den in Chrome finde ich für Anfänger auch nicht empfehlenswert.

Mir ist aufgefallen, dass du den Wrapper auf 90% Breite gesetzt hast. Davon würde ich dir abraten, weil du solltest darauf achten, dass Textzeilen nicht zu lang werden, es ist sonst sehr anstrengend den Text zu lesen. Es gibt jede Menge Infos dazu im Netz, z.B. hier http://www.webmasterpro.de/design/ar...der-lesbarkeit

[radobo]

Danke, ich werde mir dann wohl doch mal wieder den Firefox installieren. Das Layout der Seite ist noch nicht abschließend, die 90% bleiben nicht so, es sei denn ich gehe auf zweispaltiges Design. Bin aber noch dabei, die Inhalte abzustimmen.