FCKEditor: Stylesheet für angepasstes Bildlayout erstellen

[CrazyLexx]

Unser CMS verwendet den [b]FCKEditor[/b]als Tool zum Einfügen von Bildern in den Fließtext. Der Editor verfügt offenbar über eine Option, dem eingefügten Bild jeweils ein Stylesheet zuzuordnen.

Könnte man damit nicht soetwas umsetzen:

Also das man im CSS eine Klasse anlegt, die dann an die oberen Ecken jeweils eine kleine Grafik mit weißen, abgerundeten Ecken über das Bild legt und unten einen grauen Hintergrund für den Text an das Bild legt?

Wie müsste dann ggf. der Code ungefähr aussehen?

Danke,
TOM

[Biesterfeld]

Hej,

Also das man im CSS eine Klasse anlegt, die dann an die oberen Ecken jeweils eine kleine Grafik mit weißen, abgerundeten Ecken über das Bild legt und unten einen grauen Hintergrund für den Text an das Bild legt?

Wenn der durch das CMS generierte Code das hergibt, klar. Wieso nicht? Schau dir mal http://www.neuroticweb.com/recursos/css-rounded-box an. Ist zwar für meinen Geschmack etwas viel div-Soup, aber wenn du es z.B. schaffst, deinen Code in eine ähnliche Form zu bringen

  
<div class="roundBox">  
  <img src="bla" alt="blub" />  
  <div>  
    <p>  
      Hier grau unterlegter Text.  
    <p>  
  </div>  
</div>  

sollte das doch mit innen-transparenten Ecken, einem display:block und etwas spielen mit margin und padding recht einfach umsetzbar sein.

Beste Grüße
Biesterfeld

[CrazyLexx]

Hej,

Also das man im CSS eine Klasse anlegt, die dann an die oberen Ecken jeweils eine kleine Grafik mit weißen, abgerundeten Ecken über das Bild legt und unten einen grauen Hintergrund für den Text an das Bild legt?

Wenn der durch das CMS generierte Code das hergibt, klar. Wieso nicht? Schau dir mal http://www.neuroticweb.com/recursos/css-rounded-box an. Ist zwar für meinen Geschmack etwas viel div-Soup, aber wenn du es z.B. schaffst, deinen Code in eine ähnliche Form zu bringen

Hm, danke - werde ich mal versuchen zu implementieren. Aber wie genau bekomme ich das mit den Grafiken für die beiden obrigen Ecken hin? Im Gegensatz zu dem verlinkten Beispiel, muss ja der Hintergrund transparent sein (also weiße Fläche mit Rundung, um das eigentliche Bild zu verdecken). Wenn ich da nun eine GIF Grafik erstelle, wird dann der Rand nicht stark pixelig dargestellt? PNG als Alternative würde ja mit dem Alphakanal schöne Randtransparenz bieten, aber dann nicht im IE6 funktionieren...

[Biesterfeld]

Hej,

Wenn ich da nun eine GIF Grafik erstelle, wird dann der Rand nicht stark pixelig dargestellt? PNG als Alternative würde ja mit dem Alphakanal schöne Randtransparenz bieten, aber dann nicht im IE6 funktionieren...

Also, für den IE gibt es recht zuverlässige Workarounds die ihm alpha-Transparenz beibringen: http://www.google.de/search?q=Workaround+alpha+IE+png.

Allerdings wirst du da einiges basteln müssen, aus zwei Gründen: Zum einen liegen sind die background-images nach dem Workaround nicht mehr positionierbar. Zum anderen hast du das Problem, dass die Hintergrundgrafiken ja im Hintergrund liegen, also auch hinter der eigentlichen Grafik die die per <img /> eingebunden wird.

Was Du aber machen könntest wäre für jede Ecke ein <div> definieren, dass exakt die Ecke enthält, diese 4 divs per z-Index über das <img /> legen und relativ zu dem <img /> + Text in die 4 Ecken positionieren. Is zwar nicht mehr elegant, aber sollte funktionieren.

Beste Grüße
Biesterfeld

[CrazyLexx]

Öhm, muss mal eine allgemeine Frage stellen. Wie man unten am dem Screen sehen kann, bietet der FCKeditor die Möglichkeit, Stylesheets aufzurufen.

In so einem CSS File finden sich aber sonst ja eigentlich keine HTML Angaben wie die von dir beschriebenen DIV-Tags. Wo packe ich die Informationen dann hin?!

[ChrisB]

Hi,

Wenn ich da nun eine GIF Grafik erstelle, wird dann der Rand nicht stark pixelig dargestellt? PNG als Alternative würde ja mit dem Alphakanal schöne Randtransparenz bieten, aber dann nicht im IE6 funktionieren...

Da das ganze nur optische Spielerei ist und keinerlei Inhalt transportiert, wirst du dafuer selbstverstaendlich keine img-Objekte im HTML verwenden, sondern Hintergrundbilder.
Den IE < 7 per CSS-Hack statt eines PNG ein GIF als Hintergrundbild zu servieren, sollte kein Problem darstellen.

MfG ChrisB