Vertikale Überschrift (im header) die zentriert ist und sich links befindet

[einsiedler]

Hallo liebe Forumer,

es geht um die Testseite : [Testseite ]

Dort möchte ich die Überschrift <h1> im <header> hochkant zentriert darstellen, ich habe mal eine Skizze angefertigt von meinem Konstrukt. .jpg Zeichnung Bisher wird meine Überschrift immer nur horizontal dargestellt! Warum?

innerhalb meines div.centred-container befindet sich links <header> daneben rechts <div.main-content>, wobei ich der Überschrift gerne eine automatische Breite geben möchte (je nach Schriftgröße), deshalb flex.grow: 0; und entsprechend für das div.main-content dann flex-grow: 1; (hier hell grau in meiner Zeichnung!)

Nunja jedenfalls wird der Schriftzug nicht hochkant dargestellt! warum?

Gruß der einsiedelnde

[Felix Riesterer]

Lieber einsiedler,

Dort möchte ich die Überschrift <h1> im <header> hochkant zentriert darstellen,

suchst Du transform: rotate(90deg);?

innerhalb meines div.centred-container

Aha, ein <div class="centred">. Sollten Klassennamen nicht so gewählt werden, dass sie eine Bedeutung erklären, anstatt eine visuelle Darstellung? Was, wenn Dir das Layout einmal nicht mehr gefällt und Du die Darstellung so änderst, dass der Klassenname irreführend wird?

befindet sich links <header> daneben rechts <div.main-content>,

Anstelle von <div class="main-content"> möchtest Du ganz gewiss <main role="main"> haben. Außerdem stellt sich die Frage, warum Du eine Klasse namens "main-content" verwendest. Gibt es davon mehrere im Dokument? Ansonsten wäre eine ID besser gewesen. Noch besser ist allerdings das main-Element.

Liebe Grüße,

Felix Riesterer.

[einsiedler]

Ein <main> gibt es bereits, darin befindet sich hier erst einmal ein Foto, auf Unterseiten kommt dort dann Text, Tabellen vom Lebenslauf , Ausstellungen etc. etc. hin... Also, gibt es bereits... nix neues... sorry

transform: rotate(90deg); habe ich bereits angewendet aber das div bzw. <header> möchte es anscheinend nicht... auch hier... sorry

[einsiedler]

Ein <main> gibt es bereits, darin befindet sich hier erst einmal ein Foto, auf Unterseiten kommt dort dann Text, Tabellen vom Lebenslauf , Ausstellungen etc. etc. hin... Also, gibt es bereits... nix neues... sorry

transform: rotate(90deg); habe ich bereits angewendet aber das div bzw. <header> möchte es anscheinend nicht... auch hier... sorry

Ich habe nach sinnvollen Klassenbezeichnungen gefragt, es kam aber bisher nichts an, außer <main> und <blablupp>...

[Rolf B]

Hallo einsiedler,

Ich habe nach sinnvollen Klassenbezeichnungen gefragt

Ja, hast Du. Und diese Gegenfrage ist eigentlich die Antwort:

Sollten Klassennamen nicht so gewählt werden, dass sie eine Bedeutung erklären, anstatt eine visuelle Darstellung?

D.h. dieses Dings, worin dein Name vertikal links an den Rand soll, könnte (da eindeutig) die id 'mein-name' tragen. Keine Klasse übrigens, weil's ja nur 1x vorkommt.

Wie man es stylen muss, fiddle ich mal zurecht, moment noch.

Rolf

[Rolf B]

Hallo Ingrid,

tja, ist nicht ganz so einfach. Ein transform:rotate rotiert das Ding nachdem es platziert wurde, d.h. wenn Du den Namen breit genug haben willst bläst es Dir den Container auf, in dem er steht.

Was hilft, ist writing-mode: vertical-lr, zusammen mit einem transform:rotate(180deg) auf dem Text. Allerdings ist writing-mode relativ neu und wird nur von FF und Chrome unterstützt. Hinter Safari ist in der Kompat-Tabelle ein ?. Für IE/Edge User würde der Text horizontal dargestellt.

Die Alternative wäre ein Bild mit dem gedrehten Text drin, das Du bei hinreichend breiten Viewports einfach links hinklebst. Mach transparenten Hintergrund, dann sieht's wie Text aus. Das Rendering gedrehter Texte ist - zumindest unter Windows - ohnehin nicht so schön.

https://jsfiddle.net/3xh0to1a/

Keine Ahnung ob es bessere Methoden gibt...

Rolf

[einsiedler]

Ich glaub, ich mach des mit einem Image, ist am einfachsten! ich bereite das mal vor.

[Gunnar Bittersmann]

@@Rolf B

Was hilft, ist writing-mode: vertical-lr, zusammen mit einem transform:rotate(180deg) auf dem Text.

Du nimmst mir das Wort aus dem Mund.

Allerdings ist writing-mode relativ neu und wird nur von FF und Chrome unterstützt. Hinter Safari ist in der Kompat-Tabelle ein ?. Für IE/Edge User würde der Text horizontal dargestellt.

Deshalb ein @supports()-Block.

Die Alternative wäre ein Bild mit dem gedrehten Text drin

Was auch ein SVG sein darf. Bei Inline-SVG hat man den Text auch im Markup.

LLAP 🖖

[einsiedler]

Aaaaaha, also mal nach "Inline-SVG" googeln... Dank U well...

[einsiedler]

Ich hab soweit folgendes:

<svg xmlns="http://www.w3.org/2000/svg"
					 xml:lang="en" width="auto" height="auto">
					<title>Positioning MainTitel</title>
					<style type="text/css">
						svg {
							font-family: 'Variable-Bold';
							fill: #ff6e00;
							font-size: 3rem;
							line-height: 1;
							margin: 0;
							padding: 0.5em 0.12em;
						}
						.em {
							fill: #ff6e00;
						}
					</style>
					<rect fill="#6f7f90;" width="100%" height="100%" />
					<text class="em" x="5em" y="1em" >Mein toller Text steht hier...
					</text>
</svg>

O.k. da muss noch das transform: rotate(-90deg); hin .... aber ist das soweit richtig?

[einsiedler]

Fragen dazu: A) Wenn ich Text / Schrift als / im svg benutze benötige ich wiederum writing-mode: vertical-lr also wäre B) ein IMG was ich vertikal ausrichte hier doch am besten, oder? Würdet ihr es so machen /anwenden? Bei schmalerem Bildschirmfenster kann ja die Überschrift ruhig horizontal ganz oben über allem stehen.

Frage C) es betrifft jetzt die Höhen, von den Höhen her, ist bei mir das was ich im <main> habe die größte (height) Ausdehnung, wie bekomme ich es hin das die id`s links daneben sich an diese Höhe anpassen , als maximalste Höhe? Derzeit habe ich um die ID main-content einen grauen Rand gelegt zur Anschauung. Denn jetzt wie es ist und man (ein wenig nur) scrollen muss, finde ich nicht so gut! Das ist mein nächstes Arbeitsfeld!

Gute n8 der einsiedelnde

[Rolf B]

Hallo einsiedler,

nein, du brauchst kein writing-mode. Man kann es bspw. mit einem textPath machen, der an einen vertikalen path gebunden wird:

  <svg viewBox="0 0 50 250" preserveAspectRatio="xMidYMid meet"
       xmlns="http://www.w3.org/2000/svg">
   <path id="verticalPath" fill="none" stroke="none"
         d="M40,250 V0"/>
   <text x="125" text-anchor="middle">
   <textpath href="#verticalPath">Tassilo Sturm</textpath>
   </text>
   <rect x=4 y=4 width=42 height=242 stroke-width="5" stroke="orange" fill="none"/>
  </svg>

Wie man ein solches SVG allerdings korrekt in einen linksseitigen Rahmen einbindet, da muss ein SVG Experte ran. Bei mir skaliert das nicht so wie ich will. Im Fiddle hätte ich gerne, dass das h1 schmaler wird wenn das SVG sich wegen zu geringer Höhe schmaler macht. Sicherlich kann man das mit Media-Queries schaffen, aber dann gibt's Sprünge. Ich suchte eine Lösung mit gleitendem Übergang. Geht das?

https://jsfiddle.net/Rolf_b/25zos9c1/

Rolf

[einsiedler]

Danke, werde es jetzt mal anwenden (nach diesem Muster!) Eigentlich soll der Namenszug nur bei großen Bildschirmfenstern sich links befinden, wenns kleiner wird erscheint er halt obenan.

Gruß und DANK u well der einsiedelde

[Gunnar Bittersmann]

@@Felix Riesterer

suchst Du transform: rotate(90deg);?

Ich glaube, nicht. Damit würde der Platz des Elements vor der Drehung berechent und freigehalten werden; die Drehung wirkt sich auf die Positionierung der anderen Elemente nicht aus.

Besser dürfte da writing-mode zu verwenden sein. Guckst du.

LLAP 🖖