Wie "Section's" mit Contao umsetzen?

[Planz]

Hallo zusammen,

Gerne würde ich den Trend von, ich nenne es mal "Section's", wie die CSS Klasse auf der folgenden Seite, in einer meiner Seiten umsetzen. Als beispiel hier diese Seite aarnis.com, damit ihr versteht was ich überhaupt meine.

Hier der Grund für den Namen
Unbenannt.PNG

Eigentlich möchte ich nicht das Ganze Contao Template abändern müssen. Jedoch kann ich au nicht mit den vorhandenen CSS-Klassen arbeiten. Da für jede Seite nur eine Klasse (mod_article) erstellt wird.

Hat da jemand Erfahrungen mit dieser Art Design?

Danke und Entschuldigung für die ungenaue Beschreibung!

Gruss


PS: Wie nennt man diese Art Design denn richtig?

[do_while]

Wenn ich Dich richtig verstanden habe, meinst Du eine "OnePageWebsite".

Dann schau mal hier:
https://community.contao.org/de/show...ktur-erstellen
https://community.contao.org/de/show...-Kurzanleitung

[andreasisaak]

Du kannst auch einfach die Extension "semantic_html5" verwenden. Es muss ja nicht immer ein OnePager sein

[Spooky]

In Contao könntest du es folgendermaßen machen, wenn du weiterhin die Seite mit dem #wrapper zentrieren willst (unabhängig davon ob du OnePageWebsite und semantic_html5 einsetzt oder nicht). Im fe_page template brauchst du einen zusätzlichen wrapper außen herum, zB #outer_container. Dann den Artikeln eine section class geben und alternierend zusätzlich noch bspw. ein gray. dazu.

<div id="outer_container">

<div id="wrapper">
...
<div id="main">
    <div class="inside">
        <article class="section">...</article>
        <article class="section gray">...</article>
        <article class="section">...</article>
        <article class="section gray">...</article>
        <article class="section">...</article>
    </div>
</div>
...
</div>

</div> 

Beispiel für CSS:

#outer_container {
    width:100%;
    overflow-x:hidden;
}

.section {
    padding-top:2em;
    padding-bottom:2em;
}

.gray {
    background:#c4d5e2;
    margin-left:-200%;
    margin-right:-200%;
    padding-left:200%;
    padding-right:200%;
} 

Der negative margin von .gray erstreckt das Element einfach ganz weit über den #wrapper hinaus, das padding wirkt dem wieder entgegen. #outer_container schneidet den overflow-x ab.


Siehe auch https://community.contao.org/de/show...l=1#post282791

[Planz]

Dankeschön für die schnellen Antworten!

Es ist nicht unbedingt eine OnePageWebsite gemeint. Mehr die Sektionen welche sich über die ganze Breite ziehen und mit unterschiedlicher Farbe hinterlegt sind.

Diese Extension "semantic_html5" hört sich sehr interessant an. Jedoch muss ich ja auf jedenfall diesen Zusatz Container ins Template einfügen, damit ich die HTML-Sections über die ganze Breite strecken kann.

Gruss Planz

[andreasisaak]

Nein du musst kein Template anpassen wenn du semantic_html5 verwendest

[tblumrich]

Hi.

Ich überlege schon die ganze Zeit warum du nicht die "mod_article" Bereiche dafür nehmen kannst? Die können doch auch 100% breit sein und wenn du die darin befindlichen Inhaltslelemente zentrierst, sollte das auch kein Problem sein.

Sowas ähnliches hatte ich mal hier gebaut... da hab ich keine Extra Extension benutzt oder Templates geändert.

Gruß
Thomas

[Planz]

Hi.

Ich überlege schon die ganze Zeit warum du nicht die "mod_article" Bereiche dafür nehmen kannst? Die können doch auch 100% breit sein und wenn du die darin befindlichen Inhaltslelemente zentrierst, sollte das auch kein Problem sein.

Sowas ähnliches hatte ich mal hier gebaut... da hab ich keine Extra Extension benutzt oder Templates geändert.

Gruß
Thomas

Das geht bei dir weil wohl da du eine OnePageSeite hast. Somit hast du ja die Verschiedenen Seiten (mod_articel's) in eine Seite hineingezogen. Daher hast du mehr als ein mod_article.
Ich kriege nur ein mod_article pro Seite. Und kann daher meinen Content nicht in Sektionen unterteilen.

Das interessante an semantic_html5 finde ich ist, dass man den Content in beliebig viele Sektionen unterteilen kann.

[Planz]

In Contao könntest du es folgendermaßen machen, wenn du weiterhin die Seite mit dem #wrapper zentrieren willst (unabhängig davon ob du OnePageWebsite und semantic_html5 einsetzt oder nicht). Im fe_page tempalte brauchst du einen zusätzlichen wrapper außen herum, zB #outer_container. Dann den Artikeln eine section class geben und alternierend zusätzlich noch bspw. ein gray. dazu.[php]<div id="outer_container">

hmm... irgendwie haut das nicht hin. Verstehe ich das richtig, das Padding & Margin +-200% soll die Sektion über die ganze Breite ziehen? Oder wie soll das funktionieren, dass sich die Sektion über die ganze Breite zieht?

<div id="outer_container">
  <div id="wrapper">
        <div id="container">
             <div id="main">
                  <div class="inside">
                         <section class="ce_semantic_html5">...</section>
                  </div>
              </div>
         </div>
    </div>
</div> 

#outer_container {
    width:100%;
    clear:both;
}

#wrapper {
    max-width:1125px;
    margin:0 auto;
}

.ce_semantic_html5 {
    padding-right:200%;
    padding-left:200%;
    margin-right:-200%;
    margin-left:-200%;
} 

[andreasisaak]

Was auch immer du da tust, das HTML passt so gar nicht. Es fehlt der Artikel

[Spooky]

hmm... irgendwie haut das nicht hin. Verstehe ich das richtig, das Padding & Margin +-200% soll die Sektion über die ganze Breite ziehen? Oder wie soll das funktionieren, dass sich die Sektion über die ganze Breite zieht?

<div id="outer_container">
  <div id="wrapper">
        <div id="container">
             <div id="main">
                  <div class="inside">
                         <section class="ce_semantic_html5">...</section>
                  </div>
              </div>
         </div>
    </div>
</div> 

#outer_container {
    width:100%;
    clear:both;
}

#wrapper {
    max-width:1125px;
    margin:0 auto;
}

.ce_semantic_html5 {
    padding-right:200%;
    padding-left:200%;
    margin-right:-200%;
    margin-left:-200%;
} 

Für #outer_container bräuchtest du noch

#outer_container {
    width:100%;
    overflow-x:hidden;
} 

Hatte ich im ursprünglichen Post vergessen.

Die Section sollte sich auf insgesamt 500% der Breite der Section selbst aufziehen dadurch, ja. Dem .ce_semantic_html5 wrapper dieses CSS zu geben macht aber nicht viel Sinn imho, vergib dem Wrapper lieber eine eigene Klasse.

[tblumrich]

Das geht bei dir weil wohl da du eine OnePageSeite hast. Somit hast du ja die Verschiedenen Seiten (mod_articel's) in eine Seite hineingezogen. Daher hast du mehr als ein mod_article.
Ich kriege nur ein mod_article pro Seite. Und kann daher meinen Content nicht in Sektionen unterteilen.

Ich verstehs trotzdem nicht... (kann natürlich an mir liegen)
Du kannst das doch auch machen... mehrere Artikel pro Seite. Das wären dann deine Sektionen...

Oder gehts um die semantischen Bezeichnungen?

Gruß
Thomas

[Planz]

Hallo zusammen,

Ich grüble immer wieder wie diese Contao-Seite mehrere mod_article pro Seite bekommt.
Unbenannt.png
Wie muss ich das mod_article.html5 Template anpassen?
Ich benötige dies, damit ich die verschiedenen Inhalte auch wie auf dieser Seite mit einer anderen Farbe hinterlegen kann.

Vielen Dank für eure Hinweise
Gruss

[andreasisaak]

Einfach mehrere Artikel anlegen?!?!

[fabil]

Hallo zusammen,

Ich grüble immer wieder wie diese Contao-Seite mehrere mod_article pro Seite bekommt.

Schau mal hier, da wird dir erklärt, wie man mehrere Artikel pro Seite anlegt:-)

http://www.contao-handbuch.de/einen-...l-anlegen.html

Googlen hilft oft bei sowas;-)

[Spooky]

Hallo zusammen,

Ich grüble immer wieder wie diese Contao-Seite mehrere mod_article pro Seite bekommt.
Unbenannt.png
Wie muss ich das mod_article.html5 Template anpassen?
Ich benötige dies, damit ich die verschiedenen Inhalte auch wie auf dieser Seite mit einer anderen Farbe hinterlegen kann.

Vielen Dank für eure Hinweise
Gruss

Ja, wie schon erwähnt kannst du in der Artikel Übersicht einfach mehrere Artikel pro Seite anlegen . Diese Seite löst dieses "Sections" Problem anders: nicht der Wrapper zentriert den Content, sondern bspw. folgende CSS Anweisung:

#container #main .article_background > div {
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    ...
} 

Alle Artikel die eine Section repräsentieren sollen haben hier die Klasse .article_background und alle direkten Children (oder zumindest div-Children) davon werden mit max-width:960px und margin:0 auto zentriert.

[flexx]

... weil sie nicht beantwortet wurde.

Die Frage war wie es sein kann, dass es auf dieser Seite http://wwwloxone.com zwei ineinander verschachtelte mod_articles geben kann.

<div class="article_background mod_article lightgrey_content">
    <div class="mod_article lightgrey_content block" id="home">
      <h2 class="ce_headline bigline"><span>Hausautomation</span> endlich einfach</h2>
            <div class="ce_text block">

Der erste mod_article geht über die volle Breite der Seite und färbt den Hintergrund grau über die Klasse lightgrey_content.
Der zweite mod_article innerhalb dieses mod_articles ist nun auf 960px breite beschränkt. offenbar durch diese css Anweisung:

#container #main .article_background > div { 
    width: 100%; 
    max-width: 960px; 
    margin: 0 auto; 
    ...

Wie man den article also auf 960px beschränkt ist klar.
Aber wie bekommt man den mod_article Außen rum, der über die ganze Breite geht und den Hintergrund unterschiedlich einfärbt?
Im fe_page einen neuen Container mit der Klasse .article_background herum legen dürfte ja nix bringen, da der Hintergrund hier ja immer wahlweise anders eingefärbt werden soll.

Kann hier bitte jemand Licht ins Dunkel bringen?

[andreasisaak]

Die Frage war wie es sein kann, dass es auf dieser Seite http://wwwloxone.com zwei ineinander verschachtelte mod_articles geben kann.

Weil Artikel keine geschützten Elemente sind. Du kannst doch mit der Extension semantic_html5 oder eigenem HTML-Code soviele Divs mit der Klasse mod_article anlegen wie es dir beliebt.

[flexx]

Vielen Dank für die schnelle Antwort, aber ich glaube wir reden aneinander vorbei.
Natürlich kann ich mehrere Divs im Template fe_page anlegen.
Aber nur dem, in Contao erstellten Artikel innerhalb meiner Seite kann ich doch z.B. flexibel eine spezielle Klasse mitgeben, die z.B. den Hintergrund bei jedem Artikel wahlweise anders einfärbt.
Jetzt müsste es ja noch einen zweiten Artikel, innerhalb dieses Artikels geben, der dann die Inhaltselemente enthält und auf 960px begrenzt und zentriert ist. So wie das auf der Beispielseite ja auch gemacht wurde.
Und das geht ja eben nicht.
Dies ist mein Problem und offenbar auch das von Planz.

Wahrscheinlich könnte man vor jeden Artikel einen Artikel mit eigenem HTML Code legen mit einem offenen Div und dort 100% breite und die Hintergrundfarbe einstellen, dann darunter den wirklichen Artikel mit Inhaltselementen und danach wieder einen Artikel um das div zu schließen aber dies ist zum Einen sehr umständlich und kann ich vor allen Dingen meinen Editoren nicht zumuten.

Im Prinzip würde ich gerne wissen wie es auf der Beispielseite gelöst wurde. Wenn es nur auf diese umständliche Art und Weise möglich ist - gut - dann ist das keine Option für mich.
Aber ich habe die feste Hoffnung, dass das auch irgendwie anders mit Contao Bordmitteln zu lösen sein muss. oder?

[andreasisaak]

Vielen Dank für die schnelle Antwort, aber ich glaube wir reden aneinander vorbei.
Natürlich kann ich mehrere Divs im Template fe_page anlegen.

Ich rede nicht von dem fe_page Template. Ich meine das man Artikel auch ohne Probleme verschachteln kann. Man muss nur die richtige Extension dafür verwenden.

[flexx]

Aha. Also wirklich aneinander vorbei geredet.
Ich wollte die Sache mit den unterschiedlichen Hintergrundfarben über die gesamte Breite ohne Extension lösen, denn diese würde sich ja auf die gesamte Contao INstallation auswirken und auf dieser habe ich noch andere Webprojekte an denen Editoren mit arbeiten und die ich mit so etwas nicht konfrontieren wollte.
Ich dachte eben an eine Lösung ausschließlich für die Webseite unter einer Startpunkt.

Du meinst also, diese Optik ist nur mit einer Extension zu lösen? Auf der Beispielseite wurde das auch so gemacht?

[DanDo]

Ist zwar schon ein paar Tage her, aber ich würde das Thema gerne nochmal aufrollen.

Wenn ich es richtig verstanden habe funktioniert die Umsetzung mit den hauseigenen Mitteln von Contao nicht ? Und mit der ce_semantic_html5 würde das funktionieren ?

Bei der Seite wird auch diese Technik eingesetzt rockstroh-drums.de

Ich möchte einfach mehere divs mit unterschiedlichen Farben über die gesamte Breite haben, ohne diese in der fe_page fest zu hinterlegen.

[andreasisaak]

Wenn ich es richtig verstanden habe funktioniert die Umsetzung mit den hauseigenen Mitteln von Contao nicht ? Und mit der ce_semantic_html5 würde das funktionieren ?

Ja, einfach installieren und mal ausprobieren. Passiert schon nix