|
|||
Zitat:
nichts mit java, und "flüssiger Übergang" ist in diesem Fall nur auf das Bild. Schreib in die letze Zeile bei dem hover übers Bild: Code:
.Test1:hover { width: 36px; -ms-transition: width 0.4s linear 0s; -webkit-transition: width 0.4s linear 0s; transition: width 0.4s linear 0s; z-index:1;} Würde auch vorschlagen das Bild noch in eine Seperate td zu setzen. Es gibt auch eine andere Art in das bild zu zoomen, schau mein Video: https://www.youtube.com/watch?v=ZpeHfVzoAa0 |
Sponsored Links |
|
|||
Ja natürlich meinte ich Javascript, sorry ^^
Wie ich schon schrieb finde ich deinen CSS Code viel besser als meinen. Jedoch wünsche ich mir eine Funktion, und zwar die flex-Funktion die für die flexbox bestimmt ist. Ich möchte die "Tabelle" ja über die ganze breite haben. Wie in diesem beispiel: Edit fiddle - JSFiddle habe ich lediglich der Questnummer eine feste breite angegeben da diese nicht so breit sein muss, sondern lediglich so breit wie das obige Wort -> "Quest". Alle anderen sollen sich den restlichen Platz automatisch einteilen. Nur das bekomme ich so gerade nicht hin. Hier mein bisheriges Resultat basierend auf deinen CSS Code: http://jsfiddle.net/reyman/F28hS/7/ Geändert von reyman1988 (12.06.2014 um 03:28 Uhr) |
Sponsored Links |
|
|||
Hmm, "Flexbox" ist wohl so'n Wort das Irgend einer erfunden hat und ich hab nicht verstanden was du damit eigentlich meintest. Gibt ja wohl bessere Ausdrücke für so etwas. Aber zur Frage: Um die table über die ganze Breite zu strecken gibts du die breite in % an. Habe auf die fiddle 100% gestzt, solltest aber lieber 98% oder so, wegen kleinen Browsern. In den "Quest wolltest du fixed-Breite haben - die setzt man mit pixel ein.
Überarbeitet: Edit fiddle - JSFiddle |
|
|||
Ich muss hier noch einmal nach Hilfe Fragen. Bevor ich ein neues Thema erstelle versuche ich es hier.
Bei Google habe ich nichts der art gefunden. Diese "Tabelle" läuft soweit ganz gut. Was ich dennoch für ein Problem habe ist folgendes. Ich wollte diesen Code in meine Wikipedia Seite einpflegen. Jedoch sieht das dort etwas anders aus so das ich den "div Test1" nicht auf das Bild übertragen bekomme sondern nur auf die Tabelle. HTML Code:
<div class="wrapper"> <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="wrapper"> <div class="QuestSzene">TextSzene 1</div> </div> <div class="container"> <div class="QuestNummer">1</div> <div class="QuestName">Name 1</div> <div class="QuestAufgabe">Aufgabe 1</div> <div class="QuestBelohnung"><div class="Test1">100 EXP <br>[[Datei:Bild1]]</div></div> <div class="QuestBesonderheiten"></div> </div> <div class="container"> <div class="QuestNummer">2</div> <div class="QuestName">Name 2</div> <div class="QuestAufgabe">Aufgabe 2</div> <div class="QuestBelohnung"><div class="Test1">100 EXP <br>[[Datei:Bild]]</div></div> <div class="QuestBesonderheiten"></div> </div> <div class="container"> <div class="QuestNummer">3</div> <div class="QuestName">Name 3</div> <div class="QuestAufgabe">Aufgabe 3</div> <div class="QuestBelohnung">100 EXP</div> <div class="QuestBesonderheiten"></div> </div> <div class="container"> <div class="QuestNummer">4</div> <div class="QuestName">Name 4</div> <div class="QuestAufgabe">Aufgabe 4</div> <div class="QuestBelohnung"><div class="Test1">300 EXP <br>[[Datei:Bild3]]</div></div> <div class="QuestBesonderheiten">Diverses</div> </div> <div class="wrapper"> <div class="QuestSzene">TextSzene 2</div> </div> <div class="container"> <div class="QuestNummer">5</div> <div class="QuestName">Name 5</div> <div class="QuestAufgabe">Aufgabe 5</div> <div class="QuestBelohnung">1.500 EXP | 150 NG</div> <div class="QuestBesonderheiten">Diverses</div> </div> 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; } .Questheader1 { background:black; color: white; width: 50px; align-items: center; } .Questheader2 { background:black; color: white; align-self:auto; flex: 1; } .QuestSzene { width:auto; flex:2 200%; text-align: center; border:groove 1px #f0f0f0;; border-bottom:1px solid #666; 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; } .QuestNummer { background: rgba(225,99,71,0.7); width:200px; text-align: center; background: linear-gradient(135deg, #f3c5bd 0%,#ea2803 85%,#ea2803 85%,#ff6600 86%); border:groove 1px #000000; } .QuestName { background:palegreen; flex:2 100%; align-items: center; text-align: center; background: linear-gradient(135deg, #8eb92a 100%,#9ecb2d 100%,#8eb92a 100%,#72aa00 50%,#bfd255 100%); border:groove 1px #000000; } .QuestAufgabe { background:green; flex:2 100%; align-items: center; text-align: center; background: linear-gradient(135deg, #8eb92a 100%,#9ecb2d 100%,#8eb92a 100%,#72aa00 50%,#bfd255 100%); border:groove 1px #000000; } .QuestBelohnung { background:dodgerblue; text-align: center; flex:2 100%; overflow:hidden; align-items: center; max-height: 100px; text-position:center; background: linear-gradient(135deg, #8eb92a 100%,#9ecb2d 100%,#8eb92a 100%,#72aa00 50%,#bfd255 100%); border:groove 1px #000000; } .QuestBesonderheiten { background:gold; flex:2 100%; text-align: center; text-position:center; background: linear-gradient(135deg, #8eb92a 100%,#9ecb2d 100%,#8eb92a 100%,#72aa00 50%,#bfd255 100%); border:groove 1px #000000; } .Test1 { justify-content: center; width: auto; height: 18px; -webkit-transition: width 1s; transition: height 1s; } .Test1:hover { height: 70px; } In der Wiki ist das Bild direkt hochgeladen und kann nur so in den Quelltext eingegeben werden. Ich hoffe ihr könnt mir erneut helfen. MFG reyman |
|
|||
Na ich habe .div Test1. Und das möchte ich auf Bild 1,2 und 3 anwenden.
Normal würde der Text so sein: Code:
<div class="container"> <div class="QuestNummer">4</div> <div class="QuestName">Name 4</div> <div class="QuestAufgabe">Aufgabe 4</div> <div class="QuestBelohnung"><img src="http://www.imgbox.de/users/public/images/ICW5NAy0nK.png"class="Test1" ></div> <div class="QuestBesonderheiten">Diverses</div> </div> |
|
|||
Okay ich habe es erstmal auf's Eis gelegt.
Nun bekomme ich Rückmeldung von Usern welche im IE ein totales wirwar sehen. Screenshot by Lightshot Die Bilder sollten im Normalfall verdeckt sein. http://prntscr.com/468gjx Im FF, Opera oder Chrome ist alles i.o. Hier auch der Code im vollem Umfang. Dieser ist eventuell etwas umständlich. Also nicht wundern. http://codepen.io/reyman/pen/zcgjD?editors=110 Habt ihr eine Seite wo ich das nachlesen kann ? oder kennt ihr eine lösung? Geändert von reyman1988 (25.07.2014 um 19:19 Uhr) |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Zeilenüberlappung bei margin-top mit negativem Wert | c.weber.os | CSS | 15 | 15.10.2005 16:11 |
des hundes hexenküche | derHund | http://csskueche.xhtmlforum.de/ | 10 | 19.05.2005 23:56 |
Ratschläge bei Publizierung eines fertigen Layouts gesucht | Black Fladder | CSS | 55 | 05.09.2004 15:30 |
div (verschachtelt) und vertikale Ausrichtung | zed leppelin | CSS | 0 | 07.07.2004 11:29 |
Vertikale Zentrierung des Inhalts eines DIV's | menphrad | CSS | 4 | 01.04.2004 13:45 |