Foto in selbstgeschriebenem HTML Code läuft nicht über die richtige Breite

23.02.2020 20:45

Alena vD
#1

Al

Hallo ihr Lieben,

ich hoffe ihr könnt mir helfen. Ich habe teilweise mit Hilfe des Internets einen kurzen HTML Code geschrieben, damit ich in Jimdo Teaserboxen mit Umrandung/Border einbauen kann. Diese Teaserbox ist wiederum in ein vierspaltiges Element eingebaut, so dass ich 4 Teaserboxen nebeneinander habe. Es hat auch fast geklappt, leider bekomme ich das Bild aber nicht auf die richtige Größe, so dass es auch innerhalb der Border liegt. Ich komme einfach nicht darauf, wie ich es programmieren könnte.

Hier der Link zu meiner Testseite:
https://thcab-neu.jimdofree.com/verein/

Mein Code bislang:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 

<div style="border-style: solid; padding: 10px; border-width: 1px; border-style: solid; border-radius: 0px; border-color: #444444;">
    <img srcset=
    "https://thcab-neu.jimdofree.com/app/download/18156350525/23_Verein_Anfahrt.jpg?t=1566467492 225w, https://thcab-neu.jimdofree.com/app/download/18156350525/23_Verein_Anfahrt.jpg?t=1566467492 320w, https://thcab-neu.jimdofree.com/app/download/18156350525/23_Verein_Anfahrt.jpg?t=1566467492 450w"
    sizes="(min-width: 205px)200px, 100vw" id="cc-m-imagesubtitle-image-18103295325" src="https://thcab-neu.jimdofree.com/app/download/18107497725/03_Hockey_Termine.jpg?t=1563819763" alt="" class=""
    data-src-width="304" data-src-height="387" data-src="https://thcab-neu.jimdofree.com/app/download/18156350525/23_Verein_Anfahrt.jpg?t=1566467492 data-image-id=" name=
    "cc-m-imagesubtitle-image-18103295325" />
    <h3 style="color: #2f53a7;">
        So gelangt ihr zu uns
    </h3>
 
    <div class="cc-m-all-content j-module j-callToAction" id="cc-m-all-content-18102947025" data-action="content" ng-non-bindable="">
        <div class="j-calltoaction-wrapper j-calltoaction-align-1">
            <a class="j-calltoaction-link j-calltoaction-link-style-3" data-action="button" href="https://thcab-neu.jimdofree.com/verein/anfahrt/" data-title="Zur Anfahrt">Zur Anfahrt</a>
        </div>
 
        <div data-display="cms-only" data-action="linkIndicator" class="cc-m-link-indicator cc-m-link-indicator-calltoaction" title="" style="left: 0px; top: 27px;">
            <a href="https://cms.e.jimdo.com/app/sace48247c9825f4a/p3f0bf5a612db1f25/" target=""></a>
        </div>
    </div>
</div>
 
 

Ich hoffe, dass mir jemand von euch helfen kann. Ganz lieben Dank im VOraus!

Liebe Grüße,
Alena

Antworten

Beitrag melden

#2

23.02.2020 22:41 (zuletzt bearbeitet: 23.02.2020 23:20)

R. Hurni
#2

R.

R. Hurni

sollten die Bilder nicht alle gleich gross, quadratisch sein ? , damit diese in die Spalte passen

Antworten

Beitrag melden

#3

24.02.2020 09:36

Alena vD
#3

Al

Alena vD

Eigentlich habe ich die Bilder alle auf einer Größe angelegt, bei dem ersten Kästchen habe ich versucht schon herumzuprogrammieren, was leider nicht geklappt hat. Aber auch bei den anderen Kästchen, wo ich die Größe händisch bestimmt habe, bleibt das Bild, wenn ich z.B. in die Mobileansicht gehe, nicht in der Spalte. Oder auf welche Größe müsste ich die Bilder anlegen? Ich dachte dass man dem Bild vielleicht irgendeinen Befehl geben muss "width= 100%" oder so, aber das funktioniert leider nicht. Hast du eine Idee?

Antworten

Beitrag melden

#4

24.02.2020 22:50 (zuletzt bearbeitet: 24.02.2020 23:00)

R. Hurni
#4

R.

R. Hurni

ein irgendwie komischer Code, du könntest versuchen bei der Bildgrösse min-width mit max-width zu ändern.

du könntest das ganze aber einfacher machen, da du das auf mehreren Seiten eingebaut hast gibt es dementsprechend mehr Arbeit.

erstelle normale Spaltenelemente, dort fügst du die Bilder ein, alle gleiche grösse, damit es sauber aussieht, darunter den Text und Button.

füge im Head folgenden Code ein, für jede Spalte einmal, also für vier Spalten vier mal, ( könnte man alles in einen Code verpacken ) , ist aber übersichlicher für Nichtkenner.

<style type="text/css">
/*<![CDATA[*/
/*Seite Verein mit 4 spalten, spalte 1, ( 2 , 3 oder 4 ) */

#cc-matrix-xxxxxxxxxx {

background-color:#ffffff; border:#000 1px solid; padding: 18px; border-radius: 0px 0px 0px 0px;}

}
/*]]>*/
</style>

am besten öffnest du jetzt deine HP noch einmal neu, gehst zur Seite, machst einen Rechsklick in die entsprechende Spalte und auf Element untersuchen, dort findest du jetzt matrix-2340679950 für die Spalte, da fügst du beim Code des Spaltenelements ein.

kannst das auch in den Footer einbauen, dann hast das gleich auf allen Seiten

(( Spaltenbeschrieb, damit du diese einfach findest ))

habe das auf einer Testseite eingebaut mit drei Spalten