Rahmen und Hintergrund um Spalte
HILFE
Ich würde gerne um eine Spalte einen Rahmen und bei einem Teil einen Hintergrund hinterlegen. Habe es bereits mit einer Tabelle versucht, dies funktioniert zwar, sieht aber auf der Mobilen Ansicht sch.. sse aus.
Ich habe nun den html code rausgelesen und via Wiget eingefügt und geändert. Nur sieht es leider nicht so aus wie ich es gerne hätte.
Entweder ist ist der Text mit einem Rahmen versehen oder das Bild... ich kriege es einfach nicht hin.
Ich habe 0 Erfahrung im html und CSS
Diese Spalte sollte mit einem Rahmen versehen sein:
Dieser Teil sollte mit Grau hinterlegt werden:
wäre toll wenn ich hier Hilfe bekommen würde...
Hier die Seite https://www.grubenweg11.ch/test/
Der Coder den ich eingefügt habe ist:
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<div id="cc-m-15375119424" class="j-module n j-hgrid "> <div class="cc-m-hgrid-column" style="width: 53.11%;background-color: #CCCCCC; border: 2px solid #888">
<div id="cc-matrix-4507345524"><div id="cc-m-15375292924" class="j-module n j-imageSubtitle "><figure class="cc-imagewrapper cc-m-image-align-1">
<img srcset="https://image.jimcdn.com/app/cms/image/transf/dimension=49x10000:format=png/path/saa1dc09e674bc852/image/ia7d135e259b0e6b9/version/1552220525/image.png 49w, https://image.jimcdn.com/app/cms/image/transf/dimension=98x10000:format=png/path/saa1dc09e674bc852/image/ia7d135e259b0e6b9/version/1552220525/image.png 98w" sizes="(min-width: 49px) 49px, 100vw" id="cc-m-imagesubtitle-image-15375292924" src="https://image.jimcdn.com/app/cms/image/transf/dimension=49x10000:format=png/path/saa1dc09e674bc852/image/ia7d135e259b0e6b9/version/1552220525/image.png" alt="" class="" data-src-width="236" data-src-height="236" data-src="https://image.jimcdn.com/app/cms/image/transf/dimension=49x10000:format=png/path/saa1dc09e674bc852/image/ia7d135e259b0e6b9/version/1552220525/image.png" data-image-id="9711077624">
</figure>
<div class="cc-clear"></div>
</div><div id="cc-m-15375140524" class="j-module n j-text "><h1 id="cc-m-header-15375137924" class="headline cc-m-header-inline-rte" style="min-height: 50px; text-align: center;" data-action="header" data-name="header" contenteditable="true">
Lang Airolo
</h1></div><div id="cc-m-15375119924" class="j-module n j-text "><p style="text-align: center;">
<span style="font-size: 20px;">100 Schurwolle (Corriedale)</span>
</p></div><div id="cc-m-15375122124" class="j-module n j-callToAction "><div class="j-calltoaction-wrapper j-calltoaction-align-2">
<a class="j-calltoaction-link j-calltoaction-link-style-2" data-action="button" href="/strickwolle/lang-yarns-wolle/lang-yarns-airolo/" data-title="Zum Produkt">
Zum Produkt </a>
</div>
</div></div> </div>
<div class="cc-m-hgrid-separator" data-display="cms-only"><div></div></div>
<div class="cc-m-hgrid-column last" style="width: 44.88%;">
<div id="cc-matrix-4507345624"><div id="cc-m-15375121324" class="j-module n j-imageSubtitle "><figure class="cc-imagewrapper cc-m-image-align-1 cc-m-width-maxed">
<img srcset="https://image.jimcdn.com/app/cms/image/transf/dimension=271x10000:format=jpg/path/saa1dc09e674bc852/image/if22942837f9f0b2f/version/1552220519/image.jpg 271w, https://image.jimcdn.com/app/cms/image/transf/dimension=320x10000:format=jpg/path/saa1dc09e674bc852/image/if22942837f9f0b2f/version/1552220519/image.jpg 320w, https://image.jimcdn.com/app/cms/image/transf/dimension=542x10000:format=jpg/path/saa1dc09e674bc852/image/if22942837f9f0b2f/version/1552220519/image.jpg 542w" sizes="(min-width: 271px) 271px, 100vw" id="cc-m-imagesubtitle-image-15375121324" src="https://image.jimcdn.com/app/cms/image/transf/dimension=271x10000:format=jpg/path/saa1dc09e674bc852/image/if22942837f9f0b2f/version/1552220519/image.jpg" alt="" class="" data-src-width="800" data-src-height="800" data-src="https://image.jimcdn.com/app/cms/image/transf/dimension=271x10000:format=jpg/path/saa1dc09e674bc852/image/if22942837f9f0b2f/version/1552220519/image.jpg" data-image-id="9710727724">
</figure>
<div class="cc-clear"></div>
</div></div> </div>
<div class="cc-m-hgrid-overlay" data-display="cms-only"></div>
<br class="cc-clear">
</div>
...so etwas mache ich mit CSS, nicht mit html. Ein Spaltensatz besteht aus mehreren Elementen, die kannst Du "durchzählen" und per nth-child() selektieren. Das ist jetzt ein bisschen kompliziert, zu erklären, aber es ist nicht besonders aufwendig.
LG, az
Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= 
) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).
Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!
...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de
Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de
Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html
Ähnliche Themen
Jetzt anmelden!
Jetzt registrieren!
