IFRAME HTML4 und HTML5

[akapuma]

Hallo,

auf meiner alten Homepage (im Moment offine) hatte ich die Navigation über eine Tabelle. Der eigentliche Inhalt war mittels eines IFRAME eingebunden:

<iframe src="iframe.html" height="100%" width="100%">

Das sah dann so aus:

https://akapuma.info/htmltest/html4.html

Der gelbe IFRAME reichte bis zum unteren Bildschirmrand.

Ich möchte meine Homepage optisch genau so beibehalten wie sie bisher war, allerdings möchte ich HTML5 verwenden. Leider funktioniert bei

<iframe src="iframe.html" height="100%" width="100%">

die Angabe für Höhe und Breite nicht mehr. Der W3C-check sagt "Error: Bad value 100% for attribute height on element iframe: Expected a digit but saw % instead.". Dann sieht es so aus:

https://akapuma.info/htmltest/html5.html

Jetzt könnte man auf die Idee kommen es so zu machen:

<iframe src="iframe.html" style="height: 100%; width: 100%">

Der W3C-check gibt dann keinen Fehler mehr aus, funktionieren tut es aber leider trotzdem nicht:

https://akapuma.info/htmltest/html5a.html

Weis jemand Rat?

Gruß

akapuma

[bdt600]

Das willst du doch wohl nicht ernsthaft so machen, oder? Tabellen zum layouten? Das macht man schon seit Ewigkeiten nicht mehr. Das hat mit HTML 5 absolut nichts zu tun, das ist alter Käse.

Siehe https://www.google.de/search?q=layout+mit+html5+und+css

[arnego2]

Weis jemand Rat?

Ich würde mir überlegen welches Thema dafür besser geeignet ist und nicht so ein Anfang 2000 Design sein muss. Denke mal an deine Besicher denen es gefallen muss.

[daniel5959]

Hallo,

es gibt ja viele Wege moderne responsive (mobiltaugliche) Webseiten zu erstellen, von den vielen Baukästen, auch bei bekannten Webhostern, über zahlreiche CMS, auch Wordpress, bis hin zu PC-Programmen.

A) Meine neuen Webseiten:

Ich selber verwende für die Webseite meines Bruders seit 2018 das Programm WebSite X5, seit 2023 für meine neue Webseite.

In der einfachsten GO-Version mit geringem Umfang kostet WebSite X5 knapp 20 Euro beim Hersteller, kann aber auch über Google und Computerbild als kostenlose Vollversion heruntergeladen werden. Daneben gibt es auch die Evo- und die Pro-Version mit mehr Funktionen, die es über Update-Angebote von der Go-Version aus mit großem Rabatt von 30% oder mehr gibt.

Wer WebSite X5 nutzen will, der sollte wissen, dass die Updatefunktion beim Kauf für 1 Jahr gilt, danach kann das Programm zeitlich unbegrenzt weiter genutzt werden, aber es dann eben keine Programm-Updates und auch keine evtl. neue Templates mehr, was aber kein Problem ist, vor allem, wenn es eher eine private Webseite ist.

B) Meine alte Webseite:

Für meine FindLinks.de-Seite, die ich jetzt in "Rente" geschickt habe, hatte ich etwa 10 Jahre lang den kostenlosen Webeditor KompoZer und ein kostenloses responsives Template genutzt. Statt Iframe habe ich mir etwas Zeit genommen und einfach das geänderte Menü kopiert und auf allen anderen Unterseiten damit das vorhandene Menü überschrieben.

C) Meine ganz alte Webseite:

Für meine ganz alte Webseite zum Thema Homepage habe ich einen PHP-Include-Code von Ingo hier aus dem Forum verwendet und damit Menü und Inhalte getrennt. Die Inhalte als HTML-Dateien habe ich mit dem KopomZer erstellt und bearbeitet.

Jede Nutzer muss selber wissen was für ihn passt und womit er am Besten zurecht kommt. Eine Lösung für Alle und Alles gibt es nicht, aber Tabellenlayout bei Webseiten sollte heutzutage endgültig der Vergangenheit angehören.

daniel5959

[daniel5959]

Info:

Mein Beitrag ist leider im Spamfilter gelandet, dauert also einige Stunden oder Tage bis ihn der Admin freigeschaltet.

Kurzfassung:

Früher habe ich den KompoZer und ein responsives (mobiltaugliches) Template genutzt, beides kostenlos.

Heute nutze ich das Programm WebSite X5 (kostenpflichtig), weitere Infos, wenn der Beitrag freigeschaltet wird.

[Localfu]

Hi akapuma,
iframe-Elemente sind noch Bestandteil von HTML5, sollte man aber nur für spezielle Sachen einbinden wie z.B. Youtube-Videos. Zum Layouten sollte man auf iframes in HTML5 verzichten. Dafür bietet HTML5 und CSS3 alle Möglichkeiten eine Webseite so zu gestalten das eine Benutzung mit iframes nicht mehr sein muss.

So geht es auch mit der Navigation: Navigationen macht man seit 2004 nicht mehr mit Tabellen. Tabellen dienen zum Anzeigen von tabelarischen Inhalten wie Listen, etc.

Ich würde dir empfehlen dich mit dem HTML5-Standard auseinander setzen. Um Inhalte auszurichten wie Navigationen und Inhalt, bietet sich an in CSS sich mit Flexbox und dann mit Grid-Layout zu beschäftigen.
Wenn du weitere Fragen hast kannst du gerne dies ins Forum schreiben.

Viele Grüße
localfu

[akapuma]

Hallo,

es ist schon ein Kreuz. Ich bin Hobbykoch, und mein Hobby ist Paella. Für meinen YouTube-Channel musste ich Videoschnitt lernen, obwohl Videoschnitt nicht mein Hobby ist, und ich auch kein Profi werden will.

Mit meiner Homepage ist es genau so. Wie Ihr erkannt habt ist das Design schon etwas älter. Ursprünglich habe ich es mit dem SeaMonkey Composer gemacht. Als es mir zu viel Arbeit wurde habe ich den PLESK Presence Builder genommen. Der macht vieles automatisch, allerdings auch Dinge die ich garnicht verstehe. Zum Beispiel das Laden von Google-Schriften, was zu Problemen führen könnte. Deshalb habe ich diesen Weg aufgegeben und fange wieder von vorne an.

Den SeaMonkey Composer gibt es zwar noch, ich nehme aber jetzt den Nachfolger BlueGriffon. Ich sehe WYSIWYG und auch den Quelltext, den ich verstehen und nachvollziehen möchte.

Daß ich um CSS nicht herumkomme habe ich schon gemerkt. Ich werde mich wohl noch tiefer einarbeiten müssen.

Danke für die Tipps.

Gruß

akapuma

[gregor.wendland]

Hallo akapuma,

vielleicht wäre es ja was für Dich, einmal ein CMS auszuprobieren? Ich glaube mit WordPress und einem Einstiegs-Tutorial, würdest Du da schnell weiter kommen, als mit purem HTML und CSS. Dein Ziel ist ja eher, Inhalte zu präsentieren und nicht im Code zumrzuwurschteln, oder?

WordPress übernimmt viele Hausaufgaben für Dich, die Du mit einer statischen Website erstmal herausfinden müsstest. Mit dem aktuellen Standard-Theme von WordPress Twenty-TwenyThree kannst zu per Mausklick das Design erstellen. Mit dem Gutenberg-Editor hast Du viele Möglichkeiten Inhalts-Elemente einzupflegen.

https://wordpress.org/documentation/article/twenty-twenty-three/

Viele Webhoster bieten Dir an, dass Du dort WordPress einfach installieren kannst. Vielleicht ja auch Deiner? Dann probiers doch mal aus.


Viele Grüße

Gregor

[akapuma]

Hello Gregor,

ja, mein Webhoster ist netcup und bietet eine Wordpress-Installation an. So tief möchte ich aber nicht einsteigen. Wordpress ist bestimmt sehr leistungsfähig, erfordert aber mit Sicherheit mehr Zeit als ich aufwenden kann. Außerdem wird ein HTML-Code erzeugt den ich mit Sicherheit nicht verstehe. Beispiel:

Der PLESK Presence Builder hat eine unschuldige Zeile wie diese eingebunden:

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine">

Diese haben Abmahner wohl erfolgreich genutzt um anzumahnen. Deshalb versuche ich lieber eigenen Code, auch wenn er etwas altbacken ist.

Gruß

akapuma

[arnego2]

Hallo [USER="16425"]

WordPress übernimmt viele Hausaufgaben für Dich, die Du mit einer statischen Website erstmal herausfinden müsstest. Mit dem aktuellen Standard-Theme von WordPress Twenty-TwenyThree kannst zu per Mausklick das Design erstellen.

Wer eine Allerweltsseite haben will sicher der möge sich in WP reinknieen.
Was ist den an HTML5 und CSS so schwer?

[daniel5959]

Hallo,

auch hier gilt der alte Spruch "Viele Wege führen nach Rom".

Ich habe 20 Jahre lang mit den kostenlosen Programmen KompoZer und FileZilla sowie kostenlosen CSS-Webseitenvorlagen und etwas HTML, CSS- und PHP-Grundkenntnissen meine privaten Webseiten erstellt.

Bereits 2018 bin ich für ein Re-Design der Webseite meines Bruder auf WebSite X5 Evolution (damals günstig für 36 Euro gekauft) umgestiegen, da ich dachte, dass dieses System sehr einfach ist, da ich die ganzen Einstellungen schon vergenommen und auch die alten Seiteninhalte übertragen hatte.

Aber für meinen Bruder war dieses einfache System trotz schriftlicher Kurzanleitungen für das Hinzufügen von neuen Seiten, die Texteingabe und das Veröffentlichen im Internet offenbar zu kompliziert.

Nun habe ich auch für meine neue Webseite das Programm WebSite X5, diesmal in der Pro-Version gekauft und genutzt.

WebSite X5 nutzt ein flexibles Rastersystem (CSS Grid), das mit verschiedenen Objekten (Text, Bild, Bildergalerien, Kontaktformular, u.v.m.) gefüllt wird, für die Gestaltung der Inhalte der einzelnen Seiten sowie Header und Footer, die auf allen Seiten gleich sind. Dazu gibt es ein Blog- und Shop-Modul.

Ein System für Alle gibt es nicht, da jeder andere Ansprüche, Fähigkeiten und Vorstellungskräfte hat.

daniel5959

[Treml]

Trotz aller berechtigten Einwände habe ich mir aus Neugierde einmal angesehen, wie man das ursprünglich geschilderte Problem mit minimalem Aufwand lösen könnte.

Das Problem liegt offenbar nicht an der Größenangabe des Iframes, sondern an jener der äußersten Tabelle. Wie es aussieht, akzeptieren Tabellen für die Höhe keine Prozentangabe mehr oder interpretieren sie heute anders als früher. Man kann das umgehen, indem man statt »%« den relativen Wert »vh« verwendet. Zur Erklärung: »vh« steht für Viewport Height, also die verfügbare Höhe im Browserfenster. 1vh entspricht 1% der verfügbaren Höhe, 100vh entspricht 100% der verfügbaren Höhe. Da Du um die Tabelle herum Rahmen und Abstände hast, sind 100vh etwas zu viel, aber mit 98vh kommt es ganz gut an Deine HTML4-Version heran.

Von mir gibt es übrigens einen Daumen hoch für den Willen, die Seite selbst in HTML erstellen zu wollen. Ich bin auch jemand, der gerne die volle Kontrolle behält.
Falls Du die Seite doch auch optisch etwas auffrischen willst, möchte ich darauf hinweisen, dass heutzutage die meisten Leute via Smartphone surfen und deshalb einfache, linear aufgebaute Seiten weitaus üblicher sind als damals. Auch bei Farben, Rahmen etc. gilt heutzutage in der Regel die Devise »weniger ist mehr«. Wenn Du es als Hobby einfach halten willst und es Deine Inhalte hergeben, würde ich mich also gar nicht groß mit der Anordnung einer Navigation beschäftigen, sondern eine Startseite mit sämtlichen Links zu Unterseiten erstellen und auf den Unterseiten jeweils nur einen Link zurück zur Startseite setzen. Das spart jede Menge Komplikationen und braucht kaum mehr HTML- und CSS-Kenntnisse als vor 20 Jahren.

[akapuma]

Danke Euch allen, und besonders Treml für den tollen Workaround.

Da habe ich ja jetzt einiges zu tun

Gruß

akapuma