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
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.
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.
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.
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.
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...
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:
.mainBox:before{
content:'';
width:100%;
position:absolute;
z-index:10;
top:0;
left:0;
height:100%;
min-height: 100%;
background:white;
display:block;
}
.mainBox:after{
content:'';
width: 10%;
position:absolute;
z-index:10;
top:0;
right:0;
height:100%;
min-height: 100%;
background:white;
display:block;
}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.
Schau mal: So sieht es nun aus: aktuelle Version toggle navigation
Mittels media-queries setze ich den Schriftzug öffnen/schliessen unter den Pfeil wenn das Browser-Fenster zu schmal wird.
Gute n8 T.
Was hälst Du davon, das im CSS : content:url(pfad_zum_bild.jpg);
einmal im #openBtn { und entsprechend dann : #closeBtn {
Achso, hast schon geantwortet.
Um einen Pfeil-Botton einzufügen geht das ja nur in diesem Bereich:
<a href="#closeNav" id="closeBtn">Close Navi</a>
Um ein kleines png als img einzubinden.
Wie würdest Du es machen? Ich finde kein entsprechendes Beispiel, habe gerade mal gegoogelt.
Gruß T.
Hey Sebastian,
ich weiß, ich wollte sämtliche paddings einfach mal nullen und gucken was im einzelnen passiert.
Was eigentlich notwendigerweise stehen bleiben muss.
Ich hatte zwischenzeitlich versucht den :target Bereich links anzuordnen und eben den Hauptteil
mit dem eigentlichen content rechts.
Indem ich:
#content{
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: stretch;
margin: auto;
}setze. ich bleibe da noch ein wenig dran.
Aber so wie es jetzt ist finde ich es schon gut.
Ich werde nur zusätzlich links einen Botton mit einem entsprechenden Pfeil für öffnen > und schließen < einfügen,
rechts könnte trotzalledem noch öffnen und schließen stehen.
Mal schauen.
Bis später...
Gruß T.
EDIT: Jetzt kommt meine horizontale Website dran.
Schau mal, habe auch ein wenig gebastelt: website V3
oder ein Vorstadium davon : Vorstadium Website V1
Gruß T.
Und schau mal wenn das toggle Fenster geöffnet ist was dann passiert: bei geöffnetem toggle-Fenster
Habe es online: Testversion toggle-Menue
Das mittlere <div> hat bereits einen roten Rand (border) , schiebe mal das Bildschirmfenster etwas zusammen, dann
überdeckt irgendwann der rechte Rand etwas vom mittleren <div> , wobei aber der Inhalt vom mittleren <div>
sich schön der neuen aktuellen Breite anpasst. Komisch...
Hmmmmm....
Ich bemerke gerade, es gibt Schwierigkeiten wenn man das Bildschirmfenster zusammenschiebt bzw. die Schriftgröße verändert.
Dann verdeckt zum Beispiel das mittlere <div> etwas vom rechte Rand.
Siehe mal: jpg vom Problem
Du siehst das rechts (der Rand) von irgendetwas überdeckt wird, wohl vom mittleren <div>.
Aber der Inhalt vom mittigen <div> passt sich schon der Breite an. Nur steht irgendetwas über, wohl die Breite des <div> selbst.
Irgendwie müsste das mittlere <div> sich immer in der Breite anpassen.
Hmmmmmm......
Wär schön gewesen wenn es die Lösung gewesen wäre.
Gruß der einsiedelnde
Hey Sebastian,
ich finde Deine jetzige Demo sehr gut, DANKE! Genauso stelle ich es mir vor.
Deine Version wo sich die Ebenen überlagern (und quasi leicht durchsichtig sind!) ,
wie Du es gestern mal kurz in Deinem Codepen hattest
fand ich jetzt nicht so ansprechend.
Nun bei der jetzigen neuen Version überlege ich ob ich nicht zwei <div> nebeneinander lege.
Links ein schmales <div> wo eben ganz oben der "Botton" liegt,
und rechts dann halt der eigentliche Inhalt. Sieht glaub ich besser aus und statischer.
Vielen Dank!
Gruß der einsiedelnde
Nee, nee,
hier habe ich es mal illustriert: Illustration website
Ich meine rechts und links (am Rand) von : <div class="contentbox"> / das ja zentriert mittig ist (rot gestrichelt) , merkt man für einen Hauch einer Sekunde
das von links einschwebende neue <div> obwohl ich es schöner fände, wenn es geht, das das neue Fenster ab dem linken Rand (ab der rot gestrichelten
roten Linie von <div class="contentbox"> "hereinscrollt".
Wenn dies so machbar ist...
Bitte noch die anderen Bemerkungen von Post #6 beachten!
Gruß der einsiedelnde
Hey,
zu A : Das neu geöffnete Fenster schwebt quasi vom linken äußersten Browserrand herein und für einen Bruchteil
einer Sekunde sieht man eben zwischen dem linken äußersten Browserrand bis zu der gestrichelten roten Linie
das neu "einschwebende" Fenster. Äquivalent an der rechten Seite wo das Fenster mit dem Zombitext sich "verdichtet",
enger wird bis es weg ist.
Aber vielleicht muss ich das so akzeptieren. ich dachte halt das man dies mit dem z-index oder
display: none; irgendwie wegbekommt.
Zu A - Botton-close: Ich dachte eben halt das es intuitiver wäre wenn man den Button beim geöffneten Menue eben
rechts setzt, denn ich wollte an den Botton-Stellen soetwas wie: " > " und entsprechend " < " einfügen.
zu B: Wo muss ich da mit "position" arbeiten?
Gruß der einsiedelnde
Habe die kleinen Veränderungen bemerkt: das "margin-left:-0%;" im " #openNav:target #closeBtn { ".
Frage A: Könnte man das "hineinschieben und das herausschieben" das am linken und rechten äußersten Rand noch
für eine Sekunde sichtbar ist noch ein wenig unsichtbarer machen. Also im Rand dort!
Ginge das oder wäre das zu kompliziert?
Ich habe versucht eine intensive Hintergrundfarbe zu setzen und ein z-index:2; für html und body.
Es wirkte aber nicht.
Frage B: Wäre es komplizierter wenn man die erste Seite mit dem Zombitext also bevor man OpenNavi betätigt,
das der so stehen bleibt und die OpenNavi zieht sich darüber und ist ein wenig durchsichtig? Bei Betätigung des Bottons
schnellt er dann wieder nach links zurück.
Dann müsste man doch mit "position" arbeiten (villeicht position: absolute; ??). Wie sähe das aus?
(Eventuell Frage A und Frage B kombinieren!)
Gruß der einsiedelnde
PRIMA! Vielen Dank, ich schaue es mir morgen genauer an.
Gruß der einsiedelnde
Hallo liebe Forumer,
ich unternehme gerade ein Toggle-Navigation mit CSS :target Experiment,
um eventuell (wenn es klappt oder sinnvoll erscheint!) dies in meine bisherige Website zu erweitern.
Aber lasst mich ersteinmal erläutern weshalb ich dies bräuchte (wenn es eben Sinn machen würde!)
Folgende Problemstellung:
BISHER ist es so, wenn ich den Hauptmenue-Punkt "Arbeiten" angeklickt habe (waagerechtes Menue oben, blau unterlegt!) ,
dann eines der Bilder Icons (darunter) anklicke, meinetwegen "Drifters,2012", dann anklicke, dann öffnet sich ein neues Fenster und
die entsprechende Dokumentation zu dieser Arbeit erscheint. Bisher bestens (Vielen Dank MrMurphy für Deine Unterstützung!!)
Was ist aber nun, wenn ich eine andere Arbeit, meinetwegen die nächste "Waldfrieden,2006" anklicken möchte,
dann muss ich ja oben im blau unterlegten Hauptmenue wieder "Arbeiten" anklicken um zu den Bilder-icon-Menue zu kommen.
Das finde ich ein wenig umständlich (oderist das so normal von der Abfolge her?)
Achso: Hier mal ein Link zur Ansicht: meine DemoSeite
Deshalb kam mir die Idee eben auf jeder Unterseite (für "Drifters,2012", "waldfrieden,2006" etc.
von links ein Menue "optisch einschwebt" , so wie das Icon-Menue mit den verschiedenen Bildern von den Arbeiten.
Illustriert habe ich das hier mal (man sieht dort ein jpg): Toggle-Navigation mit CSS :target V2 für eine Unterseite
Ein toggle-menue das eigentlich auch ganz gut funktioniert habe ich hier mal: Toggle-Navigation mit CSS :target V1
Bis ich nun das Ganze in ein zentriertes mittiges div setze (das rot umrandete Feld), wie ja auch nun meine Website aufgebaut ist,
(siehe: Toggle-Navigation mit CSS :target V2)
dann wandert das (von links) "einschwebende" div vom äußersten linken Rand an und nicht vom linken Rand des mittleren (roten) "Fensters".
Wie muss ich nun ein positions: xxx; oder ein display: block; so raffiniert setzen das ich das nun erreiche?
Ich hoffe jetzt wird es klarer wofür ich dies alles bräuchte, wenn es Sinn macht.
Oder es gibt andere bessere Lösungen! (Auchso ja, och bin immer bemüht eine Script-freie Lösung anzustreben, wenn dies möglich ist.)
Gruß der einsiedelnde