Verzerrte Bilderdarstellung (CPO-Problem mit CSS-Klassen?)

Fragen und Diskussionen zu laufenden ConPresso 4.x Projekten werden in diesem Forum diskutiert.
Antworten
AndreasM
ConPresso-User
Beiträge: 25
Registriert: 10.03.2007 18:11

Verzerrte Bilderdarstellung (CPO-Problem mit CSS-Klassen?)

Beitrag von AndreasM »

Hallo,

wo speichert ConPresso eigentlich die Infos zu einem Bild, wie z.B. die Breite und die Höhe? Und hat er im Zusammenhang mit Bildern ein CSS-Problem?

Ich habe nämlich ein echt merkwürdiges Phänomen beobachtet:
Im Editor werden drei Bilder nebeneinander gesetzt, alle mit einer CSS-Klasse versehen, die margin-right=20px setzt, so dass ein Abstand zum Nebenbild gehalten wird. Da ich nicht über meine Container-Breite kommen möchte, hat das letzte Bild eine andere CSS-Klasse ohne Abstand rechts (weil es sonst den Container sprengen würde).

Soweit ist das alles normales CSS und hat nichts mit ConPresso zu tun. Nun kam es aber dazu, dass auf der Website die Bilder plötzlich verzerrt dargestellt werden. Nach einigen Tests kam ich darauf, dass ich lauter unterschiedliche Klassennamen verwenden muss (die CSS-Anweisungen bleiben dabei gleich, es muss nur eine andere Klasse sein!), damit es wieder funktioniert.

Da hat sich doch irgendwie die ConPresso-Datenbank verschluckt, oder? Hat jemand eine Erklärung?

Anbei Browser-Screenshots vom Phänomen (es handelt sich jedes Mal um das selbe 150px breite Platzhalter-Gif, die CSS-Infos habe ich zur Info eingefügt):
In Abbildung 1 wird nur das letzte Bild korrekt dargestellt (die anderen beiden hat ConPresso vergrößert!).
In Abbildung 2 habe ich dem mittleren Bild einen anderen CSS-Klassennamen verpasst und es sieht nun auch richtig aus.
In Abbildung 3 ist alles korrekt, da 3 unterschiedliche CSS-Klassennamen verwendet werden.
Bild
Bild
Bild
Benutzeravatar
Marky
ConPresso-Checker
Beiträge: 382
Registriert: 11.12.2005 15:29
Hat sich bedankt: 29 Mal
Danksagung erhalten: 18 Mal
Kontaktdaten:

Beitrag von Marky »

Gibt denn da einen Link, wo man sich die fertige Seite mal anschauen kann ?
Kann mir irgendwie nicht vorstellen, dass das etwas mit Conpresso zu tun hat, wenn es in der fertigen Seite letztendlich so aussieht.
Gruß
Marky
Benutzeravatar
Matthias V
Modul-Entwickler
Beiträge: 1251
Registriert: 01.01.1970 01:00
Wohnort: Sondershausen
Hat sich bedankt: 54 Mal
Danksagung erhalten: 147 Mal
Kontaktdaten:

Beitrag von Matthias V »

Conpresso wird die Größenangaben schon richtig in der Datenbank speicher.
Aber wenn du zusätzlich mit CSS die Breite der Bilder angibst, kann das abhängig vom Browser zu Wechselwirkungen führen.

Es liegt dabei nicht an Conpresso.
Sondern höchstens am Browser. Genau kann ich das Problem allerdings nicht nachvollziehen.

Lass doch einfach im Template die Größenangaben weg, wenn du das sowieso mit CSS skalieren möchtest.

Conpresso selbst kann für soetwas nicht verantwortlich sein, es sei denn die Datenbank ist vermurkst (was sehr unwahrscheinlich an Conpresso liegt).

Gruß Matthias V
mod_Guestbook 4.1.0

Features:
- Einträge als ConPresso-Artikel
- benutzt Templates, Rubriken, ...
- Captcha
- BB-Code + Smilies + Zitieren
- Badwords
- Anonymisierung
AndreasM
ConPresso-User
Beiträge: 25
Registriert: 10.03.2007 18:11

Beitrag von AndreasM »

@Marky
Nein, man kann die Seite leider nicht ansehen, da der Kunde bereits anfängt, seine Inhalte einzugeben und ich nur ein paar temporäre Tests gemacht habe, die nicht mehr online sind. Aber die Bilder sagen doch eigentlich alles, oder?

Das ist übrigens der generierte Code, wenn man mit Firefox auf Mac im Editor arbeitet:

Code: Alles auswählen

<p><img class="left" src="http://www.pecherundpartner.de/_data/platzhalter_150.gif" /><img class="left" src="http://www.pecherundpartner.de/_data/platzhalter_150.gif" /><img class="end" src="http://www.pecherundpartner.de/_data/platzhalter_150.gif" /></p>
Und das ist der Code, wennn man mit IE7 auf PC im Editor arbeitet:

Code: Alles auswählen

<P><IMG class=left src="http://www.pecherundpartner.de/_data/platzhalter_150.gif"><IMG class=left src="http://www.pecherundpartner.de/_data/platzhalter_150.gif"><IMG class=end src="http://www.pecherundpartner.de/_data/platzhalter_150.gif"></P>
Man sieht, IE erzeugt keinen ganz sauberen Code (Großschreibung der Tags, fehlende Anführungszeichen bei den Attributen), aber beide geben keine Größen an (obwohl sie im Editorbereich unten angezeigt wurden; vielleicht liegt da das Problem? wie bringe ich ConPresso dazu, hier die Maße des Bildes mit in den Quellcode zu übernehmen?).

@Matthias
Ich habe mit CSS keinerlei Breiten angegeben, lediglich den Abstand nach rechts. Und das Problem tritt browserübergreifend auf (Firefox auf Mac und IE7 auf PC).

Auch im Template sind keinerlei Bildgrößen definiert. Die Bilder werden im Editor eingefügt und mit den für die Redakteure verfügbaren CSS-Klassen formatiert (siehe Screenshots). Mehr ist es nicht. Ich möchte auch nichts skalieren, das tut ConPresso, denn die Bildgrößen wurden von mir an keiner Stelle manipuliert, weder im Template, noch im Editor, noch im CSS.

Und komisch ist doch, dass ich das Problem reproduzieren kann (und beheben durch andere Klassennamen)...

Eigentlich bin ich auch eurer Meinung, dass das nichts mit ConPresso zu tun haben kann, aber meiner Meinung nach scheidet jede andere Erklärung aus, denn in all meinen Webdesign-Jahren ist es mir noch nie vorgekommen, dass sich ein Bild ohne weitere andere Größenangaben im Browser skaliert.
Benutzeravatar
MarkusR
Handbuchversteher
Beiträge: 7362
Registriert: 01.01.1970 01:00
Hat sich bedankt: 111 Mal
Danksagung erhalten: 934 Mal
Kontaktdaten:

Beitrag von MarkusR »

Schade... Ansehen würde vermutlich am ehesten eine Lösung bringen.

Leider kann ich zum Mac-Browsern nix sagen und weiß, daß IE7 bestimmte Dinge falsch darstellt.

Eine korrekte Darstellung wird auch meist verhindert, wenn in der ersten Zeile des Dokumentes NICHT der doctype steht... das könnte ein Teil des Problems sein.
Ciao Markus
ConPresso-Module

Kein Support per PN!!! Für Fragen und Diskussionen ist das Forum da!

Succi recentis officinalis
Hochwertige Kräutersäfte und -Öle
Benutzeravatar
balu
ConPresso-Entwickler
Beiträge: 1748
Registriert: 01.01.1970 01:00
Hat sich bedankt: 81 Mal
Danksagung erhalten: 133 Mal

Beitrag von balu »

oi zusammen,

an ConPresso liegt das ganz bestimmt nicht - wie man an dem Quellcode sieht, werden ja gar keine Infos zur Groesse angegeben. Dann sollten Browser das auch nicht verzerrt darstellen - ausser im CSS steht was anderes.

Die Browser fuegen die unterschiedlichen Groessen meines Wissens ein, wenn man die Bilder im Editor verzerrt.

Und zum Schluss: ConPresso speichert die Bildgroessen nicht in der Datenbank. Wenn die Bilder im Template benutzt werden, werden die Groessen direkt aus der Datei gelesen. Im Editor wird die Groesse per Javascript ermittelt.

Balu
Benutzeravatar
MarkusR
Handbuchversteher
Beiträge: 7362
Registriert: 01.01.1970 01:00
Hat sich bedankt: 111 Mal
Danksagung erhalten: 934 Mal
Kontaktdaten:

Beitrag von MarkusR »

CSS ist nicht wirklich meine Stärke, aber vielleicht quält sich Dein Browser ja mit der mehrfachen Definition der Klasse .left

pecher-screen.css:

#contentbox img.left {float: left; margin-right: 20px;}
...
#contentbox .contentstandard .left {float: left; width: 240px; text-align: left;}

Und Deine vergrößerte Version ist, wenn mann sie nachmisst, zufällig genau 240 Pixel breit... :wink:

(Du hast ja ausgerechnet im dritten Beispiel die urspüngliche Klasse .left durch .leftrow ersetzt...)
Ciao Markus
ConPresso-Module

Kein Support per PN!!! Für Fragen und Diskussionen ist das Forum da!

Succi recentis officinalis
Hochwertige Kräutersäfte und -Öle
AndreasM
ConPresso-User
Beiträge: 25
Registriert: 10.03.2007 18:11

Beitrag von AndreasM »

Mensch MarkusR,

das wird es sein! Ich war mir 100%ig sicher, dass es nicht am CSS liegen kann, da ich die Klasse .left ja explizit dem img-Tag zugeordnet habe. Aber stimmt: das wird den Browsern nicht gefallen haben, dass es da noch eine andere Klasse .left gibt (die zwar allgemein gültig ist, aber eben auch auf Bilder zutreffen könnte).

Und wieder ein Rätsel gelöst ;-)

Danke für den Tipp!

@balu
Danke für die Hintergründe zur ConPresso-Bildbehandlung, hilft mir wieder einen Schritt weiter beim allgemeinen ConPresso-Verständnis.
Antworten