XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Grid Probleme (http://xhtmlforum.de/showthread.php?t=73468)

gabischatz 29.03.2018 11:05

Grid Probleme
 
Liste der Anhänge anzeigen (Anzahl: 2)
Hi, ich habe Grid Probleme. Egal wie ich es auch mache irgend etwas passt immer nicht.:evil: Auf mente-et-malleo.com möchte ich bei einer Auflösung von (min-width: 1024px)
das eine Menü eingeblendet wird. Das ist ein Ausschnitt aus der css_min.css
HTML-Code:

<style type="text/css">/*<![CDATA[*/@charset "utf-8";
@media only screen and (min-width: 1024px) {
    body {
        font-size:1.5vw;
        font-size: calc(16pt + .5vw);
        line-height: 1.15;
        line-height: calc(1.1em + .5vw)
    }

    #wrapper {
        margin: 2vw auto;
            display: grid;
            grid-template-columns: auto auto;
            grid-template-rows: auto auto auto;
    }

    header {
        height: calc(100px + 2vw);
                grid-column-start: 1;
                grid-column-end: 3;
                grid-row-start: 1;
                grid-row-end: 2;
    }

    #toggle-menu~#content {
        min-height: calc(99vh - 100px);
        right: 0;
    }

    h1.header {
        font: normal normal bold 33pt/140% "Marck Script",cursive;
        float: left
    }

    #toggle-menu:checked~#content {
        margin-top: 0;
        /* width: calc(67%); */
        width: 100%;
        transition: all .3s ease-in-out;
                grid-column-start: 1;
                grid-column-end: 2;
                grid-row-start: 2;
                grid-row-end: 3;
    }

    #toggle-menu:checked~aside#right {
        animation: max-width-transform 6s ease-in-out forwards;
        border-bottom: solid #444 1px;
        border-left: solid #fff 1px;
        /* max-width: 33%; */
        width: 100%;
        max-height: 100%;
        position: relative;
        top: 0em!important;
        left: 0;
        float: right;
                grid-column-start: 2;
            grid-column-end: 3;
            grid-row-start: 2;
            grid-row-end: 3;
    }

    #toggle-menu:checked~div#map {
        margin-top: 0;
        max-width: 100%;
            grid-column-start: 1;
            grid-column-end: 3;
            grid-row-start: 2;
            grid-row-end: 3;
    }
    footer {
            grid-column-start: 1;
            grid-column-end: 3;
            grid-row-start: 3;
            grid-row-end: 4;
        }
}
/*]]>
*/</style>
<div id="wrapper">
        <input name="Menu" id="toggle-menu" type="checkbox" class="radio" />
        <header>
                <h1 class="header" lang="de"><span class="h2-style">Bergmannsverein Menteroda</span></h1>
                <div class="header">

                        <label for="toggle-menu" class="button_icon" draggable="false" id="menu-toggle" onclick="document.getElementById('toggle-menu').checked;">
                                <span id="x" class="x noselect">&#x2630;</span>
                                <span id="y" class="y noselect">&#x2692;</span>
                          <br/>
                                <span class="z noselect">Menü</span>
                        </label>
                </div>
        </header>
        <div id="map">Map</div>
        <aside id="right" class="column">Navigation</aside>
        <div id="content">content</div>
        <footer>footer</footer>
</div>

Ich habe noch zwei Bilder angehangen wie es mal werden soll.
für Hilfe wäre ich sehr dankbar.
Mit freundlichen Grüßen Lutz

protonenbeschleuniger 29.03.2018 11:43

was mir als erstes auffällt, eine CSS Datei darf kein HTML enthalten. Hast du mal geschaut, ob der Code Fehlermeldungen oder Warnungen anzeigt?

gabischatz 29.03.2018 12:04

Hi, ich habe den Code jetzt noch mal aufs wesentliche gekürzt.
und in jsfiddle gespeichert. Der Code zeigt keine Fehlermeldungen oder Warnungen an.
Gruß

gabischatz 29.03.2018 19:12

ich habe es fast geschafft, jetzt habe ich zwar die volle Auflösung aber die mobile Ansicht ist der Footer noch immer über den Content.
Kennt sich den niemand hier aus?
So sieht es im moment aus.
https://jsfiddle.net/gabischatz/cd1crbc5/
Grüße


Alle Zeitangaben in WEZ +2. Es ist jetzt 17:34 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023