Hallo liebe Forumer,
ich komme nicht weiter, habe soweit das -- -- erreicht
Übrigens kommen die gestrichelten Hilfs-Linien weg.
Mein Problem A)
ist die Überschrift links, wie ich es sehe macht (das neue) opera, firefox und chrome es so wie gedacht / gewollt nur der sch... bek.... IE will nicht so.
Der schriftzug wird von mittig an nach oben hin angezeigt.
Ich habe dies mit inline svg gelöst, weil man mir sagte das das so funtioniert. Ich bitte darum kein IMG zu verwenden nach Möglichkeit.
<main>
<h1>
<svg viewBox="0 0 50 250" preserveAspectRatio="xMidYMid meet"
xmlns="http://www.w3.org/2000/svg">
<path id="verticalPath" fill="none" stroke="none" d="M37.05,250 V0"/>
<rect x=4 y=4 width=42 height=242 stroke-width="3" stroke="#ff6e00" fill="none"/>
<text x="125" text-anchor="middle"fill="#ff6e00">
<textpath href="#verticalPath">Meine Überschrift</textpath>
</text>
</svg>
</h1>
<section id="content-span">
[ ... ](siehe fiddle: Fiddle Link)
Wie also passt man das an den IE bzw. auch an die alten firefox, opera und chrome an?
Dort wird auch der Schriftzug verschoben angezeigt.
2)
Wenn man das Bildschirmfenster auf unter 50em zusammenschiebt, (ja richtig gelesen ich hab die media-queries auf " em " umgeschrieben)
soll die Überschrift / der Schriftzug wieder horizontal angezeigt werden. Spielt es bitte mal durch.
Problem B)
wenn man die Menüpunkte ausklappt stimmt es irgendwann mit den Höhen nicht mehr so.
Das overflow: auto ist wohl hier nicht richtig. Am einfachsten wäre wohl wenn der Schriftzug /die Überschrift links flex-start (also oben!) ist,
(Ich meine das sonst der Schriftzug ewig "zappelt")
Das der Schriftzug mittig bleibt das wird wohl schwierig wenn der nicht fixed ist, oder?
Ersteinmal das... es kommt nochmehr dazu...
Lieben Gruß der einsiedelnde