jeannie61: Navbar

problematische Seite

Guten Morgen, ich habe versucht meine Übungen zu modernisieren mit der neue Hot Potatoes Programme. Alle meine Übungen sind mit die ältere Programmen gebaut worden. Auf der Link oben habe ich es geschafft alles zu machen damit es funktioniert auf meine Seite aber das Navbar stimmt nicht. Ich weiß, wenn ich <style> rausnehme, dann stimmt es aber dann verliere ich die Farben. Kann mir eine bitte helfen dieses Problem zu lösen? Viele lieben Dank, Jeannie

  1. problematische Seite

    Servus!

    Guten Morgen, ich habe versucht meine Übungen zu modernisieren mit der neue Hot Potatoes Programme. Alle meine Übungen sind mit die ältere Programmen gebaut worden. Auf der Link oben habe ich es geschafft alles zu machen damit es funktioniert auf meine Seite aber das Navbar stimmt nicht.

    Die navbar ist mit 11.5em Breite breiter als die Tabellenzelle.

    Grundproblem ist das Tabellenlayout der gesamten Seite.

    Zum Lesen: HTML/Tutorials/responsive_Webdesign/bestehende_Webseiten_umbauen

    Herzliche Grüße

    Matthias Scharwies

    --
    25 Jahre SELFHTML → SELF-Treffen 05.-07. Juni 2020 in Mannheim
    1. problematische Seite

      Danke für die Antwort :-) Hier auf alle anderen Seiten geht es https://school-english.de/english/uebungen/uebungen.html

      1. problematische Seite

        Servus!

        Danke für die Antwort :-) Hier auf alle anderen Seiten geht es

        https://school-english.de/english/uebungen/uebungen.html

        Entweder Du nimmst eine funktionierende Seite und baust Den Inhalt dieser Seite dort ein.

        Oder Du schaust, was man ändern könnte / sollte müsste:

        Irgendetwas haut mit der Zeichenkodierung nicht hin:

        Screenshot vom iPhone

        Du verwendest windows-1252, es sollte aber laut header charset=iso-8859-1 sein. Besser ist es alles in utf-8 zu machen.

        Wenigstens lädst Du mit JavaScript ein Menü für schmale Viewports!

        Ich würde als ersten Schritte alle Tabellenelemente Deiner Webseite löschen. Dann hättest Du nur wenige Elemente, die du mit CSS positionieren kannst:

        <body>
          <header>
            <img src="https://school-english.de/mainimages/logo1.png" alt="Englisch Übungen">  
            <nav>
              <ul>
                <li><a href="https://school-english.de/english/uebungen/uebungen.html">Exercises</a></li>
                <li><a href="https://school-english.de/english/grammatik/grammatik.html">Grammar</a></li>
                <li><a href="https://school-english.de/english/hoerverstehen/comprehension.html">Listening</a></li>
                ...
              </ul>
            </nav>
            <div id="social">
               ....
            </div>
          </header>
          <main>
          ...
          </main>
        </body>
        

        Ich persönlich glaube, dass das neue Hot-Potatoes Probleme macht.

        Herzliche Grüße

        Matthias Scharwies

        --
        25 Jahre SELFHTML → SELF-Treffen 05.-07. Juni 2020 in Mannheim
        1. problematische Seite

          Hallo Matthias Scharwies,

          Ich persönlich glaube, dass das neue Hot-Potatoes Probleme macht.

          Die Seite hat zwei <html>-Tags, zwei <head>-Tags, zwei versciedene Angaben zur Zeichencodierung.

          Bis demnächst
          Matthias

          --
          Du kannst das Projekt SELFHTML unterstützen,
          indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt.
          1. problematische Seite

            Servus!

            Hallo Matthias Scharwies,

            Ich persönlich glaube, dass das neue Hot-Potatoes Probleme macht.

            Die Seite hat zwei <html>-Tags, zwei <head>-Tags, zwei versciedene Angaben zur Zeichencodierung.

            Ja!

            @jeannie61 Öffne Deine Seite mal im Firefox mit Rechtsklick. Alles was Du rot siehst, ist falsch!

            Herzliche Grüße

            Matthias Scharwies

            --
            25 Jahre SELFHTML → SELF-Treffen 05.-07. Juni 2020 in Mannheim
            1. problematische Seite

              Lieber Matthias und Matthias ja, das mit den beiden Header und so wüsste ich schon, aber ich werde alles was Rot ist erstmal rausnehmen. Vielen Dank erstmal.

              "Du verwendest windows-1252, es sollte aber laut header charset=iso-8859-1 sein. Besser ist es alles in utf-8 zu machen."

              Meinst du in den Mobil App? Eigentlich arbeite ich alle Seiten als Utf-8 oder meinst du ausgerechnet diese eine Seite?

              Also in großen und ganzen, glaube ich zu verstehen, dass der Hot Potatoes ein Fehler drin hat?

              Vielen lieben Dank, Jeannie

              1. problematische Seite

                Hallo jeannie61,

                Also in großen und ganzen, glaube ich zu verstehen, dass der Hot Potatoes ein Fehler drin hat?

                Wahrscheinlich nicht, der Fehler entsteht erst durch den Zusammenbau.

                Bis demnächst
                Matthias

                --
                Du kannst das Projekt SELFHTML unterstützen,
                indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt.
              2. problematische Seite

                Servus!

                Lieber Matthias und Matthias ja, das mit den beiden Header und so wüsste ich schon, aber ich werde alles was Rot ist erstmal rausnehmen. Vielen Dank erstmal.

                Dann müsste die eine Seite zumindest so wie die anderen funktionieren.

                "Du verwendest windows-1252, es sollte aber laut header charset=iso-8859-1 sein. Besser ist es alles in utf-8 zu machen."

                Meinst du in den Mobil App? Eigentlich arbeite ich alle Seiten als Utf-8 oder meinst du ausgerechnet diese eine Seite?

                Bis jetzt noch nicht:

                <!DOCTYPE html>
                <html lang="de">
                <head>
                <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" >
                
                ...
                

                Also in großen und ganzen, glaube ich zu verstehen, dass der Hot Potatoes ein Fehler drin hat?

                Anscheinend doch nicht, aber es ist auf jeden Fall schlechter Stil, alle Informationen (JS und CSS) im HTML-Dokument zu haben. Gute Quiz-Programme, z.b. das R-Quiz von @Felix Riesterer lagern die Stylesheets und die JS-Scripte aus, sodass sie vom Browser gecacht werden.

                Eine weitere gute, moderne Alternative ist H5P

                Herzliche Grüße

                Matthias Scharwies

                --
                25 Jahre SELFHTML → SELF-Treffen 05.-07. Juni 2020 in Mannheim
                1. problematische Seite

                  Hi Matthias,

                  <!DOCTYPE html>

                  <html lang="de"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" >

                  Ja, das ist von HotPotatoes aber nur auf diese Seite, soweit ich weiß...

                  1. problematische Seite

                    @ Matthias S

                    @jeannie61 Öffne Deine Seite mal im Firefox mit Rechtsklick. Alles was Du rot siehst, ist falsch!

                    Das habe ich öfters gesehen. Kann ich grundsätzlich alles rausnehmen was rot ist? Viele Grüße Jeannie

                    1. problematische Seite

                      Servus!

                      @ Matthias S

                      @jeannie61 Öffne Deine Seite mal im Firefox mit Rechtsklick. Alles was Du rot siehst, ist falsch!

                      Das habe ich öfters gesehen. Kann ich grundsätzlich alles rausnehmen was rot ist?

                      Ja, eigentlich schon. Und dann testen. Oft sind es einfach nur Textabsätze (<p>) oder Zeilenumbrüche (<br>).

                      Langfristig würde ich aber weg von den Tabellen!

                      Viele Grüße Jeannie

                      Herzliche Grüße

                      Matthias Scharwies

                      --
                      25 Jahre SELFHTML → SELF-Treffen 05.-07. Juni 2020 in Mannheim
                      1. problematische Seite

                        Hallo Ihr Beiden, ich habe das Problem gelöst erstmal mit der Navbar - es war sehr einfach;-) https://school-english.de/english/uebungen/simple_present/simpres1a.htm

                        Viele Grüße Jeannie

        2. problematische Seite

          Hallo Matthias,

          Du verwendest windows-1252, es sollte aber laut header charset=iso-8859-1 sein.

          ISO 8859-1 ist eine Untermenge von Windows-1252; letzteres belegt die Codes 0x80..9F, die in der ISO-Codierung reserviert sind, mit druckbaren Zeichen. Eine Verwechslung dieser beiden Codierungen würde daher in der Praxis kaum auffallen.

          Der Screenshot sieht eher danach aus, als würde dort UTF-8 verwendet, dem Browser aber als ISO-8859-x verkauft. Dann werden aus einem Umlaut, der in UTF-8 mit zwei Bytes codiert wird, plötzlich zwei komische Zeichen.

          Besser ist es alles in utf-8 zu machen.

          ACK.

          Live long and pros healthy,
           Martin

          --
          Ich stamme aus Ironien, einem Land am sarkastischen Ozean.