Rahmen um Bilder

Ohne die Seite sehen zu können, fällt Hilfe Schwer. Ich vermute aber, dass Sie mit dem CSS lediglich einen Rahmen um den Inhaltsbereich gezogen haben und nicht tatsächlich um das Bild. Die Lücke entsteht dann dadurch, dass das Bild eben nicht bündig mit dem Inhaltsbereich abschließt.

Vermutlich würde es besser aussehen, wenn der CSS Selector in Ihrer Regel statt .content .content img wäre, um die Regel dann nur auf alle Bilder innerhalb von .content anzuwenden.

Helmut Hallo!

Weshalb überhaupt Rahmen um Bilder?

Natürlich ist das meine rein subjektive Meinung (und keineswegs "böse" gemeint), aber ich empfinde das als Designer eher "altbacken".

Ohne solche Rahmen (früher hat man sogar Pseudo-3D-Rahmen verwendet... 🙄) sieht eine Website weitaus moderner und "frischer" aus.

Hallo,

manche Layouts bieten ja eine Einstellung bei "Inhaltsbereich" um Rahmen fr Bilder festzulegen, z.B. Stripe-Responsive. Da geht das dann einfacher. Eben weil e solche Einstellungen geben kann, gibt es schon einige Regeln, die die Rahmen in verschiedenen Konstellationen verhindern und das ist, was Ihre Regel behindert hat.

Sie haben den einzelnen Widgets eine Klasse "img" zugewiesen. Das ist nicht unbedingt notwendig, wenn der Rahmen generell angewandt werden soll.

Folgende Regel sollte in diesem speziellen Layout (Clean Style Responsive) funktionieren, falls nicht, können wir leider nicht weiter helfen und verweisen auf die Layouts mit entsprechender Einstellung:

<style>
.zp13sliderWidget, 
.flexslider ul.slides > li > img,
div.articlearea img:not([width="1"]), 
.zpRow.standard div.zpImageGallery > a,
div.newsbox img:not([width="1"]), 
.zpRow.news div.zpImageGallery > a{
    border: 4px solid red;
}
</style>

Helmut Hallo,

die Entscheidung bleibt selbstverständlich in deinen Händen!

Wie gesagt, ist es ja lediglich meine subjektive Meinung.

Hallo Helmut.

Mir ist ja nicht ganz klar, warum du das Bild so angelegt hast ... das ist ja in einer Fancybox, d.h. bei einem Klick auf das Bild wird es vergrößert über die Homepage gelegt. Nur ist das Originalbild so groß, dass eine Vergrößerung hier keinen Sinn macht (wird auch eher verkleinert).

Aber wenn es so sein soll, wie es ist, dann kannst du das Bild auch recht einfach ansprechen mit:

a.fancybox {border: 10px solid green;}