Frage zur html-Umsetzung von "Hot Potatoes" auf eigener Seite

30.10.2012 01:21 (zuletzt bearbeitet: 30.10.2012 01:24)
#1 Frage zur html-Umsetzung von "Hot Potatoes" auf eigener Seite
Bu
Mitglied

Liebe Experten,

ich habe mit dem Programm Hot Potatoes ein interaktives Kreuzworträtsel zum Üben von altgriechischen Vokabeln erstellt und dieses, als es fertig war, als Datei im htm-Format auf meinem Computer abgespeichert.

Ich wollte diese Datei zunächst einem meiner Forenbeiträge auf http://altgriechisch.xobor.de/ als Anhang beifügen, doch htm-Dateien sind ja [noch] nicht zulässig als Dateianhang. Dann dachte ich, ich könnte den Quellcode der htm-Datei direkt in einen Forenbeitrag einbinden, doch leider überschritt die Länge des html-Codes die 65500-Zeichen-Grenze, und das selbst nach Streichung unnötiger CSS-Passagen aus dem Quellcode. Wegen der Überlänge ließ sich der Beitrag also nicht abspeichern.

Den Code hatte ich so gefunden: Ich ließ mir meine lokale htm-Datei in einem Browser anzeigen und klickte dann mit der rechten Maustaste auf die Seite und ließ mir den Quellcode in Notepad++ anzeigen. Diesen Quellcode koperte ich dann.

Da beschloss ich kurzerhand, eine eigene Seite zu erstellen und diese ins Forum einzubinden (mit Link "Spielwiese" zu einem Inhaltsverzzeichnis in der Navigationsleiste). Ich kopierte den Quellcode rüber in meine eigene Seite (via HTML Quelltext direkt bearbeiten?) . Alles klappte soweit perfekt und die erstellte Seite sieht auch gut aus, bis auf eine Kleinigkeit:

Die Kästchen des Kreuzworträtsels werden nicht, wie in meiner lokalen htm-Datei quadratisch, sondern verzerrt rechteckig angezeigt. Dadurch wird auch das gesamte ursprünglich quadratische Gitter des Rätsels zum Rechteck. Hier ist der Link:

http://altgriechisch.xobor.de/page-001_h...ne-woerter.html

Zu dieser Verzerrung kam es auch in der Vorschau meines über 65500 Zeichen langen Beitrags, der sich nicht abspeichern ließ.

Einen Screenshot meiner lokalen htm-Datei sieht man hier: http://altgriechisch.xobor.de/t132f41-Di...ese.html#msg680

Kann mir jemand von euch vielleicht erklären, wie es dazu kommt, dass die Kästchen auf der Forumsseite nicht mehr quadratisch angezeigt werden? Es ist doch haargenau der Quellcode der htm-Datei, den ich zum Erstellen der eigenen Seite verwendet habe. Was kann ich tun, um die quadratische Darstellung der Kästchen und des gesamten Gitters zu erzwingen?

Mir ist schon klar, dass im Forum das CSS des Forums greift und das CSS dieser htm-Datei außer Kraft setzt. Das ist an sich vom Design oder Layout her auch ok. Aber was könnte ich z.B. tun, um das CSS der htm-Datei zu übernehmen, ohne dass auf dieser Seite das CSS des Forums deswegen kaputtgemacht wird?

Vielen Dank für einen Rat!
Herzlichst,
Bussinchen



Ho'oponopono


Hinweis: Ich verwende in allen meinen Foren ausschließlich das unveränderte Standard-Template.
Meine Foren: Board-Nr. 17085, 588813, 569659, 608167, 555628

 Antworten

 Beitrag melden
30.10.2012 09:18
avatar  Fabian
#2 RE: Frage zur html-Umsetzung von "Hot Potatoes" auf eigener Seite
avatar
Xobor-Spezialist

Bei mir sieht alles in Ordnung aus (Google Chrome).

Versuch mal die Seite so einzustellen das die Kopf- & Fußzeile nicht mit angezeigt wird und kopiere dann den gesamten HTML Code in die Seite. Die Einstellung findest du beim Bearbeiten der Seite unterhalb der Textbox bei "Weitere Einstellungen ein-/ausblenden".

Servus
Fabian Klose


 Antworten

 Beitrag melden
30.10.2012 10:18 (zuletzt bearbeitet: 30.10.2012 10:18)
avatar  Ingmar
#3 RE: Frage zur html-Umsetzung von "Hot Potatoes" auf eigener Seite
avatar
Technik

Im Zweifel kannst du ihn immer zur richtigen Anzeige "zwingen"


1
 
table.CrosswordGrid tbody tr td{height: 30px !important;width: 30px !important;}
 

Viele Grüße,
Ingmar


 Technik · Homepagemodules.de · Miranus GmbH

 Antworten

 Beitrag melden
30.10.2012 21:46
#4 RE: Frage zur html-Umsetzung von "Hot Potatoes" auf eigener Seite
Bu
Mitglied

Zitat von Fabian im Beitrag #2
Bei mir sieht alles in Ordnung aus (Google Chrome).

Bei mir werden die Kästchen browserunabhängig immer rechteckig angezeigt, Also auch in Chrome und im Firefoxund in Opera. Und im Internet Explorer sowieso.



Zitat von Fabian im Beitrag #2
Versuch mal die Seite so einzustellen das die Kopf- & Fußzeile nicht mit angezeigt wird und kopiere dann den gesamten HTML Code in die Seite. Die Einstellung findest du beim Bearbeiten der Seite unterhalb der Textbox bei "Weitere Einstellungen ein-/ausblenden".

Leider geht das nicht, weil dieser Punkt bei mir ausgegraut ist. Ich hatte für unser Forum nicht den Basistarif, sondern nur die Werbefreiheit gebucht.

Trotzdem danke für deine Antwort, lieber Fabian!



Ho'oponopono


Hinweis: Ich verwende in allen meinen Foren ausschließlich das unveränderte Standard-Template.
Meine Foren: Board-Nr. 17085, 588813, 569659, 608167, 555628

 Antworten

 Beitrag melden
30.10.2012 21:54 (zuletzt bearbeitet: 30.10.2012 21:57)
#5 RE: Frage zur html-Umsetzung von "Hot Potatoes" auf eigener Seite
Bu
Mitglied

Zitat von Ingmar im Beitrag #3
Im Zweifel kannst du ihn immer zur richtigen Anzeige "zwingen"


1
 
table.CrosswordGrid tbody tr td{height: 30px !important;width: 30px !important;}
 




Danke, Zauberer Ingmar! Das ist wirklich eine sehr coole CSS-Zeile! Hat super geklappt! 1A !!!

Guck wie schön: http://altgriechisch.xobor.de/page-001_h...ne-woerter.html

Da ich vorhabe, in Zukunft noch viele solcher Vokabel-Kreuzworträtsel als eigene Seiten unserem Altgriechisch-Forum hinzuzufügen, macht sich diese CSS-Zeile bei uns wirklich bezahlt!



Ho'oponopono


Hinweis: Ich verwende in allen meinen Foren ausschließlich das unveränderte Standard-Template.
Meine Foren: Board-Nr. 17085, 588813, 569659, 608167, 555628

 Antworten

 Beitrag melden
27.01.2013 18:13 (zuletzt bearbeitet: 27.01.2013 18:17)
#6 RE: Frage zur html- bzw. CSS-Anpassung für "Hot Potatoes"-Code auf eigener Seite
Bu
Mitglied

Liebe CSS-Experten,

heute habe ich eine neue Frage, die wieder mit dem Layout von eigenen Seiten zu tun hat.

Ich habe wieder ein Kreuzworträtsel mit der Software Hot Potatoes erstellt, diesmal für mein aus Integritätsgründen nur für meine registrierten Schüler und Lehrer unseres Gymnasiums zugängliches Sprachen-Forum http://languages-at-dahlander.xobor.de/ mit dem Standard-Template.

Ihr könnt aber auch als Gäste sehen, wie das Layout des Forums gestaltet ist, und insbesondere, welche Farben die Links in der Navigationsleiste des Forums haben.

Als ich nun mit dem html-Quellcode meines Hot-Potatoes-Kreuzworträtsels eine eigene Seite erstellt hatte, musste ich sehr zu meinem Leidwesen feststellen, dass die Navigationsleiste außer den eingebauten Untermenüs mit den Verlinkungen zu Online-Wörterbüchern u.dgl. völlig verschwunden ist: Die Schrift ist nicht mehr sichtbar, und es ist auch nichts anklickbar außer ganz links irgendwo im Niemandsland, wo der Curserpfeil mal ganz kurz zur Hand wird. Eben im Moment stelle ich immerhin fest, dass dies nur im IE8 im Quirk-Modus so ist. Ohne Quirk-Modus ist die Navigationsleiste im IE8 wie auch in Chrome wieder sichtbar, aber die ursprünglichen Farben stimmen überhaupt nicht mehr.
Hier ist der Link zu der Kreuzworträtsel-Seite, die ich ausnahmsweise für Gäste freigeschaltet habe, damit ihr euch das mal genauer anschauen könnt: http://languages-at-dahlander.xobor.de/p...e-vokabeln.html

Dasselbe Phänomen habe ich ja auch im Altgriechisch-Forum (ebenfalls Standard-Template):
http://altgriechisch.xobor.de/page-001_h...ne-woerter.html
Auch hier stimmen die Farben der Links in der Navigationsleiste nicht mehr. Das scheint also ein generelles Problem zu sein, wenn ich Hot-Potatoes-html-Code einbaue.

Seltsam ist auch, dass auf den Hot-Potatoes-Seiten im Sprachforum die Links Suche, glosbe und FAQ in der Originalfarbe angezeigt werden. Im Altgriechisch-Forum hingegen werden auf Hot-Potatoes-Seiten die Links Suche |Einstellungen |Logout |Online? |FAQ in der Originalfarbe angezeigt. Alle anderen Links werden in einer anderen Farbe angezeigt. Ich kann mir überhaupt nicht erklären, wie es zu diesen Unterschieden kommt. Aber irgendwie muss es ja an dem Hot-Potatoes-Quellcode liegen.

• Doch nun stellt sich die Frage: Wie kann ich per CSS erzwingen, dass die Links der Navigationsleiste auch auf den von mir erstellten Hot-Potatoes-Seiten weiterhin in der Originalfarbe des Forums angezeigt werden? Ich wäre sehr dankbar für jeden qualifizierten Tipp von euch!



Ho'oponopono


Hinweis: Ich verwende in allen meinen Foren ausschließlich das unveränderte Standard-Template.
Meine Foren: Board-Nr. 17085, 588813, 569659, 608167, 555628

 Antworten

 Beitrag melden
27.01.2013 19:09 (zuletzt bearbeitet: 27.01.2013 19:14)
#7 RE: Frage zur html- bzw. CSS-Anpassung für "Hot Potatoes"-Code auf eigener Seite
Bu
Mitglied

Betr.: http://languages-at-dahlander.xobor.de/p...e-vokabeln.html (eigene Seite, html-Code weitestgehend mit Hot Potatoes erstellt)

Ich habe noch eine weitere Frage an unsere CSS-Experten:

Wenn man im Kreuzworträtsel selbst z.B. auf die Ziffer 2 klickt, erscheint über dem Grid des Rätsels ein Texteingabefeld, das auf http://languages-at-dahlander.xobor.de/p...e-vokabeln.html leider lila unterlegt wird, sodass man die schwarze Schrift darin kaum erkennen kann. In meiner lokalen htm-Datei ist dieses Feld jedoch weiß hinterlegt (siehe linker Screenshot), wenn ich die Webseite lokal in meinem Browser betrachte. Sobald der Code ins Forum als eigene Webseite eingebaut ist, wird dieses Texteingabfeld jedoch mit lila Hintergrund angezeigt, was ich nun per CSS-Kommando gern verhindern möchte.

Ich habe schon alles Mögliche versucht, aber es will einfach nicht klappen.

Wenn ich ins CSS einfüge:
div#ClueEntry {background: none !important;}
dann passiert gar nichts, das Feld bleibt weiterhin lila.

Wenn ich hingegen einfüge:
div#ClueEntry {background: #ffffff !important;}
wird nicht nur das Texteingabefeld weiß hinterlegt, sondern ein breiter weißer Streifen über die gesamte table-Breite hinweg generiert, sodass die hellrosa Schrift nicht mehr zu erkennen ist (siehe rechter Screenshot).

Hat jemand einen Tipp, wie ich das in den Griff kriegen könnte?



Ho'oponopono


Hinweis: Ich verwende in allen meinen Foren ausschließlich das unveränderte Standard-Template.
Meine Foren: Board-Nr. 17085, 588813, 569659, 608167, 555628

 Antworten

 Beitrag melden
29.01.2013 20:26
avatar  Youdid
#8 RE: Frage zur html- bzw. CSS-Anpassung für "Hot Potatoes"-Code auf eigener Seite
Yo
Mitglied

Ich habe eine generelle Frage, weil ich ein HTML Anfänger bin. Wie kann ich eine Hot Potatoes Datei auf eine HTML Seite stellen? Kann mir das vielleicht jemand Schritt für Schritt erklären? In google finde ich leider nichts.
Eine htm Datei habe ich schon erstellt. Wie bekomme ich diese jedoch auf die HTML Seite, bzw. wie binde ich sie ein?

Ich freue mich über Hilfe!


 Antworten

 Beitrag melden
30.01.2013 00:31 (zuletzt bearbeitet: 30.01.2013 00:39)
#9 RE: Frage zur html- bzw. CSS-Anpassung für "Hot Potatoes"-Code auf eigener Seite
Bu
Mitglied

Wie erstellt man eine eigene Xobor-Webseite von einer htm-Hot-Potatoes-Datei ?

Hallo Youdid!

Ich mache das so:

Schritt 1:

Doppelklicke auf deine Hot-Potatoes-Datei im htm-Format, um sie in deinem Standardbrowser zu öffnen. Klicke dann irgendwo in dem Browserfenster mit der rechten Maustaste auf deine heiße Kartoffel - dann tut sich ein Menü auf. In diesem Menü gibt es einen Punkt, der je nach Browser in etwa so lautet:
Seitenquelltext anzeigen, Quellcode oder Quelltext [anzeigen] .
Klicke diesen Menüpunkt an. Dann öffnet sich eine txt-Datei mit dem html-Quellcode in einem Editor. Der Editor kann, wenn du Windows hast, z.B. Microsoft Notepad oder Wordpad sein, oder, wenn du das Programm installiert und als Standard-Editor für html definiert hast, Notepad++.

Statt dieser Prozedur mit dem Umweg über den Browser kannst du deine Hot-Potatoes-Datei im htm-Format auch gleich in dem Verzeichnis, wo diese Datei abgespeichert ist, mit der rechten Maustaste anklicken und mit dem Editor deiner Wahl öffnen.

Als Editor empfehle ich dir wärmstens meinen Lieblingseditor Notepad++, ein Programm, das du kostenlos herunterladen und installieren kannst. Notepad++ ist tausendmal besser als die mageren Microsoftschen Editoren, die mit dem Betriebssystem Windows mitgeliefert werden.



Schritt 2:

Gehe nun im Admin-Bereich deines Xobor-Forums auf Layout > Eigene Seiten. Klicke auf Neue Seite erstellen...

Fülle die Felder
Name / Browser-Titel :
URL-Name (optional) :
Meta - Description (optional) :

aus und scrolle dann in dem Fenster ganz nach unten. Rechts unten gibt es einen Link, der da lautet:
HTML Quelltext direkt bearbeiten?

Lass dich nicht von folgendem Text beirren:
Diese Funktion blendet den Editor aus und ersetzt ihn mit einer textarea.Dieser Modus ist für fortgeschrittene User gedacht, die direkt am HTML-Code arbeiten möchten und/oder Javascript benutzen wollen.
Achtung: Das spätere Zurückschalten von der HTML-Ansicht in die Editoransicht ist möglich, jedoch wird ihr Quelltext editorgerecht umgeschrieben und es können Fehler entstehen. Machen sie also vorher zwingend eine Kopie von ihrem Quelltext!


Du brauchst keine Angst zu haben, denn du kannst nichts kaputt machen. Deinen html-Quellcode von deiner Hot-Potatoes-Datei hast du ja schon, von dem brauchst du also keine Kopie als Backup anzulegen. Der Quellcode ist ja in deiner htm-Datei bereits drin, sozusagen. Ignoriere also diesen Warntext und klicke unbeirrt und ohne Angst zu haben auf den Button Editor ausschalten.

(Ich sage das extra so deutlich, weil ich genau weiß, wie man sich als Anfänger fühlt, wenn solche Warntexte erscheinen und man keine Ahnung hat, was einen erwartet...)

So. Jetzt hast du statt des Xoborschen WYSIWYG-Editors für eigene Webseiten, den du ja ausgschaltet hast, nur noch ein einfaches Texteingabefeld. So soll es auch sein.



Schritt 3:


Gehe nun wieder in das Fenster deines Editors (z.B. Notepad++) mit deinem html-Hot-Potatoes-Quellcode (siehe Schritt 1) und klicke irgendwo in dem Fenster mit der rechten Maustaste. Wähle in dem Menü, das sich auftut, den Punkt Alles markieren. Kopiere dann mit der Tastenkombination Strg + C den gesamten Hot-Potatoes-Quellcode. Gehe zurück in dein Xobor-Fenster, wo du eben den WYSIWYG-Editor ausgeschaltet hast (siehe Schritt 2) , und füge per Strg + V den gesamten Hot-Potatoes-Quellcode in das Texteingabefeld ein.

Klicke auf den Button Speichern.

Nun landest du wieder im Admin-Bereich auf Layout > Eigene Seiten. Dort wird nun in dem Verzeichnis deine neu erstellte Webseite aufgelistet. Klicke auf den Link und begutachte dein Werk!



So mache ich das jedenfalls. Man kann bzw. muss danach gegebenenfalls unter Layout > Eigene Seiten auf bearbeiten (bzw. auf der neu erstellten Webseite unten auf Diese Seite bearbeiten) klicken, um den html-Quellcode noch nachzubearbeiten und zumodifizieren., je nachdem, was für Multimedia-Dateien du in deine heiße htm-Kartoffel eingebettet hattest: Bild- oder Audiodateien. Wenn du z.B. Bilddateien eingebunden hast, dann musst du die Bilder z.B. auf http://www.bilder-hochladen.net/ ins Netz hochladen und den Namen der Bilddatei im html-Quellcode durch die URL (= die Webadresse) des hochgeladenen Bildes ersetzen. Erst danach wird auf deiner neuen Hot-Potatoes-Webseite statt des kleinen roten Kreuzes das Bild angezeigt.

Aber das sind wie gesagt dann die Finessen, und vielleicht hast du ja auch gar keine Bilder oder Audio-Dateien in deine Hot-Potatoes integriert.

Hauptsache, du weißt erst mal, wie du deine heiße htm-Kartoffel auf eine eigene Xobor-Webseite verfrachtest. Frag ruhig nochmal nach, falls du etwas nicht verstanden hast.




-----------------------------------------------------------------------------------------------


Jetzt wäre es schön, wenn mir auch jemand meine Fragen in meinen vorigen Beiträgen beantworten könnte. Wie kriege ich nur dieses vermaledeite lila unterlegte kleine Texteingabefeld bei den Kreuzworträtseln weiß ? Und wie kann ich erzwingen, dass die Links in der Navigationsleiste des Forums auch auf Seiten mit Hot Potatoes in den Originalfarben des Forums angezeigt werden? Das müsste doch per CSS möglich sein... Wer hat eine Lösung?

Auch ich freue mich über jeden Tipp!


Lieben Gruß,
Bussinchen



Ho'oponopono


Hinweis: Ich verwende in allen meinen Foren ausschließlich das unveränderte Standard-Template.
Meine Foren: Board-Nr. 17085, 588813, 569659, 608167, 555628

 Antworten

 Beitrag melden
30.01.2013 14:42
avatar  Youdid
#10 RE: Frage zur html- bzw. CSS-Anpassung für "Hot Potatoes"-Code auf eigener Seite
Yo
Mitglied

Danke ich werde es gleich mal ausprobieren !


 Antworten

 Beitrag melden
Bereits Mitglied?
Jetzt anmelden!
Mitglied werden?
Jetzt registrieren!