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">☰</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>
Ich habe noch zwei Bilder angehangen wie es mal werden soll.
für Hilfe wäre ich sehr dankbar.
Mit freundlichen Grüßen Lutz
|