3 Spalten im Footer responsive gestalten

[Rolf B]

Hallo Marcel,

@Rolf B mit deinem Script kann ich leider nicht 1:1 mein altes ersetzen.

Ja, ist ein Typo drin, der zu einem Syntaxfehler führt. Sorry. Aber den findest Du bestimmt selber.

var content =  = document.getElementById("content");

Das mit dem Icon kann man unterschiedlich lösen. Entweder über ein Grid-Layout für die <p> Bereiche, oder mit einem Zusatzcontainer und Flexbox, oder Du setzt das Icon einfach vor die Überschrift und schiebst die Zeilen darunter mit margin-left nach rechts. icon_tix.png ist bei Dir dem Anschein nach noch nicht online - wie groß ist das Ding?

Ich bin aber nicht sicher, ob dein HTML so ideal ist.

<section id="rightfooter">
   <p>
      <div class="titlefooter">Eintrittskarten</div>
      Eintrittspreise ansehen</br>
      <a href="https://my.hansapark.de/" target="_blank" class="linkfooter">Tickets online kaufen</a>
      </br>
   </p>
...
</section>

Die Elemente section und article gehören zur Seitenstrukturierung, und eigentlich gehört zu jedem dieser Elemente eine Überschrift. Wenn Du keine Überschrift hast, aber aus technischen Gründen einen Container brauchst, dann ist es einfach nur ein div.

Das Markup sollte meiner Meinung nach in diese Richtung gehen.

• Sections haben Überschriften
• Listen werden als Listen ausgezeichet (mit list-style:none kannst Du die Listenpunkte, und mit padding die Einrückung entfernen), damit Screenreader sie auch als Liste ansagen.
• Das Datum sollte durch unaufdringliches Script eingesetzt werden, und vor allem sollte dieses Script inline sein, damit es unverzüglich läuft.
• Natürlich wird deine Seite erstmal anders aussehen, wenn Du das umsetzt. Da stehen dann noch ein paar Arbeiten im CSS an, damit das HTML im Footer-Bereich passend dargestellt wird. Aber das ist richtig so. Man wählt die HTML Elemente nach ihrem vorgesehenen Zweck aus, nicht danach, wie das Browser-CSS sie darstellt.

<div id="rightfooter">
  <section>
    <h2>Eintrittskarten</h2>
    <ul>
      <li>Eintrittspreise ansehen</li>
      <li><a href="https://my.hansapark.de/" target="_blank" class="linkfooter">Tickets online kaufen</a></li>
    </ul>
  </section>
  <section>
    <h2>Öffnungszeiten</h2>
    <p>Heute ist der <span id="tagesdatum>?</span></p>
    <p>Die Saison endet am 18. Oktober<br>
    täglich ab 10 Uhr geöffnet</p>
    <p>Wissenswertes während Corona</p>
  </section>
  <section>
    <h2>Kontakt zum Park</h2>
    <ul>
    ...
    </ul>
  </section>
</div>

<script>
{
  const mydate = new Date(),
        monate = [ "Januar", "Februar", "März", "April",
                   "Mai", "Juni", "Juli", "August", 
                   "September", "Oktober", "November", "Dezember" ];

  const year   = mydate.getFullYear(),
        month  = mydate.getMonth(),
        daym   = mydate.getDate();

  const datumInfo = daym + ". " + monate[month] + " " + year;

  document.getElementById("tagesdatum").text = datumInfo;
}
</script>

Den <script> Block kannst Du bspw. unter die <script> Zeile stellen wo Du scripts.cs einbindest. Aber auf jeden Fall als inline Script.

Durch die geschweiften Klammern und die Nutzung von const (oder let) wird erreicht, dass die Variablen aus diesem Script nur innerhalb dieses Blocks gelten und danach wieder gelöscht werden. Sowas ist ziemlich sinnvoll, man möchte keine globalen Variablenleichen herumliegen lassen. Ein paar Variablen könnte man noch wegrationalisieren und beim Zusammenbau der Datumsinfo direkt mydate.getDate() schreiben statt erstmal eine Variable anzulegen. Aber das ist eine Frage der persönlichen Vorlieben für Lesbarkeit. Der JavaScript-Compiler schmeißt es vermutlich eh zusammen, vor allem, wenn man let statt var verwendet.

Was bei Dir fehlte, waren Semikolons am Ende der Anweisungen. JavaScript ist eine der wenigen Sprachen, die sowas automatisch (und gelegentlich auch falsch) korrigieren. Aber man sollte sie trotzdem setzen.

Die getYear-Methode des Date-Objekts ist missbilligt (deprecated), weil sie nur zweistellige Jahre liefert. Statt dessen ist getFullYear zu verwenden.

new Array(a,b,c) um ein Array zu erzeugen ist umständlich. Dafür ist [a,b,c] gebräuchlich.

Rolf