Full-width Slider mit Bildunterschriften

Antworten
#1
18.05.2016 10:39
avatar  juleenmellon
#1
ju
juleenmellon

Hallo liebe Community,

vielleicht kann mir hier jemand mit meinem Problem helfen:

Ich möchte einen Slider auf unserer Seite einbauen, die Besonderheit dabei ist jedoch, dass er die komplette Fensterbreite einnehmen soll (also breiter ist als der Content-Bereich). Die Höhe soll aber nur ca. 70% betragen, sodass man wenn man auf der Startseite landet unter dem Slider auch gleich noch einen Textabschnitt sieht.
Mein Problem ist jetzt, dass ich den Slider nur auf die Fensterbreite skaliert kriege wenn ich ihm über "head bearbeiten" die Eigenschaft position:fixed gebe. Dies bewirkt jedoch wiederum, dass der darunter stehende Text, sowie die Footerleiste unter meinen Slider scrollen während dieser logischerweise immer an der gleichen Stelle bleibt.

Also nochmal zusammengefasst: der Slider soll so breit sein wie mein Fenster, aber nicht ganz so hoch, sodass darunter noch Text stehen kann. Beim scrollen soll sich sowohl der Slider als auch Text und Footer bewegen, sodass immer alles untereinander platziert bleibt und Text und Footer nicht irgendwann vom Slider verdeckt werden.

Bisher habe ich den Nivo-Slider verwendet, da dieser Bildunterschriften unterstützt, ich wäre jedoch auch für andere Lösungen offen, wenn diese ebenfalls Bildunterschriften unterstützen.

Wäre super, falls jemand hierfür eine Lösung weiß oder das vielleicht schon ähnlich umgesetzt hat.


 Antworten

 Beitrag melden
#2
18.05.2016 17:39 (zuletzt bearbeitet: 18.05.2016 17:41)
avatar  az_
#2
avatar
az_

...du kannst jeden Slider benutzen, aber den Container, indem der Slider untergebracht ist, besonders formatieren:

1
2
3
4
5
6
7
 
    #cc-m-xxxxxxxx {
        position: absolute;
        margin: 0 -9999rem;
        padding: 0.25rem 9999rem;
        background: rgba(255,102,102,1);
    } 
    
 



...versuchs mal.

LG, az

PS: ...wie ist die URL der Seite?


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
19.05.2016 13:02
avatar  juleenmellon
#3
ju
juleenmellon

Hi az,

habe versucht deinen Vorschlag umzusetzen, leider ohne das gewünschte Ergebnis!
Zwar war mir auch nicht klar, welcher der vielen Container in denen der Slider liegt, der richtige ist, aber ich hab es mit ein paar ausprobiert und es hat alles nicht funktioniert :/
Der Container wurde zwar auf die Fensterbreite skaliert aber der Slider ist klein geblieben. Außerdem war der Footer meist nicht mehr auffindbar...

Hast du eine Idee, wie man den Slider dazu bringen kann sich an den Container anzupassen? Oder eine ganz andere Lösung?
Habe die Seite jetzt mal wieder so gemacht wie ich sie davor schon hatte...

Hier kommst du zur Seite

Trotzdem schonmal vielen Dank!


 Antworten

 Beitrag melden
#4
21.05.2016 10:50 (zuletzt bearbeitet: 21.05.2016 10:58)
avatar  az_
#4
avatar
az_

Hi @juleenmellon ,

beim Nivo-Slider und dem von Dir gewählten Design würde ich ein wenig schummeln:

das hier:

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

   #content_area {
        position: absolute;
        margin: 0 -9999rem;
        padding: 0.25rem 9999rem;
        background: rgba(255,102,102,1);
    } 
    
#slider {
        /*position:fixed;
        top: 0;
        left: 0;
        min-width: 100%;
        height: 80%;*/
        /*width: 2000px;
        top: -50%;
        left: -50%;
        min-width: 100%;
        max-width:200%;
        height:50%;*/
    }
 



bitte ersetzen durch:


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
30
31
 

.content-options {
    background-color: white;
    margin-top:6em;
}
 
.jtpl-section-aside 
/*...Sidebar ausgeblendet*/{
    display: none;
}
 
div#cc-m-13431014822  
/*...dies ist der Container, der den Slider enthält!*/{
        position: absolute;
        top:-2em;
        left:0;
        right:0;
        width:960px;
        height:720px;
        background: rgba(255,102,102,1);
        z-index:9999;
    } 
    
#slider {
    position:relative;
    margin-left:calc((100vw - 960px) / -2) ;
    width: 100vw;
    height:760px;
    }
 

 



Alle anderen Nivo-Einträge können bleiben, wie sie sind.

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
24.05.2016 09:29
avatar  juleenmellon
#5
ju
juleenmellon

So az, habe deine neue Lösung eingebaut und es sieht schon viel besser aus als vorher - Danke!!
Das einzige was mich jetzt noch stört ist, dass das mobile Design ziemlich zerschossen ist wenn ich das Fenster kleiner ziehe. Da klebt dann der Slider am rechten Rand und es entstehen unschöne Lücken zum Header und zur Leiste mit den Bildunterschriften.
Werde mal ein bisschen rum probieren ob ich das wegbekomme, ansonsten freue ich mich natürlich falls du da auch eine Lösung parat hast ;)


 Antworten

 Beitrag melden
#6
25.05.2016 16:01
avatar  juleenmellon
#6
ju
juleenmellon

Wollte nur nochmal Bescheid sagen, dass ich jetzt glaub ich soweit klar komme.
Vielen Dank für die Hilfe :)


 Antworten

 Beitrag melden
#7
28.05.2016 20:12
avatar  az_
#7
avatar
az_

...google mal nach @media queries! Alles CSS, dass Du zB.: innerhalb @media-screen and (min-width:1024px) {...} setzt, ist erst ab einer Browserfensterbreite von 1024px gültig.

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!