Galerie-Objekt Beschreibung unter den Bildern ist zu breit. 
Author: Hans T.
Visited 483,
Followers 2,
Shared 0
Ich habe auf zwei fast identischen Seiten exakt dir gleichen Bilder in derselben Reihenfolge. Nach dem responsiven Einstellen der Webseiten ist unten das Feld der Beschreibung zu breit geworden und läuft über die Bildbreite hinaus.
Auf einer ganz anderen Webseite passiert das nicht. Der Eintrag vor dem Head-Tag ist bis auf die Farbcodes identisch.
<style>
div[id$='_description'] {background-color: #8b0000 !important; color: #ffffd5 !important }
</style>
Hier zwei Screenshots als Beispiele.
Der Balken ist bündig.
Der Balken ist nicht bündig.
Was kann ich tun, damit die Balken in der Galerie BÜNDIG sind?
Danke und beste Grüße aus Berlin.
Hans
Posted on the
Evtl. die Links zu den 2 Galerie-Seiten nennen, damit das Problem analysiert werden kann.
Sollen die Links nicht öffentlich sein, dann den Post auf "Privat" stellen, damit ihn nur die Mitarbeiter von Incomedia sehen können.
Author
https://hansteterra.de/index.html
https://tedjohansson.de/index.html
Nach dem Einstellen auf Einstellen Responsive, Schritt 4 oben rechts, ist der Balken breit.
Die Seiten sind zu Testzwecken online.
Danke.
Offenbar nutzt WebSite X5 die verfügbare Breite des DIVs für die Beschreibungen und setzt darüber die Bilder mit unterschiedlich berechneten Breiten und Abständen zum linken Rand.
Mögliche Lösungen:
A) Eine Möglichkeit wäre, dass man nur Bilder mit gleichen Proportionen (z.B. Höhe:Breite = 2:3) verwendet, dann würden alle Bilder in der Galerie in voller Breite angezeigt.
B) Vielleicht können die Javascript-Experten etwas machen oder Incomedia eine Option wie z.B. "Breite der Beschreibung an Bildbreite anpassen" hinzufügen.
C) Da sich je nach Bild der Abstand zum linken Rand und die Bildbreite ändern, ist fraglich, ob mit CSS etwas zu machen ist. Aber da ich kein CSS-Experte bin, kann ich das nicht einschätzen.
.
----- Webentwicklerwerkzeug in Firefox bei meiner Test-Galerie -----
Hier meine Testseite mit Galerie und 4 Bildern, siehe
>> https://findelinks.de/123shop-hosteurope/galerie-mit-beschreibungen.html
Ein Bild ist in voller Breite und da passt dann die Breite der Beschreibung zum Bild.
Author
Ja. Der Balken soll sich der Bteite des Bildes anpassen. Siehe oben. Vor dem responsiven Einstellen, ging es ja.
Der Balken passt sich aber nicht dem Bild an, sondern dem Objekt! Der Balken kann nur eine Einstellung haben und nicht genau die was das derzeit angezeigte Bild hat. Ein Bild wäre kein Problem mit CSS zu machen, aber da es viele unterschiedliche Bilder sind, geht das nicht.
Möglicherweise würde es umgekehrt gehen, dass sich das Bild an das Objekt anpasst und ausfüllt, aber das geht glaube ich auch nur mit JAvaskript.
Author
Na ja. Sie Bilder oben. Bevor ich die responsive Einstellung gemacht hatte, ging es ja.
(It > De) ... Wenn Sie wirklich interessiert sind und es keine anderen Lösungen von Experten gibt, ... könnte die Breite des Beschreibungsfelds, die der des zugehörigen Bildes entspricht, mit einer meiner Erfindungen mit EXTRA-Code erreicht werden ...
... also, wenn Sie daran interessiert sind, EXTRA fortzufahren, lassen Sie es mich einfach wissen, und ich werde hierher zurückkommen...
.
ciao
.
Author
Ja, BITTE. So sieht es nicht wirklich schön aus. DANKE
... Ich schlage zwei meiner Ideen/Erfindungen vor, die Sie ausprobieren und nach Ihren Wünschen auswählen können ...
... das erste in einfachem CSS mit transparentem Hintergrund (*) und kontrastierendem Text...
(*) - vielleicht können Sie es auch mit Programmoptionen bekommen ...
... das zweite mit JS+jQ-Skript, wobei die gleichen Hintergrundeinstellungen beibehalten werden...
.
... hier ist der erste Code in CSS:
<style>
/*k*/div[id^='imObjectGallery_'] div[id$='_description'] {background-color:transparent !important;text-shadow: 1px 1px 1px black !important;}
</style>
.
.
... hier ist der zweite Code mit JS+jQ-Skript, den Sie bewerten müssen, ob er für Sie geeignet ist:
<script>
$(document).ready(function () {
/** -- controllo width DIV x WSx5 by KolAsim -- **/
setInterval(function(){
$("div[id^='imObjectGallery_'] div[id$='_description']").css("width",$("div[id^='imObjectGallery_'] img").width() + "px").css("left","50%").css( "transform","translate(-50%,0)")
}, 100);
});
</script>
.
ciao
.
Author
Danke, danke.
Beim ersten Code müsste ich die Farbe des Textes ändern, weil er vor den Bildern schlecht zu sehen ist.
Beim zweiten Text springt der Text ein wenig, aber der Balken stimmt :)
Siehe Schnappschuss.
LG Hans
Danach springt der Text in den Balken:
Danke - Danke - Danke
... Ich gebe Ihnen einen neuen Code, den Sie als Alternative zum vorherigen Skript ausprobieren können:
<script>
$(document).ready(function () {//K>;
/** -- controllo descrizione gallery x WSx5 by KolAsim -- **/
styleK="<style>/*k*/div[id^='imObjectGallery_'] div[id$='_description'] {background-color:transparent !important}</style>";
$("head").append(styleK);
objectK1 = "#imObjectGallery_572";
objectK2="#imObjectGallery_571";
setInterval(function(){//K1>;
textK1= $(objectK1+" div > div > div").text()
textK2= $(objectK2+" div > div > div").text()
$(objectK1+" div > div > div").html('<span class="K" style="background-color:#8b0000;padding-left:5px;padding-right:5px">'+ textK1 + '</span>')
$(objectK2+" div > div > div").html('<span class="K" style="background-color:#8b0000;padding-left:5px;padding-right:5px">'+ textK2 + '</span>')
}, 500);//K1<<;
}); //K<<;
</script>
.
ciao
.
Author
Danke. Ja der Text springt nicht mehr, aber dafür ist der Balken weg. :))
Ich habe es schon mit KI versucht, dir bekommt es auch nicht hin.
Danke für deine große Mühe.
LG aus Berlin
Hans
... Es tut mir leid, mir fallen leider keine anderen Alternativen ein...
.
ciao
.
Author
Danke für deine Mühen.
Muss Website ändern. So ist es nicht schön.