Datenschutz Impressum

NOF-Schule | Forum

zur Schule NOF-NetObjects-Tutorials von Tommy Herrmann


Footer Formatierungsproblem!
#46
zum Testen nehme ich immer den einfachsten Block von Mobirise (Standard-Thema "Mobirise4"), für mich ist das der einfache Textblock.


.jpg  Textblock.JPG (Größe: 285,31 KB / Downloads: 16)



Dort ersetze ich dann den eigentlichen Text mit meinem Code, egal was - auch bei PHP.

... übrigens Mobirise kann diese CSS in der 'Arbeitsansicht' auch nicht interpretieren, sie wird dagegen (genau wie im IE11) falsch dargestellt. Erst nach dem Publizieren wird alles richtig angezeigt.

Hier noch ein Screenshot vom gesamten Code (rechts die CSS):


.jpg  Code-Grid.JPG (Größe: 158,41 KB / Downloads: 11)
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#47
Nachtrag mit den Codes meiner Testseite ...

Inhalt:

Code:
               <!-- Beginn eigenes CSS-Grid -->
               <div class="grid-container">
                 <div class="item1">Grid kommt aus CSS</div>
                 <div class="item2">2</div>
                 <div class="item3">3</div>  
                 <div class="item4">4</div>
                 <div class="item5">5</div>
                 <div class="item6">6</div>
                 <div class="item7">7</div>
                 <div class="item8"><a href="https://www.w3schools.com/cssref/pr_grid-template-columns.asp" target="_blank">www.w3schools.com</a></div>
               </div>
               <!-- Ende eigenes CSS-Grid -->
               
               
CSS:  

Code:
.grid-container {
 display: grid;
 grid-template-columns: auto auto auto auto;
 grid-gap: 3px;
 background-color: #e2e2e2;
 padding: 10px;
}
.grid-container > div {
 background-color: rgba(255, 255, 255, 0.8);
 text-align: center;
 word-break: break-all;
 padding: 20px 10px;
 font-size: 16px;
}
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#48
@ Andy: Bei mir funktioniert das 2D Grid im IE 11 nicht, wird alles was unter FF mittig oder sonstwie positioniert werden soll nur linksbündig gesetzt. Gibts da einen IE-Patch dafür das IE11 das bei dir korrekt anzeigt?


@ Tommy: Andy hat schon recht. Mobi setzt über Columns auf das ältere 1D Grid und hat 2D Grid gar nicht an Bord. 1D-Grid wurde bissel was mit Flex aufgebohrt, dem Grid fehlen aber dennoch die Funktionen des neueren 2D. ;Wink Das Grid was ich in den ersten Postings meinte ist 2D-Grid und daher hoch flexibel, bekommst du einige Sachen mit Mobi nicht hin, egal wie du trickst.
Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#49
Moin,

ja - das verstehe ich schon und vergiss nicht, dass Mobirise eben nicht mit diesem Grid arbeitet sondern mit Bootstrap.

Einbauen kann man "CSS Grid" (meiner Meinung nach) aber dennoch in die Blocks von Mobirise. Ich habe da mal noch 2 Blocks dazu gebaut.

http://www.mobirise-tutorials.com/Testse...lumns.html

In Mobirise selbst braucht man so etwas aber eher nicht - vielleicht als Ersatz für Tabellen, aber auch die sind ja auf reinem CSS aufgebaut.

Der einzige Vorteil ist, dass man dabei auf JavaScript (wie bei Bootstrap) verzichten kann. Es müsste dann auch wieder eine Software geben, die das so kann, denn sonst ist das für den allgemeinen Benutzer zu schwer verständlich und zu kompliziert umzusetzen.

... aber super interessant ist "CSS Grid" natürlich auf jeden Fall Smiling

Hier meine CSS:

Code:
.item1 {
 grid-area: header;
}
.item2 {
 grid-area: menu;
}
.item3 {
 grid-area: main;
}
.item4 {
 grid-area: right;
}
.item5 {
 grid-area: footer;
}
.grid-container {
 display: grid;
 grid-template-areas: 'header header header header header header' 'menu main main main right right' 'menu footer footer footer footer footer';
 grid-gap: 3px;
 background-color: transparent;
 padding: 10px;
}
.grid-container > div {
 background-color: rgba(255, 255, 255, 0.7);
 text-align: center;
 padding: 20px 10px;
 font-size: 24px;
 color: black;
}

Hier der Inhalt:

Code:
                <!-- Beginn eigenes CSS-Grid -->
                <div class="grid-container">
                     <div class="item1">Header</div>
                     <div class="item2">Menu</div>
                     <div class="item3">Main</div>  
                     <div class="item4">Right</div>
                     <div class="item5">Footer</div>
                </div>
                <!-- Ende eigenes CSS-Grid -->
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#50
Hallo,
also ich habe jetzt mal etwas weiter gefummelt. Unter anderem habe ich Mobirise auf 4.8.1 upgedatetet von 4.8.0

Es scheint auch auf die Wahl des Blocks anzukommen wo man das CSS Grid einfügt. Ich hatte zuerst einfach die Extention Code Editor geöffnet und einen leeren neuen Block genommen. Das hat dann nicht so funktioniert.
Dann habe ich den Block mit einfachem Text genommen hier geht es bedeutend besser. Aber es funktionier leider nicht komplett hat Uwe ja schon oben beschrieben trotzdem kann mann die Positionierungen durchführen. Also bedingt kann man es nauch in Mobi nutzen. Von daher hat Tommy recht man kann es einbauen aber die Nutzung ist eben begrenzt. Vieleicht kommt da ja in den nächsten Updates ja was von Mobi.

Zitat:Der einzige Vorteil ist, dass man dabei auf JavaScript (wie bei Bootstrap) verzichten kann. Es müsste dann auch wieder eine Software geben, die das so kann, denn sonst ist das für den allgemeinen Benutzer zu schwer verständlich und zu kompliziert umzusetzen.
Wenn man sich die Templets von w3c und consorten zu Grid System ansieht ist dort aber schon javascript drin. Warum auch nicht?
Es gibt glaube ich sogar schon Tools um sich ein Grid erstellen zu lassen.
Das schöne finde ich am Css Grid das man es auch ohne Probleme mit Bootstrap kombinieren kann. Wenn ich jetzt z.b. in einer Seite einen Bereich habe an dem ich freier als in Bootstrap möglich, Objekte positionieren möchte kann ich dies einfach per CSS Grid machen Ich denke es wird genau wie  flexbox eine weitere Möglichkeit die man eben überall einsetzen kann und auch flexbox und Grid sind wunderbar kombinierbar da eigentlich nur Grid oder Flex den unterschied macht und das positionieren der Items fast identisch ist.
thumbs up

Achso hier noch der Link zu meinem Test. Der sollte auch bei euch im IE11 funktionieren. Eine kleine Rückmeldung ob es bei euch auch funktioniert wäre toll.
P.s. es ist noch nicht 100% optimal aber die funktion sollte da sein.
Testseite CSS Grid System
Gruss Andy

Wer Rechtschreibfehler findet, darf sie behalten... oder melden
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#51
Damit es in IE10+ funzt muss man folgendes wissen:
Zitat:Relevant sind heute zwei Versionen von CSS-Grids: die aktuelle Spezifikation und die veraltete Version von 2011.

Die aktuelle Version funktioniert in Chrome ab 57, in Firefox ab Version 52, in Safari 10.1 und ebenfalls in Edge ab 16.

Die veraltete Version ist im Internet Explorer 10+ und in Edge < 16 implementiert und deswegen ist diese alte Syntax heute noch relevant.

In der aktuellen Syntax geht die Aktivierung der Rasterdarstellung über display: grid, für den IE10+ funktioniert es genauso, nur muss man das Präfix -ms- ergänzen.

Dann kommt die Definition der Spalten und Zeilen. Im alten Working-Draft (WD) hieß die Eigenschaft grid-columns (dementsprechend braucht man für den IE10 -ms-grid-columns), im neuen WD heißt es grid-template-columns:
Im neuen Working-Draft definiert man damit nicht eigentlich Spalten, sondern vertikale Rasterlinien. Die erste Linie (nicht angegeben) ist bei Position 0, die zweite bei 100px, die dritte 150px später, die letzte nach weiteren 180px etc.

die Eigenschaften heißen wieder unterschiedlich: grid-rows (-ms-grid-rows für den IE10+) im alten Working-Draft, grid-template-rows im aktuellen.
Wir bestimmen mit -ms-grid-column und -ms-grid-row die Position des Elements (1. Spalte, 1.Zeile). Mit -ms-grid-column-span legen wir fest, dass das Element sich über 3 Spalten erstrecken soll.

In der neuen Syntax brauchen wir nur zwei Regeln. Hinter grid-column kommen zwei durch Slash getrennte Zahlen: bei welcher vertikalen Rasterlinie das Element beginnen soll (1) und wo es enden soll (4). Bei grid-row ist nur eine Zahl angegeben, weil Elemente dann standardmäßig bei der nächsten Rasterlinie aufhören. Wir hätten aber auch statt grid-row: 1 schreiben können grid-row: 1/2.

Auf den ersten Blick irritiert, dass bei -ms-grid-column-span: 3 angegeben ist, bei der neuen Syntax hingegen hinter grid-column: 1/4. Das liegt daran, dass bei der ursprünglichen Version von CSS-Grids in Spalten gedacht wurde, in der neuen Version geht man hingegen von Rasterlinien aus. Und wenn sich ein Element von der ersten über die zweite bis zur dritten Spalte erstrecken soll, dann geht es von der ersten über die zweite und die dritte bis zur vierten Rasterlinie.

Alternativ zur Benennung der Rasterlinie kann man in der neuen Syntax auch das Schlüsselwort span mit der Anzahl an Spalten angeben. Statt

grid-column: 1 / 4;

kann man auch schreiben:

grid-column: 1 / span 3;
Quelle: maurice-web.de/
Gruss Andy

Wer Rechtschreibfehler findet, darf sie behalten... oder melden
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#52
@Andy,

danke Dir für Deine Ausführungen thumbs up

Ist immer so eine Sache, wenn man für die doofen, alten IE irgendwelche Sonder-Sachen machen soll Sad

Übrigens - ich habe das jetzt in x unterschiedlichen Mobirise-Blöcken getestet und das geht (soweit) immer, wie Du schon an meiner Testseite erkennen kannst. Eventuell muss man auch Bootstrap - Klassen etwas anpassen damit es passt, wie z.B. in meinem "full-width" Beispiel.

Ich persönlich würde das nur ausnahmsweise einsetzen, denn ich denke, dass das alles viel zu aufwendig ist, wenn man mittels Mobirise + Bootstrap es viel einfacher mit dem gleichen Ergebnis haben kann und ich persönlich sehe da nur wenig Sinn drinnen.

Wenn man ganz ohne Software programmieren will, ist das CSS-Grid aber sicherlich eine tolle, neue Erfindung thumbs up

P.S.:

Du erwähnst JavaScript im Zusammenhang mit CSS-Grid - das ist mir noch nicht untergekommen und macht dann auch für mich gar keinen Sinn mehr (hast Du da mal ein Beispiel?).
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#53
Ja so aus dem Kopf fallen mir da Slideshow, Formularaktionen, Modals ein/bzw ausblenden etc. ein

Aber diese flexibilität in Umsortierung kannst du mit Bootstrapp nur mit imensen Aufwand realisieren. Und Mobirise bedient sich schonjetzt recht viel Flexbox was Positionierung und Gestalltung angeht.
Das css Grid ist für mich einfach der nächste logische Schritt. Denn alles ist kombinierbar und so kannst du dir die jeweiligen Stärken gut zu nutze machen. Ganz neben bei bei uns auf derArbeit experimentieren Sie mit css Grid schon seit längerem rum und das heißt schon etwas da wir sonst immer eher hinterher hängen.
Gruss Andy

Wer Rechtschreibfehler findet, darf sie behalten... oder melden
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#54
Also bei mir im IE11 zeigt der IE bei den beiden letzten mQuerys eine andere Elementeformatierung an als der FF - aber grundsätzlich scheint es so zu funktionieren.
thumbs up

@ Tommy, sicherlich kann man auch das Mobi-Grid nehmen, Nachteil ist und bleibt aber das du da irgendwo immer auf fixe Größen/Formatierungen und Elementeanordnungen stößt die du bei den "neuen" Grid-Modell nicht hast. Da kannst du alles überall so anordnen wie du möchtest und das schönste, bei jeden mQuery kann es wieder ganz anders ausschauen. Sicher ist das mehr Arbeit als jetzt eine "Universalvorlage" über die Breaks responsiv machen zu lassen, dafür ist aber der Effekt auch ein weit höherer wenn du für mobile darüber ein ganz anderes Layout zaubern kannst als für Desktop.

ps: Dieses Grid-Modell setzt, meine ich, auch die neue Version des Magix WebDesigner ein, mit dem du ja auch über den Editor in einen Projekt mehrere Layout für verschiedene Auflösungen basteln kannst. Hatte den mal in der älteren (9er?) Version, da hatte der das, glaube ich, noch nicht. Diese Mehrfach-Layout Option aber schon.
Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#55
Hier sind auch noch einmal Tuts zum neuen 2D-Grid:

CSS Grid Layout Module Level 1

maddesigns Native CSS Grid


Zitat:Was ist nun der Unterschied zwischen Flexbox und CSS Grids?
CSS Grids sind zweidimensional, Flexbox ist eindimensional. Flexbox-Grids sind bildlich gesprochen nur 1-zeilig (flex-wrap: wrap mal ignoriert), also Zelle für Zelle auf einer Zeile ohne Umbruch. Ein CSS Grid-Layout kann man über mehrere „Zeilen“ aufbauen. Man stelle sich vor, dass man ein einfaches Seitenlayout hat. Dort ist eine Spaltigkeit für header und footer festgelegt – dies kann man natürlich auch mit Flexbox abbilden, aber die Zellen haben untereinander keine Verbindung. Mit einem CSS Grid-Layout ist das anders, dort gibt es ein sogenanntes Grid-Template, das für den Bereich gilt.

..also du könntest theoretisch, je nach mQuery und dessen eingebundenen Grid-Content, Elemente des Header, Content usw. usf. neu positioniert in Form und Größe auch im Footer einbinden, ersetzen oder tauschen, ganz nach belieben wie du halt das Template-Grid entwirfst. Das geht mit Mobi nicht, denn das nutzt halt "maximal" Flexbox und da pfuscht dir dann weiterer Content, bei so einen Layout, an jeder Ecke dazwischen weil ja ebend, wie schon im Zitat beschrieben, du bei Flexbox-Grid - und mehr geht bei 1D_Grid nun einmal nicht - keine Verbindung zum nächsten Grid-Element herstellen kannst. Im Grunde genommen kannst du mit 1D-Grid nur Block-Template erstellen, mit 2D-Grid aber komplettes Side-Template, unabhängig vom weiteren Side Content wenn du mit Ebenen usw. trickst. Ich kann mir sogar vorstellen, dass 2D-Grid, bei komplexeren Seitenlayouts mit viel Grafik, den Seitenaufbau beschleunigt
Wink
Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#56
@ Tommy: Ich habe es bisher auch noch nicht geschafft, in einem CSS-Grid Columns/Flexbox Content einen Footer mit 4 Boxen, Breiten unabhängig der vorgegebenen Columns (sm-xl) über auto_Query bzw. manuell so positioniert hin zu bekommen, dass:

a.) ab Break1 -> 2x2 Boxen mittig untereinander angezeigt werden
b.) ab Break2 -> 4x1 Box mittig untereinander angezeigt wird.

Üblich ist:

a.) ab Break1 -> 3+1 Boxen mittig untereinander (mit Box Breitenbeschränkung Columns)
b.) ab Break2 -> 2x2 Boxen mittig untereinander (auch hier Breitenbeschränkung Columns)
c.) ab Break3 -> 4x1 Box mittig untereinander (auch hier Breitenbeschränkung Columns)

..mit 2D-Grid ist das kein Thema mehr, auch die Columns-Limited kann man ignorieren. Wink
Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#57
Hallo
noch eine kleine CSS Grid Spielerei von mir :D
TestCSSGridErweitert
Gruss Andy

Wer Rechtschreibfehler findet, darf sie behalten... oder melden
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#58
Moin,

ja - schon alles sehr interessant. Ich wollte ja mit meinem Beispiel auch nur zeigen, dass der Einbau in Mobirise absolut möglich ist.

Alle weiteren Details könnt ihr ja dann erfummeln :D


P.S.:

@Andy, Du hast einen Querscroller in Deinem Beispiel - da stimmt noch was nicht.

... und so sieht Deine Seite im IE11 aus:


.jpg  MS-Grid-Andy-IE11.JPG (Größe: 172,23 KB / Downloads: 8)
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#59
@ Tommy
ja der untere Teil ist noch nicht für IE 11 aufbereitet. Hatte ich gestern keine Zeit mehr für.
Gruss Andy

Wer Rechtschreibfehler findet, darf sie behalten... oder melden
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#60
Der obere Teil ist aber auch nicht ganz sauber für IE11 umgesetzt. Wink
Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren


Möglicherweise verwandte Themen...
Thema Verfasser Antworten Ansichten Letzter Beitrag
  Mega-Menü, Code im Footer stobi_de 4 316 02.06.2018, 11:08
Letzter Beitrag: AndyNeu
  Mobirise Footer & statische Hintergrundbilder Saghon 3 761 31.03.2017, 20:15
Letzter Beitrag: Doris Rehhausen
  Mobirise Footer Radi 5 620 21.03.2017, 15:26
Letzter Beitrag: Doris Rehhausen



Benutzer, die gerade dieses Thema anschauen: 1 Gast/Gäste
nach oben An den Anfang der Seite scrollen
NetObjects Fusion Infos, Downloads und Updates Diese Website wird durch Bot-Trap vor Spam geschützt!