Okay aber warum bei mir nicht ?
Chrome : http://prntscr.com/7apee4
IE : http://prntscr.com/7apen7
Das mit dem Stil: Ja ich habe in dem Moment keine andere Lösung gefunden. Daher ist das so. Hättest du einen besseren / leichteren vorschlag für mich, mit dem gleichen resultat ?
Ok danke erstmal.
Es geht um die IE version 11.
Aber ich sehe gerade das es nicht an dieser Box liegt.. sondern an etwas anderem.
Hier der komplette CSS Code:
/* CSS an dieser Stelle wirkt sich auf alle Skins aus */
/* Grünes Theme für User Interface */
a, div.vectorTabs li a, div#mw-panel div.portal div.body ul li a, div#content a.external {
color: #669933;
font-weight: bold;
}
a:visited, div.vectorTabs li a:visited, div#mw-panel div.portal div.body ul li a:visited, div#content a.external:visited {
color: #507828;
}
div.vectorTabs, div.vectorTabs span {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAuCAIAAABmjeQ9AAAACXBIWXMAAAsSAAALEgHS3X78AAAAR0lEQVQImWWOOxbAQAgCJ9z/xlFIsWZfPoUFoINUlYDfJBYg00vT4oiCFSxihX7ld7Z8j9cCP/Tqc87h1+zXcL5c71/2Lb4AQO1B07yAp+sAAAAASUVORK5CYII=");
}
div.vectorTabs ul li {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAABkCAIAAADITs03AAAACXBIWXMAAAsSAAALEgHS3X78AAAAQklEQVQYleWQsQ3AMAzDWP3/U6/pG2aGGI3RFzoIsAhZg1AD/FjG6cce4iez/dnMzhjs2/13OJF6OybHakag8lz3AnxnLT4wWlwvAAAAAElFTkSuQmCC");
}
div#content, #mw-head-base, div#footer {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAACXBIWXMAAAsSAAALEgHS3X78AAAADElEQVQImWO4/nM5AAUiAnhTbeFNAAAAAElFTkSuQmCC");
}
div.vectorMenu h5 a {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAuCAIAAABmjeQ9AAAACXBIWXMAAAsSAAALEgHS3X78AAAAR0lEQVQImWWOOxbAQAgCJ9z/xlFIsWZfPoUFoINUlYDfJBYg00vT4oiCFSxihX7ld7Z8j9cCP/Tqc87h1+zXcL5c71/2Lb4AQO1B07yAp+sAAAAASUVORK5CYII=");
}
ul {
list-style-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAANBAMAAACTErm7AAAAMFBMVEX///8AjFIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAitIkkAAAAAXRSTlMAQObYZgAAABdJREFUCJljYMADGAUZGAQFBeAYxAcCAAplALt4L4SlAAAAAElFTkSuQmCC")
}
pre {
border: 1px dashed #507828;
}
div#content a.external {
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKBAMAAAB/HNKOAAAAFVBMVEXl5eXl5eUtlwAkzACQ/2VhoihlvT+VY3BnAAAAAXRSTlMAQObYZgAAAD9JREFUeF4NxkENgEAMRcF3QUCzK6D9DkiLAELgjAWy/j3Qy2SAzITtswEcrVRtjPNua+YinstfYu4OYdZKcn69mgZuQI+sewAAAABJRU5ErkJggg==") no-repeat scroll right center transparent;
}
/* Eingrünung Ende */
.firstHeading {
background: none repeat scroll 0 0 #669933;
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: #ffffff;
text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.7);
padding-left: 3px;
-moz-border-radius:5px 5px 0 0; /* Firefox - alte Syntax */
-webkit-border-radius:5px 5px 0 0; /* Safari, Chrome - alte Syntax */
border-radius:5px 5px 0 0; /* alle neuen Browser, W3C Standard */
}
h2, h3 {
margin-top: 1.5em;
clear:both;
}
h2 {
background: none repeat scroll 0 0 #82ac59;
background:-moz-linear-gradient(top, #82ac59, #ffffff); /* Firefox */
background:-webkit-gradient(linear, left top, left bottom, from(#82ac59), to(#ffffff)); /* Safari, Chrome */
background:-webkit-linear-gradient(top, #82ac59, #ffffff); /* Safari, Chrome - neue Syntax! */
background:-o-linear-gradient(top, #82ac59, #ffffff); /* Opera */
background:-ms-linear-gradient(top, #82ac59, #ffffff); /* IE */
background:linear-gradient(top, #82ac59, #ffffff); /* W3C Standard */
padding-left: 3px;
-moz-border-radius:0 0 5px 5px; /* Firefox - alte Syntax */
-webkit-border-radius:0 0 5px 5px; /* Safari, Chrome - alte Syntax */
border-radius:0 0 5px 5px; /* alle neuen Browser, W3C Standard */
}
table h2, table h3 {
margin-top: 0;
background: transparent;
padding-left: 0;
}
table.SOtable {
background: none repeat scroll 0 0 #669933;
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 */
overflow: hidden;
text-overflow:ellipsis;
border: 1px solid #AAAAAA;
-ms-border: 1px solid #AAAAAA;
border-collapse: collapse;
margin: 1em 1em 1em 0;
}
.SOtable thead tr {
background: none repeat scroll 0 0 #669933;
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 */
}
.SOtable tbody tr:nth-child(even) {
/* durch diesen Eintrag wird jede zweite Zeile mit dieser Hintergrundfarbe versehen */
/* background: #EBEBb8; */
background: #F5F5D3;
}
.SOtable tbody tr:nth-child(odd) {
/* durch diesen Eintrag wird jede zweite Zeile mit dieser Hintergrundfarbe versehen */
background: #FBFBEE;
}
.SOtable tbody tr.hervorgehoben, .SOtable tbody th.hervorgehoben, .SOtable tbody td.hervorgehoben {
background-color: #E3F7DD;
}
.SOtable tbody tr.hervorgehoben2, .SOtable tbody th.hervorgehoben2, .SOtable tbody td.hervorgehoben2 {
background-color: #d4e8cf;
}
.SOtable th, .SOtable td {
border: 1px solid #AAAAAA;
padding-left: 5px;
padding-right: 5px;
}
.SOtableRight td {
text-align: right;
}
.SOtableCenter td {
text-align: center;
}
.SOtableLeft td {
text-align: left;
}
.SOtableTop td {
vertical-align: top;
}
.SOtableBottom td {
vertical-align: bottom;
}
.SOtableMiddle td {
vertical-align: middle;
}
.SOtable th {
background: none repeat scroll 0 0 #669933;
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 */
text-align: center;
font: bold 14pt;
color: #ffffff;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
}
.trwidth100 tbody tr>* {
width:100px;
}
.trwidth125 tbody tr>* {
width:125px;
}
.trwidth150 tbody tr>* {
width:150px;
}
.SOtable caption {
font-weight: bold;
}
.HCtable td:nth-child(odd) {
padding-left: 10px;
}
.HCtable td:nth-child(even) {
text-align:right;
}
.rechtsunter th {
text-align:right;
border-bottom:1px solid black;
font-size: 110%;
}
.rundrum {
margin: 0 auto;
display: flex;
justify-content: center;
}Hier der HTML Code: (das ganze ist im Wikicode/Mediawiki)
<div class="rundrum">
<div style="margin:0 auto; max-width: 100%;">
{| class="SOtabletop" style="border-spacing:20px 5px;" /* moderne Fassung von cellspacing, aber 20px horizontal und 5px vertikal */
! [[Datei:Grundlagen.png|center|verweis=]] !! [[Datei:Grundlagen.png|center|link=]]
|- class="rechtsunter"
! '''Allgemein''' !! '''Auf dem Square'''
|-
| [[Erste Schritte]] • [[Charakter]] • [[Menü]] • [[Spielumgebung]] • <br>[[Chatsystem]] • [[Ingame-Begriffe]]
| [[NPCs]] • [[Handel]] • [[Auktionshaus]]
|- class="rechtsunter"
! '''Auf dem Kurs''' !! '''Erfahrungspunkte'''
|-
| [[Zum Spiel]] • [[Training Center]] • [[Kurse]] • [[Zum_Spiel#Spieltyp | Spieltyp]] • [[Handicap]] • <br>[[Persönliche Rekorde]] • [[Caddiesystem]] [[Datei:Quest_Neu.png|verweis=]]
| [[Erfahrungspunkte (EXP)]] • [[EXP Kumulation]] • [[P.density System]]
|}
</div>
</div>Im Firefox, Chrome ist das ganze Zentriert. Und im IE ist alles rechts.
Huhu liebe Com,
ich stehe hier vor einem Problem mit dem Internet Explorer.
Ich habe eine Div Box erstellt welche den Inhalt zentriert. Das sieht überall gut aus, so wie es soll, nur im IE nicht.
.rundrum {
margin-top: 10px;
margin-bottom: 10px;
margin: 0 auto;
display: flex;
display: -webkit-flex;
justify-content: center;
}Was fehlt, damit es im IE genauso aussieht ?
MFG
reyman
Naja das ist doch mal eine Aussage. Und habe dies auch oben nicht wiederlegt. Sondern lediglich andere Vorschläge angenommen und getestet.
Mit dem Responsive_Webdesign müsst ich mich nun auch erst einmal auseinandersetzen. Sonst bleibt es so wie es ist. Auch wenn es doof ist.
Wenn sie links wäre. Wäre alles ok ?
Edit: Nein das löst das Problem nicht.
Wenn ich das fixed weg mache, verschiebt sich die erste box (Grundlagen)
Okay. Ich wollte die Seite eig. nicht Posten. Mache es aber dennoch.
Evtl wirst du bei manchen dingen die Hände über den Kopf schlagen, da ich mich mit der Materie nicht zu 100% auskenne. Sondern viel über Google.
http://sopedia.gamescampus.eu/index.php/Testhomepage
Das ist die Seite um die es sich handelt.
Der teil in der Mitte soll bei geringer Auflösung weiter nach links rutschen. (ist ja noch viel Platz).
Die Box rechts ist fixiert um beim Scrollen mit zu laufen.
Das Problem: Bei geringer Auflösung ist die rechte Box im mittleren Teil drin und schiebt sich drüber. bisher habe ich es geschafft die Auflösung bis 1366x768 zu reduzieren.
MFG
p.s. Vielen Dank erstmal für deine Hilfe.
Okay.
Also ich schreibe den reinen CSS Code in die Mediawiki.
Kann ich dir die gesamten Quellcodes per Email schicken ? Weil das ist ja schon ein großer Batzen.
Also Box 1 soll, wenn es eine kleinere Auflösung gibt weiter nach links gehen. (Da ist ja am noch Platz). So dass dann Box 2 ihren Platz hat.
Box 2 ist eine Box die beim Scrollen mit fährt.
Und wenn ich Box 1 noch in eine Box mache ?
Mit folgenden Code:
.rundrum {
margin-top: 10px;
margin-bottom: 10px;
margin: 0 auto;
display: flex;
justify-content: center;
}Wenn das anders geschrieben ist. Geht es dann ?
Oder anders gefragt. Wie könnte ich es denn hinbekommen ?
Hallo,
Ich habe eine Seite Basierend auf CSS & HTML erstellt (Wikipedia)
Nun ist die Seite fast fertig. Und stelle fest das diese Seite nicht auf die unterschiedlichen Auflösung angepasst wird.
Ich habe im Bild 2 Boxen (Box 1 & 2)
Bei einer Auflösung von 1920x1080 ist alles in Ordnung.
Bei einer Auflösung von 1366x768 ist Box 2 in der Box 1.
Bild: http://prntscr.com/742rv2
Box 1 hat folgenden Code:
<div style="margin:0 auto; max-width: 800px;">
{| class="SOtableTop" style="border-spacing:20px 5px;" /* moderne Fassung von cellspacing, aber 20px horizontal und 5px vertikal */
}
(das ist ein Wiki Code für Tabellen.)Box 2 hat folgenden Code:
.boxtest1 {
position: fixed;
top: 480px;
left: 160px;
width: auto;
height: auto;
color: #000;
}Ich hoffe Ihr könnt mir helfen
Hallo,
ich habe ein (hoffentlich) kleines Problem. Und zwar geht es darum, dass ich ein Bild in die linke untere Ecke setzen möchte. Dieses soll fixiert sein und immer mitlaufen wenn man scrollt. Desweiteren soll es im Hintergrund sein sodass der text über dem Bild steht. Das ganze soll dann in meiner Wiki präsentiert werden.
Was habe ich bisher ?
CSS: Die Box welche bewirkt das das bild fixiert ist
.boxtest1 {
position: fixed;
top: 550px;
bottom: 160px;
left: 150px;
width: auto;
height: auto;
color: #000;
}HTML: Der Code auf der Wiki Seite
<div class="boxtest1">[[Datei:Text_SO.png|verweis=]]</div>
<div style="margin:0 auto; max-width: 800px; position: relative; left: -380px; top: 300px; height: 100px;">
{| class="SOtableTop" style="border-spacing:20px 5px;" /* moderne Fassung von cellspacing, aber 20px horizontal und 5px vertikal */
TEXT
}
</div>
</div>Wenn ich das so mache ist quasi die ganze Seite verschoben, sodass wenn ich die Seite mal bearbeite die ganzen Bilder und Texte mit im Bearbeitungsfenster sind.
Hier ein Beispiel: http://prntscr.com/72xcvg
Kann man das irgendwie fixieren ? Oder gibt es eine bessere lösung als meine ?
Normalerweise wird die ganze Seite angezeigt und ganz unten kommt das bearbeiten Fenster
MFG
reyman
P.s. Danke für jede Hilfe.
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.
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.
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.
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.
Ja richtig. Ich hatte auch einen CSS ode dafür welcher so aussehen würde:
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.
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
.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
===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