3 Spalten im Footer responsive gestalten von Marcel, 08.08.2020 16:40

3 Spalten im Footer responsive gestalten

Marcel Homepage des Autors 08.08.2020 16:40

+1 Informationen zu den Bewertungsregeln

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

Beitrag melden

+1 Informationen zu den Bewertungsregeln

SELFHTML Forum - Ergänzung zur Dokumentation Übersicht

Marcel: 3 Spalten im Footer responsive gestalten

Beitrag lesen

3 Spalten im Footer responsive gestalten

3 Spalten im Footer responsive gestalten