3 Spalten im Footer responsive gestalten

[Marcel]

Liebe Forenmitglieder,

ich versuche seit einigen Tagen meine Homepage in ein responsives Layout zu überführen. Dabei muss ich gestehen, dass ich nie in meinem Leben programmieren gelernt habe. Vielmehr hatte ich mir in den 90er Jahren das Erstellen von Internetseiten in Tabellenform selber beigebracht. Damit soll nun aber Schluss sein und ein erster, kleiner Entwurf steht bereits. Leider scheitere ich am Footer. Er soll aus drei unterschiedlich breiten Spalten nebeneinander (Desktopansicht) bestehen. In der mobilen Variante soll dann die mittlere Spalte ganz ausgeblendet und die verbleibenden zwei Spalten auf voller Seitenbreite untereinander angezeigt werden).

Hier mal mein html-code:

<div id="footer">
   <div class="row">
    <div class="leftfooter">
      <h3>Deine Hansa-Park Fanseite</h3>
      <p>Hier kommt der abschließende Text hin. Ich brauche allerdings noch ein paar mehr Buchstaben um den tatsächlichen Abstand zur Karte zu testen.</p>
    </div>
    <div class="mapfooter">
      <img src="map_facts.png"/>
    </div>
    <div class="rightfooter">
      <h3>Links</h3>
      <p>Eintrittspreise ansehen<br/>
         Eintrittskarten kaufen</p>
    </div>
   </div>
  </div>

Das zugehörige CSS sieht folgendermaßen aus:

#footer {
  padding: 0;
  background: #bc1014;
  margin: 0;
  border: 0;
  color: #ffffff;
}

.leftfooter {
    float: left;
    width: 40%;
    padding: 0 20px 10px 20px;
    margin: 0 auto 0 auto;
    text-align: left;
}

.mapfooter {
    float: left;
    width: auto;
    padding: 10px 0 10px 0;
    margin:  0 auto 0 auto;
    text-align: center;
}

.rightfooter {
    float: left;
    width: 30%;
    padding: 0 20px 10px 20px;
    margin: 0 auto 0 auto;
    text-align: left;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

@media screen and (max-width: 800px) {
  .leftcolumn, .rightcolumn, .leftfooter, .rightfooter {
    width: 100%;
    padding: 0;
  }
   .mapfooter {
    display: none;
   }
}

Die Seite ist insgesamt auf 1000px Seitenbreite begrenzt. Nun ist es leider so, dass zwar mit schmaler werdender Bildschirmgröße das Bild im Bereich ".map_footer" verschwindet, jedoch bleiben ".leftfooter" und ".rightfooter" nebeneinander liegen und behalten auch ihre Breiten "width" von 40% bzw. 30%, obwohl unter @media anders von mir eingestellt.

Kann mir jemand von euch bei meinem Problem weiterhelfen? Danke.

[Matthias Apsel]

Hallo Marcel,

so ganz grundsätzlich ohne wirklich auf deine Fragestellung einzugehen und vor allem nicht böse oder abwertend gemeint:

<div id="footer"> und Gestaltung per float ist genau so 90er wie Tabellenlayout.

Schau dir mal im Wiki unser Einsteiger-Tutorial an, im Anschluss suchst du bitte nach flexbox oder grid.

Bis demnächst
Matthias

[Marcel]

Hallo Matthias,

erstmal Danke für deine schnelle Antwort. Ich nehme dir das ganz und gar nicht übel. Ich habe tatsächlich schon die Seiten zu grid und flexbox gelesen, aber nicht so wirklich verstanden. Das alles fällt mir doch eher schwer so ohne wirkliche Grundkenntnisse. Irgendwie gerate ich gerade in eine Sackgasse.

Gestern habe ich mir erstmal das Programm weBuilder zugelegt als ich merkte mit Microsoft Expression Web keinen Blumentopf mehr gewinnen zu können 😆.

[Matthias Apsel]

Hallo Marcel,

bring zuerst mal dein HTML in Ordnung, ohne auch irgendwie nur an die gewünschte Darstellung zu denken. Dann können wir weiter sehen.

Bis demnächst
Matthias

[Rolf B]

Hallo Matthias,

was "in Ordnung" ist, soll er nach 10 Stunden Studium der Tutorials erraten? Klingt frustrierend für ein kleines "Hilf mir mal bitte". Die Tutorials sind natürlich lesenswert, aber ein kleines tl;dr kann nicht schaden.

Ich ergänze das also mal:

• Verwende semantisches Markup, d.h.

  • footer Element statt div
  • div class="row" ist Kitsch, keine Kunst, und kann weg. Der einzige Zweck ist, über ein ::after Element die Floats zu clearen, und die Floats sollten ja durch Flex oder Grid ersetzt werden.
  • section Elemente statt der left/map/rightfooter div
  • ob h3 tatsächlich angemessen ist, darüber bin ich mir unsicher. Ja, es ist eine Überschrift. Aber wo ist das h2 dazu? Die h… Elemente definieren eine Dokumentgliederung. Wenn zwischen dem h1 der Seite und den h3 kein h2 ist, müsste man im footer h2 verwenden, oder ein nicht sichtbares <h2>Seitenfuss</h2> verstecken. Oder?

• Verwende mobile first, d.h. drehe die Media-Abfrage um. Auf schmalen Viewports sollten die Media-Abfragen nicht zutreffen. Und wenn sie breiter werden, dann wird das Layout dafür umgebaut.

  • Heißt für die Karte: display: none; im Normalfall und display:block; wenn genug Platz ist.

• Für das Layout ist Grid-Layout am einfachsten. Schau Dir mal an, was hier mit der grid-Eigenschaft gehext wird. Internet Explorer Anwender bekommen allerdings keine so schöne Ansicht. Dafür ist Flexbox einfacher.

Rolf

[Gunnar Bittersmann]

@@Rolf B

• Verwende mobile first, d.h. drehe die Media-Abfrage um. Auf schmalen Viewports sollten die Media-Abfragen nicht zutreffen. Und wenn sie breiter werden, dann wird das Layout dafür umgebaut.

Das kann man so pauschal nicht sagen.

• Heißt für die Karte: display: none; im Normalfall und display:block; wenn genug Platz ist.

Ich dem Fall könnte man das so tun. Muss man aber nicht.

Bei responsiven Tabellen wäre es irrsinnig, erst alle Tabellenspalten, -zeilen und -zellen auf display: block zu setzen und dann mit Media-Query wieder zurück auf ihre ursprünglichen Werte.

Der Gedanke mobile first ist nicht verkehrt; die Implementierung ist es nicht unbedingt.

• Für das Layout ist Grid-Layout am einfachsten. […] Internet Explorer Anwender bekommen allerdings keine so schöne Ansicht.

Wieso das denn nicht? IE kann Grid (mit eigener Syntax) – zumindest die hier benötigten Teile.

🖖 Stay hard! Stay hungry! Stay alive! Stay home!

[Gunnar Bittersmann]

@@Rolf B

Für das Layout ist Grid-Layout am einfachsten. […] Dafür ist Flexbox einfacher.

“Should I use flexbox or grid? Yes.” —Rachel Andrew (vermutlich)

🖖 Stay hard! Stay hungry! Stay alive! Stay home!

[Gunnar Bittersmann]

@@Gunnar Bittersmann

“Should I use flexbox or grid? Yes.” —Rachel Andrew (vermutlich)

Gerade in meinen Fotos entdeckt: Rachel Andrew auf der Webclerks 2019 in Wien

🖖 Stay hard! Stay hungry! Stay alive! Stay home!

[Gunnar Bittersmann]

@@Marcel

Er soll aus drei unterschiedlich breiten Spalten nebeneinander (Desktopansicht) bestehen. In der mobilen Variante soll dann die mittlere Spalte ganz ausgeblendet und die verbleibenden zwei Spalten auf voller Seitenbreite untereinander angezeigt werden).

Du solltest bedenken, dass es zwischen breit und schmal auch noch einen großen Bereich gibt, wo weder die eine noch die andere von dir angedachte Darstellung gut aussieht.

Und breit und schmal haben recht wenig mit „Desktop“ und „mobil“ zu tun.

Kann mir jemand von euch bei meinem Problem weiterhelfen? Danke.

Wo kann man sich dein Problem ansehen?

🖖 Stay hard! Stay hungry! Stay alive! Stay home!

[Marcel]

Oh man, ich habe gar nicht so schnell mit so vielen Rückmeldungen gerechnet. Erstmal Danke dafür an euch alle.

http://www.hapaguide.de/HaPaGuide_upd/index.html Der Link zu der bisher von mir gebastelten Seite (und ich war bisher so stolz und zufrieden 😅).

Ich nutze übrigens WeBuilder2020, da es mir mit einem WYSIWYG-Programm deutlich leichter fällt. Allerdings habe ich eben die Befürchtung bekommen, dass grid damit gar nicht darstellbar ist. Ich habe es gerade parallel mit einem YouTube Video versucht und festgestellt, dass bei mir gar keine Tabellenspalten angezeigt werden 🙄.

[Rolf B]

Hallo Marcel,

witzig, mit WYSIWYG wirbt webuilder gar nicht.

Aber sie werben mit „Up-to-Date mit modernen Standards in HTML und CSS“, und dazu gehört auch Grid.

Eine HTML Seite in WYSIWYG zu realisieren ist übrigens etwas, was mir noch nie gelungen ist. Zumindest nicht mit Visual Studio. WISAGWAC^[1] war das.

Rolf

---

1. What I Saw And Got Was All Crap ↩︎

[Marcel]

Würdest du denn sagen, dass ich statt grid auch flex nutzen kann oder entspricht das auch nicht mehr dem aktuellen Stand der Dinge?

Kennt hier jemand einen guten WYSIWYG Builder den ich auch für Grid nutzen könnte?

[Rolf B]

Hallo Marcel,

ja, Flex geht auch. Ich würde die Seite im "schmalen" Modus ohne Flex rendern, dann erscheinen einfach beide Boxen untereinander, und im "breiten" Modus das display:flex am Footer und die flex-Eigenschaften an den 3 Kind-Elementen hinzufügen. Am breiteren Teil flex: 1 1 40%, und den beiden schmaleren flex: 1 1 30%.

Rolf

[Marcel]

Vielen Dank erstmal. Ich probiere mich mal aus.

[Marcel]

Ich habe nun versucht viele eurer Tipps umzusetzen und begonnen die Seitenstruktur noch einmal völlig neu und mit Flexbox aufzubauen. Tatsächlich funktioniert nun auch der Footer so wie er soll. Die Seite ist zunächst auf Smartphones ausgerichtet und passt sich ggf. auf eine Desktopversion an. Bitte stört euch noch nicht an den Schriftgrößen. Das kommt jetzt alles im nächsten Schritt.

<body>
    <header style="background-image:url(head.jpg)">
        <div id="logo">
            <a href="index.html"><img src="logo_rw.png" alt="Logo HaPaGuide"/></a>
        </div>
    </header>
    <nav id="navigation">
        <a href="LINK ZUR SEITE">ENTDECKEN</a>
        <a href="LINK ZUR SEITE">PLANEN</a>
        <a href="LINK ZUR SEITE">VERGANGENES</a>
        <a href="LINK ZUR SEITE">ZUKÜNFTIGES</a>
        <a href="LINK ZUR SEITE">MAGAZIN</a>
    </nav>
    <div id="content">
    <main>
        <article class="leftcontent">
            <h1>Willkommen auf HaPaGuide</h1>
            <p>Deine Hansa-Park Fanseite ist ab sofort im responsiven Design online.
            Noch mehr Übersicht für noch mehr Hansa-Park.</p>
        </article>
        <section class="leftcontent">
            <h2>Entdecke den Hansa-Park</h2>
            <p>Themenwelten, Fahrattraktionen, Spiekmöglichkeiten, Shows, Gastronomie, Shops und Events.
            Es gibt viel zu entdecken.</p>
        </section>
        <section class="leftcontent">
            <h2>Plane deinen Parkbesuch</h2>
            <p>Das passende Ticket auswählen, die Anfahrt planen, günstig parken und keine Zeit verlieren.
            Zahlreiche Tipps helfen dir bei deiner Tagesplanung.</p>
        </section>
    </main>
    <aside>
        <section class="rightcontent">
            <h3>Parknews und Updates</h3>
            <h4>Aus dem Newsletter August</h4>
            <p>Ab sofort ist nur noch ein Besuch pro Saisonkarte zeitgleich reservierbar.
            Desweiteren zeigt die Park-App nun freie Kapazitäten der Waschräume an.</p>
        </section>
        <section class="rightcontent">
            <h3>Die neuesten Fotos</h3>
            <p>1. April 2020</p>
            <p>Nessie</p>
        </section>
        <section class="rightcontent">
            <h3>Oft angesehen</h3>
        </section>
        <section class="rightcontent">
            <h3>Demnächst auf HaPaGuide</h3>
            <p>Erste Bilder der Neuheiten 2021</p>
        </section>
    </aside>
    </div>
    <footer>
        <section id="leftfooter">
            <h2>HaPaGuide - Deine Hansa-Park Fanseite</h2>
            <p>HaPaGuide ist eine private und unabhängig vom Hansa-Park geführte Seite.
            Die bereitsgestellten Informationen sollen dir helfen dich noch besser auf deinen Besuch im Park vorbereiten zu können.</p>
        </section>
        <article id="centerfooter">
            <img src="map_facts.png" alt=""/>
        </article>
        <section id="rightfooter">
            <h2>Links</h2>
            Eintrittskarten</br>
            Öffnungszeiten</br>
            Kontakt
        </section>
    </footer>
    <script type="text/javascript" src="scripts.js"></script>
</body>

Und die dazugehörige CSS-Datei:

body {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    margin-top: 0;
    margin: 0 auto;
    background-color: #E6E6E6;
    max-width: 1000px;
}

header {
    background-position: center;
    background-repeat: no-repeat;
    text-align: center;
}

#logo {
    background: rgba(255, 255, 255, 0.5);
    padding: 0.75em;
}

#logo img {
    height: 180px;
}

#navigation {
    overflow: hidden;
    background-color: #bc1014;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

#navigation a {
    display: inline-block;
    color: #ffffff;
    padding: 0.75em 1.1em;
    text-decoration: none;
    font-size: 0.8em;
}

#navigation a:hover {
    background-color: #8f0c0f;
    color: #ffff00;
}

#navigation a.active {
    background-color: #8f0c0f	;
    color: #ffff00;
    font-weight: bold;
}

.sticky {
    position: fixed;
    top: 0;
    max-width: 1000px;
}

main {
    background-color: #ffffff;
}

.leftcontent, .rightcontent {
    padding: 1em;
}

.rightcontent {
    margin-top: 1em;
    background-color: #ffffff;
}

.leftcontent {
    background-color: #ffffff;
}

footer {
    background-color: #bc1014;
    padding: 1em;
    color: #ffffff;
}

#centerfooter {
    display: none;
}


@media (min-width: 800px) {
    #logo img {
    height: 200px;
}

    #navigation a {
    padding: 0.75em 1.25em;
    font-size: 1em;
    }

    #content {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }
    main {
        width: 70%
    }

    aside {
        width: 28%
    }

    footer {
        display: flex;
        flex-direction: row;
        flex-flow: row nowrap;
        justify-content: flex-start;
    }

    #leftfooter {
        width: 50%;
    }

    #centerfooter {
        display: flex;
        width: 20%;
        min-width: 190px;
        text-align: center;
    }

    #rightfooter {
        width: 30%;
    }
}

Jetzt würde mich natürlich noch einmal eure Meinung interessieren. Meint ihr ich bin auf einem guten/besseren Weg? Habt ihr noch grundlegende Tipps für mich?

Ich versuche auch weitestgehend "em" als Maßeinheit zu verwenden.

Marcel

[Matthias Apsel]

Hallo Marcel,

ich habe nur einen flüchtigen Blick in den Quelltext der Seite geworfen. Das sieht jetzt deutlich besser aus. Du bist auf einem richtigen Weg.

Was mir an kleineren Fehlern aufgefallen ist:

<meta name="viewport" content="width=device-width" initial-scale=1>

vergleiche https://wiki.selfhtml.org/wiki/HTML/Kopfdaten/meta#Viewport_einstellen

<meta name="robots" content="index, follow">

Das ist nicht notwendig, das tun die Suchmaschinen ohnehin.

<meta name="keywords" content="SCHLÜSSELWÖRTER ZUR WEBSITE EINFÜGEN">

Das ist nicht notwendig und ggf. sogar kontraproduktiv. Die Suchmaschinen durchsuchen heutzutage die Seiten und nicht nur die Kopfdaten. Google straft möglicherweise sogar ab, wenn die keywords nicht zum Inhalt passen.

<div id="content">
  <main>
  <aside>

Dieses div-Element ist mit großer Wahrscheinlichkeit überflüssig.

Und dann schau mal, ob aside wirklich die richtige Wahl ist.

Bis demnächst
Matthias

[Marcel]

Hallo Matthias,

du bist aber auch immer schnell 😄. Besonders deine Hinweise zum <head>-Bereich sind super. Das wusste ich nicht über Google und Co.

Mal sehen wie es jetzt weitergeht wenn der richtige Inhalt entsteht?

[Rolf B]

Hallo Marcel,

mir ist was anderes aufgefallen. Wenn die Navigation in den Sticky-Mode schaltet, macht der Seiteninhalt einen Ruck nach oben. Das liegt daran, dass die Navigation aus dem Dokumentenfluss herausgenommen wird und der Rest nach oben rutscht. Das ist nur unschön, aber es geht noch schlimmer. Auf einem genügend hohen Bildschirm (ich habe einen 16:10 Monitor mit 1200px vertikal) kommt die sticky-Logik ins Flattern. Weil die Seite nach dem Umschalten zu kurz für den Bildschirm ist, scrollt sie zurück, der pageYOffset unterschreitet die sticky-Schwelle wieder und sticky wird wieder entfernt. Das geht eine Weile hin und her, dann findet er einen stabilen Punkt. Das kann auch in eine Endlosschleife gehen.

Die Navigation auf sticky setzen reicht also nicht. Du musst den Platz, den sie einnahm, mit etwas füllen. Eine Möglichkeit ist margin-top des content-Blocks. Das geht allerdings schlecht mit CSS, weil die Höhe des Navigationsbereichs nicht fix ist. Man kann's vielleicht mit calc() irgendwie berechnen, aber ich würde es im Script machen.

window.onscroll = function() {myFunction()};

var navigation = document.getElementById("navigation");
var content =  = document.getElementById("content");
var sticky = navigation.offsetTop;

function myFunction() {
  if (window.pageYOffset >= sticky) {
    // Klasse und Margin nur setzen wenn Sticky noch nicht da ist, sonst
    // wird der falsche Margin berechnet!
    if (!navigation.classList.contains("sticky")) {
       content.style.marginTop = (content.offsetTop-sticky)+"px";
       navigation.classList.add("sticky");
    }
  } else {
    content.style.marginTop = "";
    navigation.classList.remove("sticky");
  }
}

Damit ist's dann smooth.

Rolf

[Auge]

Hallo

#navigation a:hover {
    background-color: #8f0c0f;
    color: #ffff00;
}

Da wo :hover ist, sollte auch :focus sein. Für die Markierung eines Links per Tastaturbedienung kann man üblicherweise die gleichen Regeln wie für die Markierung des Hoverns mit der Maus benutzen. Schreib' den Selektor für :focus einfach zu dem für :hover und das war's.

#navigation a:focus, #navigation a:hover { … }

#navigation a.active {
    font-weight: bold;
}

1. Nicht a.active sondern a:active.
2. Bei den meisten Fonts ändern sich mit dem „umschalten“ von Normal- zu Fettschrft die Abmessungen des Texts derart gravierend, dass sich damit auch die Abmessungen des Elements, in dem sich der Text befindet, ebenfalls ändert. Das führt dann gern zum verspringen des Texts, des Blocks (hier des Links) oder zum Beispiel in einem einzeiligen Navigationsstreifen zur Größenänderung der ganzen Navi-Blocks. Auch wenn die Seite binnen kurzem verschwindet, um der neuen Seite Platz zu machen, sieht das oft unangenehm unruhig aus. Das solltest du mal testen, bevor du das „scharf schaltest“.

Tschö, Auge

[Matthias Apsel]

Hallo Auge,

#navigation a.active {
    font-weight: bold;
}

1. Nicht a.active sondern a:active.

Vielleicht doch? Weil die aktuelle Seite gemeint ist und nicht ein Link, der gerade angeklickt ist?

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Matthias Apsel

1. Nicht a.active sondern a:active.

Vielleicht doch? Weil die aktuelle Seite gemeint ist und nicht ein Link, der gerade angeklickt ist?

Um solche Verwechslung zu vermeiden, sollte man eine Klasse nicht active nennen. current wäre eine sinnvolle Bezeichnung..

Wenn es angebracht ist, das aria-current-Attribut zu verwenden, braucht man gar keine solche Klasse zusätzlich.

Wenn man die aktuelle Seite nicht verlinkt (wofür es gute Gründe gibt), braucht man eine solche Klasse auch nicht.

🖖 Stay hard! Stay hungry! Stay alive! Stay home!

[Auge]

Hallo

Wenn man die aktuelle Seite nicht verlinkt (wofür es gute Gründe gibt), braucht man eine solche Klasse auch nicht.

Ich würde das heutzutage genau so machen.

<ul>
 <li><a href="/da.html">Da</a></li>
 <li><a>Hier</a></li>
</ul>

… und kleine Monster nicht so gnadenlos durch die Gegend scheuchen.

Tschö, Auge

[Gunnar Bittersmann]

@@Marcel

    <header style="background-image:url(head.jpg)">
        <div id="logo">
            <a href="index.html"><img src="logo_rw.png" alt="Logo HaPaGuide"/></a>
        </div>
    </header>

Der Alternativtext ist nicht besonders gut gewählt. Hier ist weniger relevant, dass es sich um das Logo handelt; vielmehr, dass es sich um den Link zur Homepage handelt: alt="HaPaGuide Startseite".

Das div-Element ist überflüssig.

---

    <nav id="navigation">
        <a href="LINK ZUR SEITE">ENTDECKEN</a>
        <a href="LINK ZUR SEITE">PLANEN</a>
        <a href="LINK ZUR SEITE">VERGANGENES</a>
        <a href="LINK ZUR SEITE">ZUKÜNFTIGES</a>
        <a href="LINK ZUR SEITE">MAGAZIN</a>
    </nav>

VoiceOver liest das richtig vor (bei richtiger Sprachauszeichnung lang="de", die du ja getätigt hast). Ich bin aber nicht sicher, ob das alle Screereader so tun oder ob einige nicht buchstabieren: e en te de e ce ka e en …

Lieber im HTML-Quelltext normal schreiben und die Versalien mit CSS text-transform: uppercase.

Die Auszeichnung als Liste bietet sich auch an; sie gibt Nutzern assitiver Technologie zusätzliche Hinweise:

    <nav id="navigation">
        <ul>
            <li><a href="LINK ZUR SEITE">Entdecken</a></li>
            <li><a href="LINK ZUR SEITE">Planen</a></li>
            <li><a href="LINK ZUR SEITE">Vergangenes</a></li>
            <li><a href="LINK ZUR SEITE">Zukünftiges</a></li>
            <li><a href="LINK ZUR SEITE">Magazin</a></li>
        </ul>
    </nav>

---

    <div id="content">

Dass dieses div-Element überflüssig ist, wurde schon gesagt.

---

    <main>
        <article class="leftcontent">
            <h1>Willkommen auf HaPaGuide</h1>
            <p>Deine Hansa-Park Fanseite ist ab sofort im responsiven Design online.
            Noch mehr Übersicht für noch mehr Hansa-Park.</p>
        </article>
        <section class="leftcontent">
            <h2>Entdecke den Hansa-Park</h2>
            ⋮

Das ist mitnichten ein eigenständiger Abschnitt, also kein article. Das ist die Überschrift für die nachfolgenden sections. Wenn du für h1 und p ein gruppierendes Element brauchst, dann ein div; aber auch header bietet sich dafür an.

---

    <aside>
        <section class="rightcontent">
            <h3>Parknews und Updates</h3>
            <h4>Aus dem Newsletter August</h4>
            <p>Ab sofort ist nur noch ein Besuch pro Saisonkarte zeitgleich reservierbar.
            Desweiteren zeigt die Park-App nun freie Kapazitäten der Waschräume an.</p>
        </section>

Die Überschrifthierarchie stimmt hier nicht: Es gibt kein h2 zwischen h1 und h3

Entweder der aside-Bereich bekommt eine eigene Überschrift (die du evtl. visuell verstecken kannst)

    <aside>
        <h2>Weitere Informationen</h2>
        <section class="rightcontent">
            <h3>Parknews und Updates</h3>
            <h4>Aus dem Newsletter August</h4>
            <p>Ab sofort ist nur noch ein Besuch pro Saisonkarte zeitgleich reservierbar.
            Desweiteren zeigt die Park-App nun freie Kapazitäten der Waschräume an.</p>
        </section>

oder die Überschriften müssen eine Stufe hochrutschen

    <aside>
        <section class="rightcontent">
            <h2>Parknews und Updates</h2>
            <h3>Aus dem Newsletter August</h3>
            <p>Ab sofort ist nur noch ein Besuch pro Saisonkarte zeitgleich reservierbar.
            Desweiteren zeigt die Park-App nun freie Kapazitäten der Waschräume an.</p>
        </section>

Anpassung der Schriftgrößen mit Nachfahrenselektor aside h2, aside h3.

---

    <footer>
        <section id="leftfooter">
            <h2>HaPaGuide - Deine Hansa-Park Fanseite</h2>
            ⋮
        </section>
        <article id="centerfooter">
            <img src="map_facts.png" alt=""/>
        </article>
        <section id="rightfooter">
            <h2>Links</h2>
            ⋮
        </section>
    </footer>

Auch hier: kein article. Faustregel: articles (und sections) beginnen jeweils mit einer eigenen Überschrift.

🖖 Stay hard! Stay hungry! Stay alive! Stay home!

[Marcel]

Erstmal wieder vielen Dank für eure Kommentare. Leider ließen sich nicht alle Vorschläge auch umsetzen.

@Rolf B mit deinem Script kann ich leider nicht 1:1 mein altes ersetzen. Danach ist die Navigationsleiste bei mir z.B. gar nicht mehr "sticky" 🤔.

@Auge der zusätzliche Befehl "focus" sorgte bei mir dafür, dass bei überfahren der Begriffe der Navigationsleiste diese nicht mehr anders farblich markiert wurden.

@Gunnar Bittersmann Der "uppercase"-Befehl war ein guter Hinweis den ich direkt umgesetzt habe. Das mit dem "alt"-Element beim Logo muss ich auch nochmal überdenken. Auf mein "div"-Element im Bereich "header" kann ich nicht verzichten, da ich nur so einen leichten Weißschleier auf das Hintergrundbild gelegt bekomme.

Aber ich habe schon ein neues Problem, welches ich mit Flexbox lösen möchte und daran scheitere. Ich möchte gerne innerhalb meines Footers Icons neben untereinander stehenden Textlinks ausrichten.

<section id="rightfooter">
            <p><div class="titlefooter"><img src="icon_tix.png" alt="" class="icon"/>Eintrittskarten</div>
            Eintrittspreise ansehen</br>
            <a href="https://my.hansapark.de/" target="_blank" class="linkfooter">Tickets online kaufen</a></br></p>
            <p><div class="titlefooter"><img src="icon_calendar.png" alt=""/>Öffnungszeiten</div>
            Heute ist der<script src="date.js" type="text/javascript"></script></br>
            Die Saison endet am 18. Oktober</br>
            täglich ab 10 Uhr geöffnet</br>
            Wissenswertes während Corona</br></p>
            <p><div class="titlefooter">Kontakt zum Park</div>
            <a href="https://hansapark.de/" target="_blank" class="linkfooter">Offizielle Internetseite</a></br>
            Automatische Info-Hotline: 000000</br>
            Telefonischer Kundenservice: 000000</br>
            E-Mail-Adresse: <a href="mailto:[e-mail]" class="linkfooter">[e-mail]</a></br></p>
        </section>

Sprich das Icon "icon_tix" soll neben den Begriffen "Eintrittskarten, Eintrittspreise ansehen und Tickets online kaufen" in einer separaten Spalte stehen. Ich würde es nur über eine Tabelle gelöst bekommen. Gleiches soll das mit dem "icon_calendar" für die nächsten 4 Begriffe geschehen, etc.

    .titlefooter {
        font-size: 1.05em;
        font-weight: bold;
        color: #97CAAC;
    }

    .icon {
        display: flex;
        align-items: flex-start;
    }

    a.linkfooter {
        color: #ffffff;
    }

    a.linkfooter.active {
        color: #ffffff;
    }

    a.linkfooter.hoover {
        color: #ffffff;
    }

    a.linkfooter.visited {
        color: #ffffff;
    }

[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

[JürgenB]

Hallo,

{
  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;
}

ich glaube,

{
  const mydate = new Date();

  const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };

  const datumInfo = mydate.toLocaleDateString('de-DE', options);

  document.getElementById("tagesdatum").text = datumInfo;
}

macht das selbe.

Siehe https://wiki.selfhtml.org/wiki/JavaScript/Objekte/Date/toLocaleString#toLocaleDateString_und_toLocaleTimeString
und https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString

Gruß
Jürgen

[Rolf B]

Hallo JürgenB,

super, hätte ich dran denken müssen.

weekday: "long" ist aber ein Addon und passt nicht in den Satzbau.

"Heute ist der Montag, 10. August 2020"

Da müsste man den Wochentag getrennt vom Datum ermitteln und setzen, oder das "der" einfach weglassen.

Rolf

[Marcel]

@Rolf B spitze! Du hast mir jetzt sehr weitergeholfen. Den Fehler im Script der Navigationsleiste hatte ich gar nicht gesehen. Jetzt klappt es super!

Sektionen mit Listen zu erstellen macht tatsächlich auch Sinn. Das versuche ich evtl. gleich nochmal an anderer Stelle. Dein Tipp mit den margin-Werten hat auch funktioniert, auch wenn es nicht bei jeder Displaygröße ganz optimal aussehen wird. Trotzdem bin ich froh um diese "einfache" Variante, zumal mein Editor nicht Grid-fähig ist.

Das mit dem Script für das Datum verstehe ich allerdings nicht so ganz. Warum ist es denn besser das direkt im html-Quelltext einzubinden statt in einer separate .js-Datei?

Hier kannst du mein bisheriges Werk sehen 😀.

Danke nochmal!

[Rolf B]

Hallo Marcel,

Warum ist es denn besser das direkt im html-Quelltext einzubinden statt in einer separate .js-Datei?

Weil eine separate .js Datei einen separaten Serverzugriff durchführt, und zwar in dem Moment, wo der Browser das <script src="..."></script> Element antrifft (andernfalls könnte das document.write nicht funktionieren). Ggf. wird die Seite bis dahin bereits dargestellt und blockiert für einen Moment, während der Browser auf das Script wartet. Während dieser Zeit ist die Darstellung ggf. kaputt.

Weil eine separate Datei ggf. gar nicht geladen wird (Netzwerkfehler, Datei fehlt, weißdergeierwassonst) und dann das Datum nicht initialisiert wird.

Rolf

[Der Martin]

Hallo Rolf,

[...] Natürlich können Features wie HTTP/2

Weil eine separate Datei ggf. gar nicht geladen wird (Netzwerkfehler, Datei fehlt, weißdergeierwassonst) und dann das Datum nicht initialisiert wird.

beim Sex ist meistens der Zauber kaputt, wenn mann zu früh kommt. Hier hast du aber gern die Gelegenheit, dein verfrüht abgeschicktes Posting noch zu ergänzen. 😉

Live long and pros healthy,
 Martin

[Rolf B]

Hallo Martin,

argh. Postatio praecox, das arme Forum. Ich hatte kurz recherchieren wollen, ob HTTP/2 überall verfügbar ist, bin in den Varianten abgesoffen und hab dann irgendwann einfach gesendet. Hatten wir das Thema Vergesslichkeit nicht heute schon? 🤔

Hab's einfach gelöscht...

Rolf

[Gunnar Bittersmann]

@@Rolf B

Warum ist es denn besser das direkt im html-Quelltext einzubinden statt in einer separate .js-Datei?

Weil eine separate .js Datei einen separaten Serverzugriff durchführt, und zwar in dem Moment, wo der Browser das <script src="..."></script> Element antrifft (andernfalls könnte das document.write nicht funktionieren).

Ähm, async? defer?

• https://javascript.info/script-async-defer
• https://bitsofco.de/async-vs-defer/

🖖 Stay hard! Stay hungry! Stay alive! Stay home!

[Rolf B]

Hallo Gunnar,

Ähm, async? defer?

generell: ja.

Konkret: Um das Tagesdatum zu injizieren, würd' ich es doch eher inline tun statt dafür eine externe Ressource zu laden.

Rolf

[Rolf B]

Hallo Marcel,

<img src="icon_tix.png" alt=""/><h5>Eintrittskarten</h5>
<ul class="list">...</ul>

Whoa - so bitte nicht.

• h5? Wo sind die Überschiften h2 bis h4? Überschriften erzeugen eine Gliederung. Das muss h2 sein. Wenn Du im CSS sicher sein willst, dass Du nur die h2 im Footer und die h2 im main Bereich korrekt separierst, bau die Selektoren entsprechend (also main h2 und footer h2 statt einfach nur h2).

• Das <img> vor die Überschrift und dann mit der Margin-Axt die Überschrift zurechtzimmern sieht zwar irgendwie passend aus. Aber auch nur irgendwie. Nimm das img in die Überschrift hinein.

<h5><img src="icon_tix.png" alt=""/>Eintrittskarten</h5>

Damit das img auf der richtigen Höhe ist, gibt's vertical-align:

footer h2 img {
   vertical-align: middle;
}

Die Margins vom h2 setzt Du auf 0 - den bottom-margin meinetwegen auch leicht ins Minus, und das margin-top vom ul geht auch auf 0. Dann ist es wieder so kompakt wie vorher.

footer h2 {
   margin: 0 0 -0.2em 0;   /* oben rechts unten links */
}

footer ul.links {   /* Anpassumg im HTML nicht vergessen :) */
   list-style: none;
   padding: 0;
   margin-top: 0;
}

Warum footer ul.links statt .list? Klassen sollten eine fachliche Beschreibung des Elements liefern. Man könnte den Selektor schon als zu genau ansehen (was man lassen sollte), aber nach meiner Meinung drückt dieser Selektor genau den fachlichen Zusammenhang aus. Liste der Links im Footer.

Da die Icons reiner Schmuck sind, könnte man auch sagen: Die gehören gar nicht ins HTML. Das geht auch, mit dem ::before Pseudoelement:

<h2 class="tickets">Eintrittskarten</h2>
<ul>...</ul>

footer h2 {
   margin: 0 0 -0.1em 0;
}
footer h2.tickets::before {
   content: " ";
   display: inline-block;
   vertical-align: middle;
   width: 3em; height: 3em;
   background: url(icon_tix.png) no-repeat center/contain;
}

Die Angaben in der background-Eigenschaft sind etwas magisch. url() ist klar, no-repeat sicher auch. center/contain ist merkwürdig. Ich brauche eigentlich nur contain, was das Bild so verkleinert, dass es verzerrungsfrei in die Box eingepasst wird, aber die background-size Angabe lässt sich nur kombiniert mit background-position (hier: center) angeben. Die CSS Syntax will es nicht anders.

Rolf

[MudGuard]

Hi,

• Das <img> vor die Überschrift und dann mit der Margin-Axt die Überschrift zurechtzimmern sieht zwar irgendwie passend aus. Aber auch nur irgendwie. Nimm das img in die Überschrift hinein.

<h5 <img src="icon_tix.png" alt=""/>Eintrittskarten</h5>

Aber nicht übertreiben - ins öffnende Tag der Überschrift gehört das img auch nicht rein ;-)

cu,
Andreas a/k/a MudGuard

[Rolf B]

Hallo MudGuard,

grrr. Fixed.

Rolf

[Marcel]

@Rolf B du bist eine Granate 👍. Ich bin völlig begeistert was ich von dir alles dazulernen kann. Ich muss ja nochmal betonen, dass ich mir programmieren gerade erst neu und selbst beibringe.

Der Sinn der Java-Einbindung direkt in der html-Datei ist mir nun etwas klarer. Die Icons mit in die Überschriften einzubeziehen finde ich eine super Lösung. Das wirkt gleich alles viel klarer und sauberer. Die Durchnummerierung der Überschriften passe ich später auf jeden Fall noch an.

Zwischenzeitlich habe ich mir selber noch eine weitere Leiste unter meinen Footer gesetzt. Jetzt arbeite ich daran Text auf Bilder zu bekommen. Das klappt auch schon recht gut, nur geht die Navigationsleiste unter den Bildern hindurch statt weiterhin oben drüber zu fahren?? Das bringt mich zur Verzweiflung.

<section class="textonpic">
            <img src="new_2020.jpg" alt="Die Neuheiten 2020" stlye="max-width: 100%"/>
            <div class="texttopleft"><p>Neuheiten 2020</p>
            <p>Die Hanse in Europa wächst und das Piratenmädchen Awilda zieht mit Familienfreifall
            und Wasserbahn in die Reiche des Nordens.</p></div>
</section>

.textonpic {
    position: relative;
    text-align: left;
}

.texttopleft {
    position: absolute;
    color: #ffffff;
    font-size: 1.5em;
    font-weight: bold;
    top: 1em;
    left: 1em;
    right: 1em;
}

Hast du bzw. habt ihr für das Problem auch eine Lösung für mich?

Ich bin mega dankbar für die ganze Unterstützung hier! Marcel

[Rolf B]

Hallo Marcel,

@Rolf B du bist eine Granate

Das stimmt. Ich explodiere ziemlich schnell…

nur geht die Navigationsleiste unter den Bildern hindurch

Willkommen in der Welt der Stapel. Der Browser gliedert die HTML Elemente, die er anzeigen soll, in Stapelkontexte. Jeder Stapelkontext bildet eine Anzeigeebene. Welche Ebene unten oder oben ist, hängt am Wert der Eigenschaft z-index und…

…aber die verwende ich doch gar nicht

...und an der Reihenfolge im Dokument. Alle deine Stapelkontexte haben den z-index 0 (wenn ich keinen übersehen habe). Bei gleichem z-index werden die Kontexte in der Reihenfolge, wie sie im Dokument stehen, übereinander gelegt. Und darum liegt dein textonpic Section über der Navigation.

Mozilla weiß was über die Regeln, nach denen Stapelkontexte erstellt werden.

Die Navigation ist sticky, bekommt also ebenfalls einen Stapelkontext. Darum reagiert sie auf z-index. Setze ihn auf 1, und das Problem ist weg. Ältere Desktop-Browser legen bei sticky allerdings keinen Stapelkontext an (z.B. IE11, der kennt sticky gar nicht), was Dir hier aber egal sein kann. Wenn sticky ignoriert wird, hast Du das Problem eh nicht.

Rolf

[Marcel]

@Rolf B ist mir noch gar nicht aufgefallen, dass du so schnell hochgehst 😆. Das Problem war ja nun wirklich schnell gelöst. Was mich ein wenig ärgert: als ich heute Nachmittag unterwegs war kam mir selber noch der Z-Index in den Kopf. Trotzdem super so. Danke nochmals. Ich garantiere während meines Projektes kommen bestimmt noch mehr Fragen auf 😄😅