FANDOM


  • Es ist schwer zu erklären. Also ich will das bei verschieden Zeilen nicht immer die gleiche Anzahl von Zellen gibt(das geht ja auch noch) und die Zellen sollen zentriert sein(nicht von links anfangen oder bei mir eine große Lücke). Ich würde das für die Vorlage benötigen, das sie optisch besser aussieht.

      Lade Editor…
    • Hab selber eine Lösung gefunden ist aber sehr kompliziert und auch sehr "lang". Falls es eine einfachere Möglichkeit gibt könnt ihr sie mir bitte sagen^^

        Lade Editor…
    • Du könntest das Ganze mit divs und einer Flexbox lösen.

      Ich habe dir da mal ein Beispiel erstellt.

        Lade Editor…
    • Ich würde bei deiner Tabellenlösung bleiben, DH2000. Für Agents Lösung muss man die Breite aller Elemente wissen, da sonst die Symbole über die ganze Zeile aufgeteilt werden.

      Du kannst es noch verkürzen, wenn du stärker mit CSS-Klassen arbeitest. Dann wäre eine Optimierung z.B. so möglich:

      CSS

      table.AvB {
      text-align:center; 
      border:2px solid #900000; 
      width:99%; 
      border-radius:15px; 
      background-color:rgba(255,255,255,0.5); 
      padding:5px;
      }
       
      table.AvB th {
      border-radius: 10px; 
      color: white;
      background: url('http://vignette4.wikia.nocookie.net/drachenzahmen-leicht-gemacht/images/c/c2/Drachenhautoptik.png/revision/latest?cb=20150312204031&path-prefix=de');
      border:1px solid darkred;
      }
       
      table.AvB td {
      text-align: center;
      }
       
      .AvB div {
      display: inline-block;
      }

      Vorlage

      {| class="AvB"
      |-
      ! Alle meine Drachen in Dragons-Aufstieg von Berk
      {{#if: {{{Riesenhafter Alptraum|}}} {{{Riesenhafter Alptraum Titan|}}} {{{Riesenhafter Alptraum Kampf|}}} | 
      {{!-}}
      {{!}} {{#if: {{{Riesenhafter Alptraum|}}} | <div>[[Datei:Riesenhafter Alptraum - FB.png|50px]] <br> Level {{{Riesenhafter Alptraum}}} </div>}}
      {{#if: {{{Riesenhafter Alptraum Titan|}}} | <div>[[Datei:Riesenhafter Alptraum Titan - FB.png|50px]] <br> Level {{{Riesenhafter Alptraum Titan}}} </div>}}
      {{#if: {{{Riesenhafter Alptraum Kampf|}}} | <div>[[Datei:Kampf Riesenhafter Alptraum - FB.png|50px]] <br> Level {{{Riesenhafter Alptraum Kampf}}} </div>}}
      }}
      |}

      Damit sollte es auch klappen. Vorteil hierbei ist, dass du das ganze CSS zentral dort hast, wo es hin gehört: nicht in der Vorlage! Es ist auch so organisiert, dass jede Überschrift (Eine Zeile, die mit einem Ausrufezeichen beginnt) automatisch den Drachenskin bekommt.

      Musst du mal gucken, ob das für dich / euch ist.

        Lade Editor…
    • Das CSS so wie ich es gemacht habe, kann man auch noch auslagern und wie meinst du das mit dem Aufteilen?

        Lade Editor…
    • Dein Code (ohne 50% width):

      <div class="wikitable" style="border:2px solid #900000; width:95%; border-radius:15px; background-color:rgba(255,255,255,0.5); padding:5px; margin:10px; box-sizing:border-box;">
          <div style="color:white; font-weight:bold; text-align:center; margin:2px 30px 10px 30px; padding:5px 10px; border-radius:30px;">Alle meine Drachen in Dragons-Aufstieg von Berk</div>
          <div style="display: flex; /* width:50%; */ justify-content:space-around; margin:0 auto;">
              {{#if: {{{Riesenhafter Alptraum}}} {{{Riesenhafter Alptraum Titan}}} {{{Riesenhafter Alptraum Kampf}}}
                  {{#if: {{{Riesenhafter Alptraum}}} | <div style="flex-base:62; width:62px;">[[Datei:Riesenhafter Alptraum - FB.png|50px]] <br> Level {{{Riesenhafter Alptraum|}}}</div> }}
                  {{#if: {{{Riesenhafter Alptraum Titan}}} | <div style="flex-base:62; width:62px;">[[Datei:Riesenhafter Alptraum Titan - FB.png|50px]] <br> Level {{{Riesenhafter Alptraum Titan|}}}</div> }}
                  {{#if: {{{Riesenhafter Alptraum Kampf}}} | <div style="flex-base:62; width:62px;">[[Datei:Kampf Riesenhafter Alptraum - FB.png|50px]] <br> Level {{{Riesenhafter Alptraum Kampf|}}}</div> }}
      }}
              <div>Level</div>
              <div>Level</div>
              <div>Level</div>
          </div>
      </div>

      Ergibt:

      Alle meine Drachen in Dragons-Aufstieg von Berk
      Level
      Level
      Level

      Siehst du da die gleichmäßige Verteilung von "Level" über die ganze Zeile?

      Jetzt ändere ich den Code mal in width: 10%:

      Alle meine Drachen in Dragons-Aufstieg von Berk
      Level
      Level
      Level

      Hmm ... Okay ... ich hatte gedacht, dass die dann aufgrund des Platzmangels untereinander angezeigt werden würden ...
      Dennoch ist es - aus meiner Sicht - ungünstig hier mit Breitenangaben zu arbeiten, wenn man eigentlich ein flexibles Design haben will.

        Lade Editor…
    • Ich weiß ja nicht, ob ich irgendwas übersehen habe, aber müsste das nicht mit | style="text-align:center" rowspan="zahl" (oder colspan) gehen?

        Lade Editor…
    • Darum ja prozentuale Breitenangaben. Wenn du ein flex-wrap:wrap; verwendest, brechen sie auf einmal um ;)

      Ich habe mal ein paar mehr hinzugefügt, damit man das besser sehen kann.

        Lade Editor…
    • @row/colspan: Ich würde von diesen Dingern abraten. Du hattest irgendwas um die 20 Colspan drin. Die Colspan werden verwendet um mehrere Zellen zusammen zu fügen (colspan horizontal und rowspan vertical). Dass es funktioniert hat, kann Zufall gewesen sein.
      Mein Beispiel oben habe ich in der Chrome-Editoransicht getestet. Sollte eigentlich laufen.

      Nunja ... am Ende muss der Zocker entscheiden. Ich persönlich kenne das flex-wrap-Zeugs jetzt nicht. Ist das noch CSS2 oder schon CSS3? Zumindest kann ich mir da ältere Browser vorstellen, die da auch noch überlegen müssen ;)

        Lade Editor…
    • Ja, das ist schon CSS3, aber wenn man zukunftsweisend arbeiten will, sollte man das bereits in Kombination mit Fallbacks verwenden. (siehe zum Beipsiel die Werte bei flex-basis und width).

      Auch die nicht ganz aktuellen Versionen unterstützen das: http://caniuse.com/#search=Flexbox

      Sonst hilft meistens schon ein Vendorpräfix.

        Lade Editor…
    • Also ich bleib glaub ich bei Tabellen, weil da kenn ich mich noch aus und ja ist einfacher gehalten find ich. Aber 20M61 fehlt bei der Vorlage dann nicht noch was in der Tabelle?

      20M61 sagte:

      Vorlage

      {| class="AvB"
      |-
      ! Alle meine Drachen in Dragons-Aufstieg von Berk
      {{#if: {{{Riesenhafter Alptraum|}}} {{{Riesenhafter Alptraum Titan|}}} {{{Riesenhafter Alptraum Kampf|}}} | 
      {{!-}}
      {{!}} {{#if: {{{Riesenhafter Alptraum|}}} | <div>[[Datei:Riesenhafter Alptraum - FB.png|50px]] <br> Level {{{Riesenhafter Alptraum}}} </div>}}
      {{#if: {{{Riesenhafter Alptraum Titan|}}} | <div>[[Datei:Riesenhafter Alptraum Titan - FB.png|50px]] <br> Level {{{Riesenhafter Alptraum Titan}}} </div>}}
      {{#if: {{{Riesenhafter Alptraum Kampf|}}} | <div>[[Datei:Kampf Riesenhafter Alptraum - FB.png|50px]] <br> Level {{{Riesenhafter Alptraum Kampf}}} </div>}}
      }}
      |}

      da müsste nach meiner Entscheidung noch in die Div die passende class rein oder?

        Lade Editor…
    • @20M61: Ok deins funktioniert sehr gut

        Lade Editor…
    • DH2000
      DH2000 hat diese Antwort entfernt. Grund:
      Hat sich erledigt^^
      15:13, 27. Okt. 2015
      Diese Antwort wurde entfernt
    • table.AvB td {
      text-align: center;
      border-top:1px solid #900000;
      }

      wenn ich jetzt das hinzugefügt habe, dann müsste es doch das so machen wie jetzt bei der Vorlage oder?

        Lade Editor…
    • Ok hat sich auch geklärt, braucht halt seien Zeit bis das aktiviert wird

        Lade Editor…
    • Genau :) Programmieren lernt man am Besten durch experimentieren. CSS und JS brauchen bis zu 10 Min um zu wirken. Bei JavaScript habe ich sogar angefangen kleine Versionszähler dazu zu bauen, damit ich weiß ob ich mir gerade die neueste Version angucke oder immer noch nach dem gleichen Fehler suche.

      Das mit dem DIV habe ich recht clever gelöst: Ich habe einfach gesagt "alle DIV-Elemente, die sich in der Klasse AvB befinden haben diese und jene Eigenschaft ( .AvB div {...} ) Du kannst natürlich auch den DIV-Elementen Klassen geben, falls du weitere DIVs verwenden willst und damit nicht in Konflikte gehen magst. Wollte es so minimalistisch wie möglich halten, da die Struktur nicht im Vordergrund stehen sollte, sondern der Inhalt.

        Lade Editor…
    • Noch was kann man bei CCS auch colspan machen also das Überschrift immer colspan="5" hat

        Lade Editor…
    • Du kannst dafür eine Klasse definieren und die dann entsprechend einfügen. Allerdings sieht es so aus, als würdest du das gerne für das ganze Wiki so definiert haben oder sehe ich das falsch?

        Lade Editor…
    • Nein, da colspan keine Style-Eigenschaft ist, mit der du das Aussehen veränderst, sondern du willst die Funktionsweise der Tabelle ändern (hier: mehrere Zellen nebeneinander sollen zu einer Zelle verschmolzen werden).
      Dir bleibt also nichts übrig, als das von Hand einzutragen.

      Man könnte noch überlegen, ob man für die Überschriften bestimmen will, dass der Text nicht umgebrochen werden darf und die Zelle 1 besonders breit ist, wohingegen die anderen Zellen recht schmal sein sollen (was faktisch deinem Colspan entsprechen könnte), sauber wäre das jedoch nicht, da Colspan halt auch dafür da ist die richtige Anzahl an Zellen anzuzeigen. Wenn das nicht eingetragen wird, haben einige davon ein undefiniertes Verhalten, was meist nicht gut ist.

      Übrigens ... ich hab oben mir mal deine aktuelle Vorlage angeschaut. Falls du dich wunderst, warum da so viel Leerraum ist: Du hast nach jedem IF-Teil einen Zeilenumbruch gemacht. Selbst wenn die IF-Teile nicht angezeigt werden, so existieren die Zeilenumbrüche weiter. 2 davon werden immer zu einem neuen Absatz umgewandelt. Wenn du das verhindern möchtest, dann lass entweder die Geschweiften Klammern aneinander stoßen oder arbeite mit Kommentaren:

      Version mit aneinanderstoßenden Klammern:
      |-
      {{#if: {{{Riesenhafter Alptraum|}}} {{{Riesenhafter Alptraum Titan|}}} 
      {{{Riesenhafter Alptraum Kampf|}}} | 
      {{!-}}
      {{!}}style="border:0px;"{{!}}
      {{#if: {{{Riesenhafter Alptraum|}}} | <div>[[Datei:Riesenhafter Alptraum - FB.png|50px]] <br> Level {{{Riesenhafter Alptraum|}}} </div>}}{{#if: {{{Riesenhafter Alptraum Titan|}}} | <div>[[Datei:Riesenhafter Alptraum Titan - FB.png|50px]] <br> Level {{{Riesenhafter Alptraum Titan|}}} </div>}}{{#if: {{{Riesenhafter Alptraum Kampf|}}} | <div>[[Datei:Kampf Riesenhafter Alptraum - FB.png|50px]] <br> Level {{{Riesenhafter Alptraum Kampf|}}} </div>}}}}
      
      Version mit Kommentaren (Hier eindeutig besser, da sauberer)
      |-
      {{#if: {{{Riesenhafter Alptraum|}}} {{{Riesenhafter Alptraum Titan|}}} 
      {{{Riesenhafter Alptraum Kampf|}}} | 
      {{!-}}
      {{!}}style="border:0px;"{{!}}<!--
      -->{{#if: {{{Riesenhafter Alptraum|}}} | <div>[[Datei:Riesenhafter Alptraum - FB.png|50px]] <br> Level {{{Riesenhafter Alptraum|}}} </div>}}<!--
      -->{{#if: {{{Riesenhafter Alptraum Titan|}}} | <div>[[Datei:Riesenhafter Alptraum Titan - FB.png|50px]] <br> Level {{{Riesenhafter Alptraum Titan|}}} </div>}}<!--
      -->{{#if: {{{Riesenhafter Alptraum Kampf|}}} | <div>[[Datei:Kampf Riesenhafter Alptraum - FB.png|50px]] <br> Level {{{Riesenhafter Alptraum Kampf|}}} </div>}}<!--
      -->}}
      

      Die Kommentare haben den Vorteil, dass zwischen <!-- Kommentar --> alles gesetzt werden kann, was man möchte. Z.B. Erklärungen, alte Versionen, Beschreibungen ... Außerdem lassen sich so komplizierte Vorlagen besser gliedern und ordnen ohne das Problem des Zeilenumbruchs, Leerzeichen oder anderem Zeugs dazwischen zu haben. Der Nachteil ist natürlich, dass man immer aufpassen muss, dass man alle Kommentare öffnet und schließt, sowie, es sieht komplizierter auf dem ersten Blick aus.

        Lade Editor…
    • Ok danke stimmt manchmal vergesse ich das.

        Lade Editor…
    • ja das habe ich bis jetzt gemacht troztdem kommt sowas raus http://de.drachenzahmen-leicht-gemacht.wikia.com/wiki/Benutzer:Fangzahn ganz unten

      aber ich glaub wenn ich da noch mehr "Kommentare" mache das dann die Tabelle nicht mehr richtig funktioniert(sowas es am anfang als ich das versucht habe)

        Lade Editor…
    • Hab schon eine Löschung^^

        Lade Editor…
    • Das geht ja wie beim Brezelbacken! Wäre das Thema dann damit durch oder gibt es noch offene Punkte, bei denen du aktiv Hilfe für die Vorlage / Tabelle benötigst?

      Ps.: Türkis ist nie eine gute Schriftfarbe auch nicht für Links (Ich empfehle ein kräftiges dunkles Blau - die meisten Leute verbinden mit Blau unterstrichenen Texten auch einen Link ... deine Türkisen Texte hatte ich als "Hervorhebung" betrachtet und nicht als Link)
      Es gibt auch zu lange Tabellen ... deine ist schon sehr umfangreich. Vielleicht möchtest du dich in Hilfe:Tabber einarbeiten? Damit kannst du komplexe und lange Inhalte etwas aufteilen und kompakter darstellen. Außerdem könntest du die Drachen sinnvoll sortieren, in z.B. "Gute" "Böse" nach Gewicht oder Besonderheiten etc. pp. (Kenn mich da nicht so gut aus). Das macht zumindest das navigieren leichter und man erkennt schneller, ob du den goldenen Schnatz hast oder nicht -- äh... das war dann Harry Potter xD

        Lade Editor…
    • das türkis ist nur für den Benutzername.

      Mit Tabber habe ich schon lange gearbeitet. Ich habe auch schon mal was über Tabber gefragt. Ich würde bei der Vorlage eigentlich ungern Tabber einrichten, aber vielleicht das ich bei den Benutzerseiten einen Tabber einfügen lasse der dann die persönlichen Text von der Vorlage trennt, aber dann kommt man wieder zum nächsten Problem viele kenn sich mit der Code-Ansicht nicht aus und können sie dann später nicht mehr bearbeiten.... Ich will wenn ich wieder Zeit habe so eine Art Scrollbox machen, d. h. ich werde den Text extra zum scrollen machen und somit vllt die Tabelle sehr kleiner machen, wenn du mich verstehst

      Die Drachen sind eig. sehr gut sortiert die untersten Drachen sind nähmlich am "schwersten" vom Level her. Also man kriegt sie als letzes bei normalen Bedingungen, man kann sie halt auch früher kriegen durch Events, aber das aufleveln ist trozdem schwerer

      Im großen und ganzen bin ich dann mit der Vorlage fertig

        Lade Editor…
    • Eine Scrollbox ist recht einfach zu realisieren:

      <div style="overflow:scroll; width: 600px; height: 300px;">Text, [[Links]], [[Datei:Bild.jpg]]</div>
      


      Text, Links, Bild

      Freut mich, dass dir die Antworten helfen konnten. Viel Erfolg weiterhin mit deinem Wikia / Projekt. Willst du mehr über diese Community erfahren, so komm einfach zur Sprechstunde am Donnerstag. Dort besprechen wir interessante Themen, die hoffentlich viele Admin interessieren. Nächstes Thema ist "Lizenzen" Vielleicht kannst du ja was dazu beitragen oder etwas davon lernen...

        Lade Editor…
    • Ein FANDOM-Benutzer
        Lade Editor…
Diesem Beitrag zustimmen
Beitrag zugestimmt!
Leute, die dieser Nachricht zustimmten anzeigen
Nutzung von Community-Inhalten gemäß CC-BY-SA , sofern nicht anders angegeben.