Bilder auf ganze Breite

Antworten
  • Seite 1 von 2
#1
03.04.2017 14:17
avatar  markusen
#1
ma
markusen

Hi Leute,
im Design Stockholm würde ich gerne einzelne Bilder auf die komplette Breite ziehen. Wie kann ich das machen?
Danke!


 Antworten

 Beitrag melden
#2
03.04.2017 16:27 (zuletzt bearbeitet: 03.04.2017 16:29)
avatar  az_
#2
avatar
az_

...zu diesem Thema habe ich mehrere Testseiten:

- https://designtest-stockholm.jimdo.com/bilder/
Jimdo Bild-Element mit Text-Overlay

- https://designtest-hamburg.jimdo.com/images/
Textfeld mit Background-Image

- https://stockholm-test.jimdo.com
parallax-scroll über fixierte Hintergrundbilder

...die erste Methode ist die Einfachste. Wenn Dir das ausreicht, gibt es hier ein Tutorial: https://expanding.jimdo.com/hacks/full-width-slider/ (...passt nicht ganz, aber kann übertragen werden!)

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
#3
03.04.2017 18:21
avatar  markusen
#3
ma
markusen

Klappt leider nicht. Es wird dann linksbündig und nach rechts bleibt ein Abstand zum Rand. Woran liegt das?
Danke!


 Antworten

 Beitrag melden
#4
03.04.2017 22:14 (zuletzt bearbeitet: 03.04.2017 22:17)
avatar  az_
#4
avatar
az_

1
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
 
<style type="text/css">
/*<![CDATA[*/
 
    #cc-m-7859992976 p {
        position:absolute;
        margin-top: 10vw;
        color:white;
        font-size: 15vw;
        z-index:99999;
    }
 
    /* full width image */
    
    #cc-m-7859920176 {
        width: 100vw;
        left: calc(-50vw + 50%);
        position: relative;
        padding: 0px;
    }
    
    #cc-m-7859920176 img {
        width: 100vw;
        height: auto !important;
    }
    
 
/*]]>*/
</style>
 
 



#cc-m-7859992976 ist der Container mit dem Text - der liegt über dem Bild-Element.
#cc-m-7859920176 ist der Container, in dem das Bild liegt.


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
#5
04.04.2017 14:05
avatar  markusen
#5
ma
markusen

Hi, ich habe es jetzt mit diesem Code auf die gesamte Breite bekommen. Aber jetzt stellt sich ein Problem.
Unten am Monitor ist jetzt so ein Schieberegler um nach links oder rechts zu scrollen. Das ist ziemlich doof. Kann man das verhindern. Soll einfach auf die Monitorgröße genau passen.

Danke!!!!



<style type="text/css">
/*<![CDATA[*/
/* full width image slider */

#cc-m-8868567350 {
width: 100vw;
left: calc(-50vw + 50%);
position: relative;
padding: 0px;
}

.cc-m-gallery-slider ul img {
height: auto !important;
}
/*]]>*/
</style>


 Antworten

 Beitrag melden
#6
05.04.2017 10:52
avatar  markusen
#6
ma
markusen

Was mache ich falsch?


 Antworten

 Beitrag melden
#7
06.04.2017 09:57
avatar  az_
#7
avatar
az_

...gib mir mal Deine URL


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
#8
06.04.2017 10:15
avatar  az_
#8
avatar
az_

...probier mal:

1
2
3
 
div#cc-inner  {
    overflow: hidden;
}
 



...das müsste den Balken killen!

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
#9
06.04.2017 10:46
avatar  markusen
#9
ma
markusen

Super vielen Dank!!!


 Antworten

 Beitrag melden
#10
18.05.2017 16:01
avatar  cowtschuk
#10
co
cowtschuk

hallo. ich habe eigentlich das gleiche problem wie "markusen".
will die bilder ueber die komplette breite laufen lassen. habe auch den code im head-bereich eingefuegt, leider ist gar nix passiert. :(
oder muss ich das woanders editieren?

www.burningpony.com


 Antworten

 Beitrag melden
#11
20.05.2017 00:13 (zuletzt bearbeitet: 20.05.2017 00:15)
avatar  az_
#11
avatar
az_

...den Bezeichner angepasst? #cc-m-8868567350 ist ein spezielles Bild auf einer meiner Webseien!

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
22.05.2017 16:35
avatar  Amy
#12
Am
Amy

Hi @az_,

hast du vielleicht noch einen Tipp, wie man einen Text über das Bild legen kann (und evtl. auch noch ein kleines Bild im Bild?) Also dass das breite Bild wie ein Hintergrund ist, auf dem man Elemente einfügen kann. Ich benutze das Stockholm-Design.

LG
Amy


 Antworten

 Beitrag melden
#13
23.05.2017 12:16
avatar  az_
#13
avatar
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
#14
30.05.2017 19:46 (zuletzt bearbeitet: 30.05.2017 19:47)
avatar  Jabira
#14
Ja
Jabira

Ich schließe mich hier mal an. Ich habe mit Hilfe dieses Codes

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 

<style type="text/css">
 
#cc_m_123456789 {
background-color: #93e7e7;
margin: 0 -500%;
padding: 0 500% !important;
}
 
</style>
 

 

 
 

einen farbigen Hintergrund eines Textfeldes erzeugen können, der über die gesamte Seitenbreite geht. Allerdings ist jetzt dort kein Text mehr sichtbar, obwohl etwas eingegeben war. Woran liegt das und wie könnte man das ändern?

Das Layout ist Tokyo


 Antworten

 Beitrag melden
#15
31.05.2017 06:57
avatar  Jabira
#15
Ja
Jabira

Jetzt hat es doch funktioniert. Nur das mit der Schriftgröße muss ich noch responsive anpassen


 Antworten

 Beitrag melden
#16
31.05.2017 08:07
avatar  az_
#16
avatar
az_

Layout ist gut zu wissen, aber URL wäre noch besser.

Versuch mal die Schriftgröße abhängig vom viewport zu machen, z.B.: font-size: 0.25vw. Das geht in bestimmten Bereichen sehr gut.

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
#17
02.06.2017 10:17
avatar  Amy
#17
Am
Amy

@az_
Ja, so wie bei deiner Beispielseite. Ich würde gern ein Bild als Hintergrund in Stockholm festlegen und darauf Texte und Bilder einfügen. Ist das möglich? LG


 Antworten

 Beitrag melden
#18
03.06.2017 02:59
avatar  az_
#18
avatar
az_

ja, das geht.


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
#19
07.06.2017 10:42
avatar  Amy
#19
Am
Amy

Verrätst du mir auch wie? :)


 Antworten

 Beitrag melden
#20
05.09.2017 13:52 (zuletzt bearbeitet: 05.09.2017 13:52)
avatar  Norbert
#20
avatar
Norbert

Zitat von az_ im Beitrag #2...zu diesem Thema habe ich mehrere Testseiten:

- https://designtest-stockholm.jimdo.com/bilder/
Jimdo Bild-Element mit Text-Overlay

- https://designtest-hamburg.jimdo.com/images/
Textfeld mit Background-Image

- https://stockholm-test.jimdo.com
parallax-scroll über fixierte Hintergrundbilder

...die erste Methode ist die Einfachste. Wenn Dir das ausreicht, gibt es hier ein Tutorial: https://expanding.jimdo.com/hacks/full-width-slider/ (...passt nicht ganz, aber kann übertragen werden!)

LG, az


Moin, moin!

Mir ist aufgefallen, dass o.a. Möglichkeiten zu dem Problem führen, dass auf dem Handy links ein weisser Rand bleibt. Beim Bildschirmgrößen Testen am Rechner werden alle Bilder in voller Breite dargestellt, nur eben im Handybrowser (in meinem Fall Safari unter iOS7) nicht. Rechts passt's, links wie gesagt bleibt ein Rand.

Gibt es dazu Lösungsansätze?

Liebe Grüße, Norbert


 Antworten

 Beitrag melden
#21
06.09.2017 07:26
avatar  az_
#21
avatar
az_

...upgrade auf iOS 10.3?


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
#22
06.09.2017 22:09 (zuletzt bearbeitet: 06.09.2017 22:09)
avatar  Norbert
#22
avatar
Norbert

Das geht leider mit dem immer noch weit verbreiteten iPhone4 nicht. Es geht mir ja nicht darum, wie es auf meinem Display aussieht, sondern auf den Displays der potentiellen Kunden, die meine Webseite besuchen.


 Antworten

 Beitrag melden
#23
06.09.2017 22:19
avatar  Norbert
#23
avatar
Norbert

gerade nochmal gecheckt: auf https://stockholm-test.jimdo.com wird alles korrekt angezeigt, auf https://designtest-stockholm.jimdo.com/bilder/ erscheint der weiße Rand links, man kann ihn aber nach links weg"swypen".
Jetzt muss ich nur noch den Unterschied im Code suchen. Ergebnis folgt nach erfolgreicher Suche..


 Antworten

 Beitrag melden
#24
06.09.2017 22:35
avatar  Norbert
#24
avatar
Norbert

Ergebnis: das eine ist ein Bildelement, das andere ein Hintergrundbild..

..viel nachdenken ist wie ein Schaukelpferd: man ist beschäftigt, kommt aber kein Stück weiter!


 Antworten

 Beitrag melden
#25
09.09.2017 13:12
avatar  az_
#25
avatar
az_

...ich glaube, es war nur ein Skript abhanden gekommen. Schau mal auf https://designtest-stockholm.jimdo.com/bilder/, ob es diesen Effekt auf der Seite noch immer gibt, oder ob es repariert ist.

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
Antworten
Bereits Mitglied?
Jetzt anmelden!
Mitglied werden?
Jetzt registrieren!