Seite 1 von 2 12 LetzteLetzte
Ergebnis 1 bis 10 von 11

Thema: Flexbox hilfe

  1. #1
    Youngster
    Registriert seit
    28.07.2014
    Beiträge
    16
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard 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
    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;}
    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>

    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
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!
    Geändert von reyman (28.07.2014 um 03:00 Uhr)

  2. #2
    König(in)
    Registriert seit
    07.02.2009
    Ort
    Leipzig
    Beiträge
    1.391
    Danke
    2
    Bekam 21 mal "Danke" in 20 Postings

    Standard AW: Flexbox hilfe

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

  3. #3
    Youngster
    Themenstarter

    Registriert seit
    28.07.2014
    Beiträge
    16
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Flexbox hilfe

    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;}
    Da ich jedoch noch andere Sachen auf dieser Wikipedia Seite sind passt das nicht zusammen.

    Und mit der normalen Wikipedia Tabelle funktioniert keine transition.

  4. #4
    König(in)
    Registriert seit
    07.02.2009
    Ort
    Leipzig
    Beiträge
    1.391
    Danke
    2
    Bekam 21 mal "Danke" in 20 Postings

    Standard AW: Flexbox hilfe

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

  5. #5
    Youngster
    Themenstarter

    Registriert seit
    28.07.2014
    Beiträge
    16
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Flexbox hilfe

    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.
    Geändert von reyman (29.07.2014 um 00:17 Uhr)

  6. #6
    König(in)
    Registriert seit
    07.02.2009
    Ort
    Leipzig
    Beiträge
    1.391
    Danke
    2
    Bekam 21 mal "Danke" in 20 Postings

    Standard AW: Flexbox hilfe

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

  7. #7
    Youngster
    Themenstarter

    Registriert seit
    28.07.2014
    Beiträge
    16
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Flexbox hilfe

    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.

  8. #8
    Großmeister(in)
    Registriert seit
    04.08.2009
    Beiträge
    574
    Danke
    0
    Bekam 67 mal "Danke" in 65 Postings

    Standard AW: Flexbox hilfe

    Hallo

    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.

    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)


    Aber wenn in der Spalte "Aufgabe" viel Text steht
    Ich sehe dort nicht viel Text sondern ein langes Wort. Das ist etwas ganz anderes.

    flex:2 100%;
    Weißt du überhaupt was du da tust? Das du damit flex-grow und flex-shrink bestimmst?

    Gruss

    MrMurphy
    Geändert von MrMurphy (29.07.2014 um 01:46 Uhr)

  9. #9
    Youngster
    Themenstarter

    Registriert seit
    28.07.2014
    Beiträge
    16
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Flexbox hilfe

    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.
    Geändert von reyman (29.07.2014 um 03:04 Uhr)

  10. #10
    Großmeister(in)
    Registriert seit
    04.08.2009
    Beiträge
    574
    Danke
    0
    Bekam 67 mal "Danke" in 65 Postings

    Standard AW: Flexbox hilfe

    Hallo,

    erst mal was zum Lesen:

    http://h5c3.de/inhalte/alle-css3-sel...pseudoklassen/

    oder

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

    und ein Film

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

    Nachfolgend noch eine von mir erstellte Beispielseite:

    http://foreninfo.bplaced.net/seiten_...t_flexbox.html

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

    Gruss

    MrMurphy

Ähnliche Themen

  1. BIITE HILFE - MORGEN KLAUSUR - BITTE HILFE
    Von unbekannt im Forum Off Topic und Quasselbox
    Antworten: 0
    Letzter Beitrag: 06.03.2008, 21:10
  2. hilfe bei daemon tools! ich brauch hilfe bei den images
    Von im Forum Computer - Internet Forum
    Antworten: 7
    Letzter Beitrag: 10.10.2007, 11:16
  3. Hilfe webspace speicher voll brauche dringend hilfe
    Von Claudi im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 21.03.2006, 10:29
  4. Hilfe ich brauche hilfe wer kennt sich bei beepworld aus ???
    Von TheGodGame im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 03.02.2005, 10:09
  5. HILFE brauche dringend Hilfe bei meiner Formular Abfrage
    Von Traction1977 im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 1
    Letzter Beitrag: 28.04.2004, 11:43

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •