Zusätzliches Div

Druckbare Version

31.05.2013, 15:45
Generic1

Zusätzliches Div

Hallo,

ich habe noch eine Schwierigkeit bzgl. den div- Containern. Ich habe mein Beispiel mal ohne Contao gemacht in Netbeans, welches so aussieht:

HTML-Code:

<div id="wrapper"> <div id="threeIntroColumns" class="mod_article row-fluid block"> <div class="ce_text span4 block"></div> <div class="ce_text span4 block"></div> <div class="ce_text span4 block"></div> </div> </div>

und ich hab #wrapper -> max-width: 100% und die Background-color gesetzt und #threeIntroColumns -> max-width: 1300px; gemacht. Dann hab ich über die gnaze Bildschirmbreite die Hintergrundfarbe gehabt und die span4 haben sich nur bis 1300px "ausgedehnt".

Das wollte ich jetzt mit Contao nachstellen, hab einen Artikel erstellt und 3 Texte hinein gegeben. Das schaut dann so aus:

HTML-Code:

<div class="inside">  <div id="threeIntroColumns" class="mod_article row-fluid block">  <div class="ce_text span4 block"></div>  <div class="ce_text span4 block"></div> <div class="ce_text span4 block"></div> </div> </div>

Durch diese HTML- Struktur hab ich keine Möglichkeit, dass ich das so mache wie oben. Wenn ich die Hintergrundfarbe auf inside setze, dann ist der ganze Browser- Hintergrund mit der Farbe belegt, wenn ich die Hintergrundfarbe auf #threeIntroColumns setzte und den Browser maximiere, dann ist die Hintergrundfarbe nur 1300px (max-width) breit.

Meine einfache Frage wäre jetzt, wie kann ich beim Artikel einen zusätzlichen div- Kontainer einziehen bzw. wie kann ich das lösen?

Vielen Dank!!
lg
Generic1
31.05.2013, 17:52
KlausGrenoble

Ist zwar nicht üblich, aber Du kannst ja das Template fe_page.html5 anpassen. Im BE "Templates" / Neues Template / fe_page.html5 + Zielverzeichnis=Projektordner / Umbenennen in z.B. fe_mypage.html5 / Datei bearbeiten / Sollte eigentlich der richtige Weg sein...
01.06.2013, 10:52
Generic1

Vielen Dank für Deine Antwort.
Ich habe versucht das zu machen, bin aber am letzten Schritt - das anzupassen - gescheitert.
So schaut ja der Code aus unten.

Ich vermute mal, ich muss da was machen:

HTML-Code:

<div class="inside"> <?php echo $this->main; ?> </div>

aber reicht es wenn ich da nur ein weiteres div hinzufüge so wie unten?
Und wie kann ich dieses neue Template dann in meinem Artikel verwenden - hab leider noch sehr wenig Idee von einem Template.
Vielen Dank für Hilfe!!

lg
Generic

HTML-Code:

<div class="inside"> <div id="myNewDivID"> <?php echo $this->main; ?> </div> </div>

HTML-Code:

<!DOCTYPE html> <html lang="<?php echo $this->language; ?>"> <head> <meta charset="<?php echo $this->charset; ?>"> <title><?php echo $this->pageTitle; ?> - <?php echo $this->mainTitle; ?></title> <base href="<?php echo $this->base; ?>"> <meta name="robots" content="<?php echo $this->robots; ?>"> <meta name="description" content="<?php echo $this->description; ?>"> <meta name="keywords" content="<?php echo $this->keywords; ?>"> <meta name="generator" content="Contao Open Source CMS"> <?php echo $this->viewport; ?> <?php echo $this->framework; ?> <?php echo $this->stylesheets; ?> <?php echo $this->mooScripts; ?> <?php echo $this->head; ?>  </head> <body id="top" class="{{ua::class}}<?php if ($this->class): ?> <?php echo $this->class; ?><?php endif; ?>"<?php if ($this->onload): ?> onload="<?php echo $this->onload; ?>"<?php endif; ?>> <div id="wrapper"> <?php if ($this->header): ?> <header id="header"> <div class="inside"> <?php echo $this->header; ?> </div> </header> <?php endif; ?> <?php echo $this->getCustomSections('before'); ?> <div id="container"> <div id="main"> <div class="inside"> <?php echo $this->main; ?> </div> <?php echo $this->getCustomSections('main'); ?> </div> <?php if ($this->left): ?> <aside id="left"> <div class="inside"> <?php echo $this->left; ?> </div> </aside> <?php endif; ?> <?php if ($this->right): ?> <aside id="right"> <div class="inside"> <?php echo $this->right; ?> </div> </aside> <?php endif; ?> </div> <?php echo $this->getCustomSections('after'); ?> <?php if ($this->footer): ?> <footer id="footer"> <div class="inside"> <?php echo $this->footer; ?> </div> </footer> <?php endif; ?> </div> <?php echo $this->mootools; ?> <?php if (!$this->disableCron): ?> <script src="<?php echo TL_ASSETS_URL; ?>assets/contao/js/scheduler.js?t=<?php echo $this->cronTimeout; ?>" id="cron"></script> <?php endif; ?> </body> </html>
01.06.2013, 12:48
Generic1

So, habs jetzt mit einem zusätzlichen Module in mod_article gelöst - klappt super!!
Vielen Dank nochmal für den Hinweis!!!

lg
Generic1
01.06.2013, 15:19
Generic1

OK, da war noch eine kleine Unzulänglichkeit drinnen.
Es haben dann natürlich alle Artikel- Module die gleiche ID.

Das hab ich jetzt so gelöst wie unten.
Meine Frage wäre jetzt noch, ob das ein legitimer Ansatz ist oder ob es da wieder jemanden die Nackenhaare aufstellt :-)
Besten Dank für Hinweise.

lg
Generic1

HTML-Code:

<div id="articleModuleWrapper<?php echo substr($this->cssID, 5, -1) ; ?>"> <div class="<?php echo $this->class; ?> block"<?php echo $this->cssID; ?><?php if ($this->style): ?> style="<?php echo $this->style; ?>"<?php endif; ?>> <?php if ($this->printable): ?>  <div class="pdf_link"> ...
02.06.2013, 02:15
dtptiger

Hallo,

ich kann zwar nicht helfen, würde aber gerne erfahren wozu das Modul-Konstrukt dienen soll?

Gruss dtptiger
02.06.2013, 06:26
Generic1

Ich möchte 2 div- Kontainer haben:

HTML-Code:

<div id="aussen"> <div id="innen"> </div> </div>

Damit kann ich #aussen eine width von 100% geben und eine Hintergrundfarbe und #innen eine max-width und die selbe Hintergrundfarbe.
Damit wird das Element in #aussen #innen nur bis max-width vergrößert aber die "Hintergrundfarbe" ist trotzdem über den ganzen Bildschirm zu sehen.

Das ist der Hintergrund dieses Konstruktes -> es klappt auch ganz gut so - ich frage mich nur, ob man das so machen soll/kann/darf oder ob es da noch eine andere/elegantere Lösung gibt.

Besten Dank,
lh
Generic1
02.06.2013, 09:44
kayyy

Zitat:

Zitat von Generic1

ich frage mich nur, ob man das so machen soll/kann/darf oder ob es da noch eine andere/elegantere Lösung gibt.

Man macht es so ;)
03.07.2016, 12:52
MacPix

Ich habe derzeit das gleiche Problem. Ich möchte auch noch ein div mehr aber vor den Artikeln. So dass man mehrere Artikel in ein zusätzliches Div packen kann.

Jetzt bin ich so weit, dass ich in jedem Attiken am Anfang ein (html element mit <div class="inside2">) und am Ende ein (html element mit </div>).
Ist so weit so gut. Aber das div ist im Artikel innen und nicht gerade vor dem Artikel.
NEXTES Problem wenn ich dies so mache.
Jetzt möchte ich mehrere Artikel nebeneinander floaten, dann stehe ich da schon an. Dazu brauche ich die einzelnen Elemente im Artikel um mit klasse und Listen, Tabellen, usw. zu versehen.

Einige Seiten habe ich schon gesehen die dies so machen, aber nur im html Aufbau zu schauen, weiss ich leider noch nicht wie diese dies umgesetzt haben.

Hat da jemand einen guten Tip.
Wenn es nicht verständlich war kann ich versuchen dies Bildlich zu zeigen.

Danke
03.07.2016, 23:17
mlweb

Zitat:

Zitat von MacPix

Ich möchte auch noch ein div mehr aber vor den Artikeln. So dass man mehrere Artikel in ein zusätzliches Div packen kann.

Jetzt bin ich so weit, dass ich in jedem Attiken am Anfang ein (html element mit <div class="inside2">) und am Ende ein (html element mit </div>).
Ist so weit so gut. Aber das div ist im Artikel innen und nicht gerade vor dem Artikel.

Wenn Du die oben beschriebene Template-Anpassung durchgeführt hast, dann bekommst Du ein zusätzliches div um den Artikel gelegt.

Zitat:

Zitat von MacPix

Jetzt möchte ich mehrere Artikel nebeneinander floaten, dann stehe ich da schon an. Dazu brauche ich die einzelnen Elemente im Artikel um mit klasse und Listen, Tabellen, usw. zu versehen.

Ich weiß beim besten Willen nicht, was Du genau vorhast.
Zum Floaten von Artikeln versiehst Du mod_article mit einer bestimmten Breite und entsprechenden Abständen und weist die Eigenschaft float left oder right zu.
Falls nicht alle Artikel gefloatet werden sollen, verwendest Du eine eigene Klasse und vergibst die o.a. Eigenschaften bei dieser. Die eigene Klasse kannst Du beim Artikel im Backend unter Experten-Einstellungen eingeben.
Wenn Du Klassen für Inhaltselemente vergeben willst, dann kannst Du das ebenfalls im Backend unter Experten-Einstellungen erledigen.

Poste uns doch mal einen Link zur Seite und den Code vom angepassten Template dann kann man etwas Konkretes dazu sagen.
04.07.2016, 08:51
MacPix

Liste der Anhänge anzeigen (Anzahl: 1)

Wenn ich diese angepassten template floate, geht dies nicht, da diese Artikel nur einzel im div sind das die breite der page ergibt.
Im Bild so sollte es mit den divs gehen. Das rot gezeichnet würde ich gerne ein div haben.
04.07.2016, 09:19
Spooky

Warum genau brauchst du das? Das klingt eher so, als würdest du die jeweiligen Artikel eher in einen eigenen Layout Bereich geben wollen.
04.07.2016, 09:29
MacPix

Liste der Anhänge anzeigen (Anzahl: 3)

Zitat:

Zitat von Spooky

Warum genau brauchst du das? Das klingt eher so, als würdest du die jeweiligen Artikel eher in einen eigenen Layout Bereich geben wollen.

Ich möchte die Page einer pro Artikel eine ganze Breite Hintergrundfrarbe oder Bild.
Und mehrere Artikel mit gleicher voller Hintergrundfarbe, und die Artikel sollten neben einander Sein.

In den Bilder siehst das Ergebnis, bei der page ist es auch so das html strukturiert.
http://preview.premium-contao-themes...on-slider.html
04.07.2016, 09:33
Spooky

Habe es noch immer nicht verstanden. Der blaue Bereich ist ja ein einzelner Artikel. Warum genau musst du jetzt mehrere Artikel mit irgendwas wrappen?
04.07.2016, 09:48
MacPix

Der blaue ist auch in viel mehr div's als normal

Und genau vor dem Artikel mod_article articlewrapper-id_808 even block noch ein inside div...
04.07.2016, 09:50
Spooky

Zitat:

Zitat von MacPix

Der blaue ist auch in viel mehr div's als normal

Ja, aber da ist einfach ein einzelner Artikel mit zwei weiteren divs gewrapped, mehr nicht. Das kannst du ja ganz einfach mit einer Änderung im mod_article Template machen. Die Struktur ist dann ungefähr folgende:

HTML-Code:

<div class="articlewrapper"> <div class="inside"> <div class="mod_article">  </div> </div> </div>
04.07.2016, 09:58
MacPix

ok finde ich gute Idee
nur wenn ich mehrere Artikel in den selben Artikeltrapper packen muss?
04.07.2016, 10:12
Spooky

Das geht nicht, daher auch meine Frage warum du das brauchst. Es hört sich so an, wie wenn du einfach den Inhalt in einen einzelnen Artikel geben willst.
04.07.2016, 10:51
MacPix

ja em
ich möchte gerne auch zB Headers ganz breite Browserfenster und die Artikel nur max 960px. Oder der Background Fensterbreite und Inhalt nur 960px.
Ich frage mich auch, warum machen die dann dies auch so? Die Pages die dies haben.
04.07.2016, 10:57
Spooky

Zitat:

Zitat von MacPix

ich möchte gerne auch zB Headers ganz breite Browserfenster und die Artikel nur max 960px. Oder der Background Fensterbreite und Inhalt nur 960px.

Ja, dann mach das so. Aber warum genau will du jetzt bestimmte Artikel mit einem Element wrappen?

Zitat:

Zitat von MacPix

Ich frage mich auch, warum machen die dann dies auch so? Die Pages die dies haben.

Was genau meinst du jetzt?
04.07.2016, 11:03
MacPix

ja darum brauch ich dies ja so.

Sorry ich weiss nicht wie Zitieren hier geht bei mir nicht, oderbesser ich weiss nicht wie. sorry

Ja wie soll ich wie bei der Beispielspage zB das Team machen ? da brauche ich ja genau dies.
04.07.2016, 11:06
Spooky

Auf der Beispielpage ist der Bereich "Team" ein einzelner Artikel.
04.07.2016, 11:18
tab

Insofern wäre eine mögliche Lösung wohl, einen Wrapper um zusammengehörende Inhaltselemente zu machen. Da gibt es meines Wissens Erweiterungen um sowas zu machen, geht das nicht z.B. mit semantic_html5? Notfalls geht es natürlich auch mit der Hand am Arm per Template.
04.07.2016, 11:32
Spooky

Ja, im Falle von PCT sind das aber eigene Inhaltselemente für das Grid.
04.07.2016, 11:55
tab

Das ist natürlich die komfortabelste Version. :)
08.07.2016, 22:09
MacPix

Ich werde es mal anschauen mit dem Grid.
Wenn ich noch andere Lösung komme, lasse ich euch dies wissen.
09.07.2016, 01:25
Andreas

Sieh dir auch dma_simple_grid an https://github.com/DMAGmbH/dma_simple_grid. Auch übers ER2 zu installieren.
09.07.2016, 09:20
MacPix

Zitat:

Zitat von Andreas

Sieh dir auch dma_simple_grid an https://github.com/DMAGmbH/dma_simple_grid. Auch übers ER2 zu installieren.

Danke. Habe es kurz überflogen, dass muss ich mir genauer anschauen.

Schönes Weekend und danke der Tips
Grüsse
11.07.2016, 12:47
dazzle89

Es gibt bestimmt, wenn auch selten, Situationen, bei denen man einen Wrapper um mehrere Artikel braucht... Allerdings fällt mir keine Lösung dafür ein.

Wenn du z.B. vorhast, Inhalte zu floaten und sie mit einem clearfix-Container zu clearen, ist das eigentlich nur mit Inhaltselementen möglich. Der Wrapper ist dann der Artikel oder du erstellt ihn per HTML-Inhaltselement.

Falls ich grad keinen Denkfehler habe, könnte man natürlich auch einen Layoutbereich erstellen, der die gewünschten Artikel enthält und als Container dient? Umständlich, aber vermutlich eine Lösung.
11.07.2016, 13:00
MacPix

Zitat:

Zitat von dazzle89

Es gibt bestimmt, wenn auch selten, Situationen, bei denen man einen Wrapper um mehrere Artikel braucht... Allerdings fällt mir keine Lösung dafür ein.

Wenn du z.B. vorhast, Inhalte zu floaten und sie mit einem clearfix-Container zu clearen, ist das eigentlich nur mit Inhaltselementen möglich. Der Wrapper ist dann der Artikel oder du erstellt ihn per HTML-Inhaltselement.

Falls ich grad keinen Denkfehler habe, könnte man natürlich auch einen Layoutbereich erstellen, der die gewünschten Artikel enthält und als Container dient? Umständlich, aber vermutlich eine Lösung.

em ich hab mir so viele Beispielsweise angeschaut. Wenn ich mich nich irre aber diese immer so mehrere div's.

Was man machen kann, ist aber sehr aufwendig gerade bei grossen Seiten.
Man kann diverse Artikel in ein Modul mit Anfangs und Ende das gewünschte div packen. Ist sehr aufwendig und wenn der Kunde alleine ein Artikel hinzufügen will, muss es das seht umständlich machen. Die sind meist schon mit den normalen Artikel überfordert.

Ausschnitt aus einem Modul und dies im Artikel einbauen.

HTML-Code:

<div class="log-nav-header"> <div class="inside-container"> {{insert_article::18}} {{insert_article::5}} {{insert_article::50}} {{insert_article::67}} </div> </div>

Sehr umständlich.
11.07.2016, 13:10
Andreas

Zitat:

Zitat von dazzle89

...Wrapper um mehrere Artikel ... Allerdings fällt mir keine Lösung dafür ein...

Habe sowas noch nie gebraucht und kann mir auch nicht vorstellen, dass ich das brauche, aber es gibt schon so einige Lösungen dafür.

1. Einen Artikel zum Öffnen und einen zum Schließen erstellen. Diesen ne entsprechende Klasse geben. Im Template die Klasse abfragen und das Markup entsprechend manipulieren.

2. Dem ersten und letzten Artikel entsprechende Klassen geben, diese mit JS suchen und einen Wrapper setzen.

3. Wie 2. nur nicht mit JS sondern im Template.
11.07.2016, 13:19
MacPix

Zitat:

Zitat von Andreas

Habe sowas noch nie gebraucht und kann mir auch nicht vorstellen, dass ich das brauche, aber es gibt schon so einige Lösungen dafür.

1. Einen Artikel zum Öffnen und einen zum Schließen erstellen. Diesen ne entsprechende Klasse geben. Im Template die Klasse abfragen und das Markup entsprechend manipulieren.

2. Dem ersten und letzten Artikel entsprechende Klassen geben, diese mit JS suchen und einen Wrapper setzen.

3. Wie 2. nur nicht mit JS sondern im Template.

Gute Ideen. Danke
Hast du evt für Beispiel 1 -- ein Beispiel wie man dies umsetzen kann.

Wart ich such mir mal die Seite, warum ich denke ich brauche dies.
Moment bitte
11.07.2016, 13:23
dazzle89

Deine Idee mit dem Modul finde ich gar nicht so schlecht und habe ich auch schon öfters so gemacht, allerdings mit Inhaltselementen statt mit Artikeln. z.B. im Footer, wenn Adresse, Sitemap, Copyright usw. jeweils eine Spalte bilden sollen und man spezielles Markup herum benötigt und den Redakteur nicht mit irgendwelchen HTML-Elementen verwirren will :D

Bei Artikeln spricht dann bestimmt auch nichts dagegen, solange es funktioniert.
11.07.2016, 14:17
Andreas

Zitat:

Zitat von MacPix

Hast du evt für Beispiel 1 -- ein Beispiel wie man dies umsetzen kann.

~~Ungetestet~~ das hier ganz oben ins Template mod_article

PHP-Code:

<?php $classes = explode(' ', $this->class); if(in_array('open-wrapper', $classes)) { echo 'ich bin nur ein opening wrapper'; return; } if(in_array('close-wrapper', $classes)) { echo 'ich bin nur ein closing wrapper'; return; } ?>

Mit Insert-Tags zu arbeiten ist fast immer eine schlechte Idee, besonders in diesem Fall.
11.07.2016, 14:51
MacPix

Bin noch am gute Beispiele suchen. Rech schwierig dass ich mich gut ausdrücken kann.

was ich allerdings gesehen habe bei einigen. Die Nehmen den Artikel und Stehen alle Inhaltselemente mit divs.
Finde ich nicht so gut. Denn wenn ich dort alle Mitarbeiter drin habe und für hetzen 4-5 Inhaltselemente brauche. Wenn ich einer Ausschalten will oder ein neuer kommt oder geht, ist es einfachen pro Mittarbeiter einen Artikel.

Ich suche noch eine Seite die, die Artikel wrappert.
bin dran.
11.07.2016, 14:52
MacPix

Zitat:

Zitat von Andreas

~~Ungetestet~~ das hier ganz oben ins Template mod_article

PHP-Code:

<?php $classes = explode(' ', $this->class); if(in_array('open-wrapper', $classes)) { echo 'ich bin nur ein opening wrapper'; return; } if(in_array('close-wrapper', $classes)) { echo 'ich bin nur ein closing wrapper'; return; } ?>

Mit Insert-Tags zu arbeiten ist fast immer eine schlechte Idee, besonders in diesem Fall.

Cool ich werde mir das anschauen und ausprobieren in einer Testinstallation. Danke
11.07.2016, 15:11
MacPix

Liste der Anhänge anzeigen (Anzahl: 1)

Schwierig ein guten Beispiel aber hier vielleicht eines..

http://preview.premium-contao-themes...mepage-v5.html
11.07.2016, 15:20
Spooky

Das ist ja das selbe wie vorher. Auch hier ist das nicht so gelöst, wie deine Anforderung.
11.07.2016, 17:28
Andreas

Oh man, ich hasse diese Onepage-Seiten mit diesen blöden Scrolldown-Effekten, wird Zeit, dass dies wieder aus der Mode kommt.

Was du mal machen kannst ist, uns eine Seite zeigen, wo du deine normalen Artikel und CEs drauf hast und dann erzählen, was wie aussehen soll. Evtl. findet man da eine einfache Lösung, wie du überhaupt keinen Wrapper benötigst.
11.07.2016, 17:31
MacPix

Zitat:

Zitat von Andreas

Oh man, ich hasse diese Onepage-Seiten mit diesen blöden Scrolldown-Effekten, wird Zeit, dass dies wieder aus der Mode kommt.

Was du mal machen kannst ist, uns eine Seite zeigen, wo du deine normalen Artikel und CEs drauf hast und dann erzählen, was wie aussehen soll. Evtl. findet man da eine einfache Lösung, wie du überhaupt keinen Wrapper benötigst.

Ok ich verstehe.
Ich mache eine Skizze teils am Computer und von Hand. lade es dann hoch. So ist es hoffe ich gut. Wird aber morgen, muss leider gehen. DANKE
12.07.2016, 21:04
MacPix

Liste der Anhänge anzeigen (Anzahl: 5)

Gelöst getestet bei Version 3.5.14

Also
Erst mal DANKE an alle die mir Gedankenanstosse gegeben haben. SUPER

Ich habe es so gelöst:

1. Zwei neue Template angelegt (Bild2 Übersicht)
- mod_article_wrapp_end (Bild3) mit Inhalt das mod_article kopiert und nur das gelassen wie im Bild
- mod_article_wrapp_start (Bild4) mit Inhalt das mod_article kopiert und nur das gelassen wie im Bild

2. Zwei Hautpartikel mit den jeweiligen richtigen Template ausgewählt (Bild6)

3. Diese auch so platziert dass die gewünschten Artikel (Bild7) im Sandwich der 2 Artikel sind.

Man kann die Class und ID auch mod_article_wrapp_start setzt so kann man diese auch per CSS ansteuern.

Mit nur diesen 2 Artikeln und gewünschten Class und ID kann man beliebig viele Verschachtlungen machen. Sozusagen ausserhalb den gegeben Artikel von Contao.

Hoffe es hilft euch auch
Danke der Infos.
Grüsse Marco
12.07.2016, 23:39
Andreas

Ja, ist doch ne gute Lösung. Pass aber auf, dass du dir keine doppelten IDs im FE baust, wenn du da so oft das Feld CSS-ID ausfüllst. Du kannst die CSS-Klasse "article-wrapper" ja auch direkt ins Template für den Start schreiben.
13.07.2016, 00:06
MacPix

Zitat:

Zitat von Andreas

Ja, ist doch ne gute Lösung. Pass aber auf, dass du dir keine doppelten IDs im FE baust, wenn du da so oft das Feld CSS-ID ausfüllst. Du kannst die CSS-Klasse "article-wrapper" ja auch direkt ins Template für den Start schreiben.

Ja danke dir, waren gute Hinweise die mich zu der Lösung gebracht haben.

Beim Template Start habe ich am Schluss noch ein <div class="inner2"> und beim endtemplate das </div> so habe ich auch wider einen inner für abstände.

Ja die klasse habe ich so gelassen dass man dies einfacher reinschreiben kann, wenn man verschiedene hat. Klar hast recht wenns nur eine ist wäre es sinnvoll auch im Template direkt.

Grüsse aus Zürich