nicht angemeldet
Text horizontal in Flexbox zentrieren
0 
Gunnar Bittersmann
0 0 
JürgenB
0 0 0 0 0 0 Gunnar Bittersmann
0 Gunnar Bittersmann
0 Gunnar Bittersmann
Text horizontal in Flexbox zentrieren
Matthias ApselHallo zusammen,
nachdem mir schon mehrfach hier im Forum weitergeholfen wurde, konnte ich meine Probleme lösen, leider entstanden schnell neue :-)
Konkret habe ich folgende Fragen:
- Wie kann ich den Text (Bsp. NameA, NameB, etc.) innerhalb der jeweiligen Flexbox horizontal zentrieren?
- Wie kann ich das Mutterelement von NameA, NameB, etc. zentrieren? Margin ist da bestimmt falsch, leider habe ich es nicht anders hinbekommen, bin mir aber sicher, dass es besser geht...
- Welche Fehler seht ihr noch?
meine HTML Datei:
<!DOCTYPE html>
<html lang="de">
<head><title>Title</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link href="design.css" rel="stylesheet">
</head>
<body>
<header>
<div align="center"><img src="Schriftzug.gif"></div>
<nav id="navigation">
<nav id="item1">Part A</nav>
<nav id="item2">Part B</nav>
<nav id="item3">Part C</nav>
<nav id="item4">Part D</nav>
<nav id="item5">Part E</nav>
</nav>
</header>
<main role="main">
<p></p>
<div id="Personen">
<div id="PersonA">NameA</div>
<div id="PersonB">Name</div>
<div id="PersonC">Name</div>
<div id="PersonD">Name</div>
<div id="PersonE">Name</div>
<div id="PersonF">Name</div>
<div id="PersonG">Name</div>
<div id="PersonH">Name</div>
<div id="PersonI">Name</div>
<div id="PersonJ">Name</div>
<div id="PersonK">Name</div>
<div id="PersonL">Name</div>
<div id="PersonM">Name</div>
<div id="PersonN">Name</div>
<div id="PersonO">Name</div>
<div id="PersonP">Name</div>
</div>
</main>
</body>
</html>
... und hier die design.css Datei:
html{
height: 100%;
}
body{
height: 100%;
font: 1.2em/140% Calibri,Times,'Times New Roman',serif;
}
main{
height: 100%;
}
nav{
height: 03%;
}
#navigation{
background-color: gray;
border-radius: 25px;
margin-left: 15%;
margin-right: 15%;
width: 70%;
align-items: center;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-around;
align-content: center;
display: -webkit-flex;
display: flex;
}
#item1, #item2, #item3, #item4, #item5{
width: 14%;
background-image: -webkit-gradient(linear,left top,right top,color-stop(0.37, #FF0000), color-stop(0.73, #248041));
background-image: -o-linear-gradient(right, #FF0000 37%, #248041 73%);
background-image: -moz-linear-gradient(right, #FF0000 37%, #248041 73%);
background-image: -webkit-linear-gradient(right, #FF0000 37%, #248041 73%);
background-image: -ms-linear-gradient(right, #FF0000 37%, #248041 73%);
background-image: linear-gradient(to right, #FF0000 37%, #248041 73%);
text-align: center;
border-left: 1px solid white;
border-right: 1px solid white;
border-top: 1px solid white;
border-bottom: 1px solid white;
height: 100%;
}
#Personen{
background-color: gray;
width: 70%;
margin-left: 15%;
margin-right: 15%;
height: 70%;
align-content: center;
flex-direction: row;
justify-content: space-between;
flex-wrap: wrap;
border-radius: 25px;
display: -webkit-flex;
display: flex;
}
#PersonA, #PersonB, #PersonC, #PersonD, #PersonE, #PersonF, #PersonG, #PersonH{
background: #006400;
width: 20%;
height: 20%;
padding-right: 45px;
margin-top: 10px;
margin-bottom: 10px;
border-radius: 25px;
display: -webkit-flex;
display: flex;
}
#PersonI, #PersonJ, #PersonK, #PersonL, #PersonM, #PersonN, #PersonO , #PersonP{
background: #FF0000;
width: 20%;
height: 20%;
padding-right: 45px;
margin-top: 10px;
margin-bottom: 10px;
border-radius: 25px;
display: -webkit-flex;
display: flex;
}
/* exemplarisch, es werden natürlich immer neue Bilder eingesetzt für Person1-16 */
#PersonA, #PersonB, #PersonC, #PersonD{ /* und so weiter */
background-image: url("PersonA.png");
background-repeat:no-repeat;
background-position:50% 0%;
}
Vielen Dank schon eimmal. Es ist toll, dass man hier so bereitwillige Unterstützer findet.
Einen schönen Restmontag noch,
Blackpanther23
-
@@Blackpanther23
- Welche Fehler seht ihr noch?
<html lang="de">
Passt nicht zu deinem Inhalt „Title“, „Part A“ etc.
<header> <div align="center"><img src="Schriftzug.gif"></div>
align?? Darstellung gehört ins Stylesheet.Dem Bild fehlt ein Alternativtext. Wenn es lediglich Dekoration ist, dann
alt="", sonst lesen Screenreader den Dateinamen vor. Allerdings sollte es dann gar nicht im HTML stehen, sondern ein Hintergrundbild (vonheader?) sein.Und wenn das doch im Markup steht, wäre vielleicht
<div role="presentation">angebracht. Aber wozu überhaupt dasdiv?LLAP 🖖
--
Ist diese Antwort anstößig? Dann könnte sie nützlich sein.-
Hallo Herr Bittersmann,
sie haben Recht, dass macht es für Sie und andere natürlich leichter. Ich hoffe, Codepen ist eine gute Lösung, sonst bitte Bescheid sagen. Zur Website:
Passt nicht zu deinem Inhalt „Title“, „Part A“ etc.
Stimmt, ich lasse den Parameter einfach weg.
align?? Darstellung gehört ins Stylesheet
Das ist ein Not- Behelf. Ich weiß nur:
header{ background-image: url("Schriftzug.gif") }Aber wie krieg ich das dann vertikal zentriert? Dafür war ja eigentlich das Div.
Alternativtext wird ergänzt.
Danke schön! Haben wir ja schon was geschafft :)
-
Hallo,
header{ background-image: url("Schriftzug.gif") }Aber wie krieg ich das dann vertikal zentriert? Dafür war ja eigentlich das Div.
Gruß Jürgen
-
Hallo Jürgen,
ja da hätte man drauf kommen können, manchmal sieht man den Wald vor lauter Bäumen nicht. Danke!
-
Seh gerade, dass das Bild nicht im Hintergrund sein aoll. Wenn ich es einfach als erstes Element einbinden und horizontal zentrieren will, "darf" es dann in den HTML Code?
-
Seh gerade, dass das Bild nicht im Hintergrund sein aoll. Wenn ich es einfach als erstes Element einbinden und horizontal zentrieren will, "darf" es dann in den HTML Code?
Wenn das Bild Schrift enthält sollte es direkt als Text eingebunden werden.
-
Das Bild ist ein Bild :-). Hab das mal in ein div gepackt:
<div id="Schriftzug"><img src="Schriftzug.gif"</div>... align soll ich ja nicht ins html packen, aber wie kriege ich es dann in css gepacken?
-
Hallo,
... align soll ich ja nicht ins html packen, aber wie kriege ich es dann in css gepacken?
text-align: center?Reinhard
-
Danke! Dass das auch bei Bildern funktioniert....
-
@@Blackpanther23
Danke! Dass das auch bei Bildern funktioniert....
Ja, der Name dieser Eigenschaft ist etwas irreführend.
LLAP 🖖
--
Ist diese Antwort anstößig? Dann könnte sie nützlich sein.
-
-
-
@@Blackpanther23
Das Bild ist ein Bild :-).
Die Benennung „Schriftzug“ lässt darauf schließen, dass auf dem Bild Text zu sehen ist.
Zum einen sehen nicht alle Leute. Zum anderen sehen nicht alle Leute das Bild. Das könnte bspw. mich betreffen, wenn ich just in dem Moment, da mein Browser das Bild laden will, in einen Tunnel einfahre und die Netzverbindung abbricht.
Für diese Fälle ist der Alternativtext da, der von Screenreadern vorgelesen wird und angezeigt wird, wenn das Bild nicht geladen werden kann (oder soll).
Wenn also der Schriftzug auf dem Bild „Krimskrams“ lautet, sollte genau das im
alt-Attribut stehen:<img src="Schriftzug.gif" alt="Krimskrams">Hab das mal in ein div gepackt:
Das
divbrauchst du nicht.Entweder
header { text-align: center }, dann wird alles imheaderzentriert.Oder du zentrierst das Bild als Blockelement:
header > img { display: block; margin: auto }LLAP 🖖
--
Ist diese Antwort anstößig? Dann könnte sie nützlich sein.-
Wie kann ich den Text (Bsp. NameA, NameB, etc.) innerhalb der jeweiligen Flexbox horizontal zentrieren? Wie kann ich das Mutterelement von NameA, NameB, etc. zentrieren? Margin ist da bestimmt falsch, leider habe ich es nicht anders hinbekommen, bin mir aber sicher, dass es besser geht...
Dabei bräuchte ich immer noch Unterstützung.
Den Alternativtext habe ich ergänzt. Für die Ausrichtung des Bildes habe ich die header Variante gewählt.
-
Ein sauberer Quelltext hängt vom gesamten Inhalt ab, der uns nicht vorliegt.
Teilweise führen deine Angaben uns zudem in die Irre. Teilweise sind deine CSS-Angaben unübersichtlich oder unsinnig. Das macht es schwierig dir zu helfen.
Ich habe deshalb einen Quelltext mit aktuellem HTML / CSS erstellt, der deine Angaben wo weit wie möglich berücksichtigen sollte:
<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <title>Flexbox Probleme 01</title> <meta name="description" content="HTML5, CSS3"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Um alte IE HTML5-tauglich zu machen --> <!--[if lt IE 9]> <script src="http://html5shiv-printshiv.googlecode.com/svn/trunk/html5shiv-printshiv.js"></script> <![endif]--> <style> /*Grundeinstellungen*/ @import url(http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css); @media all { header, nav, main, aside, footer, section, article, figure, figcaption, audio, video { display: block; } * { box-sizing: border-box; } html { font-size: 120%; } body { margin: 0; } } /*Grundeinstellungen für diese Seite*/ @media all { nav a { display: block; color: black; outline: none; } nav a:visited { color: black; } img { display: block; max-width: 100%; } } /*Spezielle Einstellungen*/ @media all { body { font-family: Calibri, sans-serif; } header { margin: 1rem 0; } header img { margin: 0 auto; } nav { text-align: center; width: 70%; padding: 0 1rem; border-radius: 1rem; margin: 1rem auto; } nav a { line-height: 1.8; border: 1px solid; margin: 0 1rem; } main { width: 70%; margin: 1rem auto; } section.personen { padding: 1rem; border-radius: 1rem; } section.personen div { width: 18%; min-height: 5rem; /*nur für Textzwecke - produktiv löschen*/ padding: 0.5rem; border-radius: 0.5rem; margin: 0.5rem 1%; } } /*Farben (außer Grundeinstellungen)*/ @media all { nav { background-color: gray; } nav a { background-image: linear-gradient(to right, #FF0000 37%, #248041 73%); border-color: white; } section.personen { background-color: gray; } section.personen > * { background-color: green; } section.personen > *:nth-child(1n+9) { background-color: red; } } /*Flexbox Navigation*/ @media all { nav { display: flex; justify-content: space-around; } nav a { flex: 1; } } /*Flexbox .personen*/ @media all { section.personen { display: flex; flex-wrap: wrap; justify-content: flex-start; } section.personen > * { flex: 0 1 auto; } } /*Flexbox Personen div*/ @media all { /*um den Text horizontal zu zentrieren*/ section.personen div { display: flex; /*justify-content: center;*/ align-items: center; } } </style> </head> <body> <header> <img src="http://lorempixel.com/80/80/transport" alt="Logo"> <nav> <a href="#">Paris</a> <a href="#">London</a> <a href="#">Rom</a> <a href="#">Washington</a> <a href="#">Berlin</a> </nav> </header> <main role="main"> <section class="personen"> <div>Lee</div> <div>Forrest</div> <div>Bond</div> <div>Meier</div> <div>Meyer</div> <div>Mayer</div> <div>Sheldon</div> <div>Tetzlaff</div> <div>Bloefield</div> <div>Hein</div> <div>Kabel</div> <div>Batman</div> <div>Lenz</div> <div>Rockford</div> <div>Brandt</div> <div>Sherman</div> </section> </main> </body> </html>-
@@MrMurphy1
Ich habe deshalb einen Quelltext mit aktuellem HTML / CSS erstellt,
Die Problematik vollständiger Code-Beispiele hatte ich letztens erst angesprochen.
Und auch, dass deine Code-Beispiele jede Menge Unsinn enthalten und du endlich aufhören solltest, diesen weiterzuverbreiten.
<meta name="description" content="HTML5, CSS3">Unsinn.
<!-- Um alte IE HTML5-tauglich zu machen --> <!--[if lt IE 9]> <script src="http://html5shiv-printshiv.googlecode.com/svn/trunk/html5shiv-printshiv.js"></script> <![endif]-->Unsinn.
/*Grundeinstellungen*/ @import url(http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css);Unsinn.
@media all {Unsinn.
header, nav, main, aside, footer, section, article, figure, figcaption, audio, video { display: block; }Unsinn.
html { font-size: 120%; }Unsinn.
nav a { display: block; color: black; outline: none; }Grober Unsinn. Das erschwert (fast hätte ich gesagt: verhindert) die Navigation auf der Seite. Auch das hatte ich dir im verlinkten Posting bereits gesagt. Du willst einfach nichts dazulernen?
nav a:visited { color: black; }Überflüssig, weil schon die Angabe für
nav aim Autorenstylesheet die Angabe füra:visitedim Browserstylesheet überschreibt.LLAP 🖖
--
Ist diese Antwort anstößig? Dann könnte sie nützlich sein.
-
-
-
@@Gunnar Bittersmann
Entweder
header { text-align: center }, dann wird alles imheaderzentriert.Oder du zentrierst das Bild als Blockelement:
header > img { display: block; margin: auto }Die Textgrafik sollte aber nicht nur zentriert sein (evtl. abgeschnitten), sondern vollständig zu sehen:
max-width: 100%.MrMurphy1 hatte das in sein Beispiel mit eingebaut; war aber zwischen dem ganzen Unsinn schwer zu finden.
LLAP 🖖
--
Ist diese Antwort anstößig? Dann könnte sie nützlich sein.-
Die Textgrafik sollte aber nicht nur zentriert sein (evtl. abgeschnitten), sondern vollständig zu sehen:
max-width: 100%.ist ergänzt!
-
-
-
-
-
-
-
-
@@Blackpanther23
Hallo Herr Bittersmann,
sie haben Recht,Sie? Ich bin doch nur einer. Du darfst mich mit Er anreden. ;-)
Ich hoffe, Codepen ist eine gute Lösung
Ist es.
Stimmt, ich lasse den Parameter einfach weg.
Parameter? Weglassen? Meinst du die Sprachangabe?
Man sollte die Sprache des Seiteninhalts schon angeben. Allerdings die richtige. Bei deutschsprachigem Inhalt
<html lang="de">; bei englischsprachigem<html lang="en">.LLAP 🖖
--
Ist diese Antwort anstößig? Dann könnte sie nützlich sein.-
Okay, werde ich beherzigen. Kannst Du mir noch einen Tipp für die anderen zwei Fragen geben? Ich komme da partout nicht weiter. :(
-
-
-
@@Blackpanther23
background-image: -webkit-gradient(linear,left top,right top,color-stop(0.37, #FF0000), color-stop(0.73, #248041));
Die alte WebKit-Syntax. Für wen soll die sein? Android 2.irgendwas? Wirklich noch? Kann wohl weg.
background-image: -o-linear-gradient(right, #FF0000 37%, #248041 73%);
Presto ist tot. Der letzte seiner Art unterstützte
linear-gradientschon präfixfrei. Weg damit!background-image: -moz-linear-gradient(right, #FF0000 37%, #248041 73%);
Firefox unterstützt
linear-gradientseit Ewigkeiten präfixfrei. Weg damit!background-image: -webkit-linear-gradient(right, #FF0000 37%, #248041 73%);
Das ist wohl der einzige Präfix, der für alte Androids noch irgendwelchen Sinn ergibt.
background-image: -ms-linear-gradient(right, #FF0000 37%, #248041 73%);
Alle IEs, die
linear-gradientunterstützen, tun dies schon immer präfixfrei. Weg damit!background-image: linear-gradient(to right, #FF0000 37%, #248041 73%);
Wierum soll der Gradient eigentlich laufen? Von rechts nach links (
-webkit-linear-gradient(right, …)) oder von links nach rechts (linear-gradient(to right, …))? Die Syntax hatte sich geändert. Die Angaben widersprechen sich.LLAP 🖖
--
Ist diese Antwort anstößig? Dann könnte sie nützlich sein.-
Hallo Gunnar,
tja, ich gebe zerknirscht zu, dass ich einen Generator verwendet habe, das Ergebnis war wohl nicht so wie gewollt.
Ich habe jetzt folgendes behalten:
background-image: -linear-gradient(right, #FF0000 37%, #248041 73%); background-image: -webkit-linear-gradient(right, #FF0000 37%, #248041 73%);Vielen Dank für die Entwirrung. Könntest Du mich auch noch in meinen anderen beiden Fragen unterstützen? Das ist gerade mein Hauptanliegen, wenn man das so sagen kann.
Viele Grüße!
-
Hallo Blackpanther23,
background-image: -linear-gradient(right, #FF0000 37%, #248041 73%); background-image: -webkit-linear-gradient(right, #FF0000 37%, #248041 73%);Du siehst die rote Markierung? Das deutet auf einen Fehler bzw. eine unbekannte Eigenschaft hin. Zudem sollte man die „offizielle“ Eigenschaft immer als Letztes notieren, damit, wenn möglich, auch die standardisierte Eigenschaft unterstützt wird.
background-image: -webkit-linear-gradient(right, #FF0000 37%, #248041 73%); background-image: linear-gradient(right, #FF0000 37%, #248041 73%);Zudem steckt noch ein Fehler drin. Die Syntax lautet
[ <angle> | to <side-or-corner> ,]? <color-stop> [, <color-stop>]+ )also eine optionale Richtungsangabe als Winkel oder in der Form "to Seite oder Ecke" und mindestens einen color-stop. Siehe auch https://wiki.selfhtml.org/wiki/Linear-gradient
Für die webkit-syntax kann (oder sogar muss?) das Schlüsselwort "to" entfallen.
background-image: -webkit-linear-gradient(right, #FF0000 37%, #248041 73%); background-image: linear-gradient(to right, #FF0000 37%, #248041 73%);Allerdings kennt der verwendete Syntax-Highlighter die Funktion
linear-gradient()nicht. Möglicherweise gibts schon ein update dafür oder man kann ein issue eröffnen, @Christian Kruse?Bis demnächst
Matthias--
Signaturen sind bloed (Steel) und Markdown ist mächtig.
-
-