CSS Zuweisungsprobleme! Einstellungen

[clemens]

Ich würde gerne im Wysiwyg-Editor eine Bildbox zuweisen. Bedingt funktioniert das. Das Aussehen der Bildbox mit padding uns so weiter funktioniert. Dem Bild selbst soll aber auch ein Style, z.B. mit einem Rahmen. Hierfür habe ich folgendes CSS:

.bild-r

{
display: block;
margin-top: 3px;
margin-left: 20px;
background-color: #ffffff;
padding: 6px;
float: right;
}

.bild-r img {
padding: 2px;
background-color: #ffffff;
border: 1px solid #6B6B5F;
}

Dieses CSS ist in Contenido funktionstüchtig und sieht vom Erscheinungsbild nachher so aus wie das Bild links mit dem Baum. Hier in Sefrengo bekomme ich das leider nicht entsprechend zugewiesen. Was gehe ich hier am Besten vor?

Desweiteren sieht im Backend meine Seite anders aus als im Frontend. Hier zu sehen: www.clemensschnitzler.de/projekt01/. Im Backend klebt der Text direkt an dem rechten Bild und der Rahmen um das Bild ist nicht sichtbar.

Im Texteditor selbst kann ich den Text, da er weiß ist nicht sehen und daher auch sehr schlecht bearbeiten, gibt es da die Möglichkeit den Style der Hintergrundfarbe wie sie im CSS für das Web definiert wurde zu übernehmen?

Für Eure Hilfe schon jetzt recht herzlichen Dank.

[andi]

hallo clemens

Dieses CSS ist in Contenido funktionstüchtig und sieht vom Erscheinungsbild nachher so aus wie das Bild links mit dem Baum. Hier in Sefrengo bekomme ich das leider nicht entsprechend zugewiesen. Was gehe ich hier am Besten vor?

in dieser form funktioniert das sicherlich auch in contenido nicht.

1. dein bild hat nicht die klasse .bild-r, sondern eine id
2. das element .bild-r img existiert nicht

Im Texteditor selbst kann ich den Text, da er weiß ist nicht sehen und daher auch sehr schlecht bearbeiten, gibt es da die Möglichkeit den Style der Hintergrundfarbe wie sie im CSS für das Web definiert wurde zu übernehmen?

forumsuche spuckt diesen beitrag aus. einfacher geht es mit dem tiny-editor, welchen ich nebenbei sowieso dem fck-editor bevorzuge.


gruss andi

[smail]

Im Texteditor selbst kann ich den Text, da er weiß ist nicht sehen und daher auch sehr schlecht bearbeiten, gibt es da die Möglichkeit den Style der Hintergrundfarbe wie sie im CSS für das Web definiert wurde zu übernehmen?

wie andi bereits sagte: ich denke auch, dass Du mit dem TinyEditor schneller zu Deinem Ziel kommst. Im Verzeichnis tinymce findest Du eine Datei "tinymce4sf_content_overwrite.css":

• Zum einen kannst Du damit für die Bearbeitungsansicht die Styles der Seite überschreiben-
• zum anderen werden Dir die dort definierten Klassen in den Tiny-Dropdown-Menüs bei der Style-Auswahl angezeigt, so dass diese dann bequem zuweisbar sind.

Beim FCK-Editor kann ich Dir leider nicht weiterhelfen, weil ich den aufgrund der schlechteren Skalierbarkeit und des schlechteren Outputs nicht verwende...

Viele Grüße
Jan

[clemens]

Erst einmal Dank für die Tips. TinyMCE ist installiert und funktioniert, auch mit der entsprechenden Hintergrundfarbe.

Das mit dem Bild bekomme ich aber leider nicht in den Griff. Irgendwie bin ich Betriebsblind und finde den entsprechenden Fehler nicht.

Vielleicht seit Ihr so nett und schaut euch das noch mal an.

Vielen Dank und viele Grüße

Clemens

[andi]

hallo clemens

da gibts nicht viel neu anzuschauen, der fehler ist klar.

1. das bild in deinem layout hat die id «bild-r». in deinem css hast du allerdings eine eine klasse namens «bild-r» definiert
2. .bild-r img funktioniert aus zwei gründen nicht. zum einen hat das bild wie in punkt 1 geschrieben keine klasse sondern eine id. zum anderen hat das bild kein elternelement mit der klasse bild-r.

gruss andi

[clemens]

Also TinyMCE ist installiert und funktioniert. Ich habe bemerkt, dass in der Version welche ich installiert habe für zum Beispiel Schriften kein eigener Style ausgewählt werden kann. Dies müsste laut TinyMCE Documentation gehen (siehe Bild m Anhang). Leider reicht jedoch mein Englisch nicht aus um herauszufinden wo man das konfigurieren kann.

Könnt ihr mir einen Tipp geben, wo dies in den Scripts vom Tiny konfiguriert wird?

Vielen Dank für Eure Hilfe.

Gruss

Clemens

 tiny.jpg ( 93.11KB ) Anzahl der Downloads: 15

[andi]

morgen clemens

grundsätzlich kann der tiny nur styles verwalten, welche in sefrengo unter design --> stylesheet angelegt worden sind. danach kannst du in der modulkonfiguration des wysiwyg2 (u.a. auch contentflex) unter dem punkt «für den redakteur auswählbare stylesheets» deine styles auswählen. diese erscheinen danach im tiny.


gruss andi

[saschapi]

und schon vorweg: auch hier Klassen verwenden und nicht IDs

[clemens]

OK. Das ist jetzt auch richtig konfiguriert. Die Styles können ausgewählt werden.

Nun nochmal zu meinem eigentlichen Thema.

Ich habe jetzt eine Klasse .bild-r {display: block; margin-top: 3px; margin-left: 20px; background-color: #ffffff; padding: 6px; float: right;} die bekomme ich richtig angezeigt.

Dann habe ich als Tag das hier konfiguriert: img .bild-r {padding: 2px; background-color: #ffffff; border: 1px solid #6B6B5F;} das greift leider nicht.

Wenn ich das mit dem Web-Developer-Plugin in Firefox anschaue scheint aber alles richtig zu sein. Oder ich definiere die Anzeige falsch.

Eins ist sicher, meine CSS-Kenntisse reichen hier nicht aus.

Es wäre nett, auch wenn es in diesem Forum nicht um CSS geht, wenn Ihr mir bei der Lösung dieser Fragestellung helfen könntet.

Vielen Dank und viele Grüße aus Mainz

Clemens

[Chregu]

Kurze frage, auf welchem elemtent definierst du den .bild-r?

[clemens]

Ich gehe davon aus, dass Du auf www.clemensschnitzler.de/projekt01/ geschaut hast. Dort dreht es sich um das Bild rechts vom Text, die Aufnahme des Sees.

[andi]

die klasse ist dem bild zugeteilt. aus diesem grunde kann «img .bild-r» nicht funktionieren.
dein effekt lässt sich ohne zusätzliches element nicht bewerkstelligen, da border immer ausserhalb des paddings angewendet wird. du hast also 2 möglichkeiten:

1. das bild mit einem weiteren element umschliessen und da das padding anwenden (wobei ich nicht weiss, wie das in tiny funktionieren soll)
2. dem bild selber in einem grafikprogramm den border verpassen

gruss andi

[clemens]

1. das bild mit einem weiteren element umschliessen und da das padding anwenden (wobei ich nicht weiss, wie das in tiny funktionieren soll)

Ich weiß nicht wie ich es umschreiben soll. Genau das ist eigentlich die Idee, das Bild mit einem weiteren Element zu umschliessen. Und das funktioniert in Contenido mit dieser CSS-Definition:

.bild-r {display: block; margin-top:3px; margin-left:20px; background-color: #ffffff; padding:6px; float:right;}

.bild-r img {padding:2px; background-color:#ffffff; border:1px solid #6B6B5F;}

Hierfür definiert man dann noch, dass der Redakteur per TinyMCE auf den Style .bild-r zugreifen kann. Somit kann dann per Drop-Down der Style ausgewählt werden. Dies funktioniert auch in Sefrengo.

Das kann man sich unter www.c-schnitzler.eu anschauen.

Der Quelltext hierzu aus Contenido:

<span class="bild-r"><img src="http://c-schnitzler.eu/cms/upload/bilder/IMGP0493.png" alt="Der Chiemsee im Oktober" title="Der Chiemsee im Oktober" height="274" width="180" /></span>

Der Quelltext von Sefrengo:
<p class="inhalt"><!--START 6//--><span class="inhalt"><img class="bild-r" src="media/img/allgemein/IMGP0493.png" alt="Der Chiemsee im Oktober" title="Der Chiemsee im Oktober" width="180" height="274" />

Auf .bild-r img wird hier wohl automatisch durch das Tag <img src="......> als Kindelement von .bild-r zugegriffen.

1. dem bild selber in einem grafikprogramm den border verpassen

Dass wäre eine Möglichkeit. Da ich selbst die Seiten füllen werde kein Problem. Mit Bildbearbeitung verdiene ich mein Geld. Nur wie sieht es bei Objekten aus, welche von Redakteuren gefüllt werden sollen. Da haben meist sehr wenige Ahnung, wie dies in einer Bildbearbeitung zu bewerkstelligen ist.

Also suche ich noch immer nach einer Lösung.

Viele Grüße

Clemens

Der Beitrag wurde von clemens bearbeitet: Tue. 25. September 2007, 12:25

[andi]

Ich weiß nicht wie ich es umschreiben soll. Genau das ist eigentlich die Idee, das Bild mit einem weiteren Element zu umschliessen. Und das funktioniert in Contenido mit dieser CSS-Definition.

das css alleine generiert noch lange kein zusätzliches element.
das span muss die klasse bild-r erhalten, das bild braucht keine eigene klasse. dann funktioniert auch dein dazugehöriges css:

QUELLTEXT

.bild-r

{
display:     block;
margin-top: 3px;
margin-left:     20px;
background-color:     #ffffff;
padding:     6px;
float: right;
}

.bild-r img {
padding:     2px;
background-color:     #ffffff;
border: 1px solid #6B6B5F;
}

[clemens]

So jetzt habe ich es raus!!!!!

Ich habe die ganze Zeit das Bild angeklickt und über Bildeigenschaften bzw. über das Popup Style die Klasse zugewiesen. Das war nicht ausreichend, da für das Bild kein eigener span erzeugt wird. Auch eine Bildmarkierung, also mit dem Cursor "drüberfahren" hat nicht ausgereicht. Nun habe ich einen Wortzwischenraum eingefügt, diesen und das Bild markiert und dann die Klasse zugewiesen. Nun klappt es!

Euch allen recht herzlichen Dank.

Viele Grüße aus Mainz

Clemens