zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Flexbox & Vertikale ausrichtung des Textes

Antwort
 
LinkBack Themen-Optionen Ansicht
  #11 (permalink)  
Alt 11.06.2014, 11:44
Benutzer
neuer user
 
Registriert seit: 22.04.2014
Beiträge: 75
Toro befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von reyman1988 Beitrag anzeigen
... kann man diesen flüssigen übergang auch in ein td packen statt div ? Wenn es da eine Möglichkeit gibt, wäre das super. Und ich hatte mir auch überlegt die Transition per klick zu machen, jedoch ohne Java keine Lösung gefunden.
Hallo reyman,
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;}
0.4s ist die Zeiteinstellung. "-ms- ... und -webkit-... " ist Internetexplorer und Chrome/Safari browser.
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
Mit Zitat antworten
Sponsored Links
  #12 (permalink)  
Alt 12.06.2014, 03:08
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.06.2014
Beiträge: 13
reyman1988 befindet sich auf einem aufstrebenden Ast
Standard

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)
Mit Zitat antworten
Sponsored Links
  #13 (permalink)  
Alt 14.06.2014, 17:09
Benutzer
neuer user
 
Registriert seit: 22.04.2014
Beiträge: 75
Toro befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #14 (permalink)  
Alt 22.06.2014, 19:30
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.06.2014
Beiträge: 13
reyman1988 befindet sich auf einem aufstrebenden Ast
Standard

So. Ich bedanke mich hiermit vielmals für deine/eure Hilfe. Und vor allem Toro, für die schöne Veranschaulichung. Danke für deine mühe.


MFG

reyman
Mit Zitat antworten
  #15 (permalink)  
Alt 12.07.2014, 20:55
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.06.2014
Beiträge: 13
reyman1988 befindet sich auf einem aufstrebenden Ast
Standard

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

.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;
}
Ich habe das Div "grün", und das bild "rot" markiert.

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
Mit Zitat antworten
  #16 (permalink)  
Alt 14.07.2014, 09:03
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

Was meinst du mit ein div auf ein Bild übertragen?
Und warum wird bei .Test1 in Webkit-Browsern die Breite, in allen anderen Browsern jedoch die Höhe animiert?
Mit Zitat antworten
  #17 (permalink)  
Alt 14.07.2014, 18:26
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.06.2014
Beiträge: 13
reyman1988 befindet sich auf einem aufstrebenden Ast
Standard

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>
Nur das mit dem "<img src=..."> geht in der Wikipedia nicht. Nur genau dafür suche ich eine Lösung.
Mit Zitat antworten
  #18 (permalink)  
Alt 25.07.2014, 18:48
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.06.2014
Beiträge: 13
reyman1988 befindet sich auf einem aufstrebenden Ast
Standard

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)
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 17:59 Uhr.