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
  #1 (permalink)  
Alt 06.06.2014, 23:30
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.06.2014
Beiträge: 13
reyman1988 befindet sich auf einem aufstrebenden Ast
Standard Flexbox & Vertikale ausrichtung des Textes

Guten Tag liebe Community,

Ich bin seit ein Paar Tagen an einer Flexbox am arbeiten.

Ich habe jedoch ein Problem. Und zwar kann ich den Text nur horizontal ausrichten und nicht vertikal.

Ich habe teils nur Text und mal kleine 32x32 bildchen in einer Box daher sind sie unterschiedlich hoch. Und es sieht doof aus wenn der Text oben am Rand ist statt in der mitte der Box.

Ich habe schon etliche befehle ausprobiert, ob im CSS vorgegeben oder direkt im HTML. Aber nichts hat geholfen.

Das hier ist der CSS Code:

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 
{
  background: black;
  color: white;
  display: flex;
  text-align: center;
  flex-flow: row wrap;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-content: flex-start;
  border:groove 1px #000000;
  border-top-left-radius:5px;
  border-top-right-radius:5px;
  border-bottom-left-radius:5px;
  border-bottom-right-radius:5px;
}

.container {
  height:flex;
  min-height:50px;
  background:black;
  display:-webkit-flex;
  display:flex;
  border:hidden 1px #000000;
  align-items:stretch;
  align-content:center;
}

.Questheader1
{
  background: black;
  color: white;
  width: 50px;
}

.Questheader2
{
  background: black;
  color: white;
  align-self:auto;
  flex: 1;
}

.QuestSzene {
  background: dimgray;
  color: white;
  flex: auto;
  text-align:center;
}

.QuestNummer {
  background: rgba(225,99,71,0.7);
  width:200px;
  border:groove 1px #000000;
  border-top-left-radius:8px;
  border-bottom-left-radius:8px;
  text-align:center;
}

.QuestName {
  background:palegreen;
  flex:1 100%;
  border:groove 1px #000000;
  text-align:center;
}

.QuestAufgabe {
  background:green;
  flex:1 100%;
  border:groove 1px #000000;
  text-align:center;
}

.QuestBelohnung {
  background:dodgerblue;
  flex:1 100%;
  text-align: center;
  border:groove 1px #000000;
  text-align:center;
}

.QuestBesonderheiten {
  background:gold;
  flex:1 100%;
  text-align:center;
  border:groove 1px #000000;
  border-top-right-radius:8px;
  border-bottom-right-radius:8px;
}
Und das hier der HTML Code:

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">(4) Valhalla-Aufnahmezeremonie ab lvl 1</div>	
</div>
<div class="container">
    <div class="QuestNummer">1</div>
    <div class="QuestName">Text 1</div>
    <div class="QuestAufgabe">Text 2</div>
    <div class="QuestBelohnung">Text 3</div>
    <div class="QuestBesonderheiten">Text 4</div>
</div>
Könnt Ihr mir eventuell helfen ?

MFG

reyman
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 07.06.2014, 00:07
?!?
XHTMLforum-Kenner
 
Registriert seit: 20.03.2013
Beiträge: 1.638
explanator sorgt für eine eindrucksvolle Atmosphäreexplanator sorgt für eine eindrucksvolle Atmosphäre
Standard

Schau mal hier --> Schnelle Treffer mit dem Flexbox-Modell - HTML5 Rocks
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..."
Aus einem Forum.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 07.06.2014, 01:11
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.06.2014
Beiträge: 13
reyman1988 befindet sich auf einem aufstrebenden Ast
Standard

Hallo,

das bestimmt die stelle der Box, aber nicht dessen Inhalt.

Mir geht es nur darum den Inhalt der Box (Text/Bilder) Vertikar zu zentrieren.

Hier ein ausschnitt.http://prntscr.com/3qc433

Geändert von reyman1988 (07.06.2014 um 01:20 Uhr)
Mit Zitat antworten
  #4 (permalink)  
Alt 07.06.2014, 07:50
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.123
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

Hallo,

den von Explanator verlinkten Text solltest du schnell wieder vergessen. Das der Text überhaupt nicht nicht auf dein Problem eingeht ist schon mal die eine Sache.

Zitat:
Bisher haben wir noch keine Spur der Flexbox in IE 9 oder Opera 10.60 entdeckt.
Viel schlimmer ist, das er total veraltet ist. Das Flexbox-Modell wurde zweimal komplett überarbeitet, wobei sich auch jeweils die Syntax grundlegend geändert hat. Der Text verweist auf eine veraltete Verstion, die CSS-Anweisungen funktionieren heutzutage gar nicht mehr. Eigentlich sollte man schon stutzig werden, wenn in einem Text der IE9 aktuell ist, der mit Flexbox überhaupt noch nichts am Hut hat, wie auch in dem Text beschrieben wird.

Die aktuelle Befehlssyntax kannst du folgendem Text entnehmen:

Das Modell der flexiblen Boxen

Du suchst wahrscheinlich die Anweisung

Code:
align-items: center;
Gruss

MrMurphy

Geändert von MrMurphy (07.06.2014 um 11:50 Uhr)
Mit Zitat antworten
  #5 (permalink)  
Alt 07.06.2014, 22:22
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.06.2014
Beiträge: 13
reyman1988 befindet sich auf einem aufstrebenden Ast
Standard

Hallo, vielen dank auch für deine Antwort.

Jedoch nicht die richtige ^^

Dieser Code steht für die Ausrichtung der Items/Boxen. Aber nicht für den Text in der Box.

Hier ein ausschnitt.http://prntscr.com/3qc433

Der ausschnitt zeigt ganz gut was ich meine.

Ich habe noch ein (hoffentlich) kleines Problem: Und zwar habe ich eine "Transition" eingebaut um eine flüssige Vergrößerung der Box nach unten zu ermöglichen bzw. mehr Inhalt an zu zeigen.
Wenn ich kleine Bilder einfüge schimmern diese durch. Das heißt das die anderen Boxen/Items nicht alles andere voll abdecken.

>> http://prntscr.com/3qlwbw << hier ein Beispielbild.

Geändert von reyman1988 (07.06.2014 um 23:53 Uhr)
Mit Zitat antworten
  #6 (permalink)  
Alt 08.06.2014, 04:28
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.123
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

Hallo,

du hast recht, ich habe die falsche Anweisung rausgefischt. Du benötigst

Code:
justify-content: center;
Ich habe mal eine Beispielseite erstellt. Die Höhe aller Boxen ist von der höchsten Box abhängig. Der Inhalt der beiden anderen Box wird vertikal-zentriert angezeigt:

HTML5: Reyman - Text vertikal ausrichten

Gruss

MrMurphy

Geändert von MrMurphy (08.06.2014 um 11:29 Uhr)
Mit Zitat antworten
  #7 (permalink)  
Alt 08.06.2014, 13:48
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.06.2014
Beiträge: 13
reyman1988 befindet sich auf einem aufstrebenden Ast
Standard

Okay das hatte ich auch schon einmal probiert. Jedoch ohne erfolg. Ich weiß nicht ob ich im css etwas falsch mache das es nicht funktioniert.
Mit Zitat antworten
  #8 (permalink)  
Alt 10.06.2014, 21:38
Benutzer
neuer user
 
Registriert seit: 22.04.2014
Beiträge: 75
Toro befindet sich auf einem aufstrebenden Ast
Standard

Wenn das kleine Bild wo Du den grauen Rand siehst jetzt ganz weg wäre, wie weis der user das da ein Bild sein soll?
Edit fiddle - JSFiddle hab ich das mal in table gesetzt, kannst du nätürlich auch in divs erstellen. Wie Du siehst ist das Bild klein, und beim Hovern wird es groß - aber der user kann sehen dass da etwas ist.
Mit Zitat antworten
  #9 (permalink)  
Alt 11.06.2014, 00:33
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.06.2014
Beiträge: 13
reyman1988 befindet sich auf einem aufstrebenden Ast
Standard

Hi danke für den Hinweis. Ich wollte dort ein kleines Symbol machen damit der User bescheid weiß.

Deine Idee finde ich auch nicht schlecht. Jedoch wollte ich gern bei den flüssigen Übergang bleiben.

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.

Und vielen dank für deine Mühe

Ich bin auch völlig verblüfft wir kurz das CSS sein kann im Gegensatz zu meinem Code ^^

hier mein bisheriges endresultat: http://jsfiddle.net/reyman/R3t6L/1/

MFG

reyman

Geändert von reyman1988 (11.06.2014 um 00:49 Uhr)
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 11.06.2014, 08:29
?!?
XHTMLforum-Kenner
 
Registriert seit: 20.03.2013
Beiträge: 1.638
explanator sorgt für eine eindrucksvolle Atmosphäreexplanator sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von reyman1988 Beitrag anzeigen
kann man diesen flüssigen übergang auch in ein td packen statt div ?
Ja, das geht genauso wie bei dir.
Zitat:
Zitat von reyman1988 Beitrag anzeigen
Und ich hatte mir auch überlegt die Transition per klick zu machen, jedoch ohne Java keine Lösung gefunden.
Java --> Java (Programmiersprache)
Javascript --> http://de.wikipedia.org/wiki/Java_%2...iki/Javascript

Klick ist ein Ereignis, welches nur mit Javascript ausgewertet werden kann.
Es gibt da wohl eine Lösung ohne Javascript aber die ist kompliziert und Bedarf eines Formulareingabeselementes, das eigentlich zur Eingabe gedacht ist.
Javascript ist daher das Mittel der Wahl.
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..."
Aus einem Forum.
Mit Zitat antworten
Sponsored Links
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 13:11 Uhr.