Erstes Layout mit oder ohne grid.css?
Hallo Contao Community,
ich beschäftige mich nun seit ca. einem Monat mit Contao und habe mein Anfänger(halb)wissen aus dem Video-Tutorial "Contao - Harry Boldt" und dem Buch "Mit Contao Webseiten erfolgreich gestalten - Thomas Weitzel". Um die Funktionsweise und Zusammenhänge von Contao kennen zu lernen sind beide Quellen sehr empfehlenswert. Soviel zu meinem Stand bezüglich der CMS.
Nun möchte ich meine erste Website mit Contao realisieren und bin ein wenig verunsichert, wie ich mein Standardlayout gestellten soll.
Meine Seite soll einen Header- und Footerbereich haben, die die gesamte Seitenbreite, also "width: 100%" ausfüllen. Desweiteren sollen im Footer vier Spalten nebeneinander positioniert werden.
Der Content-Bereich soll 1140px breit und zentriert ausgerichtet sein. Die 1140px werden wiederum in einer linken Mainspalte und einer rechten Spalte unterteilt.
Nun meine Fragen:
1. Soll ich ein zweispaltiges Layout in Contao erstellen und die Erweiterung "subcolumns" installieren, um meine Spalten im Footer auszurichten?
oder
2. Soll ich ein einspaltiges Layout erstellen und die grid.css Datei importieren?
3. Welche Variante ist moderner bzw. eleganter? Ein Layout mit oder ohne grid.css?
Vielen Dank in Voraus
I.B.
A 1140px wide, 12 column grid. Fluid
Ich habe nun das 1140 px CSS Grid von http://cssgrid.net/ genauer angeschaut. Da ja ein fluides CSS Grid gewünscht wurde.
Wie BugBuster angedeutet hat, muss man in den CSS Dateien folgendes ändern:
.container -> #wrapper
Und dann im fe_page template
ein <div class="row"> in den wrapper setzen.
Viel Spass
Grid mit 1140px - Fluid - erste Schritte mit Erfolg.
Hmm, ich habe das gerade ohne fe_page Änderungen angepasst.
Hatte mich an das original Prozent-Grid von Leo gehalten und versucht das zu adaptieren.
Mächtig Schwierigkeiten bekam ich wegen der mod_articel > .block margin 1%, das zerhaut die Prozent Werte.
Hab so das Gefühl, dass das Original nur für Artikel gedacht war, die 98% + 2x1% ergeben dort die 100%. Habe ich aber nach 1140er Logik ein g12 mit 100% und mache dann noch die Margins für die Artikel rein, Peng.
Konnte das aber, wenn auch aufwändig lösen.
Normale DIVs und Artikel DIVs funktionieren nun, inkl. der Fluid Funktionalität.
Sobald Zeit ist, werde ich das mal über eine MusicAcademy stülpen und schauen was passiert. Ich denke mal Chaos, wenn ich Lucina ihre Andeutungen richtig verstehe, aber man wird sehen. :D
Zur Zeit Teste ich das mit ein-zwei Seiten.
http://img6.imagebanana.com/img/qkxz...rozentGrid.png
Liste der Anhänge anzeigen (Anzahl: 1)
Hallo Ria,
siehe Screenshot.
Wenn man Kind-Elemente anlegt in der gleichen Schriftgröße wie die Elternelemente, dann zeigt einem das Tool, welche Größe man dann einträgt.
Erstes Layout mit oder ohne grid.css
Hallo ihr Spezies,
mit großem Interesse habe ich den Beitrag hier gelesen. Für mich soll es das erste Layout ohne irgend ein Template oder Vorlage werden, meine 3. Website. Ich habe das Buch von Herrn Weitzel hier vor mir liegen und wollte mich daran wagen ein CSS-Grid zu gestalten mit einer Größe von 1140 px (es sind mir 960px nicht mehr so angebracht). Mich reizen auch die Vorteile, wie ihr sie hier beschrieben habt, zu erhalten.
Ist es möglich, damit so ein Anfänger wie ich keine allzugroßen Fehler macht, eine Zusammenfassung/Anleitung von BugBuster gemachten Änderungen/Ergänzungen des Prozent-Grid von Leo Feyer (oder war es doch ein aderes?) zu erstellen? :o
Ich würde mich sehr freuen.
Viele Grüße
Monic49
Liste der Anhänge anzeigen (Anzahl: 1)
Hier ist mal meine Lösung für Sticky-Footer (Full-Height-Layout). Ist im Prinzip das gleiche wie auf http://www.cssstickyfooter.com/, nur angepasst an Contao bis 2.10.x und etwas anders aufbereitet. Vielleicht kommst du oder andere damit ja besser klar.
Der Footer muss auf jeden Fall eine festgelegte Höhe haben, sonst kann es das Layout zerschießen. max-height reicht hier nicht, du musst height verwenden. Zur Sicherheit könnte man dem Footer noch overflow:hidden geben, falls Kunden dort Inhalte einpflegen.
Da der Footer über dem Body liegt, wird ein Hintergrund des Footers den Hintergrund des Bodys überdecken.
Und wie BugBuster schon sagte, vergib IDs nur, wenn du ganz sicher bist, dass diese ID auf einer Seite nur einmal benutzt wird. Wie du selbst gezeigt hast, hat dein Markup ja schon eine ID
<div id="footer">
und den entsprechenden Selektor
#footer
Über welchen du den Container ansprichst und formatierst. Ich würde den Footer aber auch nicht über ein HTML-Modul, sondern einen Artikel einpflegen, dann hast du mit HTML nichts zu tun und bist auf der sicheren Seite. Allerdings verstehe ich auch nicht, warum du einen Footer als Modul anlegst, wo er doch schon im Framework enthalten ist.
Gruß Andreas
ps Die unterstrichenen Texte hier sind irgendwie nicht so gut. Unterstrichene Texte im Internet suggerieren immer 'ich bin ein Link'.
Liste der Anhänge anzeigen (Anzahl: 3)
Gleiche Frage... Grid oder normal mit gegebenen Mitteln von Contao
Zitat:
Zitat von
schman
Darf ich fragen warum du genau auf 1140px kommst?
Wenn du das Grid System verwenden willst dann wirst du das Prozent grid verwenden müssen, da das px auf 960px basiert (soweit ich weiß)
jetzt aber zurück zur Frage.
wenn jemand das CMS verwendet der sich mit CSS etc auskennt, dann verwende ich immer das Grid System ich finde es ist einfacher. Eine CSS Klasse eintragen und gut ist.
Wenn jemand das CMS betreut der nicht so versiert ist dann installiere ich xGrind bzw. Subcolumns, da kann man sich die Spalten zusammenklicken.
Hallo liebes Forum
Ich bin ebenfalls in der gleichen Lage und hab noch nicht so Erfahrung mit CSS. Mein Kunde ohne CSS Erfahrung muss nachher die Webseite betreuen können. Sollte ich das Design gridbasiert oder normal mit den gegebenen Mitteln von Contao lösen? Im Anhang 2 JPGs der Website. Danke für die Antworten