Beiträge von Sempervivum

Solange die Seite unabhängig dasteht, wüsste ich keine Möglichkeit (jedenfalls nicht clientseitig mit JS). Eine Verbindung von main.html nach result.html kannst Du nur herstellen, indem Du letztere durch erstere öffnest:

• entweder durch einen Link. Dann kannst Du über die URL Parameter übergeben und auf der result-Seite auswerten.
• oder durch die Javascript-Funktion window.open, was aus verschiedenen Gründen weniger zu empfehlen ist. Dann hast Du Zugriff auf das DOM der result-Seite und kannst diese direkt verändern.

Beschreib doch mal das Umfeld, in dem das stattfinden soll, dann kann man die Frage u. U. besser beantworten.

Wenn du es 150-prozentig machen willst, würde ich den main-Content oben anordnen, damit ein Besucher zuerst die Inhalte zu Gesicht bekommt. Aber oben einen kleinen Knopf, der mit einem a-href-Link zu dem Menü unten führt

Beheben kannst Du es, indem Du bei dem #main-nav flex-basis:auto setzt:

html-seminar.de/woltlab/attachment/1734/

Erklären kann ich mir das allerdings nicht, weil ja auch groß und breit flex-grow:1 da steht und sich der Container eigentlich entspr. dem Inhalt ausdehnen müsste.

Da fehlt jetzt die Angabe der Breite für das ul:

html-seminar.de/woltlab/attachment/1732/

Ein- und Ausfliegen ist auch kein Problem mit diesem CSS:

        @media screen and (min-width: 850px) and (max-width: 1440px) {
            main {
                flex: 1 1 auto;
            }

            div.contentspan nav>ul {
                display: block !important;
                margin-left: -24em;
                transition: margin-left 0.5s;
            }

            nav button[aria-expanded="true"]+ul {
                margin-left: 0;
            }
        }

Den Container hast Du ja schon umarrangiert. Jetzt fehlt nur noch eine Kleinigkeit: Du hast bei dem main sowohl flex-grow als auch flex-shrink auf 0 gesetzt. Dadurch passt sich der Container nicht an den freien Raum an. Setzt Du beides auf 1, tut er es und Du kannst auf die Rechnerei verzichten:

Nav auf:

html-seminar.de/woltlab/attachment/1730/

Nav zu:

html-seminar.de/woltlab/attachment/1731/

Anscheinend geht es mal wieder nicht ohne fertigen Code. Hier eine Demo für das Ein- und Ausfliegen. Aber ohne Deko

http://jsfiddle.net/Sempervivum/bn6Lh0so/18/

Kann man alles kinderleicht ergänzen:

https://jsfiddle.net/Sempervivum/gjk7m1p3/31/

Edit: Im jsfiddle wird es leider nicht vollständig korrekt angezeigt aber auf einer Testseite funktioniert es.

Meinst Du es so?:

https://jsfiddle.net/Sempervivum/gjk7m1p3/25/

Zitat

<main> soll über dem Image ngezeigt werden.

Das verstehe ich so, dass das <main> das Image verdecken soll, wenn man herunter scrollt?

Ich verstehe das Ganze nur ungefähr, aber nicht vollständig. Hast Du es vielleicht online, dass man es sich ansehen kann?

Kann man schon machen, ist aber offenbar nicht das, was einsiedler möchte.

Den Schiebeeffekt kannst Du erreichen, indem Du das ul mit der Nav nicht einfach ein- und ausschaltest mit display:none/block sondern seine Position in horizontaler Richtung, z. B. mit margin-left veränderst. (Ich empfehle dieses und nicht position-left weil ich erwarte, dass sich bei margin der umgebende Container, das nav, mit ausdehnt.)

Damit das Ganze dann auch animiert abläuft und nicht ruckartig, musst Du transition verwenden:

https://wiki.selfhtml.org/wiki/CSS/Eigen…tion/transition

Mit diesen Lösungen mit :target konnte ich mich nie anfreunden, weil sie manchmal Nebeneffekte haben, denn der Browser scrollt ja u. U. auch zum Ziel des Links.

Für deinen Fall würde sich eine Lösung mit dem Checkbox-Trick anbieten. Lies z. B. hier:

https://wiki.selfhtml.org/wiki/HTML/Form…r_Checkbox-Hack

Genau das meine ich. So wie es jetzt ist, kann es auch funktionieren, ist aber nicht besonders änderungsfreundlich, weil immer neu berechnet werden muss, z. B. auch, wenn man die Nav ein- und ausschaltet.

Habe den Screenshot vergessen:

html-seminar.de/woltlab/attachment/1728/

Wenn ich zusätzlich bei dem ul die Breite auf 17em setze, stimmt schon mal die Breite. Dann hat man noch einen unerwünschten Umbruch drin. Man müsste die Berechnung der Breite für den Hauptcontainer anpassen, aber ich empfehle stattdessen, den Header dort heraus zu nehmen und mit flex-direction zwischen horizontaler und vertikaler Anordnung umzuschalten. Ich liebe diese Fummelei mit calc nicht und vermeide sie, wenn es irgend geht. Meistens kann man das Layout so gestalten, dass die richtigen Breiten automatisch durch Flex eingestellt werden.

Empfehlen würde ich eher die erste Lösung, weil sie nur zwei CSS-Anweisungen erfordert.

Zitat

wenn ich zusätzlich dem ganzen eine class gebe <nav id="main-nav" class="expand">

Genau, mit dieser Klasse kannst Du dann das flex-basis umschalten, etwa so:

#main-nav.expand {
   flex-basis: 17em;
}

Verstehe. Ich wollte zunächst vorschlagen, mit CSS abhängig von der Eigenschaft aria-expanded das flex-basis zu ändern, aber leider ist ja das nav-Element ein Elternelement und mit CSS nicht zugänglich.

Mögliche Lösungen:

• Dem ul eine Breite von 17em geben und dem nav ein flex-basis:auto, dann sollte das nav die Breite des ul übernehmen.
• oder mit dem Javascript (dort bin ich nicht eingestiegen) auch dem nav im aufgeklappten Zustand eine geeignete Klasse geben, so dass Du abhängig davon das flex-basis umschalten kannst.

Ersteres habe ich in den Entwicklerwerkzeugen versucht und funktioniert.

Da sehe ich in den Entwicklerwerkzeugen keine flex-basis von 17em sondern von 1em:

@media only screen and (max-width: 1499px) and (min-width: 851px)
#main-nav {
    /* margin-top: 2rem; */
    margin-bottom: auto;
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: 1em;
}

(sturm-main-style.css Zeile 360)

Ändere ich es auf 17em, wird es wie von dir gewünscht dargestellt. Schreibfehler?

Versuche dieses CSS:

        body {
            margin: 0;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

und dieses HTML:

<body>
    <main contenteditable>
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
        dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
        clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
        consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
        sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
        takimata sanctus est Lorem ipsum dolor sit amet.
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
        dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
        clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
        consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
        sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
        takimata sanctus est Lorem ipsum dolor sit amet.
    </main>
    <footer>Der Fußbereich</footer>
</body>

und prüfe, ob es dann das ist, was Du dir vorstellst.

(contenteditable nur, um das Verhalten leicht testen zu können.)

Zitat

Und da die Namen ja alle unterschiedliche lang sind, scheint mir die Umbruchvariante die hilfreichste

Flex kann durchaus mit unterschiedlichen Längen umgehen:

http://jsfiddle.net/Sempervivum/9haxj0o3/1/