CSS-Browser-Chaos

[lonni]

Hallo,

habt ihr eine Idee - ich stehe auf dem Schlauch.

Die Website www.tc-halingen.de/startseite.html befindet sich im Anfangsstadium und soll nun mit css ein wenig gestaltet werden.

Speziell geht es um ein Event-Modul (zeigt die Ergebnisse vom Wochenende), welches mit den entsprechenden Anweisungen im Browser GoogleChrome auch korrekt dargestellt wird - jedoch werden die Anweisungen in Firefox und Opera völlig ignoriert (geschweige denn im Explorer).

Wie kann ich dem Abhilfe schaffen.

Ich bin dankbar für alle Tipps.

[soweit_ok]

Hallo lonni,

hab jetzt leider nicht die Zeit, das Problem eingehend zu untersuchen. Warum FF Deine Formatierungen ignoriert, weiß ich also momentan auch nicht. Mir fiel allerdings auf, dass Du bei Deinen Accordions Inline-Styles verwendest. Ich hab nur mal ganz kurz in den Quellcode geschaut und hatte den Eindruck, eben jene sind´s, die im FF keine Wirkung zeigen.

An deiner Stelle würde ich jetzt erstmal alle Inline-Styles rauswerfen, den Accordions inkl. Togglern usw. Selektoren verpassen, mit denen Du sie individuell ansprechen kannst und alles konsequent nur mit CSS formatieren. Beispielsweise so:
#verwendungs-id.ce_accordion div.accordion
#verwendungs-id.ce_accordion div.toggler
Was sich auch noch weitergehend aufdröseln lässt, z. B. mit ergänzendem p usw.. Am besten in Deiner "layout.css", die wird ja auch als letztes Stylesheet geladen und überschreibt alles andere.

So mache ich es jedenfalls und habe keinerlei Ausgabeunterschiede mit Chrome, Opera, FF und IE. Zumindest in den neueren Versionen - Uralt-Browserversionen unterstütze ich nicht mehr. Da Du wohl mit Chrome entwickelst, weißt Du sicher, dass Du die mit "Firebug" im FF vergleichbaren Entwicklertools angezeigt bekommst, wenn Du im Kontextmenü (re. Maustaste) auf "Element untersuchen" klickst. Falls Du das noch nicht hast, installiere Dir im FF am besten auch die Firebug-Erweiterung. So kannst Du u. a. auch gut vergleichen, ob Formatierungen übereinstimmend interpretiert werden. Sieht bei Deiner Seite nicht so aus. Schau halt mal selber.

Ansonsten ... recht kreative Idee, wie Du Accordions in Verbindung mit Spaltenset einsetzt, gefällt mir. :-)

[css-umsetzung]

HI,

unabhängig von den ganzen Fehlern auf der Seite (ids mehrfach verwendet css Fehler usw.) solltest du diese Angaben in der layout.css Zeile 53, noch mal überdenken.

#f2,#f3{margin-top:15px;padding:25px;background-image:url("-o-linear-gradient(top, #eeeeee, #cdcdcd")");border:1px solid #999999;-webkit-border-radius: 5px 5px 5px 5px;-moz-border-radius: 5px 5px 5px 5px;border-radius: 5px 5px 5px 5px;opacity: 1;} 

[lonni]

Danke schon mal,

die etlichen Fehler sind mir natürlich bewusst! Die Seite befindet sich nicht umsonst im Entwicklungsstatus. Wenn sie bekannt gemacht wird, bin ich mir sicher, dass alles valide sein wird.

nun zum eigentlichen Problem. der denkanstoß von soweit_ok scheint richtig zu sein. ich habe eine neue seite (mit namen accordion) mit gleichem event angelegt; eine neue css-datei erstellt und "von vorne angefangen" und siehe da, die css-anweisungen werden nun wieder korrekt angenommen. soweit so gut.

ich habe dem modul (eventliste) direkt eine id und eine class zugeordnet. keine der beiden erscheint im quelltext. ist das normal?

gruß

[soweit_ok]

Na das sieht ja schon besser aus im FF. Was meintest Du denn damit "dem Modul direkt id und class" zugewiesen? Man kann doch nur HTML-Elementen Selektoren zuweisen und nicht Modulen. Oder wolltest Du damit sagen, Du hast die Zuweisungen direkt im Modulcode vorgenommen? Das mache ich auch manchmal in importierten Modulen, wenn es generell benötigt wird und ich es nicht jedesmal in den Seitenelementen tun will. Funktionierte bislang immer bestens. Falls Du also das damit meintest, poste doch mal den relevanten Teil Deines Modulcodes. Unser Röntgenblick ist noch nicht so weit entwickelt, dass wir erraten könnten, warum es nicht in Deinem HTML-Quellcode erscheint. Was genau willst Du überhaupt damit formatieren? Das umschließende <div> hat ja die Klasse mod_eventlist. Eigentlich müsstest Du darüber auch alle innenliegenden HTML-Elemente ansprechen können. Und falls Dir das nicht reicht, gib doch diesem <div> im Modulcode noch eine zusätzliche generische id. Die würde dann im HTML-Quellcode gewiss auch mit generiert, wenn die Synthax stimmt.

Zunächst solltest Du aber mal die Fehler, besonders die zwei schwerwiegenden in Deiner layout.css beseitigen ...

Ungeschlossener String '");border:1px solid #999999;-webkit-border-radius: 5px 5px 5px 5px;-moz-border-radius: 5px 5px 5px 5px;border-radius: 5px 5px 5px 5px;opacity: 1;}' gefunden. Ende des Werts erwartet, aber '");border:1px solid #999999;-webkit-border-radius: 5px 5px 5px 5px;-moz-border-radius: 5px 5px 5px 5px;border-radius: 5px 5px 5px 5px;opacity: 1;}' gefunden. Fehler beim Verarbeiten des Wertes für 'background-image'. Deklaration ignoriert.
#f2 h4,#f3 h4{} layout.css (Zeile 54)

Unerwartetes Dateiende beim Suchen nach Abschließende } des Deklarationsblockes.

[lonni]

so hab die CSS-Datei mal bereinigt. sieht jetzt aber nicht mehr schön aus. muss mir hat noch was überlegen.

Thema Modul - ich mache es so (wie wahrscheinlich viele andere auch): Themes --> Symbol Module anklicken --> Neues Modul. In der dortigen Eingabemaske ganz unten kann man die CSS-ID bzw. -Klasse(n) eingeben. Ich habe auf der Startseite ein Modul Eventliste mit Namen Ergebnisse2011 angelegt und in der oben beschriebenen Eingabemaske die CSS-ID:modul-id-eventliste-ergebnisse2011 und die CSS-Klasse:modul-class-eventliste-ergebnisse2011 genannt. Jedoch erscheint keine dieser beiden Anweisungen im Quellcode. Dann habe ich unter Inhalte --> Artikel das Inhaltselement Modul "Ergebnisse2011" zum bearbeiten angeklickt und wieder ganz unten in der Eingabemaske für CSS-ID:cssid-ergebnisse2011 und CSS-Klasse:cssclass-ergebnisse2011 eingetragen. Diese beiden Anweisungen erscheinen im Quelltext.

Ich kann die Elemente mit den o.g. Ids und Klassen mit CSS stylen - jedoch hätte ich gerne gewusst, warum die ersten beiden Anweisungen nicht im Quellcode auftauchen.

Gruß und Danke für eure Tipps.

[soweit_ok]

Eventuell produziert Deine Verschachtelung von Modulen ineinander Seiteneffekte. Insbesondere bei Accordions erlebte ich das schon öfter.

Du könntest mal versuchen, die Sache etwas zu vereinfachen und erstmal scheibchenweise zum laufen zu bringen, statt alles zusammen. Zum Beispiel auf das Spaltenset zu verzichten, stattdessen den Accordions eine feste Breite und margin-right zu geben und float:left. Bei Deinem statischen Layout ja kein Problem. So würden diejenigen, die in der Breite Platz haben, ebenfalls nebeneinander angezeigt und es wären schonmal einige divs weniger. Und erstmal eines so formatieren, dass es in allen Browsern so funktioniert, wie Du es willst.

Übrigens öffnen Deine Toggler öfter nicht beim Darüberfahren mit der Maus, wenn vorher ein anderer offen war, bzw. dann nur mit Klick. Beim Testen siehst Du was ich meine.

Offen gesagt finde ich diesen ganzen Schnickschnack zwar ganz chic, aber gleich am Anfang und alles auf einmal eher kontraproduktiv und auch nicht wirklich intuitiv zu bedienen. Sorry. :-) Bei den Modulen kann ich Dir momentan nicht großartig helfen, Spaltenset und Eventliste hab ich bisher noch nicht eingesetzt.

[Andreas]

Hallo ihr,

willkommen im Club. Dass die Klassen und IDs im FE nicht erscheinen ist ein Manko von Contao, welches wohl nie behoben wird. Sie erscheinen nur, wenn du die Module im Seitenlayout einbindest, nicht wenn du sie in einen Artikel einbindest.

Das Akkordion müsste sich aber auch ohne extra Klassen und Templateveränderungen mit CSS formatieren lassen.

ps Die Funktion mittels Mouseover bei dem Akkordion ist nicht gerade Benutzer freundlich. Auf Klick fände ich hier besser.

Gruß Andreas

[lonni]

Vielen Dank für eure Antworten und auch Kritik,

ich werde vieles davon berücksichtigen.

ich sehe diesen Beitrag als gelöst an, jedoch möchte ich noch ein paar Begründungen und Gedanken einbringen.

Anfangs habe ich die Accordions mit einer festen Breite und margin-right eingebaut,weil ich strikt auf yaml verzichten wollte. Wenn man nun ein Accordion (z.b. rechte Spalte) anklickt/hovert verschiebt sich auch die linke Spalte mit und schafft einen Freiraum, der die Größe des aufgeklappten Accordions der rechten Spalte hat. Was ich aber nicht möchte. Alle Accordions sollten einzel auf- und zuklappen.

Mit dem Toggler beim hovern bin ich auch nicht zufrieden. einmal klappt es - dann wieder nicht direkt. Wenn man die Maus einmal seitlich vom Accordion entfernt und dann erneut hovert funktioniert es wieder ohne zu klicken. Eine Funktion wie in einem einfachen Aufklapp-Menü mit onmouseover und onmouseout wäre wünschenswert.

Zum Design: Ich wollte mal einen anderen Weg gehen, der an die Bedienung moderner Smartphones mit einer Fülle an Icons auf der ersten Seite erinnert. Und die lassen sich ja bekanntlich einfach und intuitiv bedienen. Aber wie schon erwähnt ist die Seite im Spiel-, Probier- und Entwicklungstadium und mal sehen wohin die Reise geht.

Also vielen Dank und auf bald mal.

[soweit_ok]

Na klar, Accordions lassen sich ebenso wie andere Module auch ohne individuelle id und Klassen formatieren. Und man kann natürlich auch die Container-id voranstellen (#main, #right, ...). Das ist allerdings auch schon anderenorts im Forum und auf Agenturseiten beschrieben.

/*////////////////////////////////////////////////////////////////////////*/
/* Accordion */

/* Inhalt */
.ce_accordion div.accordion > div {
    margin-top:-1px;margin-bottom:0px;margin-left:0px;margin-right:0px;
    padding-top:0px;padding-left:5px;padding-right:5px;
    border-right:solid 1px #B8B6B6;border-left:solid 1px #DBD1D1;
    border-bottom:solid 1px #B8B6B6;
    background:#F6F4F4;
}

/* geschlossen */
.ce_accordion div.toggler {
    margin-bottom:0px;
    padding:0 10px;
    background:#656565 url("../files/layout/accord_zugeklappt.gif") right center no-repeat;
    font-weight:normal;
    font-size:12px!important;
    color:#FFFFFF;
    border-bottom:solid 1px #ADADAD;
}

/* offen */
.ce_accordion div.active {
    padding:0 10px;
    background:#6268A2 url("../files/layout/accord_aufgeklappt.gif") right center no-repeat;
    font-weight:normal;
    color:#FFFFFF;
    border-bottom:solid 1px #4D4D4D;
}

/* Mouseover */
.ce_accordion div.hover {
    text-decoration:none;
    background:#6268A2 url("../files/layout/accord_hover.gif") right center no-repeat; 
    cursor:pointer;
}

.accordion_50 {width:450px!important;}

/* umschließendes div */
.accordion_multiblock_left {
  float:left;clear:left;
  margin-top:5px;margin-right:12px;margin-bottom:3px;width:450px;
  visibility:visible;display:inline;
  box-shadow:3px 3px 3px #847C7C;-moz-box-shadow:3px 3px 3px #847C7C;webkit-box-shadow:3px 3px 3px #8C8B91;
}

Weil ich meistens kein statisches WC-Rollen-, sondern für alle Auflösungen und Browserfenstergrößen formatfüllendes und kontrolliertes Liquid-Designs verwende, brauchte ich für Contao natürlich diverse Anpassungen dafür. U. a. auch Accordions, die von den nachfolgenden Elementen umflossen werden. Damit die Toggler einer Gruppe aber nicht jeweils ihren Vorgänger umfließen, braucht man ein umschließendes <div> mit entsprechenden CSS-Anweisungen (unten im Beispielcode). Wie ich bisweilen im Forum las, vermissten auch schon andere User ein solches.

Um Modulausgaben zu verändern, kopiere ich gern erstmal den entsprechenden Teil des HTML-Quelltextes der Standardversion in ein HTML-Inhaltslement. Damit kann ich dann rumprobieren und wenn alles läuft, es mit den verfügbaren Bordmitteln nachbauen.

Eine Accordiongruppe zusammenfassen ist total simpel möglich. Einfach vor und nach der Gruppe je ein HTML-Element anlegen. In das obere schreibt man bloß das öffnende <div>-Tag, ggf. noch id und klasse(n) vergeben, und in das untere kommt nur ein </div>. Zum Glück zählt es nicht zu den Eigenmächtigkeiten des TinyMCE, fehlende schließende Tags automatisch einzufügen. Nachfolgender Fließtext sollte natürlich als HTML und nicht als Textelement gespeichert werden, denn sonst würde er von einem <div> umschlossen und nur in einem Stück floaten. Unkundige Redakteure können es auch zunächst als Textelement erfassen, dann den Inhalt der HTML-Ansicht kopieren, das Element auf HTML umstellen und dort wieder einfügen. Das dürfte wohl noch jeder hinkriegen. Ohne ein kleines Tutorial dazu kommen Laien-Redakteure jedoch selten auf solche Ideen.

Finde ich sehr nützlich, deshalb beschrieb ich das hier mal. Geht ja auch ebenso mit anderen Modulen wie bspw. "Tabcontrol". Wenn ich es richtig sehe, lässt sich sowas mit Spaltensets nicht lösen, denn das sind ja auch bloß divs und die Inhalte floaten nicht in die Vorgängerspalten. Oder doch? Hab "subcolomn" noch bisher noch nicht verwendet, aber es schaut auf keiner Website so aus, als ob die Erweiterung das kann.

Einen interessanten Effekt, den ich nirgends dokumentiert fand, stellte ich übrigens nach der Installation des BE-Themes "extContao" fest. Arbeitet mit der "extjs"-Javascriptbibliothek. Seitdem wird jedem in Artikeln angelegten Inhaltselement aut. eine individuelle id vergeben mit der Datensatz-ID als Suffix (extJs_content_1399). Beim Speichern des Datensatzes erscheint sie von selbst im leeren id-Feld, der Feldinhalt kann aber gelöscht und überschrieben werden. Finde ich keine schlechte Idee, denn so lässt sich bei Bedarf jedes beliebige Inhaltselement mit der Datensatz-ID als Selektor ansprechen, ohne extra die id händisch einzutragen. Und stört ja auch nicht, wenn nicht benötigt. Zugehöriger CSS-Code wird leider nicht automatisch entfernt und man müsste den Codemüll in der CSS-Datei selber löschen.

[soweit_ok]

@lonni
Hat sich überschnitten. Im letzten Posting fügte ich noch ein paar Kleinigkeiten zur Accordion-Formatierung hinzu. Ich vermeide YAML ebenfalls, wenn´s auch anders geht. Ist mir für manches zu unflexibel und wg. der browserspezifischen Abweichungen der %-width-Rundung bei Liquid Design auch nicht exakt genug.

Jedenfalls gefielen mir Deine spielerischen Gestaltungsideen prima. Bin mal gespannt, was Du noch daraus machst und gucke mir dann viell. auch das eine oder andere ab. Okay, dann ist der Thread damit erstmal durch.

[lonni]

Vielen Dank

nochmal an dich soweit_ok für deine Mühe und sehr ausführlichen Texte mit Ideen, die mir "noch" nicht eingefallen wären.

Ich bleibe contaowissenshungrig.

Gruß