Design Miami - seitenfüllendes Hintergrundbild und gleichzeitig Logo in mobiler und Desktop-Ansicht nach oben links

31.03.2020 20:21

LauraC.
#1

La

Hallo,
bin noch ganz neu hier im Forum...es geht um meine Seite www.laurachristmann.de
Und zwar benutze ich das Design Miami und wollte, dass das Hintergrundbild auf der Home-Seite den ganzen Bildschirm ausfüllt. Gleichzeitig wollte ich, dass mein Logo oben links sitzt, auch in der mobilen Version, und da etwas kleiner ist, damit es nicht auf dem Kopf des Models ist.
Ich habe mir aus diesem Forum ein paar CSS Codes kopiert und in den Header meiner Seite eingefügt. Einzeln funktionieren sie, aber sobald da mehrere sind, scheinen sie irgendwie zu interagieren und es passiert nur noch Quatsch...zum Beispiel ist das Logo in der mobilen Ansicht jetzt ganz verschwunden...
Ich weiß nicht, was ich falsch mache, habe gar keine Ahnung davon...kann mir jemand sagen, wo der Fehler ist? So sieht mein Code aus:

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
 

<style type="text/css">
/*<![CDATA[*/
     
     
      body.jqbga-container.jqbga-web--image {
        background-repeat:no-repeat;
        background-attachment: fixed;
        background-size: cover;
        background-size: 100vw auto;
        background-position: center 0;
    }
          
    .jtpl-header {
        padding-top: 450px !important; 
        padding-top: calc(100vw * 0.33) !important; 
    }
    }
}
/*]]>*/
</style>
 

<style type="text/css">
 /*<![CDATA[*/
 
.jtpl-logo{
transform:translateY(-500px)!important;/*Werte wieder beliebig anpassbar*/
 
/*]]>*/
</style>
 

<style type="text/css">
/*<![CDATA[*/
 
 
@media (max-width:768px) {
    .jtpl-logo img {
    max-width:120px !important;
    float: left !important; 
}}
 
/*]]>*/
</style>
 

Antworten

Beitrag melden

#2

04.04.2020 18:51 (zuletzt bearbeitet: 09.04.2020 18:59)

az_
#2

az_

Hallo Laura,
Bei dem Miami Design gibt es leider ein großes Problem mit dem CSS:
Das ganze Design ist ein wenig falsch aufgebaut. Daher können das Logo und andere Elemente Nicht vor die Navigation gestellt werden. Um das zu bewerkstelligen, müsstest du diese Elemente erst mit einem Java Skript über die Navigation verschieben. Ich habe das bereits einige Male gemacht und das klappt sehr gut. Beispiel Seite: https://designtest-miami.jimdofree.com

Ich wünsche dir damit viel Erfolg,
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

04.04.2020 18:53

az_
#3

az_

Das war der falsche Link! Der richtige ist dieser hier: https://miami-designtest.jimdofree.com/

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