Problem mit responsiven Layout sowie iframes

[Panda]

Heyho,

ich melde mich mal nach langer Zeit wieder :D Habe mir mal einen kostenlosen Host gesucht, damit ihr und ich leichter haben :D

1. Problem: flex: wrap

Ich möchte "erstmal" Home für die mobilen Anwender anpassen. Die anderen Seiten sollen folgen. Habe mich dann mal erkundigt und haben manche Dinge verändert. Jedoch verändern sich in der oberen Navigationsleiste die Links nicht. Also, wenn sich die Displaygröße verändert, bleiben die Links in einer Linie stehen. Schaut es euch einfach mal an ^^"

2. Problem: iframes

Auf der Seite Versions möchte ich rechts eine "Navigation" haben d. h. dass man auf "Version 1" klickt und dann im Frame auch die erste Version sieht. Wenn man dann auf "Version 2" klickt, dass man dann im Frame die zweite Version sieht usw. Ist selbsterklärend. Ich habe bevor ich den Frame eingefügt habe eine Seitennavigation eingefügt. Schaut mal in den Quelltext. Jedoch verschwindet die Seitennavigation, wenn ich den Frame einfüge.

Wenn wir schon bei den Frames sind: Wie kann ich eine responsive Größe für die Frames festlegen?

Das wäre alles ^^" Ich komme daran leider nicht weiter. Kleiner Hinweiß: Wenn ihr den Quelltext kopiert und verändert und mir diesen hier schickt, wäre es wirklich sehr nett, wenn ihr alle Änderungen entweder als Kommentar am Anfang des Quelltextes oder als Text hier anhängt. So kann ich nämlich alles nach vollziehen.

Ich wünsche euch einen schönen Feiertag,

LG Panda

[MrMurphy1]

Hallo

Die CSS-Angabe heißt nicht

flex: wrap;

sondern

flex-wrap: wrap;

Zudem solltest du die sachlichen Fehler entfernen:

https://validator.w3.org/nu/?doc=http%3A%2F%2Fblog-spot.bplaced.net%2F

Gruss

MrMurphy

[Panda]

Hey, danke für den Tipp, aber

flex-warp: warp;

funktioniert auch nicht.

[MrMurphy1]

Hallo

Richtig - Buchstabendreher:

flex-wrap: wrap;

Gruss

MrMurphy

[Panda]

Hey,

ah perfekt :D Jetzt hat sich zumindest Problem 1 gelöst, vielen Dank!

Lg Panda

[MudGuard]

Hi,

flex-warp: warp;

funktioniert auch nicht.

Das klappt auch nur, wenn das Star Trek Plugin installiert ist 😉

cu,
Andreas a/k/a MudGuard

[Felix Riesterer]

Lieber Panda,

1. Problem: flex: wrap

ist ja nun dank @MrMurphy1 gelöst.

Ich möchte "erstmal" Home für die mobilen Anwender anpassen. Die anderen Seiten sollen folgen.

Das klingt so, als hättest Du auf jeder Seite ein eigenes Layout, sodass jede Seite ihr eigenes CSS benötigt. Willst Du das wirklich so haben? Ich fände es sinnvoller, wenn jede Seite ihren grundsätzlichen Aufbau gleich hat, damit man eine Layoutdatei in allen Seiten einbinden kann.

Habe mich dann mal erkundigt und haben manche Dinge verändert. Jedoch verändern sich in der oberen Navigationsleiste die Links nicht.

Da steht ja auch noch flex: wrap!

2. Problem: iframes

Auf der Seite Versions möchte ich rechts eine "Navigation" haben d. h. dass man auf "Version 1" klickt und dann im Frame auch die erste Version sieht. Wenn man dann auf "Version 2" klickt, dass man dann im Frame die zweite Version sieht usw.

Ach... warum unbedingt frames? Warum darf der Besucher nicht "richtig" auf die Seite gehen? Er kennt den Zurück-Button seines Browsers ganz gewiss! Statt eines IFrames würde ich ein Bild verwenden, nur falls es mit der Zielseite technische Probleme gibt...

Ich habe bevor ich den Frame eingefügt habe eine Seitennavigation eingefügt. Schaut mal in den Quelltext.

Im DOM ist da keine. Da sind nur diese Elemente verschachtelt:

<div class="content">
 <main>
  <article>
   <iframe>

Jedoch verschwindet die Seitennavigation, wenn ich den Frame einfüge.

Im Quelltext steht ein falsch verwendetes <frameset>. Entferne dieses und der Rest sollte vom Browser wie gewünscht verarbeitet werden.

Wenn wir schon bei den Frames sind: Wie kann ich eine responsive Größe für die Frames festlegen?

Frames widersprechen einem responsiven Grundgedanken bei Layouts. Benutze sie einfach nicht.

Liebe Grüße,

Felix Riesterer.

[Panda]

Hey Felix,

vielen Dank für deine Antwort. Stand gerade selber auf dem Schlauch xD

Aber stimmt schon was du sagst und da hätte ich selber drauf kommen können.

LG Panda

[Gunnar Bittersmann]

@@Felix Riesterer

Frames widersprechen einem responsiven Grundgedanken bei Layouts.

Frames widersprechen so einigem. Wie sie aber dem responsiven Grundgedanken widersprechen sollten, erschließt sich mir nicht.

Benutze sie einfach nicht.

Der richtige Rat mit der falschen Begründung?

LLAP 🖖

[Felix Riesterer]

Lieber Gunnar,

Frames widersprechen einem responsiven Grundgedanken bei Layouts.

[...] Wie sie aber dem responsiven Grundgedanken widersprechen sollten, erschließt sich mir nicht.

sie behausen ein ganzes Dokument, also eine ganze "Seite". Bei traditionellen Framesets hat man "Teilseiten", die vom beabsichtigten Layout nur eine Spalte oder einen "Balken" darstellen sollen - aber diese visuelle Beschränkung regelt eben nicht das Dokument ("Teilseite") selbst, sondern das Frameset in seiner Aufteilung.

Wie soll ein Frameset die benötigten Ausmaße eines seiner enthaltenen Dokumente berechnen? Richtig! Das tut es nicht, sondern weißt ihm vorbestimmte Ausmaße aufgrund von Verhältnissen oder Festwerten zu. Responsiv ist das nicht! Und ja, ich kenne den Joker-Wert * für "restlichen verfügbaren Platz". Aber das ist nicht responsiv im eigentlichen Sinne der Frage, denn das Frameset anhand von maximaler Breite/Höhe neu aufzuteilen oder gar ganz aufzulösen geht eben nicht (Navi rutscht nicht ans Ende der Displayfläche).

Benutze sie einfach nicht.

Der richtige Rat mit der falschen Begründung?

Wieso ist der Rat "richtig"? Es ist ein Rat, der die Absicht hat, dem Fragenden eine zielführende Handlungsweise nahe zu legen. Wer die Hintergründe dieses Rates sucht, mag (be)finden, was er will, oder konkret nachfragen. Aber Nachfragen könnte im Zweifelsfall zu Informationen führen, die für den momentanen Lernstand des Fragenden zu viel des Guten sind. Daher lasse ich das zunächst offen.

Liebe Grüße,

Felix Riesterer.

[Gunnar Bittersmann]

@@Felix Riesterer

Frames widersprechen einem responsiven Grundgedanken bei Layouts.

[...] Wie sie aber dem responsiven Grundgedanken widersprechen sollten, erschließt sich mir nicht.

sie behausen ein ganzes Dokument, also eine ganze "Seite". Bei traditionellen Framesets hat man "Teilseiten", die vom beabsichtigten Layout nur eine Spalte oder einen "Balken" darstellen sollen - aber diese visuelle Beschränkung regelt eben nicht das Dokument ("Teilseite") selbst, sondern das Frameset in seiner Aufteilung.

Ja, und? Warum sollte das nicht responsiv sein können?

Wie soll ein Frameset die benötigten Ausmaße eines seiner enthaltenen Dokumente berechnen? Richtig! Das tut es nicht, sondern weißt ihm vorbestimmte Ausmaße aufgrund von Verhältnissen oder Festwerten zu.

Von außen nach innen. Wie bei media queries auch. Da können Seitenelemente auch nur anhand der Seitenausmaße gestylt werden, nicht anhand ihrer eigenen Ausmaße. Element queries gibt es nicht.

Und ja, ich kenne den Joker-Wert * für "restlichen verfügbaren Platz". Aber das ist nicht responsiv im eigentlichen Sinne der Frage, denn das Frameset anhand von maximaler Breite/Höhe neu aufzuteilen oder gar ganz aufzulösen geht eben nicht (Navi rutscht nicht ans Ende der Displayfläche).

Geht eben nicht? Geht eben doch!

LLAP 🖖

[Felix Riesterer]

Lieber Gunnar,

Geht eben nicht? Geht eben doch!

Du willst mal wieder nicht verstehen, was ich meine...

+-----------+
|  header   |
+---+-------+
|nav|content|
|   |       |
+---+-------+

Mach' mal da das Browserfenster so klein, dass die Navi-Spalte (ein Frame im Frameset) nach unten rutscht, weil der Content sonst zu schmal wäre!

Liebe Grüße,

Felix Riesterer.

[Gunnar Bittersmann]

@@Felix Riesterer

Du willst mal wieder nicht verstehen, was ich meine...

Ich hatte es so verstanden, du meintest allgemein „Frames widersprechen einem responsiven Grundgedanken bei Layouts.“

OK, du meinst im Speziellen:

+-----------+
|  header   |
+---+-------+
|nav|content|
|   |       |
+---+-------+

Mach' mal da das Browserfenster so klein, dass die Navi-Spalte (ein Frame im Frameset) nach unten rutscht, weil der Content sonst zu schmal wäre!

Bitteschön. Wo ist das Problem?

LLAP 🖖

[Rolf B]

Hallo Gunnar,

Wo ist das Problem?

möglicherweise darin, dass dein Rearrange einen Reload des nav-Bereichs durchführt. Solange der Browser das aus dem Cache bedienen kann, ist's gut. Wenn es aber das Ergebnis eines POST ist, wird ggf. neu gepostet.

Rolf