|
|||
Grid Probleme
Hi, ich habe Grid Probleme. Egal wie ich es auch mache irgend etwas passt immer nicht. 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">☰</span> <span id="y" class="y noselect">⚒</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> für Hilfe wäre ich sehr dankbar. Mit freundlichen Grüßen Lutz |
Sponsored Links |
|
|||
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ß |
|
|||
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 |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Darstellungsproblem display: grid | Schischi | CSS | 4 | 06.12.2017 13:32 |
Frage zu einem bestehenden Grid Raster.. | Nargaroth | CSS | 2 | 29.10.2013 19:46 |
Mobile Optimierung ohne Fluid Grid und zweiter Seite? | o.the.run | CSS | 4 | 19.12.2012 12:39 |
grid problem | xinu | CSS | 1 | 12.08.2011 14:15 |
Grid (floating Problem) - IE erzeugt Abstände | citostyle | CSS | 4 | 16.04.2007 16:37 |