Ersatz für iframe gesucht

Hallo,

ich bin dabei, mich in CSS einzuarbeiten, um die auf Tabellenstruktur basierende Homepage, die nahezu ausschließlich mit HTML Code geschrieben ist, zu „modernisieren“. Es geht langsam voran, aber es geht.

Nun suche ich eine Anweisung ähnlich iframe, also eine Anweisung, die mir eine Box bereitstellt, die gegenüber dem Rest der Seite eine andere Hintergrundfarbe haben kann, in die ich einen Text einer separaten Datei hineinladen kann und, falls der Text länger als die Boxhöhe ist, einen Scrollbalken erzeugt (wie das bei iframe gemacht wird).

Kann mir jemand sagen, nach welchem Stichwort ich in den einschlägigen Quellen (Selfhtml etc.) suchen muß, um darüber Näheres zu erfahren?

Danke,
Gruß
Pauli

Hi pauli-441,

box-modell http://de.selfhtml.org/css/formate/box_modell.htm

Cu Stefan

hallo Stefan,

klasse… danke für den Tip!

Gruß
Pauli

Moin,

ich bin dabei, mich in CSS einzuarbeiten, um die auf
Tabellenstruktur basierende Homepage, die nahezu
ausschließlich mit HTML Code geschrieben ist, zu
„modernisieren“. Es geht langsam voran, aber es geht.

Beachte bitte auch, dass die meisten Menschen in dieser Situation sich eigentlich erst noch mit HTML befassen müssten. Die meisten, die Tabellenlayouts gemacht haben, tun sich nämlich schwer dabei, den Sinn von HTML zu verstehen. Aus dem, was Du hier schreibst, schließe ich, dass es auch bei Dir noch Defizite gibt.

Nun suche ich eine Anweisung ähnlich iframe

Anweisungen gibts in HTML nicht (das wäre (nach meinem Verständnis) sowas wie Befehle, denn HTML ist keine Programmiersprache), einen Ersatz für die zwei Arten von Frames gibt es nicht (da gabs erst vor kurzem einen Thread zu dem Thema).

also eine Anweisung, die mir eine Box bereitstellt, die gegenüber dem
Rest der Seite eine andere Hintergrundfarbe haben kann

Bis dahin ist die Antwort, die Du bereits bekommen hast, nicht prinzipiell falsch, wenngleich sie Dich in die falsche Richtung lenken wird.

in die ich einen Text einer separaten Datei hineinladen kann

Sowas geht in HTML überhaupt nicht. Denn HTML ist dafür nicht da. HTML zeichnet lediglich den Inhalt logisch aus (=> Semantik).
Was Du möchtest, geht mit serverseitigen Techniken (SSI, PHP, CGI, …).

falls der Text länger als die Boxhöhe ist, einen Scrollbalken
erzeugt (wie das bei iframe gemacht wird).

Das ist etwas, was man mit der Sprache CSS machen kann, wie alles, was rein mit dem Aussehen zu tun hat. (Eigenschaft „overflow“)

Kann mir jemand sagen, nach welchem Stichwort ich in den
einschlägigen Quellen (Selfhtml etc.) suchen muß, um darüber
Näheres zu erfahren?

Du solltest als erstes verinnerlichen, was HTML ist. HTML dient lediglich dazu, Deinem Inhalt eine logische Bedeutung zu geben. Mehr nicht. HTML ist nicht dazu gedacht, etwas auf den Bildschirm zu bringen (nicht jeder Webclient hat einen Bildschirm).

Für die Auszeichnung in HTML ist es nicht relevant, ob Du etwas irgendwohin hinein laden willst. Für HTML ist es nicht relevant, wie groß das Element mal sein soll (das ist ja auch abhängig davon, wie groß der Viewport des Endgeräts ist, auf dem das Element mal angezeigt werden soll oder ob das Element überhaupt angezeigt wird bzw. werden kann! Für HTML ist es auch nicht relevant, ob da Scrollbalken kommen oder nicht.

Du solltest auf jeden Fall immer Inhalt (und Semantik, also den HTML-Teil) strikt von Layout (und Design, also CSS) trennen, auch gedanklich. Dann wird Dir das Erstellen von Webseiten logisch vorkommen, Spaß machen und schnell gehen.
Wenn Du beides vermischst, wirst Du Dich immer fragen, wer eigentlich CSS erfunden hat oder wozu das da sein soll. Du wirst immer Schwierigkeiten haben und den Sinn nicht so ganz verstehen. Antworten auf Deine Fragen wirst Du nur schwer selber finden.

Was Du - und das sage ich im Hinblick auf die Antwort, die Du bisher bekommen hast - auf GAR KEINEN FALL tun solltest, ist alle Deine Tabellenzellen durch divs zu ersetzen! Denn das ist der gleiche Unsinn wie Tabellenlayouts, nur in grün. Naja, oder rosa. Oder lilafurzgeblümt.

Layout macht man mit CSS, nicht mit HTML und nicht mit bestimmten HTML-Tags. Weder mit table, noch mit div. Wer Dir div-Layout anstelle von Tabellenlayouts empfiehlt, hat HTML noch nicht verstanden.

Hier dazu noch eine ausführlichere Erklärung: http://www.reiermeister.de/webauthoring.tabellen-des…

Wenn Du dazu noch Fragen hast, scheue Dich nicht, sie zu stellen. HTML ist eigentlich so einfach, dass ein Grundschüler den Sinn in ein paar Minuten verstehen kann, aber insbesondere für Umsteiger von HTML der 1990er Jahre, wo Inhalt und Layout gemischt wurden, ist der Umstieg oftmals sehr schwer, weil sie nicht verstehen wollen, dass HTML wirklich so einfach ist und wirklich gar nichts mit Darstellung zu tun hat.

Also einfach fragen!

Liebe Grüße,
-Efchen

Moin,

div ist weder ein Ersatz für einen Inline Frame, noch befähigt es den Fragesteller, Inhalte da rein zu laden.

Und wenn wir nicht pingelig sein wollen und das Laden sererseitigen Techniken überlassen, warum muss es dann ein div sein? Dann muss klar sein, dass man auch in span, p oder h1 Inhalte geladen werden können.

Auf die gestellte Frage lässt sich eindeutig nicht mit einem bestimmten Tag antworten! Unabhängig davon, dass die Anforderung weder mit HTML noch mit CSS komplett erfüllt werden kann.

Welches Tag verwendet wird, ist einzig und allein vom Inhalt abhängig, denn Tags werden ja nur dazu benutzt, die Semantik des Inhalts festzulegen.

Der Glaube, div wäre ein Zauberelement und man könnte alle Inhalte erstmal in ein div packen und das sei dann besser als Tabellenlayout, dieser Glaube ist ein Irrglaube - wenngleich ein (leider) sehr verbreiteter.

Für Dich auch nochmal der Link: http://www.reiermeister.de/webauthoring.tabellen-des…

Liebe Grüße,
-Efchen

Moin,

klasse… danke für den Tip!

Ist nur leider falsch.

Siehe meine andere Antwort.

Liebe Grüße,
-Efchen

P.S.: Das hier nur der Vollständigkeit halber, wenn das jemand anders liest und aus Deiner Antwort versehentlich schließt, dass die vorhergehende Antwort umfassend und richtig sei.

Hallo Efchen,
danke für Deine belehrenden Worte. Schon im letzten Jahr hattest Du mir den Tritt gegeben, endlich mit diesen Tabellen in der HP aufzuhören und Gestaltung mit CSS zu machen. Nun habe ich mich entschlossen, das zu tun.
Wenn ich vielleicht 1x im Jahr an den Grundfesten der HP arbeite, fällt es mir durchaus schwer, in HTML zu schreiben. Da ist dann Vieles vergessen. Aber Deine Worte haben sich eingeprägt „CSS für Design“ und „HTML für den Inhalt“.

„Damals“ war das so einfach:

und schon war der Text aus einer separaten Datei in der Box.

Heute habe ich das so gemacht:
in einer separaten Datei css1.css:
div#Fenster1 {
width: 90%;
height: 200px;
margin: 0px;
padding: 10px;
border-color:#0000FF;
border-width:1px;
border-style:solid;
background: #FFFFB0;
overflow-y: scroll;
}
und in der html-Datei:

Statt des „link“ habe ich anfangs „href“ eingesetzt, aber das funktioniert auch nicht, die Box bleibt einfach leer.

Erschlage mich nicht gleich, weil der Code sicher auch daneben ist.

Gruß
Pauli

Moin,

Aber Deine Worte haben sich
eingeprägt „CSS für Design“ und „HTML für den Inhalt“.

Das freut mich :smile:

„Damals“ war das so einfach:

Aber entspricht auch nicht dem o.a. Spruch: CSS für Design und trotzdem verwendest Du hier HTML für Abstände, Ausrichtung, Rahmen, Größen und Scrollbalken. Das hat alles nichts in HTML zu suchen.
Und Frames sollte man auch nicht verwenden.
Aber das ist ja jetzt und hier nicht das eigentliche Problem.

und schon war der Text aus einer separaten Datei in der Box.

Schonmal mit Lynx eine Site mit Frames besucht? :smiley:

Heute habe ich das so gemacht:
in einer separaten Datei css1.css:
und in der html-Datei:

Frames lassen sich nicht durch irgendwas ersetzen. Das Einbinden aus externen Quellen geht schonmal gar nicht im Browser, sondern nur serverseitig.

Statt des „link“ habe ich anfangs „href“ eingesetzt, aber das
funktioniert auch nicht, die Box bleibt einfach leer.

Weil es das, was Du damit versuchst, in HTML nicht gibt und das Einbinden aus externen Quellen mit clientseitigen Mitteln auch überhaupt nicht geht.

Erschlage mich nicht gleich, weil der Code sicher auch daneben
ist.

Nein, dazu gibts keinen Grund. Im Gegenteil, ich finds schön, wenn jemand auch mal schreibt, was er versucht hat, die meisten schreiben immer nur „Was ich gemacht hab, funktioniert nicht“ und dann soll man raten.

Was Du suchst ist „serverseitiges Include“, das geht wahlweise mit SSI, PHP oder jeder serverseitigen Programmiersprache, die Du über die CGI-Schnittstelle ansprichst.

Am einfachsten und wohl am weitesten verbreitet ist das Einbinden über PHP. Das würde in Deinem Beispiel dann so aussehen:

<?php include("text.html"); ?>

Damit wird der Inhalt der Datei serverseitig an der Stelle dieses Befehls eingefügt. So als würdest Du in einem Texteditor die o.a. Zeichen rauslöschen und durch den Inhalt der anderen Datei ersetzen.

Dazu muss die Datei, in der die Anweisung steht, aber auch vom PHP-Interpreter verarbeitet werden, bei normaler Servereinstellung heißt das, Du gibst der Seite die Endung „.php“. Die Datei, die Du einlesen willst, darf .txt, .html, .foo oder auch .php heißen, das ist egal. Hast Du in der Datei, die Du „nachladen“ willst, allerdings auch PHP-Kommandos, dann muss sie auch auf .php enden.

Und Dein Webspace muss das natürlich unterstützen. Wenn Du das auf Deinem eigenen PC machst, klappt es nicht mehr, wenn Du die Seite über file:// öffnest, Du brauchst dazu in jedem Fall einen Webserver (idealerweise das Paket XAMPP, installiert sich leicht und hat auch PHP schon drin).

Noch Fragen? Fragen! :smile:

Liebe Grüße,
-Efchen

Hi Efchen,

Bezugnehmend auf die ursprüngliche Frage

Nun suche ich eine Anweisung ähnlich iframe, also eine Anweisung, die mir eine Box bereitstellt, die gegenüber dem Rest der Seite eine andere Hintergrundfarbe haben kann, in die ich einen Text einer separaten Datei hineinladen kann und, falls der Text länger als die Boxhöhe ist, einen Scrollbalken erzeugt (wie das bei iframe gemacht wird).

Kann mir jemand sagen, nach welchem Stichwort ich in den einschlägigen Quellen (Selfhtml etc.) suchen muß, um darüber Näheres zu erfahren?

Ist meiner Meinung nach die Antwort den div-Tag zu verwenden nicht gänzlich Falsch.
Gut es lassen sich Inhalte nicht direkt wie in Iframe mittels html aus einer Datei hineinladen dies bedarf PHP oder JS oder …

Jedoch überlasse ich es der Intelligenz des Fragestellers sich über

einschlägigen Quellen (Selfhtml etc.)

kundig zu machen.

Eine weit ausschweifende Antwort in Art: Lerne erstmal HTML und CSS und die Trennung von Inhalt und Layout …
mag zwar immer richtig sein, nur würde sie mich in diesem Fall als Fragesteller nicht weiter bringen.

Eine Antwort die den Fragesteller und alle anderen Befriedigt muss erst noch erfunden werden ;o)

Cu Stefan

Moin,

Bezugnehmend auf die ursprüngliche Frage
Ist meiner Meinung nach die Antwort den div-Tag zu verwenden
nicht gänzlich Falsch.

Nein, nicht falsch. Aber genausoweiterführend, wie wenn man sagt, man solle dafür table, p, h1 oder footer verwenden.

Gut es lassen sich Inhalte nicht direkt wie in Iframe mittels
html aus einer Datei hineinladen dies bedarf PHP oder JS oder

Ja, aber das war die Frage!
Und welches Tag man nun verwendet, hängt nicht davon ab, dass es sich verhalten soll wie ein iFrame, sondern einzig vom Inhalt, der ausgezeichnet werden soll.
Wenn ich beispielsweise ein Menü in eine externe Datei auslagern will, dann baue ich ein ul drumrum und kein div. Wenn ich den Seitenkopf auslagern will und HTML5 benutze, dann packe ich das in ein header, nicht in ein div. In den seltensten Fällen ist ein div angebracht.

Jedoch überlasse ich es der Intelligenz des Fragestellers sich
über

einschlägigen Quellen (Selfhtml etc.)

kundig zu machen.

Das hat nichts mit Intelligenz zu tun, dass man weiß, dass SelfHTML inzwischen in vielen Dingen hinterher hinkt und sich nur noch bedingt dazu eignet, daraus HTML zu lernen. Auf das Thema Semantik wird nämlich IMHO zu wenig eingegangen, bzw. nicht deutlich genug. Als Referenz ist SelfHTML toll, aber nur wenn man weiß, wann man jedes einzelne Tag einsetzt und wann nicht.

Eine weit ausschweifende Antwort in Art: Lerne erstmal HTML
und CSS und die Trennung von Inhalt und Layout …
mag zwar immer richtig sein, nur würde sie mich in diesem Fall
als Fragesteller nicht weiter bringen.

Das ist so nicht richtig. Sie zeigt Dir keine Lösung auf, sie stellt Dich nicht zufrieden. Aber weiter bringt sie Dich. Du weißt bei so einer Antwort, dass Du entsprechende Defizite in Sachen HTML hast, mit der Du auch zukünftige Problemstellungen nur schwer selber lösen kannst.

Wenn Du die Antworten „Lerne HTML“ und „Benutze ein div“ gegenüber stellst, ist die erste Antwort definitiv zielführender, weil die zweite u.U. sogar falsch ist und zwar eine vermeintlich schnelle Lösung bietet, aber dem Fragesteller HTML nicht näher bringt, er dann womöglich falsche Dinge lernt. Frag Dich doch mal, woher das kommt, dass heutzutage die Mehrheit glaubt, man mache jetzt „Layout mit divs“ - ist aber genauso falsch wie Layout mit Tabellen.

Eine Antwort die den Fragesteller und alle anderen Befriedigt
muss erst noch erfunden werden ;o)

Eigentlich nicht. Man darf als Fragesteller, insbesondere wenn man sich nicht auskennt, keine falschen Erwartungen haben. Es gibt eben nicht immer eine „schnelle Lösung“ - eben insbesondere wenn man sich einfach nicht auskennt.

Liebe Grüße,
-Efchen

Hallo ihr beiden,

danke für eure spannende Diskussion. HTML zu lernen oder richtig anzuwenden ist m.E. genauso schwer, wie eine Programmiersprache zu lernen, VBA oder Pascal oder sonstwas. Der Wortschatz ist riesig, das System muß verstanden sein und Lernen by doing ist empfehlenswert. Dabei werden auch Fehler gemacht, woran man aber lernt. Schön, daß der Browser nicht reagiert, wenn etwas wirklich falsch ist, schön ist aber auch, wenn jemand wie hier im Forum den richtigen Weg aufzeigt.

Sicher habe ich jetzt wieder ins Fettnäpfchen getreten, aber ich habe mein genanntes Problem mit

Ihr Browser kann das Objekt leider nicht anzeigen!

bearbeitet. Fenster2 wird mit CSS gestaltet und platziert. Darin erscheint dann der Text der externen Datei „text.html“, wobei es auch eine „text.txt“ sein kann.
Stutzig machen mich die 190%. Nur so wird der Text in der Box breit genug. Worauf sich das bezieht, habe ich noch nicht verstanden, aber das bekomme ich noch raus.
(was heißt eigentlich IMHO?)

Gruß
Pauli

Moin,

HTML zu lernen oder richtig anzuwenden ist m.E. genauso schwer,
wie eine Programmiersprache zu lernen

Nein. Da kann ich Dir nicht zustimmen. Und das sage ich nicht, weil ich HTML kann und weil ich programmieren kann, sondern weil ich weiß, wie einfach HTML wirklich ist.

Die meisten machen ihren ersten Fehler, wenn sie glauben, sie brauchen HTML, um etwas auf den Bildschirm zu bringen. Das ist nicht das Ziel von HTML und wenn man sowas nicht glaubt, wirds schon deutlich einfacher.

HTML besitzt außerdem keine Befehle, keine Schleifen, Bedingungen oder Ähnliches, was man in einer Programmiersprache vorfindet. Es gibt keine Variablen, man muss Fehler nicht debuggen, keine Speicherlöcher finden, keine Interprozesskommunikation realisieren oder sonstwas.

HTML ist eigentlich das, was man in der Grundschule im Fach Deutsch beigebracht bekommt. HTML ist das Gegenteil davon. Während man in der Grundschule beim Lesen lernt, was eine Überschrift ist, wie man Sätze betont und wie man Tabellen liest, vergibt man bei HTML diese Bedeutungen, statt sie zu interpretieren.

Beim Lesen eines Textes vergibt man auch quasi Semantik, wenn man z.B. bestimmte Textpassagen betont vorliest. Überschriften liest man anders als Fließtext. Tabellen liest man zeilenweise von links nach rechts.

HTML kann man nur benutzen, wenn man den Inhalt geschrieben hat. Ohne Inhalt kann man kein richtiges HTML schreiben. Aber wenn man seinen Inhalt hat, dann weiß man, was Fließtext ist und was Überschriften sind. Man weiß, ob in dem Text bestimmte Passagen betont vorgelesen werden sollen, die zeichnet man dann als wichtig aus.

Und das ist schon alles. Deswegen sage ich, dass HTML auch schon ein Grundschüler verstehen würde, wenn er eine Anwendung dafür hätte.

Mehr ist das nicht.
Wirklich!

Tags gibt es ja nicht soo viele. Es gibt allerdings Tags, die in den 1990er Jahren eingeführt wurden, um damit physische Inhaltsauszeichnung zu machen. Das verwendet man seit über 10 Jahren nicht mehr, weil es dazu CSS gibt. Man darf sich also nicht von veralteten Tutorials verwirren lassen.

Der Wortschatz ist riesig

Hält sich bei HTML 4 echt in Grenzen. Erst HTML5 liefert viele neue Tags, teilweise muss man auch ein bisschen umdenken, weil die semantische Bedeutung alter Tags leicht verändert ist (Überschriften in Sections z.B:smile:.

das System muß verstanden sein

Vielleicht wird es mit meiner Zusammenfassung oben ein wenig klarer

Lernen by doing ist empfehlenswert.

Wie man das versteht. Man muss natürlich die Tags alle kennen, um zu wissen, wie man seinen Inhalt am besten logisch beschreibt. Es geht z.B: nicht, dass man eine Liste von Bildern nicht auch als Liste auszeichnet, weil man ul (oder ol, dl) nicht kennt.

Dabei werden auch Fehler
gemacht, woran man aber lernt.

Dumm dabei nur, dass nicht-visuelle Clients wie Suchmaschinen und Vorlesebrowser dabei den Inhalt falsch verstehen können. Manchmal ist das nur schade, vielleicht in vielen Fällen gar nicht relevant, aber in Einzelfällen könnte dadurch jemandem auch ein Schaden entstehen. Für diese Personen ist das natürlich eine Katastrophe. Aber dessen sollte man sich bewusst sein, wenn man seinen weltweit(!) zugänglichen Teledienst ins Netz stellt. Nur dahinrotzen geht nicht!

Schön, daß der Browser nicht
reagiert, wenn etwas wirklich falsch ist

Wenn Du mit „Browser“ einen meinst, der etwas visuell darstellt, dann magst Du recht haben. Aber das ist nur ein Teil der Clients, die das WWW nutzen. Und bei anderen geht das dann eben nicht so glimpflich aus.

schön ist aber auch,
wenn jemand wie hier im Forum den richtigen Weg aufzeigt.

Dazu ist das Forum da. Experten teilen ihr Wissen.

Sicher habe ich jetzt wieder ins Fettnäpfchen getreten, aber
ich habe mein genanntes Problem mit

Ihr Browser kann das Objekt leider nicht anzeigen!

bearbeitet.

Und wen ineteressiert, wenn sein Browser anzeigt „Ihr Browser kann das Objekt leider nicht anzeigen!“? Derjenige ist stinkesauer auf Dich! Und IMHO auch zu recht. Denn, und das sage ich jetzt nicht anklagend, sondern rein sachlich und aus der Sicht des Nutzers: Du stellst einen öffentlich zugänglichen Dienst in die Welt, kümmerst Dich aber einen Dreck um den Nutzer. Aus reiner Faulheit oder aus purem Geiz (weil Dein Webspace keine serverseitigen Techniken unterstützt) setzt Du eine Pseudo-Lösung in die Welt, die bei einigen nicht funktioniert.

Das kann man natürlich alles relativieren, wenn die Website die Fotos vom eigenen Nachwuchs zeigt, die niemanden außer die Familie interessieren. Oder wenn die Site sowieso so schäbig ist, dass man Augenkrebs bekommt. Aber letztlich ist doch das Ziel einer jeden Website, dass man möchte, dass sie von möglichst vielen benutzt wird. Und wenn man da bei kleinen Hürden gleich aufgibt - warum macht man sich die Mühe überhaupt?

Also - nicht so böse verstehen, wie das klingen mag :smile:
Es soll lediglich zum Denken anregen, weil die meisten sich einfach keine Gedanken machen, was sie da tun, wenn sie eine Website in die Welt setzen. Ist ja keine Kleinanzeige im Lokalblatt des 300-Seelen-Dorfes.

Fenster2 wird mit CSS gestaltet und platziert.

Wenn in div#Fenster2 nichts anderes ist als das object-Tag, dann kann das div auch verschwinden. Du könntest auch das object-Tag mit CSS gestalten und platzieren. Dazu musst Du es nicht als logische Gruppe auszeichnen, noch dazu, dass es als einzelnes Elemnt ja keine Gruppe ist.

Stutzig machen mich die 190%.

Warum machst Du die eigentlich per HTML und nicht per CSS (Stichwort: Trennung von Inhalt und Layout!)?

Aber vielleicht ist das Elternelement nicht so breit, wie Du denkst. Eine Breite eines Elements in einem anderen Element bezieht sich nämlich immer auf die Größe des Elternelements und nicht auf die Größe des Viewports.
Wenn Dein div#Fenster2 50% des Viewports breit ist, dann ist Dein object mit 190% nicht ganz so breit wie der Viewport, nämlich 1.9 mal so breit, wie #Fenster2.

(was heißt eigentlich IMHO?)

in my humble opinion :smile:
Nach meiner bescheidenen Meinung.

Schönes Wochenende!
-Efchen

2 Like

Hallo Efchen,

danke für Deine sehr ausführliche und hilfreiche Darstellung, nun weiß ich, wie bei mir das WE läuft…

ebenfalls schönes Wochenende (WE)
Gruß
Pauli

Hi Efchen,

auch ich möchte mich bei Dir für deinen sehr gelungenen Artikel bedanken!

Cu Stefan

PS „∗ dafür !“

Moin,

auch ich möchte mich bei Dir für deinen sehr gelungenen
Artikel bedanken!

Ich freue mich, danke!

Noch mehr freue ich mich dann über semantisch gute HTML-Codes in Euren Websites :wink:

Liebe Grüße,
-Efchen