Flüssiges Design eine "Gretchen" Frage...

Hallo Contaoianer,

einerseits werden die Bildschirme immer breiter 20 zoll++ und andererseits winzig, Netbooks et cetera(plus diverse Auflösungen). Überlege daher mein 4 Spalten Fluid-Design, in %, weiter zu verfolgen, obwohl das ja ursprünglich angedacht war, weil die Browser kein Zoom hatten. Auch wäre die Möglichkeit ein "Ganzseiten-Zoom" einzubauen(A A+ A-). Möchte 700 min bis 1100 max px abdecken, was ja mit Fluid gelöst wäre.

Nun haben ja fast alle Browser, inzwischen Zoom, leider habe ich begründete zweifel, bzw. Erkenntnisse gewinnen können, dass die meisten Leute immer noch das "Browser-Bild" hinnehmen wie es kommt und strg+/- usw. nicht zu kennen scheinen (und noch schlimmer, glauben dies ist das Betriebssystem und noch schlimmer, glauben Office ist das Betriebssystem usw., nicht zu fassen! :D). Sorry, nun aber zur Sache.

In den Vor-Überlegungen wäre mir wichtig, bevor ich da jetzt "Gas" gebe:

a) Eure Meinung grundsätzlich, zu Fluid in obigem Zusammenhang?

b) Ein wenig sieht es mir so aus, als ob das eingebaute Framework das nicht recht vorsieht und auch meine Bücher (in Zusammenhang mit Contao) auf 960 feste Breite abheben.

Ich würde dann ja auch das eingebaute Framework ad absurdum führen und erinnere gerade die Forums Warnung, "Wichtig für Beginner: Kein eigenes Template!"? Hmmm, "Statisches Layout" kann man ja abstellen.

Kann mir jemand einen Tipp geben? Übersehe ich nur was, oder muss man dann so vorgehen, ein neues template auf basis fe_page.tpl erstellen und umbenennen...?

Gruss Ria

PS. außerhalb von Contao funktioniert mein "Fluid", ich hadere nur immer noch etwas mit der Contao Bedienung. :o

Du kannst das ganze mit dem Standart fe_page.tpl umsetzen wie ich das sehe.
Einfach den Hacken bei "statisches Layout" rausmachen und dann kannst du das alles per CSS stylen wie du magst. Es gibt auch ein grid-System mit Prozentangaben .

Je nachdem welche Browser du unterstützen möchtest könnest du auch CSS3 Mediaqueries benutzen.

Das fe_page.tpl sollte trotzdem passen.

Hallo psren,

danke Dir, aber leider...

Zitat:

---

dann kannst du das alles per CSS stylen wie du magst.

---

Ich muss doch zunächst ein Standardlayout anlegen und kann höchstens 3 Spaltig sagen und kann nur der linken und rechten Spalte z.B. eine % Zahl geben. Was ist denn, wenn sich im Frontend das so darstellt:

Left 20%; Top-Feld 60%; Mitte Links 2%; Mitte Center 43%; Mitte Rechts 20%; Rechts 15%.

das Grid ist doch auch nur auf 960px ausgelegt, auch wenn ich das in % splitten kann. Blicke immer noch nicht durch.

Gruss Ria

Dein Problem lässt sich denke ich am besten lösen, indem Du ein 2-Spalten-Layout wählst und dieses dann intern per gridpc.css nochmals entzwei teilst. Die dritte Spalte oder in meinem Beispiel die andere Spalte passt sich automatisch dem noch zur Verfügung stehenden Platz an. Das gridpc.css ist übrigens nicht auf eine fixe Breite ausgelegt.

Zitat:

---

Zitat von Ria

a) Eure Meinung grundsätzlich, zu Fluid in obigem Zusammenhang?

---

Layouts mit %-Angaben habe ich noch nie verwendet, weil die Nachteile einfach überwiegen.
Bei kleinerem Bildschirm werden die Spalten immer schmaler, bis hin zu Überlappungen (besonders img's waren da ein sicherer Kandidat).

Seitenzoom verwende ich auch nie, weil es dann zu schnell horizontal scrollen muss.
Beim FF habe ich nur Text vergrößern eingestellt.
Ein vernünftiges Layout sollte mind. eine 2-3fache Textvergrößerung aushalten, sonst ist imho nicht flexibel genug gebastelt worden. ;)

Hallo,

erst mal besten Dank an alle. Ich werde mir das Grid einmal näher ansehen unabhängig von dem "Liquid". Da ich das Grid noch nicht kenne, wird es wohl ein paar Tage dauern.

Gruss Ria

Nett in diesem Zusammenhang scheint mir auch noch dieses Gridsystem: http://cssgrid.net

Fluid bis hin zu Mobilgeräten - gefiel mir ausserordentlich, als ich es neulich mal testweise mit Contao verheiratet hatte ... ;-)

Carolina.

HI Carolina

Gut zu wissen, das das geht, hatte ich nämlich gerade für heute auch auf der Agenda stehen. Dann baue ich mal flott drauf los :)
Ich glaube allerdings, das CSS kann man noch ein wenig zusammenfassen…

Sebastian

Zitat:

---

Zitat von Ria

erst mal besten Dank an alle. Ich werde mir das Grid einmal näher ansehen unabhängig von dem "Liquid". Da ich das Grid noch nicht kenne, wird es wohl ein paar Tage dauern.

---

du brauchst auch gar kein Grid verwenden.
Contao ist so flexibel, da kannst du das Framework in der fe_page.tpl, soweit ich weiss komplett abschalten.
Einfach unter Templates ein neues Template erstellen, als Zielverzeichnis die fe_page.tpl wählen und als Ort den templates-Ordner.
das mit dem framework löschen.
das müßte diese Zeile sein:

PHP-Code:

---

<?php echo $this->framework; ?>

---

Dann noch weiter unten das eintragen:

PHP-Code:

---

<?php echo $this->stylesheets; ?>
<link type="text/css" rel="stylesheet" href="tl_files/themes/dein-theme/bildschirm.css" media="screen" />
  <link type="text/css" rel="stylesheet" href="tl_files/themes/dein-theme/druck.css" media="print" />
     <!--[if lte IE 8]>
     <link rel="stylesheet" type="text/css" href="tl_files/themes/dein-theme/ie.css" media="screen" />
     <![endif]-->

---

das bringt deine eigene CSS inkl. Cond. Comment ins Spiel .

Noch weiter unten kannst du dann deine eigene Struktur festlegen. ;)

Falls das falsch sein sollte bitte ich die Experten um Korrektur! :)

Zitat:

---

Zitat von Sebastian

Ich glaube allerdings, das CSS kann man noch ein wenig zusammenfassen…

---

Und der Cond. Comment gehört üblicherweise unmittelbar vor </head> notiert, damit dessen Anweisungen nicht von weiter unten stehenden CSS-Dateien überschrieben werden können. ;)

Hallo zusammen,

An Raster auszurichten ist ja ein Bewährtes Mittel(Druckvorstufe). Ich versuche mich gerade einzulesen, zum Thema Grid bei Contao und sehe einen Vorteile bei Grid und zusätzlich bei Contao-Grid, durch sinngemäss diese Argumente:

"Inhaltselemente in einem Artikel erhalten grundsätzlich einen
Randabstand,bei Contao, im Gegensatz zu anderen Grid, die
den doppelten Randabstand vom ersten und letzten
verschachtelten Element jeder Zeile (oft „alpha“ und „omega“
genannt) abziehen. Wegen der „block“-Klassen ist in Contao ein
komfortableres vorgehen möglich."


Wobei ich zu letzterem mal eine Grundsatzfrage habe:

Auch wenn ich noch nicht alles verstanden habe, verstehe ich nicht, warum, bei Contao, kein g16 implementiert wurde bzw. ich erkenne den eventuell "zwingenden" Vorteil von g12 (noch) nicht.

Erhöht sich nicht sehr die Flexibilität in den Gestaltungsmöglichkeiten(Einteilungen), wenn ich z.B. ein Grid "g16"(oder mehr) hätte, womit die Seiten dann wohl auch gefälliger (nicht so eckig) aussehen könnten?

@ Carolina

Zitat:

---

als ich es neulich mal testweise mit Contao verheiratet hatte ... ;-)

---

Habe Deinen Link wahrgenommen, besten Dank, liest sich wie die "Eierlegendewollmilchsau". Habe nur erst mal den Verdacht, dass nur sehr eigeschränktes Design machbar ist?
Leider habe ich auch ein Problem mit dem "verheiraten", in Bezug Wahrnehmung der obigen Contaovorteile.

Finde ich im Netz zwar eine css Datei, z.B. auch für g16 (bzw. variable Grids) aber bisher keine DAU Anleitung oder Link dazu, was "verheiraten" mit Contao betrifft. Kannst Du dazu, oder wer auch immer, etwas mehr sagen (vielleicht ein Mini-TUT)?

Ich denke, diese Anpassungen sehen sicher immer gleich aus, wenn ich erst mal eine jeweilige(g16 usw.) css heruntergeladen habe?

@ wotank

danke auch Dir,was spricht denn gegen grid? Habe Grid-Sites im Netz gefunden denen man grid nicht ansieht.
Ich glaube auch, wenn ich es erstmal (voll) verstanden habe, Vorteile habe, insofern ich nicht ein totales extrem Design vorhätte. Zur Zeit bin ich noch in der Vorplanungsphase und habe letzte Woche erst mal meine Grafiken auf Vordermann gebracht, bin also noch offen für jedes Argument. Will nur nicht die Site 4 mal neu anfangen, sondern vorher nachdenken.

Gruss Ria

PS. Grid scheint hier im Forum (noch) ein Stiefkind zu sein, gibt es Gründe?

Ich würde eine fluide Seite basteln (mittels min/max-width). Zusätzlich mittels dem Modul "redirect" o.ä. eine extra Version für mobile Endgeräte (darunter verstehe ich keine Tablets - da ich es hasse, wenn ich mit meinem Galaxy Tab abgespeckter mobile Webseiten dargestellt bekomme).

Hallo,

kannes sein, dass man nur aus z.B. gridpc.css die Zeilen 48-63 in ein neues wie 1140.css reinkopieren muss und das war es etwa schon?

(also unabhängig davon wieviel Spalten)

@ Nils
im 1140 z.B. sind ja so Angaben mit drin:

Code:

---

.row {
width: 100%;
max-width: 1140px;
margin: 0 auto;
overflow: hidden;
}

---

usw...

Zitat:

---

eine extra Version für mobile Endgeräte

---

ja davon bin ich im Prinzip ausgegangen, aber ansehen kostet doch (hoffentlich) nicht soo viel Zeit.

ich möchte doch erstmal nur wissen ob für die Anpassung an contao grid "g12" auf ein beliebiges, Teil, nur die Zeilen 48-63 übernommen werden müssen, oder sonst noch was angepasst werden muss?

Gruss Ria

PS. bin mit dem Code nicht so fitt und dann noch ein neues CMS...:confused: