Toggle-Navigation mit CSS :target Experiment

  • Wenn ich richtig Informiert bin funktioniert content:'bla'; im Css nur bei after und before. Fals ich recht habe geht das bei dir so jetzt nicht ,weil deine Buttons keinen after und before haben.

    Vieleicht liege ich da jetzt falsch. Fals es doch geht dann laß mich das wissen :)


    Du könntest auch die html Entries nehmen oder wie das heißt

  • Gut in dein Beispiel ist zwar jetzt kein @media queries, aber ich kann mir es schon vorstellen wie es aussieht. Aber sieht gut aus ,hast es jetzt ja geschaft und das Bild über img einzufügen ist eigentlich mit am einfachsten. Man muß nur immer überlegen wie groß eine Seite werden soll. Jedes Bild muß erst runtergeladen werden und brauch ein request. Mein Beispiel aus post #22 wieder rum sind gegenüber Bilder viel kleiner und kein Request.

    Bei den kleinen Pfeilen ist das jetzt minimal.Aber ich habe mal eine Seite gesehen da hat einer als Hintergrundbild ein Schwarzes Bild genommen was 2mb groß wahr. Da wäre background:black viel kleiner gewesen.

  • Villeicht mache ich die oberste Navigier-Zeile in der Höhe noch etwas schmaler.


    Aber es scheint stabil zu sein: Ausprobiert: Google Chrome Version 69.0.3497.100 / Opera Version:56.0.3051.36 / Firefox Quantum 62.0.3

    und IE 11 Version: 11.0.9600.19129


    Edit: villeicht müsste man noch die Höhe von den Seitenelementen noch erhöhen, denn bei extremer Schriftvergrößerung

    und man scrollt etwas herunter scheinen die Seitenelemente irgendwann aufzuhören.

    Aber villeicht darf es gar nicht soweit kommen und wenn der eigentliche Inhalt dort drinsteht kann man mit media-queries

    für diesen inhalt arbeiten. Ansonsten melde ich mich nochmal.


    EDIT:Würde es ausreichen und wäre es zulässig wenn man:

    Also jeweils noch ein min-height dazusetzt?



    Edit2: Jetzt aber zu der horizontalen Website.


    Edit3: Ich bin jetzt mal gespannt wenn ich dies hier in meine Website einbaue und die Bider-Reihung (die Ikons) reagieren nicht richtig

    auf der Breite des Screens.

  • Ich habe es erwartet, ganz so einfach läuft es wohl nicht.

    Schau mal selbst: eigentl website

    Achso: Auf das erste icon "drifters" klicken....

    Da überlagert sich wohl alles... :o/


    Edit: Ich verändere nochmal das html... anscheinend geht es so nicht...

    Das CSS habe ich erstmal extern geladen... ich füge es nacher noch in das Haupt-CSS ein...

  • Hmmmm, so ganz happy bin ich mit dieser Lösung irgendwie nicht.

    Gibt es nicht eine andere Lösung als die Seiten-Ränder zu verdecken?

    Wo man halt genau das width austüfteln muss.

    Ginge es nicht das mittlere zentrierte <div> per z-index und position:absolute "aufzuwerten.

    den Hintergrund negativ (per z-index)" abzuwerten, das es auf das selbe hinausläuft!


    Denn jetzt ist es so das die beiden weißen Ränder links und rechts beim runter-scrollen irgendwann aufhören

    und man dann halt sieht wie das Slider-Fenster rechts und links vom am Rand an anfängt / entspr. aufhört.

    Was ja eigentlich durch den Rand verhindert werden sollte.

    Wie könnte man wenigstens die Höhe der Ränder auf unendlich stellen?


    Gruß und gute n8 T.


    Edit: Dann muss ich auch mal anfangen die ganzen div`s zu entschlacken und / oder woander mitunterzubringen.

  • Das sieht doch gar nicht so schlecht aus.

    Nee andere möglichkeit die Ränder zu verstecken wüßte ich jetzt nicht. Wenn das jetzt nur Etwas Text wäre könnte man vieleicht mit createElement genau an der position das Element erstellen . Nur ob das alles so klappt ist auch noch fragwürdig.

    Du könntest aber rechts und Links einen dicken border setzten.

    Code
    1. body{
    2. height:100vh;
    3. width:80vw;
    4. margin:0;
    5. padding:0;
    6. border-left:10vw solid white;
    7. border-right:10vw solid white;
    8. }

    Optisch kommt das gleiche raus und das gute ist es geht bis nach unten egal wie lang der Inhalt ist.

    Aber das ist eine Lösung die nicht jeden gefallen wird weil der Border für sowas wohl nicht gedacht wahr.


    PS: Die breite der Border muß von der breite des Containers abgerechnet werden damit die erwünschte breite passt. So wie hier ist der Container nur 80vw weil die Border zusammen schon 20 vw haben

  • Letzte Aktionen für heute, schau mal : Website Stand heut Nacht und wieder das Bild "drifters" anklicken.

    Was denkst Du, macht es Sinn auf jeder Unterseite eine "von links einschwebende" Gesamt-Galerie unterzubringen wie beim Start (zur Unterseite hin!)?

    Ich fände es umständlicher wenn man auf der Unterseite ist, dann wieder oben in der blau unterlegten Menue-Zeile "Arbeiten" anzuwählen.

    Oder? Lohnt sich jetzt der Aufwand und wäre das so intuitiv?


    Gute n8 T.

  • Wolltest du das nicht eigentlich als Menü nehmen,?

    Ich meine wenn du auf der Arbeit Seite bist und drifters anklickst ,mußte man ja immer zurück gehen um auf Waldfrieden zu kommen.

    Wenn du statt dessen aber auf der linken Seite oder so ein Menü hast ,ermöglichst du dir den direkten klick von Drifers zu Walfrieden .


    Ich hätte die Bilder aus der Startseite alle als kleinere Bilder 100 X 100 Pixel groß oder so ,alle untereinander als Menü genommen.

    http://sebastian1012.bplaced.n…ggle-menue-einsiedler.php


    So würde ich es machen , weil so spart man sich ein paar klicks und hat direkten zugriff auf deinen Links .

    Das Menü bindest du dann halt nur auf den 9 Seiten oder wie viele das sind ein.

    Du könntest de Inhalt auch mit Ajax holen.Aber das sind alles nur überlegungen. Was du wirklich willst kannst nur du entscheiden.


    EDIT: Meine idee mit den breiten Bordern geht gar nicht. Da habe ich falsch gedacht. Aber gut , bin da gerade wach geworden:(

  • PUUUHHHH.... Deine Idee die (Bilder)-Galerie an die linken Seite zu heften finde ich gut.

    Nur werde ich es statisch lösen mit einem schlichten (weiter ausklapp)-Menue, nicht durch ein seitliches "einschweben" von links.

    Das ist nur wirklich was, wenn es direkt vom äußersten linken Rand "einschweben" kann und somit das

    Design völlig anders konstruiert ist (welches bis zu den äußersten Browserrändern hin reicht!).


    Aber: Lass Dich mal überraschen. Habe da so eine Idee.


    Gruß T.

  • Eine Frage, ich stelle meine ganzen Unterseiten jetzt so um das sie zweispaltig werden, links aufgelistet sämtliche Arbeiten vom Hauptmenuepunkt

    "Arbeiten" und rechts der Content der Unterseite.

    So, jetzt wollte ich nicht sämtlichen Inhalt der einzelnen Menuepunkte angeben sondern erstmal nur "drifters 2012" und den Rest mit

    <details> <summary>weiter lesen... </summary> </details> ersteinmal verstecken.

    Der einzigste Haken ist natürlich der IE.

    Oder würdest du es so machen und lieber ein toggle menue konstruieren, bei dem der Restinhalt dann "erscheint"!


    Gruß der einsiedelnde


    Edit: ich habe mal im Selfhtml-Forum eine Frage gepostet wegen der Randproblematik bei der ersten Version die ich anstrebte.

    So ganz lasse ich das nicht aus den Augen.

    Zudem gibt es ein #Anker Problem beim Firefox.

    Villeicht haben die ja ideen dazu.


  • Edit: Achso Du meinst das mit : <details> <summary>weiter lesen... </summary> </details>

    Sie mal bei: https://wiki.selfhtml.org/wiki/HTML/Interaktiv/details

    ganz unten, dort steht das mit dem IE, es gibt eine script-Lösung dies zu beheben.


    Ich weiß nicht ob ich dies machen soll oder lieber eine eigene Klapp-Menue-Lösung die wohl eher funktioniert.


    Gruß der einsiedelnde