Beiträge von einsiedler

    Hallo liebe Forumer,

    ich habe folgendes Problem,

    ich experimentiere auf einer Demowebsite mit einem verschachteltem Pull-down-Menue.



    Abb. 1a) (bei einem großen Bildschirmfenster wohlgemerkt!) ist in dem Fall dort links angeordnet.

    Abb. 1b) zeigt eben nur den Fall wenn ein unsichtbarer Bereich (hier Curriculum Vitae) augeklappt ist.


    Soweit so gut:

    Wenn das Bildschirmfenster schmaler ist als 90em,

    also sagen wir mal in einem Bereich zwischen 62.5em und 90em

    dann wird das Menü unsichtbar und nur ein Sandwich-Button bleibt sichtbar und kann eben das Menü öffnen.



    Das zeigt hier Abb. 2a), wobei Abb. 2b) zeigt wenn auf dem Sandwich Botton geklickt wurde

    und das Menü öffnet sich seitlich.


    Genug der Vorrede!


    Worum es mir nun geht ist , wie man nun so ein Accessible Menu System anlegt und da scheiden sich die Geister.

    Weil ich das eben mir dem ganzen " aria "-Gedöns und role etc. machen möchte, eben wie es halt richtig ist.

    Seiten wie " http://oaa-accessibility.org/example/41/) " und " https://www.w3.org/WAI/GL/wiki/Using_the_WAI-ARIA_aria expanded_state_to_mark_expandable_and_collapsible_regions#Example_1:_Using_a_button_to_collapse_and_expand_a_region " zeigen mir zwar ein Beispiel, ich möchte aber nur per TAB - System durch dieses Menü "huschen" und

    nicht mit dem Pfeilsystem (weil mir das im selfhtml-Forum so zugetragen wurde das dies besser wäre!)


    Zitat zum Treeview Example:

    Zitat

    Apropos tree: Das in „Wie man ein verschachteltes Pull-down-Menü implementiert“ vorgestellte Navigation Treeview Example hatte ich so verstanden, dass man das so für eine Seitennavigation verwenden sollte. Die Expertenmeinung aber ist: Nicht machen! Das ist tauglich für ein Menü für Funktionen innerhalb von etwas, was eher als App daherkommt; nicht aber für eine Navigation auf Webseiten. Dort sollte man doch mit Tab-Taste durchs Navigationsmenü gehen, nicht mit Pfeiltasten.


    Was haltet Ihr davon, nur TAB oder auch Pfeil? Sagt bitte etwas dazu!

    Eigentlich möchte ich NUR TAB!


    Solche Treeview Example`s habe ich mir genüge angeschaut wie man soetwas macht, ich bin mir aber nicht sicher ob man es verwenden sollte.


    Gut, man sagte mir auch, das es eine Mischung aus "verschiedenem" wäre und ich es "ausprobieren" müsste

    also das was ich da nun alles angebe. Und das ist nun mein Problem, was gehört da alles hin, ich habe mal hier ein Beispiel wie ich es machen würde und ihr wenn Ihr so nett seid korregiert es Bitte.



    Ihr seht nun worauf es hinausläuft, ich bin mir nicht sicher ob es so richtig implementiert ist.

    Es gibt da soviel und ich weiß eben nicht was nötig davon ist.


    Bitte helft mir!


    LG der misanthrop




    Wunderbar Arne! DANKE!

    Nur bin ich mir nicht so sicher ob ich dies anwende, obwohl ich die Berechnungen für jedes IMG bräuchte (Ich sage nur als stichwort: Vergrößern des IMG verhindern!)


    Mein html für jedes <section> sähe so aus:

    Also müßte ich alles , auch komplett was im <a< Tag ist und in <p> Tag

    das halt alles was Du in // -V-erarbeitung stehen hast dort hinein.

    Sprich in diese Zeile:

    1. $sSectionTemplate = '<section class="secIMG"><figure><img class="vorschauIMG" src="{img.path}" width="{img.width}" height="{img.height}" alt="Vorschaubild"></figure></section>';




    Hmmmmm... ich frage mich noch ob ich`s so machen soll!


    Gruß Tassilo

    Hallo liebe Forumer,

    heute habe ich mal eine frage zum PHP.


    Teilfrage A)

    Was ist besser zum einbinden von PHP in mein HTML:


    A) ... mit echo


    PHP
    <?php  ### getImageFilenames.php ### utf-8 ### ÄÖÜäöü
    echo '<img src="'. $_liste['pfad'] .'" alt="" width="'. $_liste[$filename]['bildabmessungen'[0]] .'" height="'. $_liste[$filename]['bildabmessungen'[1]] .'" />';
    ?>


    B) ... im html selbst


    PHP
    <section class="secIMG">
      <figure>
         <img class="vorschauIMG" src="<?php '. $_liste['pfad'] .'?>" width="<?php '. $_liste[$filename]['bildabmessungen'[0]] .'?>" height="<?php '. $_liste[$filename]['bildabmessungen'[1]] .'?>" alt="Vorschaubild"/>
      </figure>
    </section>


    Teilfrage B)


    Ist mein PHP im Beispiel B) so korrekt eingebunden (mit allen Punkten usw? Guckt doch mal bitte darüber.


    Teilfrage C)


    Das PHP im wie im Beispiel A) wird doch in meinem HTML Quellcode vor dem <html> <body> .... eingefügt.... ist das richtig?


    Teilfrage D)


    Ich habe in meinem html wie im Beispiel B) mehrere solcher <section> hintereinander und in meinem php werden die Variablen heraufgezählt (immer +1)

    Also müssten doch die Adressen und die Größe der Images immer angepasst werden, das nächste Image für die nächste <section . Sehe ist das so richtig?


    Vielen Dank der misanthrop

    Was denkt ihr:


    Wäre DAS eine alternative um eben meine Überschriften "Mein Name" links angeordnet UND "Rauminstallationen" rechts angeordnet, zu positionieren.


    UND würde sich das "Umbrechen" der Inhalte von <h1> und <h2> anders und besser reagieren wenn man das Browserfenster zusammenschiebt UND auch ZOOMT?


    Grüße der misanthrop

    Bisher ist es so das Chrome, Opera und der IE den Inhalt von <h2> nicht umbrechen.

    Ich bin irgendwie gewillt diese Überschrit anders zu gestalten.

    Was wäre wenn so:


    (P.S. Kann mir jemand verraten was das "nur vorlesen" bedeutet, ich habe den Code von jemandem anderen und finde denjenigen in keinem Forum mehr!

    Oder weiß jemand wo boratb abgeblieben ist?)

    Code
    .container {  display: flex;
    }
    .box {  flex: 1;  display: flex;  justify-content: center;
    }
    .box71 > span { margin-right: auto; }
    .box73 > span { margin-left: auto;  }
    
    /* non-essential */
    .box {  align-items: center;  border: 1px solid #ccc;  background-color: lightgreen;  height: 40px;
    }
    Code
    <div class="container">  <div class="box box71"><span>Meine Überschrift</span></div>  <div class="box box72"><span>72 centered</span></div>  <div class="box box73"><span>Rauminstallationen</span></div>
    </div>

    Was wäre wenn ich die Überschrift (und villeicht auch den footer anders baue und zwar so

    (habe das hierher: https://stackoverflow.com/ques…d-justify-self-properties

    /// wein wenig runterscrollen!!!)


    ABER anstatt dem div natürlich wieder eine Überschrift <h1>, <h2> usw verwenden.... (also dahingehend umbauen!!!)


    Wäre DAS effizienter und würde dann auch ein leichterer Umbruch stattfinden, also das dann das "Rauminstallationen in die nächste Zeile rutscht wenn das Bildschirmfenster zu schmal wird?

    Wäre DAS so besser?


    Lieben Gruß der misanthrop

    Hallo liebe Forumer,

    das mit dem <footer> ist, so glaube ich soweit gelöst...

    Hier war es wohl wichtig dem <footer> ein flex-wrap: nowrap; mitzugeben als auch ein display: block;

    Jetzt scheinen alle Browser es richtig darzustellen. Könnt es bitte mal nachprüfen,

    d.h. auch extrem ZOOMEN und das Bildschirmfenster zusammenziehen (auch im IE)


    Nun bearbeite ich den <header> und das ist ein wenig vertrackter.

    Dort habe ich fast das Gleiche:

    Code
    @media all and (max-width: 59.375em) {
            header {
                display: block;
                flex-direction: column;
                flex-wrap: nowrap;
            }
            header span {
                white-space: pre-line;
            }

    dabei sieht mein html-Konstrukt so aus:

    Code
    <header>
            <h1><span>Mein Name</span><span class="nur-vorlesen">,</span></h1><h2><span>Raum&shy;instal&shy;lati&shy;onen</span></h2>
    </header>


    Doch bricht er meinen Namen im <h1> (innerhalb vom <span>) alles ganz gut um, das es in die nächste Zeile rutscht und NIX übersteht,

    doch nur das <span> innerhalb von <h2> darin> reagiert darauf NICHT.

    Und ich frage mich WARUM?

    Seht selbst:


    Das was für <header> ist:

    Also klar, so leicht läßt das was innerhalb von <span> ist nicht umbrechen wegen

    Code
    white-space: nowrap;


    Und das versuchte ich durch

    Code
    header span {
                white-space: pre-line;
            }

    wieder umzukehren, das geht aber nur auf das <span> von <h1> NICHT aber auf das <span> von <h2>


    WARUM ist das SO?


    Und wie kann ich es lösen?


    Gute n8 , bis morgen


    der misanthrop

    DAS prüfe ich jetzt mal gründlich alles durch.


    Habe Win7 (ich weiß, ich weiß... nicht lachen... ;o) )


    Bisher:

    Opera

    Ihre Version: 60.0.3255.70

    Opera ist auf dem neuesten Stand

    Zuletzt geprüft am Sonntag, 28. April 2019 19:30


    Google Chrome

    Google Chrome ist auf dem neuesten Stand.

    Version 74.0.3729.108 (Offizieller Build) (64-Bit)


    Aber mal gucken was es sonst noch alles gibt...

    Anmerkungen:


    mein code für:


    Sieht so aus: Da habe ich zusätzlich für meine Elemente in <footer> , also <p> und <a> ein

    Code
    flex-direction: column;


    gesetzt das die Elemente übereinander angeordnet werden.


    Ich weiß ohne das müßte trotzalledem durch

    Code
    flex-wrap: wrap;


    alles "umgebrochen" werden aber dann ragt alles Text von <p> und <a> über den footer hinaus.

    Dann habe ich HALLUS...


    (neuerste) chrome ZOOM 500% eng zusammengezogene Bildschirmfenster



    Opera ZOOM 300% zusammengezogene Bildschirmfenster : der <a> Link zeigt unten aus <foofer> hinaus


    Firefox : scheint zu funktionieren


    IM IE

    ZOOM links 100% ZOOM rechts 400%



    Das gefällt mir so nicht!


    Lieben Gruß der misanthrop

    Danke, was Du mir über den Zeilenumbruch gezeigt hast ist für mich auch wertvoll und interessant und kann ich auch brauchen, aber ich meine etwas anderes.

    Also: <footer> ist eine flexbox worin ich die Elemente <p> und <a> in der Zeile jeweils am Anfang und am Ende gesetzt habe , halt mit

    display: flex; justify-content: space-between;

    Klar habe ich <footer> auch ein flex-wrap: wrap; mitgegeben und eigentlich müsste so wenn das Bildschirmfenster zu schmal wird , das <a> rechts natürlich umbrechen und in die nächste Zeile gehen. Das macht es auch so NUR bleibt eben mein Text (vom <p> und das <a>) NICHT innerhalb des <footer> sondern ragt darüber hinaus, DAS ist das was ich verhindern möchte.

    Genau das selbe Problem habe ich im Header, dort bleiben <h1> und <h2> NICHT innerhalb von <header> wenn das Bildschirmfenster arg zusammengeschoben wird. Der Inhalt von <h1> <h2> <p> & <a> soll jeweils umbrechen und NICHT über seine Elemente hertausragen. DAS ist MEIN PUNKT.

    Siehe:

    Macht doch mal ein ZOOM und schiebt das Bildschirmfenster zusammen, dann kann man es am Besten sehen, mein Bestreben ist, das alles innerhalb von <header> & <footer> bleibt und nicht übberragt. Beim <header> ist es noch erkennbar, was ich meine. Ich möchte das irgendwie regulieren.


    Lieben Gruß der misanthrop

    Hallo liebe Forumer,

    ich habe folgendes Problem, und zwar mit dem footer.

    Bei mir sieht er so aus:



    Code
    <footer>
         <p>Alle Inhalte Copyright 2019 Mein Name</p>
         <a href="#top">zum Seitenanfang</a>
    </footer>



    Bei einem breiten Bildschirmfenster sind <p> und <a> mit

    Code
    display: flex; justify-content: space-between;


    voneinander rechts und links angeordnet.


    Nun möchte ich bei einem schmaleren Bildschirmfenster

    Code
    @media all and (max-width: 59.375em) {


    das eben halt <p> und <a> untereinander angeordnet werden und auch anständig umgebrochen werden wenn die Textläge zu lang wird.




    Doch mit dem CSS oben im Quellcode den ich für

    Code
     @media all and (max-width: 59.375em) {


    habe funktioniert es nicht so ganz, im Firefox sieht es korrekt aus in Chrome und Opera NICHT.


    Ich frage euch, was mache ich hier falsch?


    Nächtliche Grüße der misanthrop

    Aaaah, ja coool, dann muss das aber kleiner als @media screen and (max-width: 62.500em) gelten, davor zwischen @media screen and (min-width: 62.500em) and (max-width: 90.000em) nimmt sonst #main-nav nicht die nötige Breite mehr ein. (AHA, jetzt weiß ich warum man vom kleinen zum großen stylt...)

    Mal gucken ob es geht...

    Jetzt guck ich mal beim kleinsten zusammengeschobenen Zustand das da der Botton mittig sitzt...


    DANK der misanthrop

    nee nee nee, innerhalb vom #main-nav

    zeigen die Elemente von li.treeitem über #main-nav hinweg


    wie auf dem jpg zu sehen ist, und ich frage mich warum das so ist. Es soll nicht so sein.


    wenn man das Bildschirmfenster weiter zusammenschiebt , kleiner als @media screen and (max-width: 28.125em)


    ist das Problem wieder weg.

    Die inneren Elemente fügen sich wieder #main-nav


    Und ich frage, warum das so ist, es ist falsch so.


    Der misanthrop

    Hallo liebe Forumer,

    ich kann mir nicht erklären warum hier die div.nav-group a Elemente über das #main-nav herüberragt




    Kann mir das bitte jemand erklären? Ich kann mir das nur durch den Gebrauch von display: block in einer flexbox erklären, aber warum?

    was ist hier falsch?


    Achso: Ihr müsst das Bildschirmfenster kleiner schieben ab dem Breakpunkt @media screen and (max-width: 62.500em) bis zum kleinsten Punkt wo man das Bildschirmfenster zusammenschieben kann.



    Um diese Website geht es:


    Ich bitte um Mithilfe


    der misanthrop

    also bei @media screen and (max-width: 28.125em) {...

    Code
      #main-nav {
                    flex-grow: 1;
                    flex-shrink: 1;
                    flex-basis: auto;
                    max-width: 100%;
                    align-self: center;
                }

    Dort alles was flexbox ist weg...



    Code
    nav > ul ul.group,
                nav > ul ul.group > li {margin:0; padding:0; display:block;}
                nav > ul ul.group > li {display:flex; min-width: auto; flex-flow: column wrap;}
                nav > ul ul.group > li > :nth-child(1){display:block; width:calc(100% - 3.1rem);}
                nav > ul ul.group > li > :nth-child(2){display:block; width:3.1rem;}
                nav > ul ul.group > li > :nth-child(3){display:block; width:100%;}



    Das also auch weg und was ist jetzt mit contentspan?


    Die gestrichelte grüne Linie umschließt contentspan (hab ich contentspan als Rand gegeben) , rechts und links sind 0.3em Abstand zu den äußeren Rändern, die wohl nicht viel bewirken.

    Denn beim minimalsten zusammenschieben des Bildschirmfenster gibt es rechts und links anständig diesen 0.3em Rand.


    Daran ligt es wohl nicht, der fehler spielt sich innerhalb von contentspan ab. #main-nav dehnt sich nicht maximal bis zum contentspan aus.

    Entweder gibt es ein verstecktes padding bei contentspan oder bei #main-nav stimmen die flexbox Angaben nicht.

    Nope, es scheint so, das es nicht am "contentspan" liegt, sondern eher an "nav#main-nav" das das eben nicht die volle Breite von 100% annimmt.

    Sagt mir etwas anderes, woran liegt es, kann den Fehler echt nicht finden.




    Mit der Bitte um dringende Mithilfe


    der misanthrop

    Nee, es geht darum dieser "Zustand" (auf dem jpg) ist der letzte, der noch O.K. ist, wenn man aber (im Firefox) noch weiter zusammenschiebt bis es nicht mehr geht, soll dieser Übergang noch flüssiger vonstattengehen (beim zusammenschieben). Ich habe hier max-width: 100% & auto , aber die Navi ist nicht bis zum Rand, rechts und links , da sind Abstände.

    ---

    Es soll so sein das bei @media screen and (max-width: 28.125em) {  die Navi 100% breit ist/sich fügt und dann eben mit dem weiteren schmaler werden auch schmaler wird.

    ---

    Darum geht es mir und ich hab vor lauter experimenten keine Idee mehr wie es gehen könnte.

    Deshalb benötige ich eure Hilfe.


    der misanthrop