Probleme mit Opera im selbsterstellten 2-Spalten-Layout

[MrMurphy]

Hallo,

ich versuche grade mit YAML 4 ein 2-Spalten-Layout zu erstellen, wahrscheinlich bin ich etwas zu kreativ.

Meine Grundbedingung ist, im yaml-Verzeichnis nichts zu ändern, sondern das cascading zu nutzen. Also habe ich eine zusätzliche layout_individuell.css erstellt, die die notwendigen Anpassungen beinhaltet.

Unter anderem müssen einige css-Angaben nicht geändert oder gelöscht, sondern als überhaupt nicht gegeben benutzt werden. Dazu habe ich sie einfach ohne Wert oder mit dem Wert "auto" eingetragen, z. B.

   .ym-wrapper {
      max-width: ;
   }

Das ist wie gesagt nur ein Beispiel, das eigentliche Problem folgt jetzt:

Das funktioniert auch soweit. Als einziger der von mir getesteten Browser kommt Opera damit nicht zurecht.

http://home.arcor.de/mr-murphy/test/...i_spalten.html

Und zwar gibt es in der Datei screen-PAGE-layout.css den Eintrag

    .ym-column {
        display:block;
        overflow:hidden;
        padding-right:340px;
        width:auto;
    }

Um das "padding-right:340px" zu überschreiben, habe ich in meine layout_indidviduell.css eingetragen

   .ym-column {
      padding-right: auto;
   }

Damit kommen alle Browser außer der Opera zurecht. Gibt es eine Möglichkeit den Wert in der layout_individuell.css so zu ändern, das auch Opera damit zurecht kommt? Also ohne die screen-PAGE-layout.css anzufassen und den Wert dort zu löschen?

Gruss

MrMurphy

[MrMurphy]

Hallo,

zur Verdeutlichung, meine Anfrage kann ich leider nicht mehr editieren:

Durch das padding-right wird der Inhalt im Opera zu schmal mit einem zu breiten Rand angezeigt.

Gruss

MrMurphy

[djesse]

@MrMurphy

Damit kommen alle Browser außer der Opera zurecht. Gibt es eine Möglichkeit den Wert in der layout_individuell.css so zu ändern, das auch Opera damit zurecht kommt? Also ohne die screen-PAGE-layout.css anzufassen und den Wert dort zu löschen?

Ich verstehe offen gesagt, Deinen Ansatz nicht. Die Datei "screen-PAGE-layout.css" ist dazu da, dass man sie sich ins eigene CSS-Verzeichnis übernimmt und individuell anpasst. Es gibt keinen Grund, diese wie ein rohes Ei zu behandeln.

Wenn Du im Opera Probleme mit dem Layout hast, dann solltest Du die EntwicklerTools öffnen und nachschauen, wo das Problem ist. Was für Firefox das Firebug-Addon ist, ist bei Opera das Tool "Opera DragonFly" (zu finden unter Extras->Weiteres). Ich kann jedenfalls im Opera 11.6 gerade kein Problem erkennen.

Gruß
Dirk

[MrMurphy]

Hallo,

Wenn Du im Opera Probleme mit dem Layout hast, dann solltest Du die EntwicklerTools öffnen und nachschauen, wo das Problem ist.

Das Problem ist ja lokalisiert. Bei der Angabe

.ym-column {
   display:block;
   overflow:hidden;
   padding-right:340px;
   width:auto;
}

muss das padding-right gelöscht werden. Ich möchte nur halt nicht den Wert löschen, um die Originaldatei nicht zu ändern.

Hier mal zwei Bilder zum Problem

1. Opera Version 11.62

2012_04_25_yaml_opera.jpg

2. Firefox

2012_04_25_yaml_firefox.jpg

Ich verstehe offen gesagt, Deinen Ansatz nicht. Die Datei "screen-PAGE-layout.css" ist dazu da, dass man sie sich ins eigene CSS-Verzeichnis übernimmt und individuell anpasst.

Der Unterschied ist, das du das YAML in- und auswendig kennst und entscheiden kannst, wie es sich weiter entwickelt.

Ich kenne YAML 4 nicht und mein Englisch ist auch nicht so gut, das ich die Anleitung problemlos lesen und erfassen kann. Durch dein neues Konzept (Anleitung auf englisch und weniger praktische Beispiele) ist für mich die Einarbeitung deutlich schwieriger geworden.

Deshalb möchte ich

1. bei möglichen Updates das dann neue yaml-Verzeichnis einfach austauschen können

2. zum testen mein eigenes css einfach komplett deaktivieren können

Und wenn ich "meine" css-Angaben in eine eigene css-Datei auslagere finde ich die Änderungen viel einfacher wieder. In den Original-css-Dateien müsste ich die Änderungen immer irgendwie kennzeichnen oder kommentieren, was den Zeitaufwand vergrößert, aber beim schnellen Wiederauffinden der Änderungen trotzdem nicht so richtig hilfreich ist.

Gruss

MrMurphy

[Mr. Magpie]

Im konkreten Fall kannst du ja anstelle des padding-right:auto ein padding-right:0 setzen. Oder du schreibst dir den padding-right-Wert vom im Firefox mittels Firebug berechneten Wert ab, falls dieser nicht 0 sein sollte, und benutzt diesen.
Es ist generell nicht so, dass du mit "auto" die geerbten Angaben sinnvoll überschreibst.

[djesse]

@MrMurphy

Der Unterschied ist, das du das YAML in- und auswendig kennst und entscheiden kannst, wie es sich weiter entwickelt.

Deswegen empfehle ich Dir ja, die Datei selbst anzupassen und nicht noch eine Schicht CSS drüberzulegen. Es wird doch immer komplexer. Außerdem passiert die Entwicklung in den Core-Dateien. Alles andere ist bereits Optik und hat daher nicht mehr als Empfehlungscharakter.

1. bei möglichen Updates das dann neue yaml-Verzeichnis einfach austauschen können

Das kannst Du auch weiterhin. Leg einfach Dein CSS in einem CSS-Ornder ab und kopiere aus dem YAML-Ordner dorthin, was Du nutzen und individuell anpassen willst. Damit bleibt dein YAML-Ordner immer unverändert.

Gruß
Dirk

[makcie]

Hallo MrMurphy,

vergleiche bitte mal Dein Beispiel mit dem Demobeispiel flexible.columns.html, Du wirst sehen, dass die Spaltenanordnung in Deinem Beispiel anders ist als im Demobeispiel.
In der Datei screen-PAGE-layout.css im YAML-Ordner bezieht sich die Spaltenkonfiguration /* Column-Set Configuration: 1-3 (sidebar right) */ auf das Demo-Beispiel. Für Dein Beispiel musst die Spaltenkonfiguration ändern.
Das betrifft die Styles für .ym-column, -ym-col1, .ym-col3 und ggf. für .ym-col1 .ym-cbox und .ym-col3 .ym-cbox.

Darüber haben wir aber schon mal diskutiert, Du hattest die Styles entsprechend geändert und Dein Beispiel funktionierte doch bereits.

Meine Empfehlung:
Sieh Dir bitte in der Dokumentation unter Columns (Spalten) das Scenario C: Vertical navigation and flexible content | Navigation left aligned an - das passt doch genau für Dein Beispiel und ist ganz einfach. Und Du hast es Dir wirklich viel zu kompliziert gemacht, so dass Opera nicht mitspielen will - warum? ich weiß es nicht und ich will mich auch nicht damit beschäftigen.

Und wenn Du Lust und Zeit hast, dann sieh Dir doch bitte mal die zwei YAML4-Websites an, die Mr.Magpie in der Rubrik "Seitenvorstellung und -kritik" am 23.02.12 und am 14.03.12 vorgestellt hat - im zentralen Stylesheet kannst Du dort auch sehen, welche Dateien aus dem YAML-Ordner kopiert wurden und Du kannst den Pfad zu den geänderten Datei verfolgen.

[makcie]

Hallo Mr. Murphy,

habe mir heute nochmals Deine neue Testversion
http://home.arcor.de/mr-murphy/test/...i_spalten.html
angesehen. Im Firefox mit dem Firebug und im Opera mit Dragonfly - danke an Dirk Jesse, Dragonfly kannte ich noch nicht.

Ein Hinweis vorab: mein Bildschirm ist 1280px breit und hat auch eine BSA von 1280px, die nachfolgenden Pixelwerte gelten bei Text- bzw. Seitenzoom 100%.

Der Firefox zeigt bei mir folgende Werte an:
#main = width: 1182px
.ym-column = width: 842px + padding-right: 340px = Gesamtbreite von 1182px
zieht man davon die Breite von .ym-col1 (width: 250px) ab, ergibt sich für .ym-col3 eine Breite von 932px.

Opera zeigt folgende Werte an:
#main = width: 1179px
.ym-colum: 839px (width) + 340px (padding-right) = Gesamtbreite von 1179px
Zieht man davon die Breite von .ym-col1 (250px) ab, sollte sich für .ym-col3 eigentlich eine Breite von 929px ergeben. Opera zeigt aber für .ym-col3 nur eine Breite von 589x an.

Opera zeigt also für .ym- col3 die Breite (width) mit ca. 340px weniger an als der Firefox.
Warum Opera anders rechnet als der Firefox kann ich nicht nachvollziehen.

Der ganze Spuk ist vorbei, wenn man bei .ym-column padding-right: 340px löscht und bei .ym-col3 margin-right: -340px durch margin-right: 0 ersetzt. Dann wird das Testbeispiel auch im Opera richtig angezeigt.

Nur nebenbei: mit 932px ist .ym-col3 sehr breit, sofern der Inhalt aus Text besteht.
Bei größeren Bildschirmen wird .ym-col3 noch breiter, sofern der Bildschirm in voller Größe zum Surfen genutzt wird.

Was mir noch aufgefallen ist:
im o.a. Testbeispiel habe ich in der layout_individuell.css den Code
.ym-column {padding-right: auto} nicht gefunden - vielleicht wurde er inzwischen gelöscht.
In dieser Datei sollen Werte aus der Original-Datei screen-PAGE-layout.css überschrieben werden.
Es zeigt sich, dass das keine gute Lösung ist, die Übersicht leidet, die Zusammenhänge gehen verloren.
Die bessere Lösung ist: die YAML-Originaldatei zu kopieren, auf dieser Basis eine eigene Layoutdatei zu erstellen, die nicht im Ordner yaml, sondern im Ordner css gespeichert wrd - dieser Ordner muss zusätzlich erstellt werden. Das wurde bereits von Dirk Jesse erläutert und von MrMagpie in seinen zwei vorgestellten YAML4-Websites praktiziert.
Das betrifft auch alle anderen Dateien, die geändert werden, wie z. B. die Datei screen_individuell.css im Testbeispiel. Hier werden Styles aus der Original-Yaml-typographie.css überschrieben, vor allem Angaben zur Schriftgröße.
Soll die Standardschriftgröße wirklich 1.2em betragen? Das sind umgerechnet 19.2px!
Bei max-width: 80em für ym-wrapper ergibt das eine maximale Seitenbreite von 1536px.
In YAML 3.x betrug die Standardschriftgröße 12px und in der YAML4-typographie.css wird font-size
mit 87.5% = 14px angegeben. Das ist eine gut lesbare Schrift. Die Standardschriftgröße darf verändert werden, sollte aber im Normalfall nicht unter 12px und nicht über 16px betragen.