• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Frage -

  • Ersteller Ersteller Gelöschtes Mitglied 43691
  • Erstellt am Erstellt am
  • Schlagworte Schlagworte
    html
G

Gelöschtes Mitglied 43691

Guest
-
 
Zuletzt bearbeitet von einem Moderator:
Hallo Moni und willkommen im Forum!
eigentlich hast Du schon alles drauf, was Du brauchst: Mediaqueries und Flexlayout. Das einzige was Du tun musst ist, in der Mediaquery die flex-direction von row (linkes Bild bei breitem Bildschirm) auf column zu ändern (rechtes Bild bei schmalem Bildschirm).
 
Guten Morgen Moni,
ich hatte in meinem vorigen Posting noch nicht berücksichtigt, dass zusätzlich der Text in dem SVG gedreht werden muss.

Dass das Umschalten von horizontaler auf vertikale Anordnung nicht funktioniert, liegt daran, dass in deinem CSS Schreibfehler sind:
Code: 
            /* fekx direction: column; */
            flex-direction: column;
Wenn ich die korrigiere, funktioniert die Umschaltung mit flex-direction.

Die Drehung muss dann in der Mediaquery ausgeschaltet werden:
Code: 
@media screen and (max-width: 480px) {
            /* ... */
            text {
                /* Drehung ausschalten: */
                transform: unset;
            }
        }

Damit funktioniert dann so weit alles.

Das SVG sieht jedoch noch ein wenig zerlegt aus. Hast Du damit noch mehr vor? Die Anordnung, die Du in den beiden Bildern zeigst, kannst Du nämlich problemlos auch mit HTML und CSS erreichen und eine Drehung funktioniert auch ohne SVG mit einem HTML-Element.

Übrigens: In deinem HTML fehlt das doctype aber die Browser sind da ziemlich tolerant und dass CSS funktioniert auch ohne.

Beste Grüße, Ulrich

Code: 
    <style>
        :root {
            --VBb: 50;
            --VBh: 328;
            --width: 42;
            --height: 320;
            --tspanx: 0;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html {
            height: 100vh;
        }

        body {
            display: flex;
            /* fekx direction: column; */
            flex-direction: column;
            height: 100vh;
        }

        tspan {
            font-size. 1.25rem;
        }

        tspan:last-child {
            font-size. 0.87rem;
        }

        p {
            moz-hyphens: auto;
            -o-hyphens: auto;
            -webkit-hyphens: auto;
            -ms-hyphens: auto;
            hyphens: auto;
            word-wrap: break-word;
            font-size: 1.7rem;
        }

        text {
            /* transform="rotate(-90,82,82); */
            transform: rotate(-90, 82, 82);
        }


        main {
            flex: 1 0 20em;
            display: flex;
            flex-direction: row;
            overflow: hidden;
        }

        h1 {
            flex: 0 0 4em;
            max-height: 3.5em;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-content: center;
        }

        h1 svg {
            display: block;
            height: 100%;
            max-width: 19em;
        }

        main section {
            flex: 1 1 30em;
            background-color: #ccc;
        }

        section {
            padding: 0.8rem;
        }


        @media screen and (max-width: 480px) {
            :root {
                --VBb: 328;
                --VBh: 50;
                --width: 320;
                --height: 42;
                --tspanx: 164;
            }

            html {
                width: 100vw;
            }

            body {
                display: flex;
                /* fekx direction: row; */
                flex-direction: row;
                width: 100vw;
                height: 100vh;
            }

            tspan:last-child {
                font-size. 0.9rem;
            }

            p {
                moz-hyphens: auto;
                -o-hyphens: auto;
                -webkit-hyphens: auto;
                -ms-hyphens: auto;
                hyphens: auto;
                word-wrap: break-word;
                font-size: 1.1rem;
            }

            main {
                flex: 1 0 100%;
                display: flex;
                flex-direction: column;
                overflow: scroll;
            }

            h1 {
                flex: 0 0 7em;
                max-height: 3.5em;
                display: flex;
                flex-direction: row;
                justify-content: center;
                align-content: center;
            }

            h1 svg {
                display: block;
                height: 100%;
                width: 100%;
                max-width: 26em;
            }

            text {
                /* Drehung ausschalten: */
                transform: unset;
            }

            main section {
                flex: 1 1 30em;
                background-color: #ccc;
            }

            section {
                padding: 0.8rem;
            }
        }
    </style>
 
Zuletzt bearbeitet:
Guten Morgen Moni!
Nur mein SVG macht da nicht mit, als wenn die Werte im ROOT nicht angenommen werden, wird das SVG
ganz komisch und falsch plaziert und weder nimmt es die Ausmasse der Werte vom ROOT an.
Zum Vergrößern anklicken....
Dass man CSS-Variablen in HTML oder Inline-SVG verwenden kann wäre mir neu und es überrascht nicht, dass das nicht funktioniert.
Außerdem: Meistens gibt es für eine bestimmte Aufgabe ein bestimmtes Werkzeug, das am besten geeignet ist, sie zu lösen. In deinem Fall, Anordnung von Text, auch wenn ein Bild und eine spezielle Schriftart hinzu kommen, ist das nicht SVG sondern HTML und CSS.
 
b) Welche Möglichkeiten gibt es, den ganzen Quelltext eventuell ANDERS zu schreiben/formulieren?
Denn so wie ich es jetzt habe, scheint es nicht zu funktionieren. Das ist meine aktuelle Frage.
Zum Vergrößern anklicken....
Wie schon empfohlen, sehe ich die Möglichkeit, diesen Header bzw. h1 mit HTML und CSS zu realisieren. Könnte dann so aussehen:
Code: 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="UTF-8">
    <title>Testseite</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html,
        body {
            height: 100%;
        }

        body {
            display: flex;
            flex-direction: row;
        }

        p {
            -o-hyphens: auto;
            -webkit-hyphens: auto;
            -ms-hyphens: auto;
            hyphens: auto;
            word-wrap: break-word;
            font-size: 1.7rem;
        }

        main {
            flex: 1;
            width: 100%;
            display: flex;
            flex-direction: row;
        }

        h1 {
            flex: 0 0 4rem;
            overflow: hidden;
        }

        h1 div {
            box-sizing: border-box;
            border: 5px solid gold;
            width: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            transform: rotate(-90deg) translateX(-100vh);
            transform-origin: left top;
        }

        h1 span.txt-large {
            font-size: 1.5rem;
        }

        h1 span.txt-medium {
            font-size: 1.2rem;
        }

        h1 span.txt-normal {
            font-size: 1rem;
        }

        main section {
            flex: 1;
            background-color: #ccc;
        }

        section {
            padding: 0.8rem;
        }


        @media screen and (max-width: 480px) {
            body {
                display: flex;
                flex-direction: column;
                width: 100vw;
                height: 100vh;
            }

            main {
                flex: 1;
                display: flex;
                flex-direction: column;
            }

            h1 {
                height: unset;
                flex: 0 0 auto;
            }

            h1 div {
                transform: unset;
                height: unset;
                width: unset;
            }

            p {
                -o-hyphens: auto;
                -webkit-hyphens: auto;
                -ms-hyphens: auto;
                hyphens: auto;
                word-wrap: break-word;
                font-size: 1.1rem;
            }


            main section {
                flex: 1 1 30em;
                background-color: #ccc;
            }

            section {
                padding: 0.8rem;
            }
        }
    </style>
</head>

<body>
    <main>
        <h1>
            <div>
                <span>
                    <span class="txt-large">Rick and Morty": </span>
                    <span class="txt-medium">Staffel 7</span>
                </span>
                <span class="txt-normal">62. Das erstaunliche Leben des Mr. Kakapopoloch</span>
            </div>
        </h1>
        <section>
            <p>
                Fooo
            </p>
        </section>
    </main>
</body>

</html>
Der Nachteil ist, dass man bestimmte Maße statisch festlegen muss, weil der Header nach dem Drehen den selben Raum beansprucht wie ohne.
 
Einen sehr langen Inhalt in der Section hatte ich noch nicht berücksichtigt, nur den Dummy mit "Foo". Ich werde mir das mit dem Scrolling ansehen. Generell wirst Du um ein Scrolling nicht herum kommen bei langem Inhalt.
Hast Du schon Webspace? Wenn Du selbst etwas ausarbeitest, wäre es hilfreich, wenn man sich das gleich live ansehen könnte.
 
Zuletzt bearbeitet:
... ich habe da jetzt ein wenig weiter dran gearbeitet:
  • Langer Inhalt im main-Container scrollbar.
  • Breite der gesamten Anordnung begrenzt, ist das Fenster sehr breit, tauchen seitlich Anstände auf.
  • Margins beim Header.
  • Einige Zeilen Javascript, damit die Breite des Header automatisch berechnet wird.
Leider ist jetzt beim Header eine Inflation an div-Containern entstanden, etwas was ich normaler Weise nicht so schätze. Aber dafür kannst Du das innere Div mit Margin und Padding so gestalten, wie Du es dir vorstellst ohne dass gleich wieder alles zerlegt wird.

Könnte man nicht diesen Seitenbereich mit Überschrift und so nicht auch als <aside> bezeichnen denn er bezieht sich doch direkt auf den Inhalt in der section.
Ich meine gelesen zu haben das das aside entweder genutzt wird wenn es gar keinen Bezug zum Inhalt hat und zum Beispiel nur für weiterführende Links verwendet wird ODER gerade wenn es Bezug zum aktuellen Inhalt hat.
Zum Vergrößern anklicken....
Was das betrifft, würde ich eher dafür plädieren, das header-Tag zu nehmen. Da bisher h1 würde sich das eher anbieten.
 

Anhänge

Zuletzt bearbeitet:
Wenn ich mal kurz stören darf: kommentarlos anderswo per PN(!) ebenfalls um Hilfe zu fragen (in dem Fall bei Selfhtml) ist - vorsichtig ausgedrückt - nicht die feine englische Art …
 
Naja, gestern abend um 21:55 war's. Wer ein Problem lösen will, kann halt schon mal ungeduldig sein.

Vielleicht interessiert euch unsere Lösungsidee? Ohne Script, ohne Divitis, statt dessen Grid-Layout und writing-mode+text-orientation für senkrechten Text: jsFiddle
 
Zuletzt bearbeitet:
Monica_MS schrieb:
Widerlicher 31er... AKTUELL ist das Denunziantentum unter der STASI nun scheinbar wieder angesagt.
Zum Vergrößern anklicken....
Das hat mit Denunziantentum nichts zu tun, Crosspostings sind einfach nicht gerne gesehen. Dies habe ich aus einem anderen Forum kopiert:

Crossposting bedeutet, dass ein und dieselbe Frage in mehreren Foren oder Newsgroups gleichzeitig gestellt wird. Ein solches Verhalten wird von den meisten Helfern nicht toleriert, denn damit stellst Du einerseits die Kompetenz der Helfer jedes einzelnen Forums und Newsgroup in Frage und bewirkst zudem, dass ein zig-faches an Stunden aufgewendet wird, um nur ein einziges Problem zu lösen, denn überall werden sich die Helfer daran setzen, eine Lösung für Dich zu finden. Das ist ganz klar ein Missbrauch an dem kostenlosen und freiwilligen Support, der hier angeboten wird. Wenn Deine Frage klar und deutlich gestellt wurde, dann wirst Du ganz bestimmt innerhalb kürzester Zeit eine Antwort erhalten. Sollte dies auch nach mehreren Tagen nicht der Fall sein, dann versuche bitte die Frage besser zu formulieren. Falls Du dennoch in einem zweiten Forum posten solltest, erwähne bitte, dass Du die Frage schon woanders gestellt hast, und dass Du es tust, weil keine Lösung gefunden werden konnte.
 
@tk1234
Wenn du nicht auch freche PN's von Monica bekommen möchtest, reagiere auf ihren Post nicht.

Jetzt hat sie alles gelöscht. ¯\_(ツ)_/¯
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben