Marcel: 3 Spalten im Footer responsive gestalten

problematische Seite

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.

  1. problematische Seite

    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

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

      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 😆.

      1. problematische Seite

        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

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

          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

          --
          sumpsi - posui - obstruxi
          1. problematische Seite

            @@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!

            --
            “Turn off CSS. If the page makes no sense, fix your markup.” —fantasai
          2. problematische Seite

            @@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!

            --
            “Turn off CSS. If the page makes no sense, fix your markup.” —fantasai
  2. problematische Seite

    @@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!

    --
    “Turn off CSS. If the page makes no sense, fix your markup.” —fantasai
    1. problematische Seite

      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 🙄.

      1. problematische Seite

        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

        --
        sumpsi - posui - obstruxi

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

        1. problematische Seite

          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?

          1. problematische Seite

            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

            --
            sumpsi - posui - obstruxi
            1. problematische Seite

              Vielen Dank erstmal. Ich probiere mich mal aus.