Design Miami: Hintergrundfarbe oder -bild im Content

10.03.2018 11:25
#1
ed

Hallo zusammen,

ich benutze den bekannten Code aus dem englischsprachigen JIMDO Forum (https://support.jimdo.com/faq/how-to-mak...th-backgrounds/) um einzelne Contents mit einem Bild oder einer Hintergrundfarbe zu belegen.

Alles gut und schön, aber mein Problem liegt darin, dass sich dadurch die Content-Breite auch verändert. Das möchte ich eigentlich nicht. Hintergrundfarbe oder -bild sollen "full width" sein, der Content soll aber die Ursprungsgröße des Designs Miami behalten.

Hat jemand eine Idee, wie man diesen Code modifizieren kann?

Meine Kenntnisse in Sachen CSS oder HTML sind gleich null! :-)

Vielen Dank für Eure Unterstützung

Gruß Eddie


 Antworten

 Beitrag melden
11.03.2018 17:11
avatar  az_
#2
avatar
az_

...das innenliegende Element muss mit max-width: calc(100vw - ...px) und entspr. margin-left ausgestattet werden, dann geht das wieder!

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


 Antworten

 Beitrag melden
11.03.2018 17:14
avatar  az_
#3
avatar
az_

...anderer Ansatz, aber funzt auch: Section ohne Inhalt belassen, und das folgende Element mit negativem margin-top ausstatten.

Beispiel: https://designtest-stockholm.jimdo.com/bilder/

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


 Antworten

 Beitrag melden
12.03.2018 09:04 (zuletzt bearbeitet: 12.03.2018 09:18)
#4
di

Zitat von az_ im Beitrag #3
...anderer Ansatz, aber funzt auch: Section ohne Inhalt belassen, und das folgende Element mit negativem margin-top ausstatten.

Beispiel: https://designtest-stockholm.jimdo.com/bilder/

LG, az


Hallo az,
wie jetzt? Verstehe ich das richtig, wenn ich negativ margin top zb in einen slider einbaue, dann geht nur der Slider über die ganzen Seitenbreite aber der Rest bleibt standart von jimdo?
LG

Okay nee das geht genau in die andere Richtung.

Also das der Slider von Rand zu Rand geht. Hatte es mit

1
2
3
4
5
6
7
 
<style>
/* <![CDATA[ */
.jtpl-content {
max-width: 1600px;
}
/*]]>*/
</style>
 

versucht, aber wenn ich da nicht aufpasse bekomm ich Scrollbalken. Den mittleren Hautbereich hätte ich ja schon gern original belassen wie Jimdo vorgibt.


 Antworten

 Beitrag melden
12.03.2018 10:53 (zuletzt bearbeitet: 12.03.2018 10:53)
avatar  TiJo
#5
Ti

Zitat von die dani im Beitrag #4
[quote="az_"|p3928]
Also das der Slider von Rand zu Rand geht. Hatte es mit

1
2
3
4
5
6
7
 
&lt;style&gt;
/* &lt;![CDATA[ */
.jtpl-content {
max-width: 1600px;
}
/*]]&gt;*/
&lt;/style&gt;
 

versucht, aber wenn ich da nicht aufpasse bekomm ich Scrollbalken. Den mittleren Hautbereich hätte ich ja schon gern original belassen wie Jimdo vorgibt.




Ohne alles verstanden zu haben, könntest du auch mal

1
2
3
4
5
6
7
8
9
 

<style>
/* <![CDATA[ */
.jtpl-content {
width: 100vw;
max-width: 1600px;
}
/*]]>*/
</style>
 


versuchen.


 Antworten

 Beitrag melden
12.03.2018 11:11
#6
di

Hey TiJo,

also wenn ich das einfüge von dir, da bekomm ich Scrollbalken. habe statt 100 vw 90 eingegeben, und schon sind die Balken weg aber der Slider nicht mehr am Rand. (Laptop zum Fenster gleich rausfliegt)


 Antworten

 Beitrag melden
12.03.2018 11:16
avatar  TiJo
#7
Ti

wie ist denn die URL?


 Antworten

 Beitrag melden
12.03.2018 11:18 (zuletzt bearbeitet: 12.03.2018 11:50)
#8
di

 Antworten

 Beitrag melden
12.03.2018 11:52 (zuletzt bearbeitet: 12.03.2018 11:53)
avatar  az_
#9
avatar
az_

Zitat
(Laptop zum Fenster gleich rausfliegt)



...mach das nicht, der kann nichts dafür!!

Ich finde, es sieht nicht schlecht aus. Habe ich das Problem nicht richtig verstanden?

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


 Antworten

 Beitrag melden
12.03.2018 11:58
#10
di

Zitat von az_ im Beitrag #9

Zitat
(Laptop zum Fenster gleich rausfliegt)


...mach das nicht, der kann nichts dafür!!

Ich finde, es sieht nicht schlecht aus. Habe ich das Problem nicht richtig verstanden?

LG, az

doch doch der Laptop lernt fliegen :) Nee Spaß soll ja verkauft werden und der hat keine Schuld :)

wegen Problem... Mobile Ansicht keine Scrollbalken und desktop Scrollbalken wenn ich den Code von TiJo einbinde.
Hatte vorher den Content vebreitert so das ich den Slider vom rechten zum linken Rand bekommen habe, und zb der mittlere Content wo die Texte sind, den hatte ich z.B. mit Spaltenelement so gemacht, dass dasungefähr den Vorgaben von Jimdo entspricht.


 Antworten

 Beitrag melden
12.03.2018 17:00
#11
ed

Hallo az,

habe eigentlich alles mit margin oder padding ausprobiert. Am PC sieht es dann gut aus, aber die mobile Ansicht ist dann zerschossen. Deshalb beschränke ich mich jetzt auf zentrierte Texte und höchstens zwei Spalten, da passt alles wunderbar auf Monitor, Tablet oder Smartphone.

Meine Testseite: https://sreom-0191-vsg.jimdo.com
(ist aber noch nicht fertig :-))

Gruß
Eddie


 Antworten

 Beitrag melden
Bereits Mitglied?
Jetzt anmelden!
Mitglied werden?
Jetzt registrieren!