Standard CSS Vorlage neue Contao Seite oder Best Practices Contao CSS

Hey Leute!

Vielleicht (hoffentlich) gibts da schon irgendwas: Ich würde gerne die allgemeine Herangehensweise an eine neue Contao Seite in punkto CSS / Layouting herausfinden.

Klar, ich erstelle eine Seitenstruktur, ein neues Template, Module, Layout mit Bereichen etc. Dann lege ich eine CSS Datei an, die ich in das Layout einer Seite einbinde. Jetzt gehts los:

- Wie lege ich die Breite meiner Seite fest? Ich hab das bisher immer ungefähr so gemacht:

Code:

---

  .inside {
    max-width: 1000px;
    margin: 0 auto;
  }

  /********************************************************/
  header .inside {
    color: white;
    min-height: 94px;
    background-image: url('../img/header_bg.png');
    background-repeat: no-repeat;
    margin-top: 20px;
  }

  /********************************************************/
  #main .inside {
    border: 2px dashed #aaa;
    padding: 6px 8px 10px 10px;
    margin-top: 2px;
    min-height: 500px;
  }

---

ist das die richtige herangehensweise? passt das dann auch in hinblick auf responsive eigenschaften? wie macht ihr das?

links zu tutorials oder schritt-für-schritt anleitungen zum verständnis eines allgemeinen layoutaufbaus wären super!

danke für die tipps schonmal! :)

Das wird sich pauschal nicht beantworten lassen, da die Möglichkeiten von internen Layoutbuilder-Layouts bis ganz speziellen Eigenkonstruktionen reichen können.

Am besten sagst oder skizzierst Du mal was Du erreichen möchtest, dann gibt es bestimmt Vorschläge und Empfehlungen wie die Umsetzung erfolgen kann …

Zitat:

---

Zitat von humpdi

[...]
Klar, ich erstelle eine Seitenstruktur, ein neues Template, Module, Layout mit Bereichen etc. Dann lege ich eine CSS Datei an, die ich in das Layout einer Seite einbinde. Jetzt gehts los:

- Wie lege ich die Breite meiner Seite fest? [...]

---

Meinst du das jetzt rein technisch, also z.B. "Wie mache ich es, dass meine Seite 960 Pixel breit ist?"
Oder meinst du das eher aus Designersicht: Ich habe die und die Inhalte, muss dies und das auf der Seite unterbringen. Nehme ich jetzt am besten eine feste Breite und wenn ja welche - oder nutze ich die Breite, die das Browserfenster mir bietet. Einspaltig oder mehrspaltig - oder gleich ein Grid?

eher technisch, aber vermutlich vermischt sich beides.

mich würde eher interessieren welchen ansätzen der aufbau des autmatischen markups von contao folgt. ist es so gedacht, das die .inside wrapper die breite der seite halten, wenn sie eine fixe breite hat? welche elemente bekommen margin und paddings? etc...

gibts da auf irgendeinem blog ein tutorial wo exemplarisch gezeigt wird, wie gehe ich vor wenn ich ein fullpage layout umsetzen will, wie gehe ich vor wenn mein layout eine fixe breite hat?

die .inside divs bekommen in jedem Fall eventuelle paddings und borders. Die "äußeren" divs wie z.B. #main bekommen die Breite zugewiesen. Wenn du das mit dem Layout-Builder machst, dann kannst du da im Seitenlayout ja direkt eine feste Breite in px oder eben eine prozentuale Breite (in % :) ) einstellen. Dadurch, dass man paddings und borders auf das innere div anwendet, behält das äußere div seine vorgegebene Breite, was vor allem wichtig ist, wenn man mehrere Spalten hat, sonst zerschießt es einem leicht mal das Layout ;). Wenn du mal versuchst, für eine Spalte 20% + 20px padding + 4px border irgendwie zu reservieren, dann wirst du feststellen, dass es nicht so einfach ist, diese Breite z.B. bei der benachbarten Spalte als margin einzustellen :D.

Ich kann dir dazu z.B. das Buch "Einstieg in CSS" von Peter Müller empfehlen. Mir persönlich sind Bücher lieber. Aber sicher findet sich auch online die eine oder andere Ressource.

Zitat:

---

Zitat von humpdi

gibts da auf irgendeinem blog ein tutorial wo exemplarisch gezeigt wird, wie gehe ich vor wenn ich ein fullpage layout umsetzen will, wie gehe ich vor wenn mein layout eine fixe breite hat?

---

Kein Tutorial, aber schau dir http://pmueller.de an. Das ist ein FullPage Header mit Contao und ich benutze dabei eine feste Breite von 960px (wegen 12-Spalten-Grid).

Noch ein Frage die aufgetaucht ist: Wenn ich eine Seitenleiste im Seitenlayout aktiviere, dann habe ich (in etwa) folgenden Aufbau:

Code:

---

<body>
  <header>
    <div class="inside"></div>
  </header>
  <div id="container">
    <div id="main"></div>
    <aside id="right"></aside>
  </div>
</body>

---

Normalerweise weise ich meinem .inside nun eine feste Breite zu, damit die Wrapper drumherum die ganze Seitenbreite nutzen und der tatsächliche Inhalt mit sagen wir zB einer Breite von 1024px mittig zentriert ist. Wie mache ich das nun für das #container Element?? Da habe ich ja nun nicht mehr automatisch ein .inside div darin, sondern die Elemente liegen gleich direkt drin. Das kann ich natürlich so nicht gebrauchen, wie gehe ich da vor??

Freu mich auf eure Antworten! :)

EDIT: Mir ist gerade eingefallen, dass eine Möglichkeit wäre, das Seitentemplate fe_page anzupassen. Bin trotzdem gespannt auf Alternativen!?

EDIT2: Ahh, ich habs! Man muss alles über das Seitenlayout steuern. Eine feste Breite im Seitenlayout zuweisen, dann wird ein Wrapperelement innerhalb des Bodys hinzugefügt. Easypeasy ;)

EDIT3: Naja doch nicht ganz, das macht noch immer Probleme mit der Platzaufteilung des #main Bereichs und der Seitenleiste, zudem geht der Inhalt jetzt über den Rand der Seitenleiste hinaus... Also vielleicht doch das Template anpassen.

Du hast in deiner Strukturübersicht den #wrapper vergessen ;)

Du möchtest ein Full-Page-Layout, bei dem sich Header und Footer über die Breite des Browserfensters erstrecken?

Dann gibst du die (feste) Breite direkt an #container.

Zitat:

---

#wrapper auf width:auto, damit sich #header und #footer über die gesamte Breite ausdehnen.

#header .inside,
#container,
#footer .inside {
min-width: 768px;
max-width: 960px;
margin: 0 auto;
}

---

siehe: https://community.contao.org/de/show...=1#post248350: