nicht angemeldet einsiedler
Rolf B
basti1012
einsiedler
Rolf B
einsiedler
einsiedler
Rolf B
einsiedler
Rolf B
Hallo liebe Forumer, hoffentlich seid ihr jetzt bei meinem Problem etwas zugeneigter. Folgesdes vorab: Zu meinem Problem: toggel-Menue dies hier ist eines von mehreren Unterseiten von "Arbeiten" und um nicht ständig oben im blau unterlegten Hauptmenue auf "Arbeiten" zurück gehen zu müssen um eine weitere Unterseite anzuklicken habe ich mal dieses hier entwickelt. Optisch funktioniert es im Opera und Chrome, aber doch nicht so richtig, es gibt noch schwerwiegende Fehler, die ich mit euch Besprechen möchte.
Bei der bisherigen Entwicklung hat mir schon jemand geholfen, wir kommen aber irgendwie nicht weiter:
Um das toggle-Menue nicht vom äußersten linken Rand des Browserfensters einschweben zu lassen, sondern das es optisch so aussieht als wenn im mittigen <main> (dort von der linken Seite) das toggle-menue "einschwebt" sind links und rechts verdeckende Streifen entstanden. Hier ein jpg des problems: Beispiel 1 Das macht mich irgendwie nicht ganz froh aber es scheint nicht anders zu gehen. Oder doch? Gibt es eine Möglichkeit ohne die Ränder, wenn es sein muss mit script. Zumal die die Ränder verdeckende Streifen auch nur 100% in die Höhe gehen (nicht mehr), ab dem Punkt sieht man das Menue von ganz links einschweben. Hier ein jpg eines Beispiels: Beispiel 2 das finde ich otisch nicht so gut. Wie kann man die Streifen "verlängern" die Höhe also unendlich machen oder soweit eben der Inhalt des mittleren <main> ist. Oder gibt eine Möglichkeit OHNE die Ränder zu arbeiten.
Wenn ich das toggle-Menue aufmache die Bildergalerie erscheint ich dann herunter scrolle habe ich ganz unten ein >nach oben< angebracht, betätigt man dies ändert sich alles sofern das man dahin zurück kommt bevor man das Menue betätigt hat. Was läuft da mit den #Ankern falsch. Da habe ich keinen Durchblick mehr. Was ist zu tun?
Ein ähnliches Problem mit einem #Anker scheint der Firefox zu haben, wenn man einen Durchlauf hin und zurück des Menues macht springt das ganze beim nachsten betätigen des menues alles nach oben als ob ein #Anker dorthin müsste. Der Opera und Chrome sind da irgendwie "stabil".
Wer kann mir helfen und eventuell Lösungsansätze geben.
Gruß der einsiedelnde
hallo
Deine Ränder müssen Randelemente werden und zusammen mit dem Inhalt in einer flex-box stecken. Die Ränder sollen position:relative und einen ausreichend grossen z-index Wert haben.
Aber ehrlich gesagt, besonders aufregend finde ich deine Gestaltung nicht.
- Wenn ich das toggle-Menue aufmache die Bildergalerie erscheint ich dann herunter scrolle habe ich ganz unten ein >nach oben< angebracht, betätigt man dies ändert sich alles sofern das man dahin zurück kommt bevor man das Menue betätigt hat. Was läuft da mit den #Ankern falsch. Da habe ich keinen Durchblick mehr. Was ist zu tun?
Du kannst nur ein aktives :target haben. Ein Fragment-Link entfernt alse das target vom früher betätigten Fragment-Link.
- Ein ähnliches Problem mit einem #Anker scheint der Firefox zu haben, wenn man einen Durchlauf hin und zurück des Menues macht springt das ganze beim nachsten betätigen des menues alles nach oben als ob ein #Anker dorthin müsste. Der Opera und Chrome sind da irgendwie "stabil".
Wer kann mir helfen und eventuell Lösungsansätze geben.
Lies noch mal meine Antwort im früheren Thread dazu.
Ich bin sicher, hier macht dir das transition:all einen Streich.
Hallo einsiedler,
die verdeckenden Streifen klingen nach einer merkwürdigen Lösung. Wenn man einen Rahmen haben will, in dem die Darstellung bleiben soll, würde ich auch einen Rahmen verwenden und ihm overflow-x:hidden geben. Man muss allerdings ein bisschen tricksen, damit sich beim Öffnen oder Schließen der Galerie der Seitenheader nicht verschwindet.
Schau Dir mal dieses minimalistische Technikbeispiel an, da funktioniert es ohne Streifen und der Sprung nach oben klappt. Probiert mit Chrome und FF.
Der Container, innerhalb dessen sich die Verschieberei abspielt, ist das main-Element. Darin befindet sich das a-Element, dass id='galerie' hat, sowie ein div für die eigentliche Galerie und für den Inhalt. Je nachdem, ob galerie das target ist, erscheint die Galerie oder der Inhalt.
Der galerie-Anker ist absolut positioniert und auf top:-1000px gesetzt. Damit steht er oberhalb des Vierports, d.h. wenn man die Galerie öffnet springt der Browser auf den Seitenanfang. Das ist bei Dir auch so. Ohne diesen Trick würde die Galerie nach oben positioniert und der Seitenheader verschwinden. Deine Entscheidung, ob Du den Effekt willst. Wenn nicht, setze den Anker auf top:0 (bzw. dann bräuchte man den Trick mit dem Extraanker nicht).
Standardmäßig ist die Galerie position:absolute und der Inhalt position:relative. Damit gibt der Inhalt die Größe des main-Elements vor. Wenn #galerie:target erfüllt ist, wird die Galerie auf position:relative und der Inhalt auf position:absolute gesetzt, damit die Galerie die Höhe des main-Elements vorgibt. Zusätzlich wird die Galerie noch auf left:0% gesetzt und der Inhalt auf left:100%, aber auch auf width:100%; hoverflow:hidden. width:100% deswegen, damit er beim hinausscrollen seine Breite nicht ändert (und neu umbricht), overflow:hidden, damit die Höhe des main-Elements nicht mehr von vom Inhalt-Container verändert werden kann. Im Fiddle steht noch height:100%, das ist aber unnötig.
Was auch wichtig ist, ist die href-Angabe im "nach oben" Link der Galerie, das muss #galerie sein, sonst schließt das "nach oben" die Galerie.
Rolf
Schau Dir mal dieses minimalistische Technikbeispiel an, da funktioniert es ohne Streifen und der Sprung nach oben klappt. Probiert mit Chrome und FF.
Die Lösung gefällt mir. Ab und zu kann es auch einfach gehen. Aber ist meistens so.Wenn man ne einfache Lösung sucht fällt sie ein mal wieder nicht ein
Hallo Rolf, vielen Dank für Deine Unterstützung. Es funktioniert FAST gut, kleinere Macken hat es allerdings noch:
siehe: Beispielseite 1
Im IE funktioniert im Zustand "content" bzw. #nogalerie das "zum Seitenanfang" ganz unten, ABER im Zustand #galerie funktioniert das "zum seitenanfang" ganz unten, NICHT!
Zudem (im IE) macht er bei .headermenue a { das justify-content: space-around; ganz komisch, die Abstände vom Pfeil und dem Text "Bilder-Galerie öffnen" sieht irgendwie nicht richtig aus.
Bei <div class="headermenue"> bzw. a#galerie & a#nogalerie die Höhe setzen kann, denn oben und unten gibt es einen unschönen Abstand.
Das f#llt mir grad so auf die schnelle auf.
Morgen werde ich die jeweiligen Browserfenster schmaler machen und gucken was dann passiert und eventuell falsch läuft.
Gute n8 der einsiedelnde
Hallo einsiedler,
mein Technikbeispiel hatte ich in eine HTML Datei kopiert und im IE 11 getestet. Glaube ich zumindest 🤔. Probier das doch mal, dann können wir zumindest sicher sein, dass das Prinzip funktioniert und ich mein eigenes Credo nicht verletzt habe.
Ansonsten kann ich da dieses WE nicht ran, bin komplett ausgebucht.
Rolf
Das hat bis Anfang nächste Woche Zeit. ;o)
Hey Rolf,
folgendes passiert beim IE: Im Contentbereich scheint das "zum Seitenanfang" zu funktionieren. Nur im #galerie - bereich scheint es Ärger zu geben. a) Im #toggleheader erscheint dort der Pfeil viel zu mittig (gegenüber allen anderen Browsern), als wenn das a::before zuallererst am Anfang stände nur nicht sichtbar, dann folgt der Pfeil und am rechten Rand der Text "wieder schliessen". b) Ebenfalls im #galerie - Bereich reagiert ganz unten das "zum Seitenanfang" nicht, hier wird nicht nach oben gesprungen wie bei allen anderen Browsern.
Momentan hab ich dies ersteinmal entdeckt und hoffe das nicht noch mehr dazukommt. Meine wenn man das Browserfenster horizontal verengt zum Beispiel!
Gruß der einsiedelnde
Hallo einsiedler,
das Problem des mittigen Pfeils - tja, ich weiß nicht ob das ein Bug im IE, in Chrome oder in der Spec ist. Entweder im IE, oder die Spec hat sich seither geändert.
Auslöser ist jedenfalls das ::before-Element in diesem Titellink; es ist zwar position:absolute, aber der IE rechnet es in die Flexbox-Verteilung mit ein und Chrome nicht. Brauchst Du das Ding?
Der Sprung zum Seitenanfang ist ein Verhalten des IE das ich nicht verstehe. Das #galerie Element ist ein a, das ganz bewusst von mir nach oben verschoben wurde um sicherzustellen dass man nach oben springt. Der IE nimmt ein top:x mit x<0 aber zum Anlass, nicht dorthin zu springen. Ich würde sagen: Pech für die - laut Gunnar - 3% IE Nutzer. Das ist keine Kernfunktion der Seite. Ich habe keine Idee wie man das sinnvoll löst.
Rolf
Hallo Rolf,
wie sähe daselbe Demo-Beispiel anstatt mit :target mit einem botton in der gesamten obersten Zeile (wo jetzt der a-Link steht), aus. Wie löst man das? Als Fallback wenn scripte nicht zugelassen werden das sich der "eingeschobene" Sub-Menue-Content über dem (Haupt)-content automatisch dargestellt wird.
Gruß der einsiedelnde
Hallo einsiedler,
das ist jetzt einen Monat oder so her und ich muss erstmal überlegen was da überhaupt war 😀
Bevor ich mir jetzt Gedanken mache - welches Problem willst Du mit der Button-Lösung angehen? Welche Schwächen / Probleme der :target-Lösung sollen damit beseitigt werden? Davon hängt ggf. ab was man so baut.
Geht es Dir nur um das nicht-button-hafte Aussehen eines Links? Da kann man mit CSS Abhilfe schaffen.
Rolf
Hallo Rolf,
nee, das Problem hier: demo website mit :target war ja das sich mehrere ANKER (:target) Funktionen ins Gegege kamen, das drückte sich ja im IE besonders aus. Neben der "eingeslideten" Seite (mit der Anker-Funktion) habe ich ja noch ganz unten auf jeweiliger Seite ein "zurück zu TOP" auch mit einem Anker. Das alles zusammen mit einem Pseudoelement (hier ::before) macht vorallem im IE murks. Um das zu umgehen dachte ich wenn man den Slider mit einem länglichen botton löst (derzeit ist es ja ein langgezogenes a-Element". Wenn das script ausgeschaltet ist könnte ja "das das einzusliden ist" unterhalb des Content angeordnet werden / erscheinen. Etwas besseres fällt mir auch nicht ein.
Grüße der einsiedelnde
