Bildrahmen wie bei Layout Contemporary Responsive

Websven

Hallo Forum,

beim Layout Contemporary Responsive werden die Bilder eingerahmt. Wie kann man das in einem anderen Layout realisieren ? ich würde gern im Layout Simple Responsive die Bilder ebenfalls mit einem Rahmen versehen - Farbe sollte veränderbar sein.

Ich hoffe mal darauf, das Mario wieder eine CSS-Lösung aus dem Hut zaubert

Grüße

Stefan S

Soll das auf alle Bilder im Projekt zutreffen, oder möchten Sie per Bild einstellen können, ob es einen Rahmen erhält?

Websven

Im aktuellen Fall auf alle Bilder im Projekt. Künftig wäre die möglichkeit, dies per Bild einzustellen auch nicht schlecht, glaube ich

Danke und Grüße

Stefan S

OK, dann können Sie das ggf. per CSS machen. Zum Beispiel:

Code

#content img{
    border: 4px solid white;
    box-shadow: 1px 1px 4px rgba(0,0,0,0.5);
}

Das fügt dann allen Bildern im Inhaltsbereich (im Layout Clean Style Responsive) einen 4px breiten , weißen Rahmen sowie einen Schatten hinzu.

Websven

Hallo Stefan,

vielen Dank - aber ich bin anscheinend mal wieder zu doof das umzusetzen.

Ich habe unter Einstellungen - CSS folgendes eingegeben (weiß ist aktuell der Hintergrund

CSS

<style>
#content img{
    border: 8px solid red;
    box-shadow: 1px 1px 4px rgba(0,0,0,0.5);
}
</style>

Aber irgendwie haben die Bilder noch keinen Rahmen

Stefan S

Wie ist die Web-Adresse der Seite, damit wir das online prüfen können?

Websven

Ich habe es jetzt erst einmal auf den Zeta-Testserver veröffentlich:

https://hosting.zeta-producer.com/5826985645/index.html

Websven

Ich habe jetzt etwas rumgespielt un mit dem css vom Layout Contemporary Responsive vergliechen. Mit folgendem Code unter Einstellungen - CSS geht es jetzt für alle Bilder:

CSS

<style>

img {
    margin: 0;
    padding: 0;
    border-style: none;
    box-sizing: border-box;
}
.zp13sliderWidget, div.articlearea img, .zpRow.standard div.zpImageGallery > a{
    
    border: 4px solid #ac8b4b;
    box-sizing: border-box;
    box-shadow: 1px 1px 1px #E7E7E7; 
    
}
</style>

Alles anzeigen

Stefan S

Sie haben noch anderes CSS im Projekt, das explizit Rahmen um Bilder abschaltet. Ggf. mal dieses andere CSS entfernen:

Code

img {
margin: 0;
padding: 0;
border-style: none;
box-sizing: border-box;
}

Websven

Guten Abend,

wie am Samstag gepostet habe ich die CSS-Datei des anderen LAyouts etwas genauer angesehen - und mit dem geposteten Code funktioniert es jetzt - wieso auch immer.

Leider kann ich jetzt nicht auf dem Testserver veröffentlichen, da angeblich das Projekt zu groß ist - dies kann aber eigentlich mit den 5 Seiten und 5 Bilder um 1 MB nicht wirklich sein, diese werden mir auch in der Bilderverwaltung angezeigt .....

Websven

wieso auch immer waren im Prjoekt-Output ORdner zwei große Bild-Dateien, die eigentlich gar nicht im Projekt mehr vorhanden waren. Diese habe ich gelöscht und dann ging die veröffentlichung wieder

Bildrahmen wie bei Layout Contemporary Responsive

Jetzt mitmachen!

Hilfe zum Support-Forum

Wollen Sie eine professionelle Website erstellen?