Beiträge von einsiedler

Ich werde alles von Anfang an neu struckturieren, vorallem das CSS (da scheint mir der Haken zu sein das im Edge nicht alles funktioniert!)

Meine Frage: Um den gesamten Inhalt zu zentrieren, soll ich da auf einen "wrapper" zurückgreifen oder lieber so wie ich es derzeit habe

                html {
                    margin: 0; padding: 0;                                            
                    background:
                        -webkit-linear-gradient(hsl(0,0%,0%,0.15), hsl(0,0%,0%,0.15)),
                        url('../images/svg/esel.svg');
                    background:
                        linear-gradient(hsl(0,0%,0%,0.15), hsl(0,0%,0%,0.15)),
                        url('../images/svg/esel.svg');
                    background-repeat: no-repeat;
                    background-position: center center;
                    background-size: auto 100%;
                    
                    word-wrap: break-word;
                    overflow-wrap: break-word;

                    -webkit-hyphens: auto;
                       -moz-hyphens: auto;
                            hyphens: auto;
                }
                html > body {
                    margin: 0; padding: 0;
                    width: 100%;
                    margin: 0 auto;                    
                }
                
                body {
                    height: 100%;
                    min-height: 100vh;
                    flex-direction: column;
                    flex-wrap: nowrap;
                    max-width: 86em;
                }

Was ist besser, auch in Hinsicht wenn ich ein Hintergrundbild verwende (villeicht aber auch nicht!)

Im Netz steht sowohl ein für und ein wieder...

Gruß der einsiedelnde

So, habe alles für den <noscript> - Fall geändert...

Folgende Probleme habe ich noch:

A)

Im älteren Firefox 52.9.0 , Opera 36.0.2130.80 und im Edge

nimmt #main-nav {} im Fall von [aria-expanded="false"] (also im geschlossenen Menü) nicht nur die Breite vom Button an , sondern ist viel breiter.

Wie kommt das denn?

B)

Im Edge scheint die Navigation #main-nav {} nicht die Breite des Bottons einzunehmen, geschweigedenn die Breite der gesamten Navigation

C)

Ich werde sämtlichen inhalt in einem mittigen wrapper darstellen, doch wie passe ich nun mithilfe von position: relative; / position: absolute; und overflow: hidden; das Schiebemenü an das man es an den Rändern nicht sieht?

Wie setzte ich das nun?

D)

Jetzt habe ich gesehen wie alles im IE aussieht.... katastrophal....

Im Firefox Quantum (63.0.3) , Opera Version:56.0.3051.116 & Chrome Version 70.0.3538.110

scheint alles wunderbar zu laufen.

Nur eben der edge, da sieht es so aus:

Was ist da schon wieder los?

Gute n8

der einsiedelnde

Okay, werde ich morgen mal ausprobieren.

Es ist ja angedacht das es (irgendwann) mal den media-querie

@media (scripting: none) { }

gibt. Es wird immer einfacher...

Ja, aus unerfindlichen Gründen funktioniert das.

Ich muss das Ganze wohl nochmal vonvornean neu aufziehen und tippen.

Es scheint so als wenn sich zwei display: flex; untereinander nicht vertragen oder es irgendwo fehl angebracht ist.

Frage aber: Wie würdest Du für diesen noscript-Fall das Menü anordnen, unter dem Content oder wie jetzt darüber.

Ich tendiere irgendwie ihn unter dem Content anzusiedeln, Hab schonmal für main : order: 1; und #main-nav entsprechend order:2; ausprobiert.

Soweit funktioniert es, auch bei ausgeschaltetem java-script (obwohl das bestimmt selten der Fall sein wird!)

Habe jetzt als nojs.css:

@charset "UTF-8";

/* CSS Document */

@media all {
    nav button[aria-expanded=""], nav ul button[aria-expanded=""] {
        display: none;
    }
}

@media screen and (min-width: 850px) and (max-width: 1440px) {
                .contentspan {
                    flex-direction: column;
                    flex: 1 1 auto;
                }
                #main-nav {
                    display: flex;
                    justify-content: center;
                }
                nav button[aria-expanded="false"]+ul > * {
                    display: block;
                }                
                main {
                    flex: 1 1 auto;
                }                
                div.contentspan nav > ul {
                display: block !important;
                margin-left: 0;
                width: 48em;
                }                                
}

Doch ein Fehler macht mir der Opera und der Chrome eben bei der mittleren Einstellung bei ausgeschaltetem java-script

@media screen and (min-width: 850px) and (max-width: 1440px) {}

dort nimmt <nav> nur eine bestimmte Höhe ein (nicht die Höhe für die gesamte Navi), und überlagert sich mit dem Content.

Wie kommt das und wie stellt man das ab?

Gute n8

der einsiedelnde

PRIMA!!! Es funktioniert (wohl)!

Aber etwas anderes: Kann es sein, das meine Browser das <noscript><link href="css/nojs.css" rel="stylesheet"></noscript>

im <head> nicht interpretiert?

Dort habe ich in nojs.css folgendes stehen, für eben dem Fall bei ausgeschalteten scripten:

@charset "UTF-8";

/* CSS Document */

@media screen and (min-width: 850px) and (max-width: 1440px) {
                .contentspan {
                    flex-direction: column;
                    flex: 1 1 auto;
                }
                
                nav button[aria-expanded="false"]+ul > * {
                    display: block;
                }
                
                main {
                    flex: 1 1 auto;
                }
                
                div.contentspan nav > ul {
                    display: block !important;
                    width: 22em;
                }
                
}

Nur eben in dieser "mittleren" Position stellt sich das Menü bei "ausgeschaltetem script" nicht ideal dar.

Deshalb wollte ich der Klasse .contentspan die Richtung ändern in column

Oben der "Content" darunter das Menü.

Aber irgendwie funktioniert gar nichts. :o(

Fast, nur werden alle Unterpunkte schon direkt angezeigt, nicht erst bei betätigen des bottons.

Zudem nehmen die Menüs nicht die volle Breite ein.

:o((

Hab mich von Deinem Code "inspirieren" lassen, denn ich weiß nicht, hab so im Hinterkopf wie es sich mit

<input / "checkboxen"> und <label> bei Mobilen Geräten verhält.

Nein, ich bleib bei dem was ich habe, mit dem botton, was ja alles funktioniert.

Hab allerdings eine Idee von Dir kopiert und angewendet und es funktionier bis auf zwei Fehler ganz gut.

Siehe: ( Bitte das Bildschirmfenster zusammenschieben um die Wirkung zu sehen! )

Fehler 1: Durch die Rechnerei, die noch geblieben ist nimmt das <main> nicht die gesamte Breite ein.

Fehler 2: wenn man den botton drückt , also [aria-expanded="true"] ist, geht das <main> rechts über den Rand hinaus / hinweg.

Aber ich wollte ähnlich wie bei dem :target beispiel durch position: relative; und position: absolute; Setzung soetwas verhindern.

Das meinte ich im vorhergehenden Post.

Irgendeine helfende Idee dazu?

Nun aber gute n8

der einsiedelnde

Ich habe mal etwas "umgebaut", ist aber noch nicht das "ware" (siehe im IE , warum auch immer!)

wer kann mir bitte ein anschauliches beispiel geben / basteln von dem ich dinge übertragen kann, so kann ich besser lernen!

bitte um hilfe!

der einsiedelnde

Nee, nee, hast es nicht verstanden, ich meinte das man den "einschiebeeffekt" erhält aber/und das ganze mit meinem botton, den ich schon habe.

Das der botton links am Rand sitzt (wie gehabt) und bei Betätigung das das "Schiebefenster" aufgeht und halt zurück.

Denkst Du, man könnte das hier: (ist übrigens nach einer Nachfrage von mir entstanden

und hier angewendet:

das man DAS so umbauen könnte das es mit meinem botton zum nav-öffnen funktioniert?

ABER: Den botton zum umzwitschen das der sich ausserhalb des Schiebe-Contents befindet, quasi fix ist,

also nicht so wie in dem Anwendungsbeispiel.

Also wenn man entsprechend position: absolute und position relative setzt. Könnte das funktionieren?

Gute n8

der einsiedelnde

Also Du meinst: Das dieses Konstrukt "wie Perlen an einem Strang" (also hintereinander) (also: header = 100% --> flex-wrap --> <nav> = 7em + <main> den errechneten Rest , das das für mein Konzept nicht das ware ist.

Besser ist es den <header> extern für sich, und um die <nav> + <main> ein div legen, umschliessend. Da dann jenachdem

fex-direction : row   oder column setzen. Das das besser wäre.

Ja, das habe ich mir auch schon gedacht, das wäre wie bei m einer alten website.

Mal gucken, ich entwerf da gerade mal etwas in dieser Richtung.

NOPE, ist auch nicht die Lösung, es funktioniert NICHT!

Scheint richtig, denn du denkst, für den Fall, wenn Java-script ausgeschaltet wäre, hätte ja #main-nav überhaupt keine Breitenangabe.

Für den Fall, wenn also scripte ausgeschaltet sind, muss ich mir noch etwas einfallen lassen, aber das kommt als nächstes.

Also beim breitem Bildschirmfenster ergibt es sich ganz gut, als auch bei schmalerem Bildschirmfenster ( also bis 850 px ) ,

das sich alles nach unten aufklappt. Nur für den "mittleren Zustand" ( @media only screen and (min-width: 851px) and (max-width: 1499px) {} )

muß ich mir etwas überlegen.

Verstehe ich es richtig, betrifft es also auch die id (vom <nav>) also: <nav id="main-nav"> das das ganze ein eltern-Element ist?

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

ändert sich dann etwas?

Das geht in Richtung 2. Lösung

Aber wie würde ich das anstellen?

Nee @Sempervivum, das ist kein Schreibfehler.

Wie soll ich es beschreiben, es sind zwei Zustände. Wenn also der Sandwich-Botton ( also [aria-expanded="false"] ) dargestellt ist soll die

Breite des Menüs eben so breit wie der Botton sein (Das eigentliche Menü wird ja nun auch nicht dargestellt ist ja noch hidden),

Und wenn also [aria-expanded="true"] ist beim KLICK des Bottons, soll also das Menü in seiner Breite, also 17em nach rechts

(als auch nach unten / klar) ausklappen.

Doch das macht es nicht.

Irgendwo ist da ein Logik-Fehler, aber wo?

Ich finde ihn nicht!

Hallo liebe Forumer,

ich stelle auch hier mal meine Frage, weil ich in einem anderen Forum nun seid langer Zeit keine Antwort mehr erhalten habe und ich möchte nun mal vorran kommen.

Es geht um die Menüführung bei unterschiedlichen Bildschirmbreiten.

Wenn man das Bildschirmfenster bei meiner Beispielseite zusammenschiebt wird aus dem links angeordneten Menü irgendwann (bei)

@media only screen and (min-width: 851px) and (max-width: 1499px) {}

ein Botton das man aufklappen kann.

Klappt man das Menü auf, folgt der Haken: Das Menü nimmt NICHT die Gesamtbreite des ursprünlichem Menü an (wie bei einem breiten Bildschirmfenster / zumindest proportional!!).

Ich habe das mal anhand von Screens illustriert.

Wie kommt das?

Als CSS habe ich bisher folgendes:

@media only screen and (min-width: 851px) and (max-width: 1499px) {
.container {
display: flex;
flex-wrap: wrap;
align-content: flex-start;
}


main {
/*margin: 0.5rem 0 0.5rem 0.3rem;*/
flex-grow: 1;
flex-shrink: 1;
flex-basis: calc(100% - 14em - 1em); /* calc(100% - 500px - 5rem); */
/*align-self: stretch;*/
}

#main-nav {
/*margin-top: 2rem;*/
margin-bottom: auto; /* 20px; */
flex-grow: 0;
flex-shrink: 0;
flex-basis: 1em;
}

botton [aria-expanded="true"] > #main-nav {
margin-bottom: auto;
flex-grow: 1;
flex-shrink: 1;
flex-basis: 17em;
}
}

Ich habe dem #main-nav eine flex-basis von 17em mitgegeben, also müsste er doch (zumindest proportional bei schmalerem Bildschirmfenster)

das Menü breiter darstellen?

Wie schon gesagt hängt die Breite mit dem

botton [aria-expanded="true"]

zusammen / ist abhängig! (ich meine villeicht stimmt da irgendwas nicht!)

Wer kann mir da helfen bitte!

Verdorri nochmal wo liegt hier mein Denk/Logik-Fehler?

Gruß der einsiedelnde

Zu A) <aside>

Also der Inhalt vom <aside> soll sich "inderekt" auf dem inhalt vom <main> beziehen.... als Anmerkungen / weiterführende links... Das meinst Du...

zu B) Hauptnavigation <nav> </nav>

Ich dachte jetzt an die Hauptnavigation "home arbeiten cv impressum kontakt rechtliches" und im <header> den Seiten-Titel (als <h1> // villeicht auch noch eine <h2> und zusätzlich ein img.

Das man das halt getrennt hält.

Ich wollte es so machen:

**************************** ********************************
*++++++++++++++++++++++++++* *  <main>                      *
*+ <h1>derEinsiedler</h1> +* *                              *
*+                        +* *                              *
*++++++++++++++++++++++++++* *                              *
*                          * *                              *
*++++++++++++++++++++++++++* *                              *
*+ <nav>                  +* *                              *
*+ Home                   +* *                              *
*+ Impressum              +* *                              *
*+ Arbeiten               +* *                      </main> *
*+ Kontakt                +* ********************************
*+ rechtliches     </nav> +*
*++++++++++++++++++++++++++*
****************************

Deshalb das markup B) ...

Gruß der einsiedelnde

Hallo liebe Forumer,

ich habe mal eine Frage des (ich sag mal) "Guten Stils"

Und zwar darf ( im html5) eine <nav></nav> innerhalb vom <header> gepackt werden?

oder ist eine andere Lösung erstrebenswerter:

A)

<header>
    <h1>Testing</h1>
        <nav>
            <ul>
                <a href=""><li>Home</li></a>
                <a href=""><li>About</li></a>
                <a href=""><li>Contact</li></a>
            </ul>
        </nav>
</header>

B)

<div class="aside">
    <header>
        <h1>Testing</h1>
    </header>
        <nav>
            <ul>
                <a href=""><li>Home</li></a>
                <a href=""><li>About</li></a>
                <a href=""><li>Contact</li></a>
            </ul>
        </nav>
</div>

Achso: Die header-Überschrift als auch die Navigation (zusammen) möchte ich als "quasi aside" am linken Rand anordnen.

Ein <aside> ist ja hier nicht angebracht weil dort keine direkte Navigation integriert werden darf, höchstens (weiterleitende Infos & Links),

nicht aber die Hauptnavi.

Ist dies so richtig?

Gruß der einsiedelnde

Hallo liebe Forumer,

bin mal wieder am verzweifeln nachdem ich einiges an Setzungen ausprobiert habe.

Ich möchte meine Main-Navigation ein wenig anders gestalten.

in etwa so:

Anmerkungen dazu:

Auf der linken Seite sind die Links die direkt auf die Unterseiten: Arbeiten , Texte, CV, Ausstellungen & Impressum verweisen.

Auf der rechten Seite kann man zusätzlich zu jeden Unterseiten-Punkten ein weiteres Schiebe-Menue aufklappen bei dem weitere Verlinkungen zu Unter-Ankerpunkten angeboten werden.

Eine Benutzbarkeit ist ja gegeben da die Haupt-Verlinkungen zu den Untermenues frei zugänglich sind, lediglich die Anker-Verlinkungen "verdeckt" werden.

Probleme habe ich dennoch folgende:

Wenn man das Bildschirmfenster zusammenschiebt und die Schrift vergrößert wächst zudem der <header> und das <div> indem sich die <nav> Navigation befindet.

Muss ich um alledem ( <header></header> <div><nav></nav></div> ) noch ein zusätzliches <div> machen das den Breitenwachstum unterbindet?

FRAGE: Alles in den <header> packen, auch die Navigation das macht man nicht, oder?

Dann habe ich ein Problem damit, das der Navigationsbereich (blau unterlegt) sich nicht in der Breite anpasst wenn man das Bildschirmfenster zusammenschiebt und eine Schriftvergrößerung vornimmt. Siehe das Verhalten vom Footer, genauso sollte sich der Navigationsbereich auch verhalten.

Aber nein, es bleibt irgendwann bei einem bestimmten width.

Zudem soll der Inhalt "umbrechen" als normales Verhalten.

Problem ist eben weil wegen der Menue-Schieberei ich mit position:absolute in einem positiv: relativ arbeiten musste. DAS muss auch so bleiben.

Und wie bekomme ich es hin das bei einer bestimmten Bildschirmbreite ( mit media-queries) das die position: absolute gestzten Bereiche

"Menue öffnen" und "wieder schliessen" sich unterhalb zu den Menuepunkten auf der linken Seite (Arbeiten , CV , Impressum etc.) befindet,

oder beides mittig (untereinander) angeordnet werden.

Wie bekomme ich das hin, habe nicht soviel Erfahrung mit der Setzung von position.

Ich komme nicht weiter, und die mißglückten Versuche nerven mich.

Gruß der einsiedelnde