Flexbox hilfe

reyman

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

Code

.wrapper {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;   
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  font-weight: bold;
  text-align: center;
}




.wrapper 
{
  text-align: center;
  display:-webkit-flex;
  display:flex;
}








.container {
  display:-webkit-flex;
  display:flex;
}




.QuestSzene {
  width:auto;
  flex:2 200%;
  height: 26px;
  text-align: center;
  border-top:groove 1px #CFD2CF;
  border-right:groove 1px #CFD2CF;
  border-left:groove 1px #CFD2CF;
  background: -moz-linear-gradient(top, #cedce7 37%, #596a72 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(37%,#cedce7), color-stop(100%,#596a72));
  background: -ms-linear-gradient(top, #cedce7 37%,#596a72 100%);
  color: #000000;
}




.Questheader1 {
    background:-moz-linear-gradient(top, #82ac59, #669933); /* Firefox */
    background:-webkit-gradient(linear, left top, left bottom, from(#82ac59), to(#669933)); /* Safari, Chrome */
    background:-webkit-linear-gradient(top, #82ac59, #669933); /* Safari, Chrome - neue Syntax! */
    background:-o-linear-gradient(top, #82ac59, #669933); /* Opera */
    background:-ms-linear-gradient(top, #82ac59, #669933); /* IE */
    background:linear-gradient(top, #82ac59, #669933); /* W3C Standard */
  color: white;
  width: 200px;
  align-items: center;
  text-align: center;  
  border-top:groove 1px #E9EBE9;
  border-right:groove 1px #E9EBE9;
  border-left:groove 1px #E9EBE9;
}




.Questheader2 {
    background:-moz-linear-gradient(top, #82ac59, #669933); /* Firefox */
    background:-webkit-gradient(linear, left top, left bottom, from(#82ac59), to(#669933)); /* Safari, Chrome */
    background:-webkit-linear-gradient(top, #82ac59, #669933); /* Safari, Chrome - neue Syntax! */
    background:-o-linear-gradient(top, #82ac59, #669933); /* Opera */
    background:-ms-linear-gradient(top, #82ac59, #669933); /* IE */
    background:linear-gradient(top, #82ac59, #669933); /* W3C Standard */
  color: white;
  flex:2 100%;
  align-items: center;
  text-align: center;
  border-top:groove 1px #E9EBE9;
  border-right:groove 1px #E9EBE9;
}




.QuestNummer {
  background: #F5F5D3;
  width:200px;
  text-align: center;
  vertical-align: center;
  border-bottom:groove 1px #E9EBE9;
  border-right:groove 1px #E9EBE9;
  border-left:groove 1px #E9EBE9;
}




.QuestNummer1 {
  background: #FBFBEE;
  width:200px;
  text-align: center;
  border-bottom:groove 1px #E9EBE9;
  border-right:groove 1px #E9EBE9;
  border-left:groove 1px #E9EBE9;
}




.QuestName {
  background: #F5F5D3;
  flex:2 100%;
  align-items: center;
  text-align: center;
  border-bottom:groove 1px #CFD2CF;
  border-right:groove 1px #CFD2CF;
}




.QuestName1 {
  background: #FBFBEE;
  flex:2 100%;
  align-items: center;
  text-align: center;
  border-bottom:groove 1px #E9EBE9;
  border-right:groove 1px #E9EBE9;
}




.QuestAufgabe {
  background: #F5F5D3;
  flex:2 100%;
  align-items: center;
  text-align: center;
  border-bottom:groove 1px #E9EBE9;
  border-right:groove 1px #E9EBE9;
}




.QuestAufgabe1 {
  background: #FBFBEE;
  flex:2 100%;
  align-items: center;
  text-align: center;
  border-bottom:groove 1px #E9EBE9; 
  border-right:groove 1px #E9EBE9;
}




.QuestBelohnung {
  background: #F5F5D3;
  text-align: center;
  flex:2 100%;
  align-items: center;
  max-height: 100px;
  text-position:center;
  border-bottom:groove 1px #E9EBE9; 
  border-right:groove 1px #E9EBE9;
}




.QuestBelohnung1 {
  background: #FBFBEE;
  flex:2 100%;
  align-items: center;
  text-align: center;
  border-bottom:groove 1px #E9EBE9; 
  border-right:groove 1px #E9EBE9;
}




.QuestBesonderheiten {
  background: #F5F5D3;
  flex:2 100%;
  text-align: center;
  text-position:center;
  border-bottom:groove 1px #E9EBE9; 
  border-right:groove 1px #E9EBE9;
}




.QuestBesonderheiten1 {
  background: #FBFBEE;
  flex:2 100%;
  align-items: center;
  text-align: center;
  border-bottom:groove 1px #E9EBE9; 
  border-right:groove 1px #E9EBE9;
}




.Test1 { 
    justify-content: center;
    width: auto;
    height: 18px;
    -webkit-transition: height 0.7s;
    -ms-transition: height 0.7s;
    transition-property: height 0.7s;
    transition: height 0.7s;
}
.Test1:hover { height: 70px;}

Alles anzeigen

HTML

Code

===Test===
<div class="wrapper">
<div class="QuestSzene">(4) Valhalla-Aufnahmezeremonie ab lvl 1</div>    
</div>
<div class="container">
<div class="Questheader1">Quest</div>
<div class="Questheader2">QuestName</div>
<div class="Questheader2">Aufgabe</div>
<div class="Questheader2">Belohnung</div>
<div class="Questheader2">Besonderheiten</div>
</div>
<div class="container">
  <div class="QuestNummer1">1</div>
    <div class="QuestName1">Herzlichen Glückwunsch zur Aufnahme in die Valhalla Schule</div>
    <div class="QuestAufgabe1">Gehe bitte zu Anthony Bestra.</div>
    <div class="QuestBelohnung1">100 EXP</div>
    <div class="QuestBesonderheiten1"></div>
</div>
<div class="container">
    <div class="QuestNummer">2</div>
    <div class="QuestName">Einführung in die Valhalla Schule und ein Neuanfang</div>
    <div class="QuestAufgabe">Gehe bitte zu Ceridwen.</div>
    <div class="QuestBelohnung">100 EXP</div>
    <div class="QuestBesonderheiten"></div>
</div>
<div class="container">
    <div class="QuestNummer1">3</div>
    <div class="QuestName1">Grundlagentest</div>
    <div class="QuestAufgabe1">Erziele 3 Double Bogey oder besser auf CT Park Public.</div>
    <div class="QuestBelohnung1">1.000 EXP | 100 NG</div>
    <div class="QuestBesonderheiten1">Die Bogeys müssen nicht in einer Runde gespielt werden.</div>
</div>
<div class="container">
    <div class="QuestNummer">4</div>
    <div class="QuestName">Tränke</div>
    <div class="QuestAufgabe">Gehe bitte zu Meriel.</div>
    <div class="QuestBelohnung"><div class="Test1">300 EXP & mehr  [ <span style='color:#2C6ED5;font-size:20px;'>•</span> ]<br> 
<img src="http://www.imgbox.de/users/public/images/ICW5NAy0nK.png"></div></div>
    <div class="QuestBesonderheiten">Die Items sind Charbezogen.</div>
</div>

Alles anzeigen

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

threadi

Semantisch gesehen wäre eine echte HTML-Tabelle dafür besser geeignet als diese <div>-Wüste.

reyman

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

Code

table { 
  position: relative;
  height: auto;margin: 0 auto;
  padding:0;
  background: #000;
}
tr.oben td { 
  font-weight: bold;
  color: #fff;
}
tr.szene td { 
  font-weight: bold;
  background: -moz-linear-gradient(top, #cedce7 37%, #596a72 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(37%,#cedce7), color-stop(100%,#596a72));
  background: -ms-linear-gradient(top, #cedce7 37%,#596a72 100%);
  color: #000;
}
td { 
  text-align: center;
  margin: 1px;
  padding: 3px 8px;
}
.Quest { 
  background: linear-gradient(135deg, #f3c5bd 0%,#ea2803 85%,#ea2803 85%,#ff6600 86%);
  color: #333;
}
.Questname { 
  background: linear-gradient(135deg, #8eb92a 100%,#9ecb2d 100%,#8eb92a 100%,#72aa00 50%,#bfd255 100%);
}
.Aufgabe { 
   background: linear-gradient(135deg, #8eb92a 100%,#9ecb2d 100%,#8eb92a 100%,#72aa00 50%,#bfd255 100%);
}
.Belohnung { 
  background: linear-gradient(135deg, #8eb92a 100%,#9ecb2d 100%,#8eb92a 100%,#72aa00 50%,#bfd255 100%);
  min-width: 180px;
}
.Besonderheiten { 
    background: linear-gradient(135deg, #8eb92a 100%,#9ecb2d 100%,#8eb92a 100%,#72aa00 50%,#bfd255 100%);
}
.Test1 { 
    justify-content: center;
    width: auto;
    height: 16px;
    -webkit-transition: height 0.7s;
    transition: height 0.7s;
}
.Test1:hover { height: 36px;}

Alles anzeigen

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

Und mit der normalen Wikipedia Tabelle funktioniert keine transition.

threadi

Wikipedia? Du meinst Du arbeitest mit MediaWiki und willst hier eigentlich etwas tabellenartiges erstellen, welches teilweise animiert wird?

reyman

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.

threadi

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

<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.

reyman

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.

MrMurphy

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

reyman

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.

MrMurphy

Hallo,

erst mal was zum Lesen:

http://h5c3.de/inhalte/alle-c…rpseudoklassen/

oder

http://jendryschik.de/wsdev/einfuehr…r-pseudoklassen

und ein Film

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

Nachfolgend noch eine von mir erstellte Beispielseite:

http://foreninfo.bplaced.net/seiten_fremdpr…it_flexbox.html

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

Gruss

MrMurphy

reyman

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.

Tags