Bildecken abrunden - automatisch

**chrischi007** · 20.07.2009 12:28

Hallo,

ich habe das hier gelesen:
http://www.css4you.de/moz-border-radius.html

und würde gern wissen, ob es möglich ist, jedem eingefügten Bild (z.B in Beiträgen usw.) beim Einfügen eine Rundung oben links und unten rechts zu verpassen?

Als Editor benutzer ich den JCE... evt. kann man es da irgendwo verankern?

**Orpheus2510** · 20.07.2009 13:10

Die dort beschriebene Vorgehensweise ermöglicht abgerundete Ecken nur in Mozilla-Browsern (Firefox, Seamonkey etc.) - bei anderen werden die Ecken wieder mit Kanten dargestellt.
Das Ganze müßte also schon in Form von Grafiken in der CSS eingebunden sein, was bei manchen Templates gegeben ist wie zB diesem.

**chrischi007** · 20.07.2009 13:46

Jo, dass ist mir klar, dass es nur bei Mozila funzt...

wie würde denn das CSS aussehen, wenn ich die Grafik erstelle?

Die Grafik muss sich ja mit verändern, wenn sich die Bildgröße ändert, oder?
Außerdem möcht ich das nur im Contentbereich haben...

**chrischi007** · 21.07.2009 09:22

Also, ich habe mich entschlossen, es doch mit Bilder zu machen:

Das habe ich jetzt in meiner Template.css reingeschrieben:

table.contentpaneopen tbody tr td div img{
border: #000 0px solid;
background: url(../images/obenlinks.gif) no-repeat center left;
}

Wie bekomme ich das Bild aber über das andere? Ich habe schon nach z-idex gegoogelt, bin daraus aber nicht schlau geworden.

Habt ihr einen Tipp für mich?

**infernalshade** · 21.07.2009 09:39

HTML:

Code:

<div class="bild">
     <div class="tl corner"></div>
     <div class="tr corner"></div>
     <div class="bl corner"></div>
     <div class="br corner"></div>
     <div class="image">Dein Bild</div>
</div>

CSS:

Code:

div.bild { position:relative; }
div.corner { position:absolute; width:15px; height:15px; z-index:2; }
div.tl { background:transparent url(obenlinks.gif) center center no-repeat; top:0; left:0; }
div.tr { background:transparent url(obenrechts.gif) center center no-repeat; top:0; right:0; }
div.bl { background:transparent url(untenlinks.gif) center center no-repeat; bottom:0; left:0; }
div.br { background:transparent url(untenrechts.gif) center center no-repeat; bottom:0; right:0; }
div.image { position:absolute; z-index:1; }

So dürfte das "abrunden" funktioniert, brauchst nur 4 gif-Dateien mit den Ecken, jeweils 15px breit und hoch wenn du meinem beispiel folgst.

**chrischi007** · 21.07.2009 10:28

Danke, werde ich mal testen...

und wie sieht das ganze aus, wenn man es nur über CSS (für Mozila) macht?

**infernalshade** · 21.07.2009 10:35

Eine "nur-CSS" Lösung wirst du da nicht finden, da brauchst du dann Javascript!

**magnet** · 18.05.2010 10:44

Zitat von infernalshade

So dürfte das "abrunden" funktioniert, brauchst nur 4 gif-Dateien mit den Ecken, jeweils 15px breit und hoch wenn du meinem beispiel folgst.

Hallo!
Ich versuche gerade (als relativ frischer Joomla-Nutzer) die hier beschriebene Modifikation in einem etwas veränderten ja_purity-Template umzusetzen. Sprich ich möchte, dass alle Bilder im Content automatisch abgerundete Ecken bekommen.

Irgendwie hab ich ein Problem, in diesem Fall die CSS-Zuordnung hinzubekommen. In der template.css unter "img" wird ja die Darstellung der Bilder konfiguriert. Ich finde aber absolut nicht, wo dies dann umgesetzt wird.

Kann mir jemand die Sprünge helfen, wo der oben beschriebene HTML-Code eingefügt werden muss, damit die Bilderabrundung greift?

Grüße,
magnet

**magnet** · 24.05.2010 10:52

Moin,

kann mir wirklich niemand einen Tipp geben?

Grüße,
magnet

**chr-hl** · 24.05.2010 14:51

Hallo,

so wie ich das hier lese, muss neben den CSS-Anweisungen in der entsprechenden der HTML-Code aus Beitrag 5 bei jedem Bild eingefügt werden.

Christian

Thema: Bildecken abrunden - automatisch

LinkBack

Themen-Optionen

Thema durchsuchen

Anzeige

Bildecken abrunden - automatisch

Erhielt Danksagungen von:

Lesezeichen

Lesezeichen

Berechtigungen