Nuria: Elemente innerhalb der FlexBox überlappen obwohl die das nicht sollen...

Hallo,

Ich habe ein Problem mit einem Flexbox- Konstrukt:

div.seite
{
display:-webkit-flex;-webkit-flex-direction:column;-webkit-align-items:flex-start; /* für Safari */
display:-ms-flexbox;-ms-flex-direction:column;-ms-flex-align-items:flex-start;   /* IE 10*/
display:flex;flex-direction:column;  /* alle anderen */
-webkit-align-content: flex-start; 
align-content: flex-start;
-webkit-justify-content: center;
justify-content: center;
-webkit-flex-wrap:wrap;
flex-wrap: wrap;
}

Die hier enthaltenen DIVS funktionieren alle wie gewünscht, sie sind so breit, daß jedes einen Sprung in die nächste Row zur Darstellung des Folgenden verursacht. Soweit ja schön. Über Order kann ich ggf den Navigationsbereich ohne Hovereffekte (also aufgeklappt) am Ende des Dokumentes platzieren. Auch schön =)

/* Reihenfolge der flexiblen Elemente*/

div.panorama { 
	order:2;
 	
}

div.localbranding {
	order:1;
}

div.content { 
order:4;

}

@media (min-device-width: 800px)
{
	div.nav { order:3;}
	div.nav-link { order:5; }	 
}
@media (max-device-width: 799px)
{ 
	div.nav { order:5;}
	div.nav-link { order:3; }	 
}

Für Tablets etc hätte ich die ausgeklappte Navigationsleiste gerne links neben dem Artikel. Das dürfte ja anhand der Flexdirection (siehe oben) der elterlichen FlexBox kein Problem sein, ist es aber. Den dafür letztendlich benötigten Media-Query ANY-HOVER habe ich noch nicht eingesetzt, daran kann es also nicht liegen....

Zum Problem: Die beiden Elemente in der Flexbox (auch DIVs) erscheinen übereinander, als hätte ich mit z-index gearbeitet...

Ich habe die beiden aufeinander erscheinenden DIVs in der Breite verkleinert natürlich, brachte jedoch keinen Effekt....

Bin gerade ziemlich mit meinem Latein am Ende, ein schlimmer Spaghetticode ist es eigentlich nicht.... Das eine Element ist der dargestellte Artikel und das andere die aufgeklappte, von oben nach unten laufende, Navigationsleiste (letztendlich eine Liste).

Danke vorab für Eure Ratschläge

  1. @@Nuria

    Danke vorab für Eure Ratschläge

    Online-Beispiel, bitte.

    (Für ein CSS-Problem aber besser nicht JSFiddle, sondern Dabblet oder CodePen.)

    LLAP

    --
    „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
  2. Hallo Gunnar, interessante Codeplaygrounds..... Die kannte ich noch garnicht aber was soll ich sagen.... Wer columne ohne e schreibt darf sich nicht wundern ^^ Aber ist mir ja zum Glück noch aufgefallen =) Trotzdem Danke

    1. Hallo,

      Wer columne ohne e schreibt darf sich nicht wundern

      Wenn du flex-direction meinst ist column die richtige Schreibweise. Mit columne setzt du die Anweisung außer Kraft.

      Gruss

      MrMurphy

      1. Du hast natürlich Recht... Ich hab erstmal ne kleine Pause gemacht und mit klarerem Kopf neu geprüft.

        Wie folgt ist es gelöst: Nur die CSS- Definition für die elterliche Flexbox der betroffenen Elemente verändert.

        Nicht Funktionierender Code

        display:-webkit-flex;-webkit-flex-direction:column;-webkit-align-items:flex-start; 
        display:-ms-flexbox;-ms-flex-direction:column;-ms-flex-align-items:flex-start;   
        display:flex;flex-direction:column;  
        -webkit-align-content: flex-start; 
        align-content: flex-start;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-flex-wrap:wrap;
        flex-wrap: wrap;
        

        Funktionierender Code

        display:-webkit-flex;-webkit-flex-direction:column;-webkit-align-items:flex-start; 
        display:-ms-flexbox;-ms-flex-direction:column;-ms-flex-align-items:flex-start;  
        display:flex;flex-direction:column; 
        -webkit-align-content: flex-start; 
        align-content: flex-start;
        -webkit-justify-content: space-between;
        justify-content: space-between;
        flex-wrap:wrap;
        flex-flow: row wrap;
        border-width:2px;border-color:#ff0000;border-style:solid;
        

        (Die Breiten werden durch Mediaquery-abhängige Bedingungen definiert, o.g. Code ist die vorangegangene Normalisierung.

        Es geht also doch ^^ Bin wieder glücklich =)

        Nochmals Danke