CrazyLexx: Script für automatische Bildformatierung anpassen

Hallo zusammen,

verwende auf meiner Seite den FCKeditor, um Bilder in den Fließtext zu positionieren. Da ich innerhalb des Editor für ein IMG jeweils eine CLASS Informationen mit angeben kann, möchte ich dies zum automatischen Hinzufügen von Bildunterschrift und Layout verwenden. Zu diesem Zweck habe ich mir folgendes Script rausgesucht:

http://lab.arc90.com/2006/07/image_caption_1.php

Das Script erlaubt es dem Benuter des CMS, einfach nur zwei vorhandene Felder verwenden zu müssen und das System regelt automatisch den Rest, ohne irgendwie Hand an den  Quellcode haben zu müssen.

Ich möchte jetzt jedoch das Aussehen des Layout folgendermaßen abwandeln (jedoch nur mit zwei abgerundeten Ecken oben rechts und unten links!) und brauche da mal ein wenig Hilfe:

Für den farbigen Bereich unten, auf dem die Bildunterschrift eingesetzt wird, kann ich ja einfach den Wert für den Hintergrund ändern und die Padding-Werte für oben, links und rechts auf Null setzen. Aber was mache ich mit den abgerundeten Ecken?!

Habe mal dafür zwei kleine Grafiken angefertigt und es ist auch kein Problem eine davon unten links als Hintergrundgrafik einzubinden - aber wie bekomme ich jetzt noch zusätzlich die Grafik mit der abgerundeten Ecken oben rechts ÜBER das eigentliche Bild angezeigt?! Jemand eine Idee?

Danke,
TOM

  1. das kommt mir doch alles sehr bekannt vor:
    http://forum.de.selfhtml.org/archiv/2008/3/t168331/#m1098240

    1. Grüße,

      OMG - und ich dachte ich wage mich an kühe ohne eimer >:D

      MFG
      bleicher

      --
      __________________________-
      Menschen an sich , sind nicht schlecht - es sind nur ihre Taten (c).
      http://www.sexgott-or-not.com/?test=428054
    2. das kommt mir doch alles sehr bekannt vor:
      http://forum.de.selfhtml.org/archiv/2008/3/t168331/#m1098240

      Stimmt schon - auch wenn das Endresultat gleich sein mag, so geht es doch jetzt mehr um die Veränderung an einem bestehenden Javascript oder der CSS Datei. Deshalb habe ich auch dafür einen neuen Thread aufgemacht!

      Suche einfach eine Lösung, wie ich mit dem EINEN zur Verfügung stehenden Tag (der CLASS Befehlt im IMG) zusätzlich zur Hintergrundgrafik für die linke untere Ecke noch eine Grafik oben link ÜBER das Bild eingeblendet bekomme.

      Tom

      1. Hi,

        das kommt mir doch alles sehr bekannt vor:
        http://forum.de.selfhtml.org/archiv/2008/3/t168331/#m1098240

        Stimmt schon - auch wenn das Endresultat gleich sein mag, so geht es doch jetzt mehr um die Veränderung an einem bestehenden Javascript oder der CSS Datei. Deshalb habe ich auch dafür einen neuen Thread aufgemacht!

        Trotzdem waere es schoen, wenn du kuenftig in solchen Faellen auf den bereits archivierten Thread verlinken wuerdest - damit man sehen kann, welche Gedanken zur Thematik du und andere Mitleser sich bereits gemacht haben ... dann muss diese Arbeit zumindest nicht wiederholt werden.

        MfG ChrisB

        --
        "The Internet: Technological marvel of marvels - but if you don't know *what* you're lookin' for on the Internet, it is nothing but a time-sucking vortex from hell."
        1. Hi,

          das kommt mir doch alles sehr bekannt vor:
          http://forum.de.selfhtml.org/archiv/2008/3/t168331/#m1098240

          Stimmt schon - auch wenn das Endresultat gleich sein mag, so geht es doch jetzt mehr um die Veränderung an einem bestehenden Javascript oder der CSS Datei. Deshalb habe ich auch dafür einen neuen Thread aufgemacht!

          Trotzdem waere es schoen, wenn du kuenftig in solchen Faellen auf den bereits archivierten Thread verlinken wuerdest - damit man sehen kann, welche Gedanken zur Thematik du und andere Mitleser sich bereits gemacht haben ... dann muss diese Arbeit zumindest nicht wiederholt werden.

          Geht klar, werde ich mir hinter die Ohren schreiben. Hatte nur gedacht, dass es sich ja eigentlich um eine andere Problemstellung handelt und deshalb einen neuen Beitrag aufgemacht.

          Gruß,
          TOM

  2. Um die aktuelle Problemlage mal kurz zusammen zufassen:

    Um nun das Aussehen von über den FCKeditor eingebundenen Bildern an das allgemeine Layout der Seite anzupassen, möchte ich zwei kleine Grafiken (mit abgerundeten Ecken) anzeigen lassen. Die eine Grafik kann ganz normal als Hintergrundgrafik unten links eingeblendet werden - die zweite Grafik (8bit PNG mit Transparenz) müsste dann allerdings oben rechts ÜBER das eigentliche Bild gelegt werden.

    Zum Aufrufen der entsprechenden Formatierungsinformationen aus dem CSS File kann ich jedoch im IMG Tag der Bilder nur EINE Variable zum Aufruf setzen.

    Besteht nun irgendie die Möglichkeit, mit dem einen mir zur Verfügung
    stehenden CLASS Informationsfeld
    a) zwei Grafiken gleichzeitig aufzurufen und
    b) die PNG nicht als Hintergrundgrafik HINTER sondern VOR das eigentliche IMG zu legen?

    1. Hi,

      Besteht nun irgendie die Möglichkeit, mit dem einen mir zur Verfügung
      stehenden CLASS Informationsfeld
      a) zwei Grafiken gleichzeitig aufzurufen und
      b) die PNG nicht als Hintergrundgrafik HINTER sondern VOR das eigentliche IMG zu legen?

      Mit derzeit aktuellem CSS kann *ein* Element nur *ein* Hintergrundbild bekommen.
      Und Hintergrundbilder zu "Vordergrundbildern" machen geht auch nicht innerhalb eines Elementes.

      MfG ChrisB

      --
      "The Internet: Technological marvel of marvels - but if you don't know *what* you're lookin' for on the Internet, it is nothing but a time-sucking vortex from hell."
      1. Und Hintergrundbilder zu "Vordergrundbildern" machen geht auch nicht innerhalb eines Elementes.

        Verstehe, was habe ich dann für eine Alternative? Kann ich eine Grafik auch direkt im CSS Code aufrufen? Als ähnlich wie der Aufruf einer Hintergrundgrafik nur dann als normale Grafik, mit der ich mittels z-index das eigentliche Bild überlagern kann?

        1. Hi,

          Kann ich eine Grafik auch direkt im CSS Code aufrufen?

          Koennen wir uns jetzt mal von dem "aufrufen" verabschieden? Du willst eine Grafik einbinden - also lass uns das doch auch so nennen.

          Als ähnlich wie der Aufruf einer Hintergrundgrafik nur dann als normale Grafik, mit der ich mittels z-index das eigentliche Bild überlagern kann?

          Ueber content: in Verbindung mit :before/:after kannst du auch Grafiken rein ueber CSS einbinden, ja - wenn dir der IE egal ist.

          Ansonsten brauchst du ein HTML-Element, dem du die Grafik als Hintergrundbild verpassen kannst.

          MfG ChrisB

          --
          "The Internet: Technological marvel of marvels - but if you don't know *what* you're lookin' for on the Internet, it is nothing but a time-sucking vortex from hell."
          1. Hallo.

            Ansonsten brauchst du ein HTML-Element, dem du die Grafik als Hintergrundbild verpassen kannst.

            Falls auf diesen Teil des Quelltextes kein Einfluss besteht, kann man dieses Element natürlich auch mittels Javascript implantieren.
            MfG, at

  3. Wie man im ausgehenden Thread sehen kann, lasse ich über CSS einen Rahmen anzeigen. Zusätzlich möchte ich nun eine kleine Grafik als Hintergrund in der unteren linken Ecke positionieren, damit sie dort den Rahmen überdeckt. Leider bekomme ich die Grafik allerdings nicht AUF sondern nur direkt anliegend an den Rahmen angezeigt. Hier mal eine Illustration zur Verdeutlichung:

    Ist es generell nicht möglich, die Grafik auch auf den Rahmen zu positionieren?

    1. Hallo,


      Ist es generell nicht möglich, die Grafik auch auf den Rahmen zu positionieren?

      nein, das Hintergrundbild bedeckt nur den Bereich des Elementinhalts einschließlich padding. Am Übergang padding/border wird das Hintergrundbild abgeschnitten, während der Inhalt selbst -je nach Wert der overflow-Eigenschaft- darüber hinausragen kann.

      So long,
       Martin

      --
      Niemand lebt allein von seinen Träumen.
      Aber wer träumt, lebt noch.