Untermenü durch Menücontainer begrenzt

Guten Morgen Community,
ich weiß, dass meine Anfragen für viele unter euch äußerst trivial erscheinen mögen,
jedoch sind sie aktuell noch meine (einzige) Hoffnung auf Rettung.

Ich bin mir darüber im Klaren, dass in meinem ersten Projekt, mit dem ich mit Contao angefangen habe,
zahlreiche Fehler enthalten sind. Da das Projekt allerdings schon eine gewisse Größe überschritten hat
und es als Vorlage für ein Kundenprojekt dient, muss ich da noch durch.

Nun zum Wesentlichen:
Das Navigationsmenü für level_1 und level_2 funktioniert hervorragend, allerdings ändert sich die Situation schlagartig, sobald level_3 ins Spiel kommt.
Das 2. Untermenü (level_3) verhält sich nicht so, wie es eigentlich sollte. Es will den Container, der durch level_2 festgelegt ist, einfach nicht verlassen.
Daher sollte das Menü eigentlich rechts von level_2 auftauchen, tut es aber nicht und wie schon so oft, finde ich die Fehlerquelle nicht.

Wenn ich noch eine weitere Frage daran knüpfen dürfte:
Da unser Grafiker auf diese weißen Linien im Design bestand, ist .inside jetzt um einiges kleiner als #main. Dadurch kommt es bei manchen Unterseiten (z.B. Rebschule) dazu,
dass der .inside-Container, obwohl er viel Text beinhaltet, seine Größe nicht ändert um sich anzupassen.

Danke an euch, die ihr euch immer wieder um die Probleme anderer annehmt.
Vielleicht wäre es an der Zeit, auch einen größeren Schmöker zu Webdesign im Bezug auf Contao zu lesen.
In Ausbildung heißt ja leider noch so viel wie "hat keine Ahnung, was er eigentlich macht" : P

Wie gesagt, Danke für die Hilfe
ich würde mich ja gerne mal revanchieren, was wohl eher schwierig wird, da mein Wissensstand noch weit unter dem euren liegt.

http://s1-software.at/thomas/firstproject/index.php

Dein Link führt auf eine frische contao-Installation ohne Seitenstruktur.
Außerdem würde ich den contao-check laden und ausführen, bevor ich weitermache.

"Eine frische Installation ohne Seitenstruktur"? Das kann nicht sein.
Bei mir funktioniert der Link ganz normal, da ich nebenbei gerade in demselben Contao arbeite.
Tut mir Leid, aber falls du unter dem Link eine "neue Contao-Installation" vorfindest, dann liegt dieser Fehler defintiv nicht bei mir.

Code: [Ansicht]

No root page found

Seite.jpg
Darf man fragen, in welcher Sprache du deinen Browser hast?
Denn die Seite ist aktuell nur auf Deutsch verfügbar.
edit: Sprachenfallback ist jetzt aktiviert

Zitat von theHubi

Sprachenfallback ist jetzt aktiviert

das war's ! Hätte ich selber drauf kommen sollen. Grenoble is' halt in Frankreich. Deswegen auch mein frz. Opera.

gut, dass wir dieses Problem klären konnten. Nun zurück zum eigentlichen Problem: Eine fehlerhafte Contaoseite

Was ich definitiv beim nächsten Projekt beheben muss, ist, dass viele dieser Seitenin verschiedenen Browsern komplett unterschiedlich dargestellt werden.
Ich arbeite z.B. auf Grund von Firebug mit Firefox, Internet Explorer stellt es anders dar, Google Chrome stellt es anders dar, und Opera ebenfalls.
Da muss noch eine Übergangslösung mit Webkits oder ähnlichem her.

Guten Morgen.
Ich hoffe heute kann mir jemand dabei helfen, die vorliegenden Probleme zu lösen.
Kurzfassung:
Das 2. Untermenü (level_3) verhält sich nicht so, wie es eigentlich sollte. Es will den Container, der durch level_2 festgelegt ist, einfach nicht verlassen.
Daher sollte das Menü eigentlich rechts von level_2 auftauchen, tut es aber nicht und wie schon so oft, finde ich die Fehlerquelle nicht.

Wenn ich noch eine weitere Frage daran knüpfen dürfte:
Da unser Grafiker auf diese weißen Linien im Design bestand, ist .inside jetzt um einiges kleiner als #main. Dadurch kommt es bei manchen Unterseiten (z.B. Rebschule) dazu,
dass der .inside-Container, obwohl er viel Text beinhaltet, seine Größe nicht ändert um sich anzupassen.

Dein Menüproblem könnte man lösen z.B. mit

Code: [Ansicht]

#main .mod_navigation .level_2 li:hover ul.level_3 {
position: absolute;
left: 0;
top: 20px;
}

Zitat von theHubi

dass der .inside-Container, obwohl er viel Text beinhaltet, seine Größe nicht ändert um sich anzupassen.

Was meinst du damit? Soll das responsive sein?

Zitat von theHubi

Wenn ich noch eine weitere Frage daran knüpfen dürfte:
Da unser Grafiker auf diese weißen Linien im Design bestand, ist .inside jetzt um einiges kleiner als #main. Dadurch kommt es bei manchen Unterseiten (z.B. Rebschule) dazu,
dass der .inside-Container, obwohl er viel Text beinhaltet, seine Größe nicht ändert um sich anzupassen.

Code: [Ansicht]

*,
*:after,
*:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box; }

Vielleicht hilft das. Ich arbeite nur noch damit.

Zu deinem Menü:

Wenn level_2 eine feste Breite hat kannste einfach, da level_2 ja position:relative ist, level_3 position:absolute machen und mit left: (breite von level2) das ding einfach da rechts ranschweißen. Wenn es keine feste Breite hat, müsstest du wohl per Javascript die Breite vorher auslesen.

P.S.: Darf man Fragen warum du für die Icons keine SVGs benutzt und warum beim Noobslide die Buttons einfach PNGs sind? Wenn das ganze irgendwann mal responsive sein soll, wirst du um SVGs kaum drumherum kommen.

Zitat von kos

Was meinst du damit? Soll das responsive sein?

Damit meine ich, dass der .inside-Container normalerweise die Größe annehmen müsste, die der Inhalt darin benötigt.
Wenn ich etwas anderes einstelle, verstehe ich, dass er sich nicht ändert, aber hätte ich nicht eine Mindesthöhe von 1000px angegeben,
wäre der .inside-Container 0px hoch.

Zitat von Knigge

Code: [Ansicht]

*,
*:after,
*:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box; }

Vielleicht hilft das. Ich arbeite nur noch damit.

Zu deinem Menü:

Wenn level_2 eine feste Breite hat kannste einfach, da level_2 ja position:relative ist, level_3 position:absolute machen und mit left: (breite von level2) das ding einfach da rechts ranschweißen. Wenn es keine feste Breite hat, müsstest du wohl per Javascript die Breite vorher auslesen.

P.S.: Darf man Fragen warum du für die Icons keine SVGs benutzt und warum beim Noobslide die Buttons einfach PNGs sind? Wenn das ganze irgendwann mal responsive sein soll, wirst du um SVGs kaum drumherum kommen.

Danke für die Tipps.
Ich sehe zwar nicht, dass level_2 relative ist, aber dann muss es wohl stimmen.

Diese Seite wurde noch nicht mit SVGs erstellt, weil es:
1. mein erstes Projekt ist und ich mich erst in Contao reinarbeiten musste und muss
2. diese Seite nicht responsive sein soll, da die Homepage nur für den PC gedacht ist, und dafür der Shop responsive wird.
3. ich die Bilder von unserem Grafiker so bekommen habe und sie nur größenmäßig angepasst wurden

Zitat von theHubi

Damit meine ich, dass der .inside-Container normalerweise die Größe annehmen müsste, die der Inhalt darin benötigt.
Wenn ich etwas anderes einstelle, verstehe ich, dass er sich nicht ändert, aber hätte ich nicht eine Mindesthöhe von 1000px angegeben,
wäre der .inside-Container 0px hoch.

Da hast du irgendwo geschlampt, aber jetzt einen 3. zu Fragen wo du den Fehler gemacht hast, damit der alles durchguckt ist finde ich ein bisschen viel verlangt.
Ach und außerdem muss er mind. 1px hoch sein, weil du mit deinem min-height: 1000px das min-height: 1px überschreibst.

Edit:

Hier positition: relative Unbenannt-1.jpg

Zitat von kos

Dein Menüproblem könnte man lösen z.B. mit

Code: [Ansicht]

#main .mod_navigation .level_2 li:hover ul.level_3 {
position: absolute;
left: 0;
top: 20px;
}

Was meinst du damit? Soll das responsive sein?

Leider löst das mein Problem nicht.
In Google Chrome wird zum Beispiel alles richtig angezeigt, in Mozilla Firefox allerdings nicht.
Ich will, dass das level_3-Menü rechts neben dem level_2-Menü ausklappt.

Zitat von Knigge

Wenn level_2 eine feste Breite hat kannste einfach, da level_2 ja position:relative ist, level_3 position:absolute machen und mit left: (breite von level2) das ding einfach da rechts ranschweißen. Wenn es keine feste Breite hat, müsstest du wohl per Javascript die Breite vorher auslesen.

Äh level_2 ist relative, das heißt, dass left: 0 schon mal Schwachsinn ist, da es dann ja automatisch bündig zum linken Rand von level_2 ist.

Zitat von Knigge

Da hast du irgendwo geschlampt, aber jetzt einen 3. zu Fragen wo du den Fehler gemacht hast, damit der alles durchguckt ist finde ich ein bisschen viel verlangt.
Ach und außerdem muss er mind. 1px hoch sein, weil du mit deinem min-height: 1000px das min-height: 1px überschreibst.

Edit:

Hier positition: relative Unbenannt-1.jpg

achso. dieses relative bezieht sich nur auf Google Chrome. Denn wenn ich level_2 auf absolute setze, taucht es bei hover nicht mehr auf. Deshalb geht die Position nur in Chrome von absolute -9999px zu relative 0px.

Was genau du da gemacht hast - keine Ahnung. Ich werde auch nicht deinen Code durchforsten, aber hier ein Beispiel wie man so ein Menü realisieren könnte (jedoch nur bei einer festen Breite, sonst musst du per javascript die breite auslesen und per style attribute left= [ausgelesene Breite] + "px" machen).

http://jsfiddle.net/gLdwuo36/

HTML-Code: [Ansicht]

<ul>
    <li>
    </li>
    <li>
    </li>    
    <li>
        <span>ul hier</span>
    <ul>
        <li>
    </li>
        <li>
    </li>
        <li>
    </li>
    </ul>
    </li>
    <li>
    </li>
    <li>
    </li>
    <li>
    </li>
    <li>
    </li>
    <li>
    </li>
    <li>
    </li>
</ul>

Code: [Ansicht]

*,
*:after,
*:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
* {
    margin: 0;
    padding: 0;
}
ul {
    width: 100px;
    height: auto;
    background: red;
    list-style: none;
    position: relative;
}
li {
    background: blue;
    width: 100px;
    height: 30px;
    margin-top: 4px;
    position: relative;
}
li:first-child {
    margin: 0;
}
ul li ul {
    position: absolute;
    left: 100px;
    top: 0;
    display: none;
}
body > ul li:hover > ul {
    display: block;
}

um mein Problem nochmal zu verdeutlichen:
browsers.jpg

In Google Chrome könnte ich das Menü einfach verschieben und fertig. Aber in Mozilla Firefox stimmt was nicht.

Na das hat von irgendwo overflow: hidden

Zu dem Menüproblem:

Code: [Ansicht]

.mod_navigation ul li:hover ul {
    left: 0;
    margin: 5px auto 10px;
    overflow: hidden;
    padding: 10px 10px 10px 14px;
    position: absolute;
    top: 27px;
}

und weiter z.B.

Code: [Ansicht]

#main .mod_navigation .level_2 li:hover ul.level_3 {
    left: 140px;
    position: absolute;
    top: -18px;
}

Das Problem mit der Texthöhe hängt wohl damit zusammen, dass du viele Inhaltselemente floatest aber dann nicht clearst.

Zitat von Knigge

Na das hat von irgendwo overflow: hidden

das hab ich auch schon herausgefunden, aber wenn ich hidden auf auto oder visible ändere, ändert sich bei mir im Browser nichts.
Ich weiß nicht, ob das an meinem Browser-Cache liegt, aber ich dachte auch, dass das die Lösung des Problems sein müsste.

edit: und heute geht's. Scheinbar war's dann mein Browser-Cache. Danke

Bleibt nur doch der .inside-Container

Zitat von kos

Zu dem Menüproblem:

Code: [Ansicht]

.mod_navigation ul li:hover ul {
    left: 0;
    margin: 5px auto 10px;
    overflow: hidden;
    padding: 10px 10px 10px 14px;
    position: absolute;
    top: 27px;
}

und weiter z.B.

Code: [Ansicht]

#main .mod_navigation .level_2 li:hover ul.level_3 {
    left: 140px;
    position: absolute;
    top: -18px;
}

Das Problem mit der Texthöhe hängt wohl damit zusammen, dass du viele Inhaltselemente floatest aber dann nicht clearst.

Das mag jetzt äußerst dämlich erscheinen, aber wie cleare ich die Inhaltselemente, damit das passt?
Ich hab "clear" bisher noch nie gebraucht/verwendet.

Danke an euch alle, die ihr euch die Zeit genommen habt, mich zu belehren. Ich hoffe, dass ich dieses Wissen irgendwann mal weitergeben kann.

Das ist auch die Lösung des Problems Thomas.

Drücke doch mal in deinem Firefox strg+shift+c und guck dir an was du da gemacht hast.

Du hast ein riesiges Defizit in den Grundlagen. Frag doch einfach mal deine Kollegen, die können dir dann auch live zeigen wo deine Fehler sind.

EDIT:
Zum clear:
Das wurde schon ganz oft im Internet breitgetreten. Google doch einfach mal.

Zitat von Knigge

Das ist auch die Lösung des Problems Thomas.

Drücke doch mal in deinem Firefox strg+shift+c und guck dir an was du da gemacht hast.

Du hast ein riesiges Defizit in den Grundlagen. Frag doch einfach mal deine Kollegen, die können dir dann auch live zeigen wo deine Fehler sind.

EDIT:
Zum clear:
Das wurde schon ganz oft im Internet breitgetreten. Google doch einfach mal.

Da muss ich leider zustimmen. "Meine Kollegen fragen" wird ein wenig schwierig, da wir ein Betrieb mit 4 Mitarbeitern sind und ich unser zukünftiger Contao-"Spezialist" werden soll, mich aber wie gesagt noch in Ausbildung befinde. Alles, was ich bisher zu dem Thema absolviert habe, ist ein Videotraining von video2brain.
Daher wohl auch meine riesengroße Wissenslücke, wenn man nicht überhaupt sagen kann, dass ich nur hier und da einzelne Fetzen weiß.

Dann würde ich dir ein oder zwei gute Bücher empfehlen, oder je nach Vorliebe und Arbeitsweise auch online Tutorials. Manche stehen sogar auf Video-Tutorials, wobei ich da für mich sagen kann, mein Ding ist das nicht. Ganz im Ernst, völlig ohne Grundlage in HTML und CSS wirst du als Contao-Anfänger kaum glücklich werden.

Zitat von tab

Dann würde ich dir ein oder zwei gute Bücher empfehlen, oder je nach Vorliebe und Arbeitsweise auch online Tutorials. Manche stehen sogar auf Video-Tutorials, wobei ich da für mich sagen kann, mein Ding ist das nicht. Ganz im Ernst, völlig ohne Grundlage in HTML und CSS wirst du als Contao-Anfänger kaum glücklich werden.

Natürlich habe ich vor, mich darin fortzubilden.
HTML habe ich in der Schule ansatzweise gelernt, CSS allerdings bis ich diesen Job hier bekommen habe, noch nie.
Ich denke, ich werde mir nächsten Monat mal von Amazon diese Schmöker liefern lassen (http://www.amazon.de/dp/383623016X , http://www.amazon.de/dp/3836227762 ).
Ich weiß, dass ich sowohl mit (guten) Büchern, als auch mit Videotutorials viel anfangen kann, da ich meistens visuelles schnell adaptieren kann, wenn es (technischen Ursprungs) gut erklärt wird.

Meinte mit Defizit auch nicht deine Contao-Kenntnisse, sondern Webentwicklung.

Vielleicht hilft dir http://de.selfhtml.org/index.htm

Wenn ich ein Beispiel nennen darf:
Ich habe nach "css clear" gegoogelt. Es ist ein Attribut, welches man auf Blöcke anwenden kann, um den Textfluss zu ändern.
-> informativ und nützlich; erklärt mir allerdings noch nicht, wie ich das "clear" in meinem Problem anwenden kann.

Kann auf <p>, <div>, .. angewandt werden. -> ich probiere es aus mit "main_text". Es funktioniert für Seite xy, ruiniert mir allerdings die Elemente auf der Startseite (2 Layouts mit demselben css).

Wenn jetzt wo dabeisteht: Wende es so und so an, bzw in einem Video gezeigt wird, ist mir mehr geholfen, da ich aktuell sonst nur herumprobieren kann, bis ich belesen genug bin.

http://css-tricks.com/almanac/properties/c/clear/

css-tricks kann ich nur weiter empfehlen, sowie http://tympanus.net/codrops/

Themen sind immer relativ aktuell.

Zitat von Knigge

Meinte mit Defizit auch nicht deine Contao-Kenntnisse, sondern Webentwicklung.

Vielleicht hilft dir http://de.selfhtml.org/index.htm

Genau diese Seite kenne ich noch aus meiner Schulzeit, jedoch haben wir diese Anleitungen benutzt, um selbst HTML zu schreiben, z.B. iframes und tables, also ohne ein CMS.

Bei der Webentwicklung heutzutage soll man ja so gut es geht auf tables verzichten, da dies eher ein "Überbleibsel" der letzten Web-Generation ist.

Aber sicherheitshalber les ich mich nochmal durch die ganze Seite. Vielleicht schaffe ich es danach, den letzten Schritt meines Problems selbst zu lösen.

Eventuell solltest du dich eher an css tricks orientieren, da du ja sagst, dass du html schon kennst.

Selfhtml war jetzt auch nur mein erster Gedanke, besser wäre http://www.w3schools.com/

Mal sehen, ob ich mir von den Seiten irgendwo ein PDF erschummeln kann

Ansonsten lade ich mir einfach mal die ganzen Seiten und trage sie auf nem USB-Stick zum Lernen herum (ich arbeite auf 2 verschiedenen PCs)

Danke nochmal an alle, die sich für mein Problem Zeit genommen haben, ich werde heute noch versuchen, mein Problem mit dem .inside-Container zu lösen,
ansonsten muss das erst mal warten, bis ich mich weiter belesen habe.

Die Bücher finde ich eine gute Wahl, hätte ich so auch empfohlen. Wusste noch gar nicht, dass die neue Version von "Webseiten erstellen mit Contao 3" mittlerweile erschienen ist. Selbst zahlen musst du sie ja wohl auch nicht. Im zweiten Buch wirst du auch mindestens 7 Varianten erklärt bekommen, mit denen man gefloatete Elemente cleart . Eine davon ist "overflow:hidden;" was hier eventuell nicht geht, wenn du "overflow:visible;" aus anderen Grunden brauchst.

Bis dahin kannst du online schon mal in einem Vorgängerbuch über eine der wohl populärsten Methoden lesen:
http://little-boxes.de/lb1/14.9.1-te...-clearfix.html

Zitat von tab

Die Bücher finde ich eine gute Wahl, hätte ich so auch empfohlen. Wusste noch gar nicht, dass die neue Version von "Webseiten erstellen mit Contao 3" mittlerweile erschienen ist. Selbst zahlen musst du sie ja wohl auch nicht. Im zweiten Buch wirst du auch mindestens 7 Varianten erklärt bekommen, mit denen man gefloatete Elemente cleart . Eine davon ist "overflow:hidden;" was hier eventuell nicht geht, wenn du "overflow:visible;" aus anderen Grunden brauchst.

Bis dahin kannst du online schon mal in einem Vorgängerbuch über eine der wohl populärsten Methoden lesen:
http://little-boxes.de/lb1/14.9.1-te...-clearfix.html

aktuell müsste ich sie wohl selbst bezahlen. Sonst muss ich den Chef mal drauf ansprechen. Ich schaffe es nur immer wieder, meine Finanzen über Monate hinweg zu verplanen.
Deshalb habe ich diesen Monat z.B. kaum Geld mehr übrig.
Ich schweife ab.. ich werde den Chef einfach mal drauf ansprechen.

um die andere Frage nochmal aufzugreifen und leicht zu modifizieren:
Wie du doch so schön gesagt hast, Knigge:

Ich werde auch nicht deinen Code durchforsten

Nun lasst mich die Frage mit dem .inside-Container umformulieren:
In Chrome & Opera stimmt die Ansicht bereit und ist so, wie sie sein soll.
In Firefox hingegen, ist der .inside-Container nach wie vor zu kurz.
Ich habe nun herausgefunden, woran das liegt und angefangen, das Problem zu fixen.

Jetzt stehe ich vor der letzten Hürde des Problems und würde mir gerne nochmal einen Rat einholen.
Das "overflow:visible" von #main .block, ist der letzte Nagel, der dieses Problem aufrecht erhält.
Allerdings brauche ich dieses, damit der Slider-Inhalt nicht verschwindet.
(Ich könnte das Problem beheben, allerdings wären Seite 2,3 und 4 in Chrome und Opera dann wieder dauerhaft sichtbar
und das möchte ich vermeiden.
Irgendwelche Vorschläge?

Verstehe nicht was du meinst.

Code: [Ansicht]

#main .block

bedeutet jede klasse block innerhalb von id main hat overflow:visible laut deiner aussage. Im CSS steht aber

Code: [Ansicht]

.block {
overflow: hidden;
}

Magst du dich vielleicht genauer ausdrücken? Mit den zugehörigen Klassennamen? Dann sehe ich direkt was du meinst. Am besten wäre es die Code-Snippets direkt hier reinzuschreiben innerhalb der Code, bzw. Html Tags.

Ich denke, ich habe es geschafft.
Kann mir irgendjemand bitte nochmal kurz auf die Finger schauen?

Zitat von Knigge

Verstehe nicht was du meinst.

Code: [Ansicht]

#main .block

bedeutet jede klasse block innerhalb von id main hat overflow:visible laut deiner aussage. Im CSS steht aber

Code: [Ansicht]

.block {
overflow: hidden;
}

Magst du dich vielleicht genauer ausdrücken? Mit den zugehörigen Klassennamen? Dann sehe ich direkt was du meinst. Am besten wäre es die Code-Snippets direkt hier reinzuschreiben innerhalb der Code, bzw. Html Tags.

im CSS steht:

Code: [Ansicht]

.firefox #main .block {
    overflow:visible; }

.opera #main .block {
    overflow: hidden !important; }

Also Code ist nicht gleich Code : P

*seufz*
Da glaubt man, man hat's endlich geschafft und kann das Projekt abschließen, da taucht (nur im Firefox) über dem Footer ein weißer Bereich auf...

Kann mir bitte jemand erklären, was da passiert ist?

edit: hab den Footer jetzt ein wenig mit top: umpositioniert. Ist zwar keine Lösung, aber das Problem "verschwindet" für das nackte Auge