zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Grid Probleme

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 29.03.2018, 10:05
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 12.11.2010
Ort: Bad Langensalza
Beiträge: 733
gabischatz ist in Verruf geraten
Standard 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">&#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
Angehängte Grafiken
Dateityp: png voll.png (46,7 KB, 10x aufgerufen)
Dateityp: png 33.png (70,0 KB, 10x aufgerufen)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 29.03.2018, 10:43
Benutzerbild von protonenbeschleuniger
Verbesserer
XHTMLforum-Kenner
 
Registriert seit: 06.09.2007
Beiträge: 4.931
protonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblick
Standard

was mir als erstes auffällt, eine CSS Datei darf kein HTML enthalten. Hast du mal geschaut, ob der Code Fehlermeldungen oder Warnungen anzeigt?
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 29.03.2018, 11:04
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 12.11.2010
Ort: Bad Langensalza
Beiträge: 733
gabischatz ist in Verruf geraten
Standard

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ß
Mit Zitat antworten
  #4 (permalink)  
Alt 29.03.2018, 18:12
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 12.11.2010
Ort: Bad Langensalza
Beiträge: 733
gabischatz ist in Verruf geraten
Standard

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
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 06:30 Uhr.