Erstes Layout mit oder ohne grid.css?

im... · 07.03.2011, 11:43

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.

**schman** · 07.03.2011, 12:02

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.

im... · 07.03.2011, 12:11

Ich habe versucht mich über Grid-Systeme schlau zu lesen. Dabei bin ich auf mehreren Seiten drauf gestoßen, dass die 960px Grid-Varitante veraltet und man lieber mit einem 1140px Grid-System arbeiten soll. Da ich allerdings Neuling in dem Bereich bin, kann ich das nicht beurteilen.

**BugBuster** · 07.03.2011, 12:31

Meinste das hier?
http://cssgrid.net/
A 1140px wide, 12 column grid. Fluid all the way down to a mobile version.

Habe ich mir auch schon angesehen, da ich 960px zu schmal halte heutzutage.

***lucina*** · 07.03.2011, 12:36

Das 1040er ist nett, funktioniert aber (zur Zeit) nicht ohne mehrere Templateänderungen. Ich weiß nicht, ob ich das jemandem empfehlen möchte, der gerade mit Contao beginnt.

Carolina.

im... · 07.03.2011, 12:38

Meinste das hier?
http://cssgrid.net/
A 1140px wide, 12 column grid. Fluid all the way down to a mobile version.

Genau, darauf bin ich gestoßen.

Allerdings bin ich mir nicht darüber im Klaren, wie anspruchsvoll es sein wird, es in Contao zu implementieren.

im... · 07.03.2011, 12:40

Zitat von lucina

Das 1040er ist nett, funktioniert aber (zur Zeit) nicht ohne mehrere Templateänderungen. Ich weiß nicht, ob ich das jemandem empfehlen möchte, der gerade mit Contao beginnt.

Carolina.

Wir haben wohl zeitgleich geschrieben. Damit ist meine Frage wie anspruchsvoll es sein wird beantwortet.

**BugBuster** · 07.03.2011, 13:19

Zitat von lucina

Das 1040er ist nett, funktioniert aber (zur Zeit) nicht ohne mehrere Templateänderungen.

Ich hatte eher im Kopf, das grid an Contao anzupassen, aber so tief habe ich mich damit noch nicht beschäftigt.

im... · 07.03.2011, 19:27

Könnt Ihr mir vielleicht ein wenig Hilfestellung geben, wie ich dieses Grid-System an Contao anpassen kann?

http://cssgrid.net/

Ich habe bereits in allen CSS-Dateien .onecol, .twocol usw. in .g1, .g2 usw. geändert.
Was muss noch geändert werden?

**BugBuster** · 07.03.2011, 20:04

Hmm, genau die hätte man nicht unbedingt ändern müssen.
Ansonsten müsste man aus .row ein #wrapper machen, denn die bekommt ja von Contao die Feste Breite durch das Layout. Dann fehlt aber der .container "drüber".
Da muss wohl doch an den Templates gebastelt werden.

Aber vielleicht könnte man ja das Grid von Leo nehmen (http://www.contao.org/herunterladen.html#css - das Prozent Grid) und auf 12 Spalten und die 1140px trimmen.

im... · 07.03.2011, 20:38

Aber vielleicht könnte man ja das Grid von Leo nehmen (http://www.contao.org/herunterladen.html#css - das Prozent Grid) und auf 12 Spalten und die 1140px trimmen.

Das habe ich jetzt mal versucht.

Code:

/* Basic configuration */
#wrapper
{	
	max-width: 1140px;
	margin: 0 auto;
	overflow: hidden;
}
.g1,
.g2,
.g3,
.g4,
.g5,
.g6,
.g7,
.g8,
.g9,
.g10
.g11
{
	float:left;
	margin-right:3.8%;
}
/* Widths */
.g1
{
	width:4.85%;
}
.g2
{
	width:13.5%;
}
.g3
{
	width:22.15%;
}
.g4
{
	width:30.8%;
}
.g5
{
	width:39.45%;
}
.g6
{
	width:48.1%;
}
.g7
{
	width:56.75%;
}
.g8
{
	width:65.4%;
}
.g9
{
	width:74.05%;
}
.g10
{
	width:82.7%;
}
.g11
{
	width:91.35%;
}
.g12
{
	width:100%;
	float: left;
}
/* Apply margin to content elements by default */
.mod_article>.block
{
	margin-right:1%;
	margin-left:1%;
}
/* Except if the article itself is floated */
.g1 .block,
.g2 .block,
.g3 .block,
.g4 .block,
.g5 .block,
.g6 .block,
.g7 .block,
.g8 .block,
.g9 .block,
.g10 .block,
.g11 .block,
.g12 .block
{
	margin-right:0;
	margin-left:0;
}
/* Reapply margin on nested grid elements */
.gr
{
	margin-right:2% !important;
}

**foil** · 12.03.2011, 23:53

Falls es jemand benötigt. Hier ist das 960 Pixel-Gridsystem angepasst auf 1140:

Code:

/* Basic configuration */
.g1,.g2,.g3,.g4,.g5,.g6,.g7,.g8,.g9,.g10,.g11,.g12 {
	float:left;
	display:inline;
	margin-right:10px;
	margin-left:10px;
}

/* Widths */
.g1 { width:75px; }
.g2 { width:170px; }
.g3 { width:265px; }
.g4 { width:360px; }
.g5 { width:455px; }
.g6 { width:550px; }
.g7 { width:645px; }
.g8 { width:740px; }
.g9 { width:835px; }
.g10 { width:930px; }
.g11 { width:1025px; }
.g12 { width:1120px; }

/* Apply margin to content elements by default */
.mod_article>.block {
	margin-right:10px;
	margin-left:10px;
}

/* Except if the article itself is floated  */
.g1 .block,.g2 .block,.g3 .block,.g4 .block,.g5 .block,.g6 .block,.g7 .block,.g8 .block,.g9 .block,.g10 .block,.g11 .block,.g12 .block {
	margin-right:0;
	margin-left:0;
}

/* Reapply margin on nested grid elements */
.gr {
	margin-right:20px !important;
}

**Sebastian** · 13.03.2011, 11:14

HI

Das ist jetzt aber nicht dynamisch breit wie das eigentliche 1140px-Grid.

Sebastian

**BugBuster** · 13.03.2011, 16:14

Ist aber auch nicht uninteressant.

im... · 13.03.2011, 17:19

Vieln Dank

**foil** · 15.03.2011, 22:52

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

**BugBuster** · 01.05.2011, 22:54

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.

Zur Zeit Teste ich das mit ein-zwei Seiten.

**Ria** · 12.05.2011, 18:39

Hallo fluid grid interessierte,

@ BugBuster

Zur Zeit Teste ich das mit ein-zwei Seiten.

keine Änderung in fe_page nötig, hört sich toll an. Bist Du inzwischen schon weiter gekommen?

Konnte das aber, wenn auch aufwändig lösen.

Wie sieht der Grid Code den man einbinden muss jetzt aus? Würde auch mich brennend interessieren.
(bekomme es nicht hin)

@ foil

das hört sich weiter oben aber viel komplizierter an, könntest Du dies noch etwas näher erläutern?
eine funktionierende Möglichkeit zu dem fluid grid würde mir natürlich reichen.

Wäre lieb, wenn Ihr mir da noch was auf die Sprünge helfen könntet.

Gruss Ria

**BugBuster** · 12.05.2011, 21:47

Hallo,
so langsam bekomme ich zweifel ob das alles sinnvoll ist.
Man baut sich dabei mächtig viel Einschränkungen ein.
Mein Grid funktioniert zum Beispiel nur dann, wenn in der Seite nur Artikel sind, diese dürfen aber auch nur untereinander sein.
Innerhalb des Artikels muss sich quasi alles abspielen.

Will ich eine HTML Modul und einen Artikel nebeneinander packen knallt es schon wieder, zum Beispiel um left nachzubauen egal wie hoch gerade main ist.

Vielleicht ist auch der Ansatz falsch, da muss ich wohl nochmal in mich gehen.

Nebenbei, der Fluid Anteil ist noch der einfachste Teil des Ganzen.

**Ria** · 14.05.2011, 15:44

Hallo BugBuster @ ALL,

Will ich eine HTML Modul und einen Artikel nebeneinander packen knallt es schon wieder

fals ich Dich richtig verstehen sollte, ich kann doch meine css-Grid-Klassen allen Inhaltselementen zuweisen und dann werden die Inhaltselemente in Spalten angezeigt.

Für die Gestaltung der einzelnen Elemente muss man in der Contaogrid.css weitere css Definitionen eintragen.
Mann kann ja auch mehrere Inhaltselemente in einer Spalte zusammenfassen.

Leider ist dies jetzt erst mein 2 Anlauf und bin da weiß Gott noch nicht durch.

Nebenbei, der Fluid Anteil ist noch der einfachste Teil des Ganzen.

hmm, na ja die Grid Änderung (siehe oben) hätte ich erst mal gerne gewußt um damit weiter testen zu können.

Bis jetzt habe ich nur bis .g12 { width:1120px; }

Kann ich denn die pixel in % Umrechnen also 1120px = 100% 75px =x oder habe ich da einen Denkfehler?

Zudem scheinen mir 12 Spalten auf 1120px zu wenig Design Spielraum. 16 Spalten wären da doch auch besser.

Wie rechnet man das dann hoch? Würde mich freuen, wenn sich mal ein Profi erbarmen würde.

Gruss Ria

**Ria** · 15.05.2011, 14:23

Hallo @ All,

habe jetzt zuerst mal für 16 Spalten ausgerechnet für Pixel. Die Spaltenbreite mit 55px angesetzt,
damit da ein kleineres (noch im Detail erkennbares) Bild in eine Spalte passt.
Den Zwischenabstand habe ich auf 16px gesetzt. Die einzelnen Breiten, finde ich so recht flexibel.

Reicht es jetzt eigentlich die Pixel in % umzurechnen?

Code:

/* Basis Konfiguration fuer 16 Spalten */

.g1,.g2,.g3,.g4,.g5,.g6,.g7,.g8,.g9,.g10,.g11,.g12,.g13,.g14,.g15,.g16{

float:left;

display:inline;

margin-right:8px;

margin-left:8px;

}

 /* Breiten */

.g1 { width:55px; }

.g2 { width:126px; }

.g3 { width:197px; }

.g4 { width:268px; }

.g5 { width:339px; }

.g6 { width:410px; }

.g7 { width:481px; }

.g8 { width:552px; }

.g9 { width:623px; }

.g10 { width:694px; }

.g11 { width:765px; }

.g12 { width:836px; }

.g13 { width:907px; }

.g14 { width:978px; }

.g15 { width:1049px; }

.g16 { width:1120px; } 

/* Standard Spaltenbreite */

.mod_article>.block {

margin-right:8px;

margin-left:8px;

}


.g1 .block,.g2 .block,.g3 .block,.g4 .block,.g5 .block,.g6 .block,.g7 .block,.g8 .block,.g9 .block,.g10 .block,.g11 .block,.g12 .block,.g13 .block,.g14 .block,.g15 .block,.g16 .block {

margin-right:0px;

margin-left:0px;

}

/* Abstand Grid Elemente */

.gr {

margin-right:16px !important;

}

Gruss Ria

PS. ich sehe im Moment keinen Fehler, falls es doch einen Denkfehler gibt bitte sagen.

**BugBuster** · 15.05.2011, 15:41

Kleiner Fehler, du kommst z.B. mit .g16 + 2x8 Pixel (Artikel-margin) bzw. 16 Pixel (.gr) nicht auf 1140 Pixel.

Oder 2x .g8 wäre: 552px + 2x8px + 552px +2x8px = 1136 px

Dir fehlen scheinbar überall 4 pixel zur Gesamtbreite, das du die margins von 10 auf 8 vermindert hast.

Ich hatte auch schon die Idee die Spaltenanzahl zu erhöhen, da mir bei dem 12er System und 1140 Pixel Gesamtbreite für eine Navi Spalte ein g2 zu mir zu klein und ein g3 zu groß ist.

**Ria** · 15.05.2011, 16:06

Hallo Bugbuster,

erstmals Dank für Deine Antwort.

Meine Gesamtbreite ist aber doch nur .g16 { width:1120px; } also 1120 px das wäre dann bei einem 19 Zöller passend.

Ach ja und mein Zwischenabstand (zwischen den Spalten) soll keine 20 sondern ja auch nur 16 px sein.

Oder liege ich immer noch falsch?

Gruss Ria

**BugBuster** · 15.05.2011, 16:46

Achso, na dann ist OK.

Ich versuche ja das Fluid Prozent Grid mit 1140 Pixel Breite auf Contao zu trimmen.
Mittlerweile bin ich hinter den "Trick" von LF seinem Prozent Grid gekommen.
Habe mal nun einen Neustart der Prozentwerte gestartet und der Art diese dann anzuwenden. Das Original von cssgrid hat da einen anderen Ansatz und mit dem bin ich immer kollidiert.
Mal sehen was draus wird.

**Ria** · 15.05.2011, 17:42

Hallo Bugbuster,

ja eigentlich bin ich auf das hier erklärte raus:

http://www.pm-webdesign.de/das-1140p...tail-erklaert/

also das von Andy Taylor:

http://cssgrid.net/ und dann aber mit 16 Spalten. Und dann an contao angepasst.

Bei kleineren Monitoren passt es sich automatisch an die Auflösung an.
Mit Hilfe von CSS3 Media Queries ist die Anzeige auf mobilen Endgeräten problemlos möglich.

letzteres wäre ja der Punkt an sich!

(gut, die 1140px wären mir dann egal) Das Umrechnen bekäme ich ja vielleicht noch hin (Taschenrechner)

Aber die contao Anpassung halt? Bin da halt mal wieder etwas "blöd"

Gruss Ria

**Ria** · 16.05.2011, 15:42

Hall @ ALL,

habe jetzt mal meins von oben von Pixel umgerechnet in % :

Code:

/* Basis Konfiguration fuer 16 Spalten in %, bei urspruenglich 1120px Bildschirmbreite */

.g1,.g2,.g3,.g4,.g5,.g6,.g7,.g8,.g9,.g10,.g11,.g12,.g13,.g14,.g15,.g16{

float:left;

display:inline;

margin-right:0.7 %;

margin-left:0.7 %;

}

 /* Breiten */

.g1 { width:4.8 %; }

.g2 { width:11.0 %; }

.g3 { width:17.3 %; }

.g4 { width:23.5 %; }

.g5 { width:29.8 %; }

.g6 { width:36.0 %; }

.g7 { width:42.3 %; }

.g8 { width:48.5 %; }

.g9 { width:54.8 %; }

.g10 { width:61.0 %; }

.g11 { width:67.3 %; }

.g12 { width:73.5 %; }

.g13 { width:79.8 %; }

.g14 { width:86.0 %; }

.g15 { width:92.3 %; }

.g16 { width:98.6 %; } 

/* Standard Spaltenbreite */

.mod_article>.block {

margin-right:0.7 %;

margin-left:0.7 %;

}


.g1 .block,.g2 .block,.g3 .block,.g4 .block,.g5 .block,.g6 .block,.g7 .block,.g8 .block,.g9 .block,.g10 .block,.g11 .block,.g12 .block,.g13 .block,.g14 .block,.g15 .block,.g16 .block {

margin-right:0 %;

margin-left:0 %;

}

/* Abstand Grid Elemente */

.gr {

margin-right:1.4 % !important;

}

Wobei mir allerdings aufgefallen war, das ja alle Schrift-CSS-Angaben bei contao in Pixel sind.
Passt das überhaupt?

Müsste nicht im Body der css die Schriftgröße auf 100.01% stehen? Oder in em? Und alle anderen angepasst werden, bei so einem flexiblem Layout?

Sorry, stehe da gerade auf der Leitung, sind da nicht Pixelwerte genauso veraltet wie Tabellen?
Irgendwie bin ich da jetzt verunsichert.

Gruss Ria

**BugBuster** · 16.05.2011, 18:32

Ich habe ähnliche % Werte. Hab ne Weile gebraucht um zu erreichen, das 2x g8 (inkl. margins) = g16 ist, 2x g4 = g8 usw., das muss ja alles passen.
Hier mal meine Werte.

Code:

/* Style sheet 1140pxgridv2_16 */
.g1,.g2,.g3,.g4,.g5,.g6,.g7,.g8,.g9,.g10,.g11,.g12,.g13,.g14,.g15,.g16
{float:left;display:inline;margin-right:1%;margin-left:1%;}
.g1{width:4.25%;}
.g2{width:10.5%;}
.g3{width:16.75%;}
.g4{width:23%;}
.g5{width:29.25%;}
.g6{width:35.5%;}
.g7{width:41.75%;}
.g8{width:48%;}
.g9{width:54.25%;}
.g10{width:60.5%;}
.g11{width:66.75%;}
.g12{width:73%;}
.g13{width:79.25%;}
.g14{width:85.5%;}
.g15{width:91.75%;}
.g16{width:98%;}
.mod_article>.block{margin-right:1%;margin-left:1%;}
.gr{margin-right:2% !important;}

Und ja, die Schriften sind dann in em (bei mir). Ich habe das auf eine MusicAcademy gestülpt und fange nun an einige Core Module in den CSS Angaben anzupassen.

Das sieht dann so aus derzeit: (Bild ist verkleinert)

**Ria** · 17.05.2011, 01:18

Hallo Bugbuster,

Hab ne Weile gebraucht um zu erreichen, das 2x g8 (inkl. margins) = g16 ist, 2x g4 = g8 usw., das muss ja alles passen.

da sagst Du was und oh jemineh, da stimmt bei mir was nicht, da fehlt ca. 1 Pixel ich glaube weil das krumme Zahlen hinter dem Komma waren(mal unabhängig davon das ich die 1120 Breite habe). Dann könnte ich ja vielleicht doch auch 1140 nehmen, wenn sich die Breite dem Monitor anpasst.

Und ja, die Schriften sind dann in em (bei mir). Ich habe das auf eine MusicAcademy gestülpt und fange nun an einige Core Module in den CSS Angaben anzupassen.

Da ergeben sich für mich noch Fragen normal wäre ja 1 em = 16px, habe aber auch schon gelesen es wären 13.
Wie hast Du gerechnet?

Bleiben Bilder in PIXEL?

Vielleicht könnte, oder sollte, man eine minimale Breite vorgeben?

Ach ja an die Module habe ich auch noch nicht gedacht. Mal unabhängig von dem Grid gefragt, warum sind die ganzen Werte, bei Contao, nicht grundsätzlich in em sondern in pixel, aus Tradition?

Und mal was anderes, gibt es nicht Ärger bei jedem Update von Contao, das bleibt doch bei Pixel?

Gruss Ria

**BugBuster** · 17.05.2011, 12:14

Zitat von Ria

Da ergeben sich für mich noch Fragen normal wäre ja 1 em = 16px, habe aber auch schon gelesen es wären 13.
Wie hast Du gerechnet?

Bisher gar nicht, aber das erklärt, warum die Schrift größer geworden ist.

Mir gings bisher aber erstmal nur um das Grid und die Art der Anwendung.

Zitat von Ria

Bleiben Bilder in PIXEL?

Ja, ganz normal mit width und height. Durch eine CSS Angabe aus dem Fluid Design erreicht man, das die sich automatisch anpasst bei Größenänderung

Code:

img, object, embed {
max-width: 100%;
}
img {
	height: auto;
}

Coole Sache das.

Zitat von Ria

Und mal was anderes, gibt es nicht Ärger bei jedem Update von Contao, das bleibt doch bei Pixel?

Ich ändere ja nicht die Module selbst sondern die CSS Angaben (music_academy.css)
Die CSS Dateien bekommen bei mir auch andere Namen, schon um die unterscheiden zu können und wegen Multidomain Installation.

**Ria** · 17.05.2011, 15:51

Hallo BugBuster,

danke für die Erläuterungen.

Durch eine CSS Angabe aus dem Fluid Design erreicht man, das die sich automatisch anpasst bei Größenänderung

Du meinst Deinen Code einfach in die Grid-CSS mit unten dranhängen?
Das wäre wirklich cool wenn das dann klappt.

Das mit der Schriftgröße muss man wohl mal austesten, damit bei einem kleineren Monitor das noch passt.

Gruss Ria

**BugBuster** · 17.05.2011, 21:50

Normalerweise sollte das hier gelten:

Code:

/*
EM - PX zum kopieren oder nachschauen
10px = 0.625em
12px = 0.75em
14px = 0.875em
16px = 1.0em
18px = 1.125em
22px = 1.375em
26px = 1.625em
body { font-size: 100.01%; } wegen BrowserBugs nicht vergessen.
*/

Letzteres (100.01%) macht Contao in der contao.css

Es gibt da aber auch die Methode, 1em auf 10px zu setzen, rechnet sich einfacher:

Code:

* { font-size: 1em; } /* don't edit */
html { font-size: 62.5%;} /* don't edit */

Jetzt gilt grundsätzlich:
1 em = 10 px, basiert aber auch drauf das 1em vorher 16px waren.

Code:

body {font-size:1.12em } /* edit here for global size in em, 1em=10px */

Daher habe ich auch noch eine dritte Variante gefunden:
Mit font-size im body-Tag legt man fest, wie groß 1em ist.

Code:

body {
font-size: 10px
}

In diesem Beispiel wär 1em also genau 10px groß/lang, was auch immer.

Per default läuft bei mir also grad die erste Variante.
Mit den beiden anderen müsste man mal experimentieren.

Achtung: Vererbung

Da Schriftgrößen in CSS vererbt werden und es sich bei em um eine relative Einheit handelt, sollte die Vererbung nicht vergessen werden. Bei verschachtelten Elementen kann diese nämlich ganz schön blöd aussehen.

PS: Nette Sache: http://fordinteractive.com/code/emchart/ -> EmChart Demo
PS: Schöne Übersicht: http://www.1ngo.de/web/em.html

**planepix** · 18.05.2011, 08:29

noch 2 hilfreiche Links zum Thema:

px2em:
http://pxtoem.com/

em-Kalkulator, der auch die Vererbung mit anzeigt:
http://riddle.pl/emcalc/

***lucina*** · 18.05.2011, 08:33

Und wem das mit den relativen Fontgrößen immer noch zu unübersichtlich ist, der beschäftige sich mit http://snook.ca/archives/html_and_cs...-size-with-rem

;-)

**Ria** · 18.05.2011, 15:29

Hallo,

auf einem normalen 19 Zöller, im FF, sieht die Basis ganz brauchbar aus. Muss das aber noch mal auf einem Windows Rechner ansehen:

Code:

<body>
<link rel="stylesheet" type="text/css" href="styles.css">



<style type="text/css">
<!--
     #test
    {
	font: 100.01%/1.5 "Helvetica Neue", Helvetica, Tahoma, Arial, sans-serif;*/
}

h1, h2, h3, h4, h5, h6
{
	line-height: 1.2;
	font-family: Georgia, Constantia, "Lucida Serif", Lucida, serif;
}

h1 { font-size: 0.9em; }
h2 { font-size: 0.8em; }
h3 { font-size: 0.8em; }
h4 { font-size: 0.8em; }
h5 { font-size: 0.7em; }
h6 { font-size: 0.6em; }

.container
{
	font-size: 40%;
	text-transform: uppercase;
}
-->
</style>

<div id="test">Dies ist ein Probetext und die Normalschrift nach obigem CSS.</div>

<div id="test"><h1>Dies ist ein Probetext um festzustellen wieviel em passen könnten. Dies ist die h1 nach obigem CSS.</h1></div>

<div id="test"><h2>Dies ist ein Probetext um festzustellen wieviel em passen könnten. Dies ist die h2 bis h4 nach obigem CSS.</h2></div>

<div id="test"><h5>Dies ist ein Probetext um festzustellen wieviel em passen könnten. Dies ist die h5 nach obigem CSS.</h5></div>

<div id="test"><h6>Dies ist ein Probetext um festzustellen wieviel em passen könnten. Dies ist die h6 nach obigem CSS.</h6></div>

</body>
</html>

das übertrage ich dann mal in die basic.css von der Academy und mache dann da weiter.

@ lucina + Thomas

besten Dank für die Links!

@ Thomas

der auch die Vererbung mit anzeigt:

stehe wohl mal wieder neben mir, wie meinst Du das mit der Vererbung anzeigt?

Gruss Ria

**planepix** · 18.05.2011, 15:34

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.

**Ria** · 18.05.2011, 19:01

Hallo Thomas,

danke Dir, hatte diese winzigen Pfeile oder wie man es nennen sollte, nicht als anklickbar erkannt.

Gruss Ria

**Monic49** · 24.05.2011, 09:53

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?

Ich würde mich sehr freuen.
Viele Grüße
Monic49

**BugBuster** · 24.05.2011, 13:00

Hallo Monic49,

ich überlege schon ne Weile wie ich meine bisherigen Ergebnisse und Beispiele veröffentliche. (und zur Diskussion stelle)
Derzeit arbeite ich innerhalb von Contao2Go. Das rauszugeben per download will ich aber nicht, auch habe ich keine Lust (und Stefan/lindesbs warscheinlich auch nicht) das ich ihm wöchtentlich ein Update rüberschiebe.

Eher wahrscheinlich ist es, dass ich auf einer Subdomain das ganze präsentiere und soweit es geht auch dort dokumentiere.
Oder die Doku im Wiki und die Demo dazu auf der Subdomain von mir.

Mittlerweile scheine ich das Prinzip von Leo verstanden zu haben :-)
Die Grid Klassen zu definieren ist ja noch einfach, bei der Anwendung muss man dann schon wieder aufpassen.

Und mittlerweile konnte ich Lucina's Einwand, nicht ohne Template Änderung, schon nachvollziehen. Zwar geht es ohne Änderung der fe_page.tpl, aber beispielsweise bei der gallery_default.tpl muss man Hand anlegen . Grund sind die <table> Strukturen darin.

**Monic49** · 24.05.2011, 16:25

Hallo BugBuster,
toll dass du es so vervollkommnen möchtest und dann doch vorstellen möchtest - egal wie.
Ich freue mich drauf.
Viele Grüße
Monic49

**Andreas** · 24.05.2011, 20:17

Zitat von schman

...
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.

Ich wollte auch mal was dazu sagen und nehme einfach mal schmans Aussage als Aufhänger.

Ich finde ihr doktort hier an einer Sache herum, die doch eigentlich schon längst gelöst ist, und zwar durch YAML http://www.yaml.de/de/dokumentation/...templates.html.

Der Unterschied zwischen dem Contao Grid und den Subcolumns besteht nicht nur aus Klickiklacki. Ihr versucht hier durch einfache Vergabe von Klassen und den entsprechenden CSS-Eigenschaften eine stabile Spaltenanordnung zu schaffen. Aber das Extra-Markup der Subcolumns ist ja nicht so zum Spaß vorhanden, sonder um eine browserübergreifende Stabilität und Fexibilität zu erreichen.

Ok, YAML ist mittlerweile evtl. etwas oversized, da es sich immer noch um alle möglichen Browser kümmert, auch die ganz alten. Aber auch dazu macht man sich dort Gedanken und eine Version 4 ist schon in Planung. Ich persönlich würde mir z.B. eine abgespeckte Version wünschen, welche die alten Browser und Exoten nicht mehr berücksitigt.

Wenn ihr allerdings ein ausgereiftes, stabiles, browserübergreifendes, flexibles (Beispiel equal heights) Spaltenlayout wollt, kommt ihr um die YAML-Lösung mit dem Bisschen Extra-Markup wohl nicht herum. Wenn ihr doch eine Möglichkeit finden solltet mit dem einfach Einfügen einer Klasse in das bestehende Contao-CSS-Framework gleiches zu erzielen, würdet ihr wohl tatsächlich das Layouten revolutionieren.

Gruß Andreas