Inhaltselement -> HTML

Hallo.

Ich benötige bitte Hilfe bei einer Herausforderung die ich leider nicht lösen kann.


Folgender Sachverhalt:

Ich würde gern im HTML Code eines Inhaltselementes den Code für ein Hintergrundbild hinzufügen, da ich es leider nicht schaffe das Bild über CSS einzufügen.
Meine Programmierkenntnisse sind auf Anfängerniveau, bitte korrigiert mich falls ich zu umständlich denke, oder gar etwas machen möchte, dass vielleicht gar nicht geht...


Das Inhaltselement ist im Rocksolid-Theme (Tao) integriert "Icon-Boxen drehend" und bietet im Backend leider keine Möglichkeit ein Bild einzufügen (anders als beim Inhaltselement Text zB.).
Ebenso kann ich den einzelnen Boxen keine eigene Class oder ID zuweisen...

Meine Überlegung war, dass ja Contao irgendwo den HTML Code generieren muss, der den Aufbau der Seite ausmacht. Wenn ich nun diese Datei finden würde, könnte ich dort das Bild über <style> einfügen!?!


Hier der Link zur Website:
http://www.papers.co.at/testserver/p...angen-abc.html


Wenn ich im Developer-Tool vom Browser in der Zeile <span class="rotating-boxes-item-cover" style="background-image: url("xyz")......> reinschreibe, dann funktioniert es.

Versuche ich es allerdings über die Styles, dann schaffe ich es leider nicht mal, dass alle "Drehboxen" das gleiche Bild haben (geschweige denn, dass jede ein eigenes bekommt).

Code:

---

.rotating-boxes-item-cover {
        background-image: url(files/tao/img/Bilder/fotolia_89032478.jpg);
}

---

dieser Code wird dann zu:

Code:

---

.rotating-boxes-item-cover {
        background-image: url("../../files/tao/css/files/tao/img/Bilder/fotolia_89032478.jpg");
}

---

was ich nicht ganz verstehe warum....
Allerdings glaub ich, dass es ohne Class oder ID für die jeweilige Drehbox, kein individuelles Bild einstellbar ist.


Gibt es eine Möglichkeit mein Vorhaben durchzuführen und wie weit liege ich mit meinem Lösungsweg über HTML daneben? :)

Vielen lieben Dank im Voraus!

Zitat:

---

Zitat von Llywellyn

Das Inhaltselement ist im Rocksolid-Theme (Tao) integriert "Icon-Boxen drehend" und bietet im Backend leider keine Möglichkeit ein Bild einzufügen (anders als beim Inhaltselement Text zB.).
Ebenso kann ich den einzelnen Boxen keine eigene Class oder ID zuweisen...

Meine Überlegung war, dass ja Contao irgendwo den HTML Code generieren muss, der den Aufbau der Seite ausmacht. Wenn ich nun diese Datei finden würde, könnte ich dort das Bild über <style> einfügen!?!

---

Die Rocksolid-Themes arbeiten mit [rocksolid-custom-elements]. In den Templates sind für das Frontend alle Dateien mit der Dateiendung html5 verantwortlich, die mit "rsce" beginnen. In Deinem speziellen Fall ist es die Datei rsce_tao_rotating_boxes.html5. Dazu gehört jeweil eine php-Datei für die Konfiguration im Backend - in Deinem Fall ist das rsce_tao_rotating_boxes_config.php

Mit Inline-Styles zu arbeiten finde ich zwar nicht schön, macht das TAO-Theme soweit ich weiss an manchen Stellen von Haus aus um recht flexibel und leicht bedienbar für den Redakeure zu sein.

Falls das Hintergrundbild für Redakteure flexibel veränderbar sein soll, schau Dir eins der Templates inkl. Konfigurationsdatei an und erweitere das Template und die Konfigurationsdatei entsprechend. Aus dem Kopf weiss ich allerdings nicht in welchem der Templates tatsächlich Hintergrundbilder gesetzt werden können oder ob das grundsätzlich über die im Theme eingesetzten speziellen Wrapper erfolgt. Da musst Du selbst mal schauen.

Wenn es nicht so flexibel sein muss, dann ist css die richtige Wahl.
Mit :nth-child oder :nth-of-type kannst Du die einzelnen Boxen gezielt ansteuern.

Zitat:

---

Zitat von Llywellyn

Code:

---

.rotating-boxes-item-cover {
    background-image: url(files/tao/img/Bilder/fotolia_89032478.jpg);
}

---

---

Der Pfad ist falsch. Du musst hier ausgehend von der css-Datei einen relativen Pfad setzen. Wie es genau aussieht hängt dann etwas von Deiner Ordnerstuktur ab. Ich gehe jetzt mal vom normalen Aufbau des TAO-Themes aus. Dabei liegt die css-Datei unter files im Ordner tao und dort in einem Ordner css. Die Bilder liegen im Ordner img, wahrscheinlich in einem Unterordner.
Damit css die Bilder finden kann, muss einen Ordner nach oben gegangen werden und erst von da aus kann man in den Order img und weiter in den ensprechenden Unterordner gehen.
Wenn Dein Bild also tatsächlich unter files/tao/img/Bilder/fotolia_89032478.jpg liegt und die fragliche css-Datei (wahrscheinlich custom.css) direkt im Ordner css dann sieht das so aus.

Code:

---

.rotating-boxes-item-cover {
    background-image: url(../img/Bilder/fotolia_89032478.jpg);
}

---

Zitat:

---

Zitat von Llywellyn

dieser Code wird dann zu:

Code:

---

.rotating-boxes-item-cover {
    background-image: url("../../files/tao/css/files/tao/img/Bilder/fotolia_89032478.jpg");
}

---

was ich nicht ganz verstehe warum....

---

Eine Veränderung im generierten css-Code ist normal, weil contao aus allen vorhandenen css-Dateien und dem internen css eine neue css-Datei erstellt und diese dann im Ordner assets/css ablegt. Von da aus geht es zwei Ordner nach oben und dann in den ordner files und den entsprechenden Unterordner in dem die Bilder liegen.
Ich hoffe ich habe mich halbwegs verständlich ausgedrückt.

Vielen vielen lieben Dank!! :)

Da die Bilder dauerhaft eingearbeitet werden, habe ich mich für die CSS Variante entschieden.

Ich habe den Pfad geändert und jetzt hat es soweit funktioniert, dass ich zumindest für alle das gleiche Bild habe.

Zitat:

---

Zitat von mlweb

Der Pfad ist falsch. Du musst hier ausgehend von der css-Datei einen relativen Pfad setzen. Wie es genau aussieht hängt dann etwas von Deiner Ordnerstuktur ab. Ich gehe jetzt mal vom normalen Aufbau des TAO-Themes aus. Dabei liegt die css-Datei unter files im Ordner tao und dort in einem Ordner css. Die Bilder liegen im Ordner img, wahrscheinlich in einem Unterordner.
Damit css die Bilder finden kann, muss einen Ordner nach oben gegangen werden und erst von da aus kann man in den Order img und weiter in den ensprechenden Unterordner gehen.
Wenn Dein Bild also tatsächlich unter files/tao/img/Bilder/fotolia_89032478.jpg liegt und die fragliche css-Datei (wahrscheinlich custom.css) direkt im Ordner css dann sieht das so aus.

Code:

---

.rotating-boxes-item-cover {
    background-image: url(../img/Bilder/fotolia_89032478.jpg);
}

---

Eine Veränderung im generierten css-Code ist normal, weil contao aus allen vorhandenen css-Dateien und dem internen css eine neue css-Datei erstellt und diese dann im Ordner assets/css ablegt. Von da aus geht es zwei Ordner nach oben und dann in den ordner files und den entsprechenden Unterordner in dem die Bilder liegen.
Ich hoffe ich habe mich halbwegs verständlich ausgedrückt.

---

Leider konnte ich :nth-child oder :nth-of-type nicht richtig verwenden, da ich das Bild nur für das Cover der Rotationsboxen haben möchte...

Code:

---

.rotating-boxes-item-cover:nth-child(1) {
        background-image: url(../img/Bilder/fotolia_89032478.jpg);
}

---

das funktioniert ja nicht, weil ich mich so quasi schon im Element befinde.

Code:

---

.rotating-boxes-item:nth-child(1) {
        background-image: url(../img/Bilder/fotolia_89032478.jpg);
}

---

wenn ich aber alle Boxen anschreibe, dann habe ich das Bild zwar nur bei der ersten Box, allerdings hinter dem Inhaltselement (man sieht es wenn man mit der Maus drüber fährt und die Animation der drehenden Box abläuft) und nicht im Cover der ersten Box.


Mache ich hier etwas falsch, oder kann es sein, dass es mit nth-child oder nth-of-type nicht funktioniert das Bild nur im Cover anzuzeigen?

:nth-child bzw. :nth-of-type mußt Du in diesem Fall bei den übergeordneten Elementen ansetzen, also z.B. für das zweite Element

Code:

---

.rotating-boxes-item:nth-child(2) .rotating-boxes-item-cover {
        background-image: url(../img/Bilder/fotolia_89032478.jpg);
}

---

Zitat:

---

Zitat von mlweb

:nth-child bzw. :nth-of-type mußt Du in diesem Fall bei den übergeordneten Elementen ansetzen, also z.B. für das zweite Element

Code:

---

.rotating-boxes-item:nth-child(2) .rotating-boxes-item-cover {
        background-image: url(../img/Bilder/fotolia_89032478.jpg);
}

---

---

Ich hab genau das probiert und es hat nicht funktioniert, aber ich hatte nen Beistrich zwischen den Class-Elementen.. das war mein Fehler! :o


Danke nochmals für die Hilfe!

Zitat:

---

Zitat von mlweb

:nth-child bzw. :nth-of-type mußt Du in diesem Fall bei den übergeordneten Elementen ansetzen, also z.B. für das zweite Element

Code:

---

.rotating-boxes-item:nth-child(2) .rotating-boxes-item-cover {
        background-image: url(../img/Bilder/fotolia_89032478.jpg);
}

---

---

Eines versteh ich jetzt noch nicht...

Warum funktioniert der CSS Code für die erste Box nicht?

Ich habe :nth-child(1) :nth-of-type(1) sowie :first-of-type probiert, aber nichts scheint zu funktionieren.

Fehler im Text konnte ich auch keine finden. Habe zur Sicherheit das Bild "kinder.png" bei einer anderen Box probiert, dort hats funktioniert..

Übersehe ich etwas, oder muss ich für die erste Box etwas anders machen?

Herzlichen Dank nochmals!

Code:

---

.rotating-boxes-item:nth-of-type(1) .rotating-boxes-item-cover {
        background-image: url(../img/Bilder/kinder.png);
}

.rotating-boxes-item:nth-child(2) .rotating-boxes-item-cover {
        background-image: url(../img/Bilder/erwachsene.png);
}

.rotating-boxes-item:nth-child(3) .rotating-boxes-item-cover {
        background-image: url(../img/Bilder/mundhygiene.png);
}

.rotating-boxes-item:nth-child(4) .rotating-boxes-item-cover {
        background-image: url(../img/Bilder/kontrolltermin.png);
}

.rotating-boxes-item:nth-child(5) .rotating-boxes-item-cover {
        background-image: url(../img/Bilder/behandlungsdauer.png);
}

.rotating-boxes-item:nth-child(6) .rotating-boxes-item-cover {
        background-image: url(../img/Bilder/retentionsgeraet.png);
}

---

Prinzipiell funktioniert das. Ich habe temporär das Bild in den Entwicklertools einfügen können. Vielleicht irgendwo ein Schreibfehler?
Im Moment ist der Selektor im gerenderten Code auch nicht vorhanden, so daß man nicht sehen kann ob er ggf. überschrieben wird oder die Spezifität nicht reicht.

Der Ordnung halber solltest Du Dich hier für eins von beiden entscheiden :nth-child oder :nth-of-type. Welches spielt in dem Fall keine Rolle. Funktionieren hier beide.

Mir hat es keine Ruhe gelassen und ich habe Deinen css-Code mal nach Fehlern untersucht.
In Zeile 10442 wolltest Du sicher einen Kommentar schreiben, hast diesen nur leider nicht als Kommentar gekennzeichnet. Nehme ich diesen Teil im Code raus, dann ist dass Bild auch da.
Zeile 10468 ist dann noch einmal so ein nicht korrekt ausgezeichneter Kommentar.
Der lieben Ordnung halber: Es gibt noch an ein paar weiteren Stellen mit einem "-" am Anfang der Zeile, was da nicht hingehört und zwar Zeile 10330, 10333, 10389 und 10423.

hab die Stellen alle ausgebessert und die Zeilen auf die korrekte Art und Weise auskommentiert. Jetzt funktioniert alles.

nochmals tausend Dank!!! :)

Ich würde den x-child() Selektor dem x-of-type() Selektor vorziehen. Es ist noch nicht lange her, da gab es damit Schwierigkeiten. Deswegen hatte ich mich damals von dem erstmal verabschiedet. Beispiel: http://stackoverflow.com/questions/6...ith-class-name

Man konnte damals (noch nicht lange her) nur element:x-of-type() benutzen, also vor dem Doppelpunkt musste ein Element aufgeführt werden - p:first-of-type. Sowas wie .my-class:first-of-type ging nicht. Auch mit langen Selektoren, welche Trenner enthielten ' ', '+', '>' usw. war das meine ich problematisch.

Wahrscheinlich sieht man diesen Selektor deshalb auch so selten.

@Andreas Das hatte ich auch mal so im Hinterkopf.

Ich setze meistens auch auf nth-child, die Struktur muss es aber auch hergeben und manchmal tut sie das halt nicht.

In diesem Fall hatte ich mir vor meinem ersten Post die Struktur noch gar nicht genau angesehen. Danach hatte ich im Rahmen der Fehlersuche beides getestet und auch mal eine kleine Testumgebung aufgebaut. In modernen Browsern inklusive IE11 scheint es aber mit Klassen zu funktionieren - sogar über verschiedene Elementypen hinweg.

Zitat:

---

Zitat von mlweb

In modernen Browsern inklusive IE11 scheint es aber mit Klassen zu funktionieren - sogar über verschiedene Elementypen hinweg.

---

Huch, wie meinst du das jetzt? Wird dann das n-te Element mit dieser Klasse selektiert, auch wenn es unterschiedliche sind, also z.B. p.klasse, ul.klasse, div.klasse, ...? Das würde ich ja eher schon als Bug sehen ...

Ja, scheint so. Hatte vorhin meine Testumgebung (Link s.o.) extra mal diesbezüglich erweitert und erwartet, dass es nicht funktioniert. Aber wie man sieht sind sich die modernen Browser da einig und scheren sich nur noch um den Klassennamen. Ich hoffe mal es ist kein Denkfehler von meiner Seite. ;)

Ich habe gerade mal beim W3C nachgeschaut. Die Beschreibung in Level 4 unterscheidet sich auch etwas von der in Level 3, aber ich bin mal ganz ehrlich für die Feinheiten reicht mein Englisch nicht ganz aus.

Ich denke das wäre dann in Level 4 nth-match, was aber wohl noch nicht so sehr verbreitet ist was den Support in Browsern betrifft.

Zitat:

---

Zitat von tab

Wird dann das n-te Element mit dieser Klasse selektiert, auch wenn es unterschiedliche sind, also z.B. p.klasse, ul.klasse, div.klasse, ...? Das würde ich ja eher schon als Bug sehen ...

---

Nein, wieso? Wenn ich mir das im FF ansehe, scheint doch alles so zu sein, wie erwartet. In HTML und CSS gibt es ja erstmal keinen "Type". Aber das hier wird z.B. alles als unterschiedliche Types interpretiert:

• li:nth-of-type(1) Alle LIs auf einer Geschwisterebene (kann auch mit Klasse "test" sein)
• p:nth-of-type(1) Alle Ps auf einer GE (kann auch mit Klasse "test" sein)
• li.test:nth-of-type(1) Alle LIs mit einer Klasse "test" auf einer GE
• p.test:nth-of-type(1) Alle Ps mit einer Klasse "test" auf einer GE
• .test:nth-of-type(1) Alle Elemente mit einer Klasse "test" auf einer GE (können LIs oder Ps sein)

Man kann sich das so vorstellen, dass alle Elemente auf einer Ebene, welche nicht auf den Selektor vor dem Doppelpunkt passen, erstmal ausgeblendet (entfernt) werden. Und die restlichen Elemente (diejenigen welche passen) werden dann im Prinzip so getroffen wie mit dem child-Selektor.

Ich behalte auf jeden Fall mal im Hinterkopf, dass wenn ich den of-type-Selektor benutze, besonders gut mit anderen Browsern getestet werden muss.

Edit: Da haben wir uns leider selber reingelegt. Mit Type ist immer nur ein Element (Tag) gemeint. Die Klasse spielt da keine Rolle. Sie dient nur als Filter.

Nur der Vollständigkeit halber mit li:nth-of-type(1) wählst Du aber immer nur das erste und nicht alle li-Elemente auf der Geschwisterebene, li:nth-of-type(n) wäre jedes li

Ja genau, das war nur als Beispiel gedacht, welche Elemente für diesen :nth-of-type(1) überhaupt in Betracht kommen. Darauf bezog sich das "Alle".

Nach dem Übertragen der Homepage auf den eigentlichen Webspace, hat sich nun ein Fehler eingeschlichen, den ich einfach nicht verstehe.


Zwischen der Navigation und dem Start der Seite entsteht ein zusätzlicher Spalt.
Im HTML Code ist (zumindest nach dem was ich gesehen habe) alles gleich:

Code:

---

<div class="page" style="padding-top: 122px;">

---

Ich habe die Installation (mit dem Verschieben der Daten) bereits 2x durchgeführt und suche überall nach einer Lösung, aber jetzt stehe ich komplett vor einer Wand...


In dieser Umgebung habe ich die Seite soweit fertig gestellt:
papers.co.at/testserver/pernegger

Das ist der eigentliche Webspace für die Seite:
dr-pernegger.at


Der Anbieter ist bei beiden world4you.com und die php Version ist bei beiden 7 (falls das mit dem irgendwie zu tun hätte...)


Warum "beginnt" die Seite unter dr-pernegger.at ein Stück weiter unten? :eek:

(und warum funktioniert easyFavicon bei der einen Seite schon bei der anderen nicht?)


Ich weiß, dass es in diesem Thread eigentlich um ein anderes Thema geht, allerdings betrifft es die gleiche Seite und wollte nicht einen neuen Thread dazu erstellen...

Vielen lieben Dank nochmals im Voraus!

Zitat:

---

Zitat von Llywellyn

(und warum funktioniert easyFavicon bei der einen Seite schon bei der anderen nicht?)

---

Ich würde zwar fürs Favicon keine Erweiterung nutzen, aber ich kann Dir sagen es funktioniert bei beiden Installationen (Firefox in Windows 10).
Je nach Browser tun sich die Favicons aber manchmal sehr schwer bei einem Wechsel des Icons.

Zitat:

---

Zitat von Llywellyn

Zwischen der Navigation und dem Start der Seite entsteht ein zusätzlicher Spalt.
Warum "beginnt" die Seite unter dr-pernegger.at ein Stück weiter unten? https://community.contao.org/de/images/smilies/eek.png

---

Vielleicht habe ich Tomaten auf den Augen, aber im Firefox unter Windows 10 kann ich keinen Unterschied erkennen.
Caches hattest Du alle geleert?

Zitat:

---

Zitat von Llywellyn

Code:

---

<div class="page" style="padding-top: 122px;">

---

---

Wird für den fixen header benötigt, sonst würde der Inhalt ganz oben unter dem header (verdeckt durch diesen) beginnen.

Das ist sehr interessant!

Ich hatte es im Opera und Chrome Browser probiert und bei beiden das gleiche Problem (ebenso mit dem Favicon)...

Im Firefox funktioniert es tatsächlich problemlos..


Das interessante daran ist, dass es in den jeweiligen Browsern, Opera und Chrome, unter papers.co.at/testserver/pernegger richtig dargestellt wird (inkl. Favicon) aber unter dr-pernegger.at falsch?!?



Ich habe vollständig alle Daten bereinigt.

hier noch die Screenshots dazu vom Opera Browser:

dr-pernegger.at
Anhang 18955

papers.co.at/testserver/pernegger
Anhang 18956

[easyFavicon] ist ok. Benutze ich übrigens auch in jeder Installation. Wenn das Icon vom Browser mal nicht angezeigt wird, würde ich das erstmal einfach ignorieren. In FF wird das z.B. in einer SQLite DB places.sqlite in der Tabelle moz_favicons gespeichert. Irgendwann siehst du dann das richtige Icon.

Aber auf dr-pernegger.at scheint irgendwas kaputt zu sein. Evtl. ein BOM oder ein Steuerzeichen in einem Template. Vielleicht im fe_xxx. Wie lädst du die Dateien hoch? Stelle den Modus unbedingt auf binär. Wenn du Dateien mit einem Editor bearbeitest, dann stelle sicher, dass dieser auf UTF-8 eingestellt ist und kein BOM (Byte Order Mark) mit in die Dateien schreibt.

Validiere diese Installation mit dem Check-Tool.

Im Opera musst du mit den Devtools (rechte Maustaste: Inspect-Element) den HEAD-Tag aufklappen können. Solange das nicht geht, ist da irgendwas kaputt. Wenn das behoben ist, wird der Abstand oben wahrscheinlich verschwunden sein.

Wenn das behoben ist, dann aktiviere auch deine .htaccess.default und aktivere im BE-System-Einstellungen die URL-Umschreibung, damit das index.php aus der URL verschwindet. Durch die .htaccess wird die Seite dann auch performanter geladen.

Stimmt. das ist mir vorhin gar nicht aufgefallen. Alles was in den head-tag gehört, wird in chrome, opera, ie11 und edge im body nach der Navigation gerendert.
Aber auf die mögliche Ursache dafür wäre ich wohl so schnell nicht gekommen.

Die Online-Validierung hat mich drauf gebracht https://validator.w3.org/nu/?doc=htt...ernegger.at%2F. Mein HTML-Validator im FF hat das nicht erkannt.

Der FF ignoriert das Problem ja auch und rendert trotz allem richtig.

Zitat:

---

Zitat von Andreas

[easyFavicon] ist ok. Benutze ich übrigens auch in jeder Installation. Wenn das Icon vom Browser mal nicht angezeigt wird, würde ich das erstmal einfach ignorieren. In FF wird das z.B. in einer SQLite DB places.sqlite in der Tabelle moz_favicons gespeichert. Irgendwann siehst du dann das richtige Icon.

Aber auf dr-pernegger.at scheint irgendwas kaputt zu sein. Evtl. ein BOM oder ein Steuerzeichen in einem Template. Vielleicht im fe_xxx. Wie lädst du die Dateien hoch? Stelle den Modus unbedingt auf binär. Wenn du Dateien mit einem Editor bearbeitest, dann stelle sicher, dass dieser auf UTF-8 eingestellt ist und kein BOM (Byte Order Mark) mit in die Dateien schreibt.

Validiere diese Installation mit dem Check-Tool.

Im Opera musst du mit den Devtools (rechte Maustaste: Inspect-Element) den HEAD-Tag aufklappen können. Solange das nicht geht, ist da irgendwas kaputt. Wenn das behoben ist, wird der Abstand oben wahrscheinlich verschwunden sein.

Wenn das behoben ist, dann aktiviere auch deine .htaccess.default und aktivere im BE-System-Einstellungen die URL-Umschreibung, damit das index.php aus der URL verschwindet. Durch die .htaccess wird die Seite dann auch performanter geladen.

---

Der Code vom Template fe_page sieht folgendermaßen aus

Code:

---

<?php $this->extend('fe_page') ?>

<?php $this->block('body') ?>

        <!--[if lt IE 8]>
                <p>You are using an outdated browser. <a href="http://whatbrowser.org/">Upgrade your browser today</a>.</p>
        <![endif]-->

        <?php echo $this->sections('top') ?>

        <div class="page">

                <?php if ($this->header): ?>
                        <header class="page-header">
                                <?php echo $this->header ?>
                        </header>
                <?php endif ?>

                <?php echo $this->sections('before') ?>

                <div class="content-wrapper">

                        <section role="main" class="main-content">

                                <?php echo $this->main ?>

                                <?php echo $this->sections('main') ?>

                        </section>

                        <?php if($this->left && $this->right): ?>
                                <aside class="sidebar">
                                        <?php echo $this->left ?>
                                </aside>
                                <aside class="sidebar -right">
                                        <?php echo $this->right ?>
                                </aside>
                        <?php elseif($this->left || $this->right): ?>
                                <aside class="sidebar">
                                        <?php echo $this->left ?>
                                        <?php echo $this->right ?>
                                </aside>
                        <?php endif ?>

                </div>

                <?php echo $this->sections('after') ?>

                <?php if ($this->footer): ?>
                        <footer class="page-footer">
                                <?php echo $this->footer ?>
                        </footer>
                <?php endif ?>

        </div>

        <?php echo $this->sections('bottom') ?>

<?php $this->endblock('body') ?>

---

ich habe ihn mit dem von der papers.co.at/testserver/pernegger Installation verglichen, allerdings konnte ich keine Unterschiede erkennen.

Beim exportieren und importieren der Datenbank verwende ich die Voreinstellungen von Contao (nach dem Contao Handbuch von Peter Müller).
Das Hochladen der Website-Daten erfolgt dann über Filezilla direkt in den Root vom Webspace.

Bei der Validierung mit dem Check kommt nur die Meldung, dass die .htaccess.default Datei fehlt, allerdings erst nachdem ich ".default" entfernt hatte, vorher kam keine Fehlermeldung.


Eine komische Eigenheit ist mir noch aufgefallen, nämlich dass wenn ich Backend auf "Frontend-Vorschau" klicke nur eine leere weiße Seite aufgemacht wird.... erst wenn ich "/contao/preview.php" entferne wird die Seite geladen.... das ist ja auch nicht normal oder?

Danke für die Hilfe! :)

lg

Leere, weiße >Seite heißt Seitenquelltext leer? Dann schaue in die Datei /system/logs/error.log, ob da etwas zeitlich passendes drinsteht.

die localconfig.php hatte ein BOM (wie schon von Andres festgestellt)... ich hab die Datei jetzt mit Notepad++ ohne BOM gespeichert und der Fehler ist jetzt weg.

vielen lieben Dank nochmals an alle für die Hilfe! :)

Es kann durchaus sein, dass du so einen Fehler in deinem Template nicht siehst (BOM oder Steuerzeichen). Du hast nichts zum FTP-Upload und den Editor-Einstellungen geantwortet. Stelle sicher, dass dies so eingestellt ist, wie oben erwähnt.

Was du jetzt machen kannst ist, nochmal ein neues fe_xxxTemplate erstellen und die Änderungen darin vornehmen. Am besten ohne Copy and Paste aus dem derzeitigen. Das Template auf papers.co.at/testserver/pernegger scheint ja in Ordnung zu sein, vielleicht kopierst du es daraus.

Edit: Upps, zu spät. Gut das es jetzt funktioniert.

Zitat:

---

Zitat von mlweb

Ja, scheint so. Hatte vorhin meine Testumgebung (Link s.o.) extra mal diesbezüglich erweitert und erwartet, dass es nicht funktioniert. Aber wie man sieht sind sich die modernen Browser da einig und scheren sich nur noch um den Klassennamen. Ich hoffe mal es ist kein Denkfehler von meiner Seite. ;)

---

Sieht so aus, als hätten wir uns da selber reingelegt. Ändere dein Beispiel mal nach

HTML-Code:

---

<ul>
  <li class="test">Test 1</li>
  <li class="test">Test 2</li>
  <li class="test">Test 3</li>
  <li class="test">Test 4</li>
</ul>
<p class="test-1">Mein Text 1</p>
<p class="test-2">Mein Text 2</p>
<p class="test-3">Mein Text 3</p>

<style>
.test-2:first-of-type {
  color: red;
}
.test-2:last-of-type {
  color: red;
}
</style>

---

Test 2 wird hier nicht angesprochen, also wird der komplette Selektor .test-2:first-of-type nicht als Type betrachtet. Type ist das P.

Allerdings werden Test 1 und 3 auch nicht angesprochen, owohl sie first and last of type P sind.

Der ergänzende Klassenselektor (hier .test-2) dient also nur als Filter. Nimm das erste/letzte P, wenn es die Klasse hat. Bzw. nimm das Element mit der Klasse .test-2, aber nur, wenn sein Element-Typ das erste/letzte seiner Art ist.

Zitat:

---

Zitat von Andreas

nimm das Element mit der Klasse .test-2, aber nur, wenn sein Element-Typ das erste/letzte seiner Art ist.

---

Danke Andreas. Damit hast Du gut Klarheit in die Problematik gebracht.