Flexbox hilfe

  • Hallo liebe Community,


    ich arbeite seit vielen Tagen an einer Wikipedia Seite für ein Spiel. Hier möchte ich gerne ein Flexbox Modell in Form einer Tabelle anwenden.


    Ich bin kein Profi in solchen Sachen wie HTML und CSS. Nun habe ich auch sehr viel gelesen, aber komm an ein paar stellen nicht weiter.


    Hier erst einmal zu dem HTML & CSS code:


    CSS


    HTML



    Das sind die Codes. Gut möglich das sie etwas umständlich / kompliziert geschrieben sind. Die Items (Nummer, Belohnung etc.) sind deshalb doppelt da ich die Tabelle so farblich abgrenzen kann.


    Die erste Spalte soll so klein sein, daher ist dort eine feste Breite angegeben.


    Die Spalte "Aufgabe" wollte ich gern flexibel machen und sich dem Textinhalt anpassen aber eine mindestbreite haben. Da habe ich zwar etwas gefunden, aber das hatte nicht so ganz funktioniert.


    Hier gebe ich ein Link wo es im Detail zu sehen ist: http://codepen.io/reyman/pen/bsdcJ?editors=110


    Wo liegt das Problem ? Das Problem ist, dass das bild zu sehen ist, obwohl die Flexbox dort endet.


    Über eure Hilfe wäre ich sehr dankbar.


    MFG


    reyman

  • Ja richtig. Ich hatte auch einen CSS ode dafür welcher so aussehen würde:



    Da ich jedoch noch andere Sachen auf dieser Wikipedia Seite sind passt das nicht zusammen.


    Und mit der normalen Wikipedia Tabelle funktioniert keine transition.

  • Genau. Nur für die MediaWiki Tabelle funktioniert die Transition nicht. Daher suche ich etwas wo ich nicht andere Tabellen auf der MediaWiki kaputt mache und nicht etwas zu kompliziertes.


    Und das Flexbox kam mir da ganz gelegen, weil man damit nahezu alles machen kann.

  • Ok, verstehe.


    Bei deinem obigen Code fällt mir auf, dass Du pro Spalte unterschiedliche Breiten angibst. Dadurch variieren auch die Spaltenbreiten so merkwürdig. Z.B. nutzt Du für

    HTML
    1. <div class="Questheader2">Aufgabe</div>

    eine Breite von 200% in der Flex-Box, aber unten drunter sind 2000px definiert. Das müsstest Du einheitlich machen, ggfs. auch mit zusätzlichen Klassen.

  • Ja das war ein versuch von mir. normal sind alle Spalten außer "Questnummer" auf " flex:2 100%;"


    Aber wenn in der Spalte "Aufgabe" viel Text steht dann ist in der Spalte "Belohnung" die höhe anders so das es nur zum teil sichtbar ist. Hier ein Bild:


    http://codepen.io/reyman/pen/bsdcJ?editors=110


    Daher habe ich die breite auf 2000px gesetzt gehabt.


    Und die Spalte


    <div class="Questheader2">Aufgabe</div>


    Ist halt so, weil ich diesen wegen Questnummer unterteilen musste.

  • Hallo


    Zitat

    Ich bin kein Profi in solchen Sachen wie HTML und CSS.


    Das bringt dir nichts - auch als Laie musst du dich an die Regeln und die "Best Practices" von HTML und CSS halten. Dein Quellcode hat damit aber leider so gut wie nichts zu tun.


    Zitat

    Das Problem ist, dass das bild zu sehen ist, obwohl die Flexbox dort endet.


    Das verstehe ich nicht.


    Die Browser sind so programmiert, das sie versuchen jede Information anzuzeigen, die im Quelltext angegeben wird. Wenn du ein Bild einfügst werden die versuchen es auch anzuzeigen. Auch wenn es über das umgebende Element hinausgeht.


    Ob das Bild angezeigt wird oder nicht hat mit Flexbox überhaupt nichts zu tun. Wenn Elemente nicht angezeigt werden sollen wird dafür üblicherweise die CSS-Anweisung "display: none;" benutzt. Das gilt auch für Laien.


    Meine Tips für dein Beispiel:


    • Alle DIVs rausschmeißen
    • Alle Klassen rausschmeißen
    • Alle br-Elemente rausschmeißen
    • Semantisch korrekt mit dem dl-Element arbeiten
    • Die Möglichkeiten von HTML5 und CSS nutzen (z. B. :nth-child)


    Zitat

    Aber wenn in der Spalte "Aufgabe" viel Text steht


    Ich sehe dort nicht viel Text sondern ein langes Wort. Das ist etwas ganz anderes.


    Zitat

    flex:2 100%;


    Weißt du überhaupt was du da tust? Das du damit flex-grow und flex-shrink bestimmst?


    Gruss


    MrMurphy

  • Ich schrieb auch von Anfang an "Gut möglich das sie etwas umständlich / kompliziert geschrieben sind."


    Und ich hätte nicht gedacht das es nun eigentlich völliger müll ist, weil es ja doch vom Resultat her gut ausgesehen hat.


    Wenn du mir ein kleines Beispiel geben könntest wie ich das anstelle und wo ich mich da reinlesen kann, dann wäre ich dir sehr dankbar.



    Okay habe mal ein wenig nach deinem Tipp gesucht (Die Möglichkeiten von HTML5 und CSS nutzen (z. B. :nth-child))


    Das Prinzip habe ich verstanden. Jedoch finde ich es noch kompliziert und finde keine Seite die es von A-Z erklärt.

  • Hallo,


    erst mal was zum Lesen:


    http://h5c3.de/inhalte/alle-cs…il-strukturpseudoklassen/


    oder


    http://jendryschik.de/wsdev/ei…en#struktur-pseudoklassen


    und ein Film


    https://www.youtube.com/watch?v=Nvl9OHGySxI


    Nachfolgend noch eine von mir erstellte Beispielseite:


    http://foreninfo.bplaced.net/s…1_layout_mit_flexbox.html


    Die erste Spalte ist starr, die restlichen flexibel. Das gesammte CSS befindet sich im head-Bereich im HTML-Quelltext.


    Gruss


    MrMurphy

  • Vielen Dank erst einmal für deine Hilfe und Mühe.


    Ich lese mich da auch gleich noch richtig rein, jedoch habe ich bei dem Code ein anderes Problem wie ich weiter oben schon schrieb.



    Und ein ganz anderes Problem tritt bei mir auf. Ich setze hier einfach mal die echte Testseite rein. http://sopedia.gamescampus.eu/index.php/Test


    Das Video habe ich mir nun angesehen und habe es verstanden. Nur muss ich jetzt mal schauen woran es liegt das die MediaWiki das ganze nicht so anzeigt wie es soll.