Stockholm: Firmenlogo nach ganz oben und oben links verschieben

17.11.2017 08:13

Sandro0802
#1

Sa

Hallo zusammen,

ich würde unser Firmenlogo gerne in den oberen Headerbereich oder nach links oben verschieben, weiß aber nicht wie ;o) Könnt ihr mir bitte helfen?

Antworten

Beitrag melden

#2

17.11.2017 14:55

Sandro0802
#2

Sa

Sandro0802

Kann mir keiner weiterhelfen?

https://sandro0802.jimdo.com/

Antworten

Beitrag melden

#3

17.11.2017 23:54 (zuletzt bearbeitet: 17.11.2017 23:54)

Hallo Sandro0802,

am einfachsten zu helfen ist es wenn eine Url angegeben wird. Ohne Url ist es sehr schwer, teilweise kaum möglich zu helfen

Nun zu Deinem Code, versuche den hier mal, eventuell musst Du ein wenig an den Zahlen spielen und es anpassen. Der Code betrifft nur die Desktop Version.

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

 
<style type="text/css">
/*<![CDATA[*/ 
@media (min-width: 768px) {
.jtpl-logo a img {
    max-width: 100%;
    margin-left: calc(-6vw + 0%);
    margin-top: calc(-50vh + 0%);
}
}
   /*]]>*/ 
</style>
 
 

Gruß FKWars

www.crazy-terra.com

Antworten

Beitrag melden

#4

18.11.2017 08:39

Sandro0802
#4

Sa

Sandro0802

Super, hat geklappt. Vielen Dank!!

Antworten

Beitrag melden

#5

18.11.2017 12:37

az_
#5

az_

...wenn Du das Logo mittig ausrichten willst, musst Du den Randabstand von .jtpl-header__inner (95%) berücksichtigen:

1
2
3
4
5
6
7
 
@media (min-width: 768px) {
    .jtpl-logo a img {
        margin-left: calc(50vw - 283px / 2 - 2.5%);
        margin-top: calc(-50vh + 120px);
    }
 
}
 

283px ist die aktuelle Breite des Logos. Die kann variieren, je nachdem wie groß Du das Logo aufziehst.

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

#6

18.11.2017 23:23

Sandro0802
#6

Sa

Sandro0802

Super, danke für eure Hilfe!

Gibt es eine Möglichkeit, dass sich das Logo automatisch an die Größe der Website anpasst? Also z. B. durch Groß- und Kleinziehen des Fensters oder die Anzeige auf dem Smartphone?

Antworten

Beitrag melden

#7

20.11.2017 18:27

Sandro0802
#7

Sa

Sandro0802

Hallo, habt ihr zufällig auch einen Code für die mobile Version für mich? Dort überlagert das Logo fast das komplette Bild.

Gibt es eigentlich auch eine Möglichkeit beim Design Stockholm die Bilder in einer Bildergalerie mit Titel zu versehen (trotz Verlinkung)?

Antworten

Beitrag melden

#8

21.11.2017 15:03

az_
#8

az_

mobil ist einfach statt min-width max width:

1
2
3
4
5
6
 
@media (max-width: 767px) {
    .jtpl-logo a img {
        /*was auch immer*/
    }
 
}
 

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