Textumbruch mit queries bei einer Überschrift?
Hallo liebes Forum,
wie bekomme ich es hin den mit span umschlossenen zweiten Teil meiner Überschrift (gemeint ist hier mein h2) bei 81.25em (mein querie) in die nächste Zeile zu bekommen?
<div id="header-global">
<h1><a href="/test/public/***.html">My-Site.eu</a></h1>
<h2>Wand­zeitung<span> - täglich Neuig­keiten</span></h2>
</div>
/* -- HEADER -- */
header h1, header h2 {
display: flex;
flex-wrap: wrap;
flex-direction: row;
}
header h1 {
justify-content: flex-end;
align-items: flex-end;
padding-bottom: 0.15em;
}
header h2 {
justify-content: flex-start;
}
Bei 81.25em soll also mein mit span unschlossene Teil in die nächste Zeile wandern?
Wie kann man das bewerkstelligen?
M.
2 Antworten
Du änderst von deinem <h2> Element die display Eigenschaft auf flex und sorgst mit flex-direction dafür, dass die Kind-Elemente als column angeordnet werden.
Ich würde die Elemente auch nicht direkt ansprechen, sondern eher Klassen anlegen. Zumindest für das umschließende Elternelement - hier also für den Header der Seite. Zumal du <div> anstelle von <header> wie im CSS verwendet hast.
HTML:
<header class="page-header">
<h1><a href="#">example.de</a></h1>
<h2>Wandzeitung <span>- tägliche Neuigkeiten</span></h2>
</header>
CSS:
.page-header {
h1 {
padding-bottom: .15em;
}
@media (min-width: 81.25em) {
h2 {
display: flex;
flex-direction: column;
}
}
}
LG medmonk
Ja, das ist richtig. Ich habe es der Flexibilität wegen gewählt. Zumal ich beim <h2> hinterfrage, ob es dort semantisch wirklich Sinn macht. Sprich mit in die <h1> und dann dort passend mit CSS zurecht geschubst.
<h1 class="page-title">
<a href="#">My Site</a>
<span> Wandzeitung
<span>- tägliche Neuigkeiten</span>
</span>
</h1>
Manchmal auch besser so und hier eh vieles in „mach mir mal” mündet. Ich habe es halt verinnerlicht und mir derlei Dinge halt sofort ins Auge springen. Aber ja, machmal ist es nicht verkehrt nicht all zu viel darüber nachzudenken.
So wäre es also "semantisch korrekter"?
Ja, weil der <header> den Hauptteil ausmacht und so dann lediglich im Inhaltsbereich mit <h2>, <h3> usw. arbeitest. Die <span> Elemente sind ja keine semantischen Elemente und lediglich als Innline-Container dienen.
Und dem 2ten span gebe ich ein display: block mit.
Du kannst sowohl mit display: block als auch mit display: flex arbeiten. Ich empfehle dir letzteres, weil du damit einfach flexibler bist.
HTML:
<h1 class="page-title">
<a href="#">My-Site.de</a>
<span class="page-title-tagline"> Wandzeitung
<span>- tägliche Neuigkeiten</span>
</span>
</h1>
CSS:
.page-title {
color: #000;
a {
color: inherit;
text-decoration: none;
}
@media(min-width: 81.25em){
.page-title-tagline {
display: flex;
flex-direction: column;
}
}
}
Der Media-Querie wird erst angewendet, wenn der Viewport die 81.25em erfüllt oder halt größer ist. Sprich vorher bleibt alles wie gehabt und erst später die display Eigenschaft auf flex umgestellt wird.
Gibt es da auch eine Möglichkeit den mit span umschlossenen Teil in die nächste Zeile zu bekommen?
Ja, auch das ist möglich. Das Vorgehen ist wieder dasselbe und lediglich auch dem Elternelement ein display: flex und flex-direction: column zuweist.
CSS:
.page-title {
color: #000;
a {
color: inherit;
text-decoration: none;
}
@media(min-width: 81.25em){
display: flex;
flex-direction: column;
.page-title-tagline {
display: flex;
flex-direction: column;
}
}
}
Wenn du es allgemein in der nächsten Zeile haben möchtest, halt nicht erst im Media-Querie auf display: flex änderst. Du kannst dich da frei austoben und es alleine dir überlassen bleibt, wie du es positionierst.
Okay, gut... Ab allen mittleren Gerätschaften bishin zum normalen Monitor ab da verwende ich flexbox. Bei allen Kleinstgeräten verwende ich nur das reine html mit ein wenig CSS gestaltet untereinander fließend. Da kann ich ja mit display block arbeiten, alles darüber mit flex. SUPER!
Ab allen mittleren Gerätschaften bishin zum normalen Monitor ab da verwende ich flexbox.
Ja, in dem Fall musst du den Media Querie halt niedriger ansetzen, da 81.25em bereits 1300px entsprechen. Halt so wie du es brauchst.
Da kann ich ja mit display block arbeiten, alles darüber mit flex. SUPER!
Wenn sich die <span> Elemente wie Block-Elemente verhalten sollen, setzt du halt ein display: block. Alternativ gleich flex und lediglich mit flex-direction die Anordnung änderst. Das ginge auch und selbst entscheiden kannst.
Du benötigst für display: block ja nur, wenn sich die <span> Elemente wie Block-Elemente verhalten sollen. In dem Fall dann halt vorher noch einbaust. Ich habe es jetzt nochmal gemacht, falls du es so braucht oder haben möchtest.
.page-title {
color: #000;
a {
color: inherit;
text-decoration: none;
}
/* Mobile first */
.page-title-tagline {
display: block;
}
/* Viewports ab 786px */
@media(min-width: 48em){
display: flex;
flex-direction: column;
/* Von „block” auf „flex” */
.page-title-tagline {
display: flex;
flex-direction: column;
}
}
}
Nun ein weiteres Problem. Ich habe dem ersten Teil der Überschrift eine andere Font-Size mitgegeben als dem zweiten mit span umschlossenen Teil. Also: "Wandzeitung" 3.3rem und "täglich Neuigkeiten" 3rem, nun ist es aber so das wenn alles nebeneinander steht der zweite Teil, also "täglich Neuigkeiten" höher dargestellt wird, kann man das beeinflussen? Kann man die Höhe der Fonts beeinflussen bzw. anpassen, ich meine aber nicht line-hight, beidem habe ich die gleiche line-hight von 1.1 gegeben. Trotzalledem wirkt es so das der zweite Teil höher stehen, könnte man es mittiger hinbekommen?
Nun ein weiteres Problem. Ich habe dem ersten Teil der Überschrift eine andere Font-Size mitgegeben
als dem zweiten mit span umschlossenen Teil. Also: "Wandzeitung" 3.3rem und "täglich Neuigkeiten" 3rem,
nun ist es aber so das wenn beides nebeneinander steht der zweite Teil,
also "täglich Neuigkeiten" höher dargestellt wird,
kann man das beeinflussen? Kann man die Höhe der Fonts beeinflussen bzw. anpassen,
ich meine aber nicht line-hight, beidem habe ich die gleiche line-hight von 1.1 gegeben.
Trotzalledem wirkt es so das der zweite Teil höher steht, könnte man es mittiger hinbekommen?
Wenn die <span> Elemente bzw. deren Inhalte vertikal oder horizontal zentriert werden sollen, geht das flexbox u.a. mit align-items.
.page-title-tagline {
display: flex;
flex-direction: column;
align-items: center;
}
Das align-items wirkt sich sowohl auf den Text in page-title-tagline aus als auch auf das darin enthaltene <span> Element. Ich habe dir nachfolgend einen Guide verlinkt, in dem alle Flexbox Eigenschaften übersichtlich zusammengefasst sind.
Gut, DANKE. Allerdings habe ich ein querie gesetzt das von allen mittleren Geräte an erst flexbox nutzt.
D.h. meine Kleinstgeräte sind roh, ohne flexbox, so wie alles in meinem html aufgelistet wird, so wird es angezeigt, natürlich aber mit CSS gestaltet (Ränder und so...).
Gibt es da auch eine Möglichkeit den mit span umschlossenen Teil in die nächste Zeile zu bekommen?
M
Geht sogar ohne Flexbox:
Flexbox ist aber insgesamt flexibler, wenn das Design später noch weiter angepasst werden soll.