Bilder abrunden

    Hallo zusammen,


    als Neueinsteiger von Zeta-Producer bin ich begeistert, ich habe über 15 Jahre den Internet (als Amateur) mit Expression Web realisiert und habe mich nach verschiedenen Empfehlungen für Zeta entschieden.


    Jetzt muss ich natürlich alle Seiten unseres Vereins neu aufbauen und habe da die eine oder andere Frage:


    Ich möchte einzelne Bilder (nicht alle Bilder der ganzen Seite) an den Kanten abrunden.


    Okay, ich hab mich bei euch schlau gemacht und folgendes gefunden:


    Bei den Hinweisboxen gibt es unten den Butten Darstellung. Hier gibt es das Feld CSS-Stil.
    <style> border-radius: 10px; </style>


    Bei der Bildbearbeitung habe ich die Felder CSS-Klasse und Inline-CSS mit diesen Werten befüllt, leider erfolglos.
    Was mache ich falsch?
    Wie müssen die Felder

    • CSS-Klasse
    • Inline-CSS

    gefüllt sein?


    Danke im Voraus & viele Grüße


    Stephan

    Hm, ich habe das soeben auf http://code.wesign.ch/test nachgebaut und bei mir werden weder CSS-Klasse, noch Inline-CSS korrekt übernommen.


    Edit: jetzt sind da doch abgerundete Ecken. Ich muss das nochmals testen.
    Edit2: Ich habe das Inline-CSS wie im Anhang eingefügt. Das CSS wird nicht beim Bild selbst eingefügt, sondern im 2. DIV-Container davor. Das sieht im Quellcode ungefähr so aus:

    HTML
    <div> <!--Hier wird das CSS eingefügt - nicht beim Bild selbst -->

    	<div>

    		<a class="fancybox" href="media/images/wolkenkratzer_grau-large.jpg" title="">

    			<img class="singleImage" src="media/images/wolkenkratzer_grau.jpg" width="930" height="698" alt="" />

    		</a>	

    	</div>

    </div>


    Das hat zur Folge, dass die Ecken des eigentlichen grossen Bildes alle rund sind, beim Vorschaubild aber nur die oberen beiden rund sind. Warum das so ist kann ich dir nicht beantworten; evtl. kennt jemand einen Lösungsweg.

    Hallo Stephan,
    Hallo Sori,


    normalerweise genügt die Anweisung border-radius: 20px;, oder manchmal auch mit dem zusatz !important unter "Inline-CSS"


    Ich konnte aber eben auch feststellen, das dies nicht zuverlässig geht.
    Mal gehts ohne weiteres, mal wird es gar nicht übernommen, oder es ist dann nur in der Vorschau sichtbar, und wohl auch noch zusätzlich Layoutabhängig.


    Warum das so ist > Keine Ahnung gerade. Es ist Sonntag, und da mach ich mich jetzt nicht lang auf die Suche danach ;)
    Meine aber, das dies mal anders war....


    Eine Workaround-Lösung, die aber (zumindest bei den 2 Layouts die ich eben geprüft habe) funktioniert wäre:


    1: Das hier lesen: https://docs.zeta-producer.com/eigenes-css-einfuegen.html
    2: Dort dann bei CSS, folgenden Code einfügen (ohne Zeilennummern):

    Code
    <style>

    .rund img, #fancybox-img {

        border-radius: 20px; !important

    }

    </style>

    Die 20px, dann nach eigenen Wunsch anpassen.
    3: Mit OK bestätigen
    4: Im denentsprechenden Widget (z.B: Text oder Bild), dann unter der "CSS-Klasse", das rund eingeben.


    Wenn beim "vergrößerten Bild" die Ecke nicht abgerundet sein soll, dann den zusatz , #fancybox-img im Code entfernen.


    Wenn das nicht helfen sollte, dann bitte mal schreiben, welches Layout du im Einsatz hast, und ob du dort zufällig auch einen Rand um die Bilder hast.