eigener grafischer Bildrahmen

[Doktor]

HI, ich hab schon in google gescuht, aber leider nicht gefunden was ich wollte. Ich bin mir nicht sicher ob es überhaupt über diese Methode möglich ist, aber ich hoffe es mal: Auf der Seite ITCHY POOPZKID
sieht man um jedes Bild einen kleinen Schnörkelrahmen, also ein eigenes gestaltetes Bild als Rahmen. Ich will auf meiner Homepage die gleiche Funktion einbauen. Da ich gerader noch dabei bin das Layout mittels CSS zu gestalten, wäre es mir recht, wenn auch die Rahmenfunktion über CSS abläuft.
Bisher hab ich allerdings nur Rahmen gefunden, wie Striche...gepunktet usw. aber noch keinen Code für einen eigenen Rahmen. Geht das überhaupt, dass ich um ein Bild einen eigenen Rahmen verlegen kann? Wenn ja wie lautet der Code dafür?

Falls es nicht mit CSS gehen würde, wie muss ich dann vorgehen, ohne das ich das Bild in einem Grafikbearbeitungsprogramm damit ausstatte?? Auf Itchpoopzkid sieht man ja den Rahmen auch nur wenn man es ganz normal anschaut, sobald man rechtsklick->grafik anzeigen macht, ist der Rahmen verschwunden (=> wurde auch erst nachträglich gemacht)

 

[Dark D.]

Bu gibst deinen Grafiken den Rahmen als Hintergrund.... :-D

 

[Doktor]

Kannst du das vielleicht ein wenig genauer beschreiben? Ich hab das jetzt nicht genau verstanden.
Meinst du als Hintergrund eine Datei, die dann groß gezogen wird je nach Größe des Bildes??. Es müssen ja eigentlich 4 verschiedene Grafiken sin für den Rahmen (oben/unten rechts/links).
Bsp Itchypoopzkid: http://neu.itchypoopzkid.de/QE/upload/images/content/bildrahmen_tableback_bottom.gif

Als untere Grafik

 

[Dark D.]

Ganau, das funktioniert dann ungefähr so:

<div style="padding-top: [hier Höhe des oberen Rahmens]; background-image: oberer_rahmen.gif;">
  <div style="background-image: linker_rahmen.gif; float: left;"></div>
  <div><img src="anzuzeigendes_bild.jpg" alt="" /></div>
  <div style="background-image: rechter_rahmen.gif;"></div>
  <div style="background-image: unterer_rahmen.gif; clear= left;"></div>
</div>

 

[Doktor]

Kann man das dann auch mit CSS Umsetzen? Also das man diese angaben unten z.B so umsetzt?
#divbild {
....
Wenn ja wie muss dieses CSS Elemnt dann aussehen??

So?
#Beipiel {
padding-top: 3px; background-image: images/oberer_rahmen.gif;
background-image: linker_rahmen.gif; float: left;
background-image: rechter_rahmen.gif;
background-image: unterer_rahmen.gif;
clear= left;
}

Noch eine Frage: Was bringt mir dieses clear?? Für was braucht man das? Ich seh das bei solchen CSS Layouts (wie ich auch grad am versuchen bin) immer wieder, das da irgendwas mit clear steht

 

[Budspencer]

wegn den grafiken:

du stellst deine bilder ganz normal in den html code rein
und gibst dem bild eine class="bild"

<img src="ordner/dein_bild.jpg" class="bild" >

und im css sagst du dann:

.bild{
    background-image: url(C//:ordner/dein_rahmen.jpg);
}

dann nur noch mehr mit padding ausrichten und fertig

dass clear das hebt sozusagen alle befehle der vorherigen divs,classes,...etc. auf (die im css definiert worden sind zb floats und solche sachen)

 

[Doktor]

Ja die Methode geht sicherlich auch, aber gibt es keine Möglichkeit, in der schon alles im CSS festgelegt ist??
Also das ich z.B das Bild z.B einfüge (in eine Div oder in keine? ohne in eine Div wärs natürlich noch besser) und dann vielleicht noch dem Bild/Div eine Klasse zuweisen und der rest geht automatisch. Also nicht, dass ich noch extra mit Padding ausrichten muss oder ähnliches.
In der CSS ist dann der rahmen festgelegt... der Rahmen kann sich natürlich dann je nach Größe des bildes auch wiederholen. Das mus ja bei ITCHY POOPZKID auch irgendwie gegangen sein. Und die haben auch unterschiedlich große Bilder und keinen kompletten rahmen (sondern jeweils nur Rahmen oben/unten links/rechts)

Oder geht es nur über diese ein wenig umständliche Methode?
Eigentlich würde es ja auch so gehn, aber die Homepage ist für einen Kumpel gedacht, der sich darin noch weniger als ich auskenne.