Fixierung des Design St. Petersburg

07.01.2019 11:35 (zuletzt bearbeitet: 08.01.2019 22:04)

chris37170
#1

Hallo Miteinander,

ich bin neu in diesem Forum und arbeite mich nach und nach in das "Scripting" des Headers ein. Für eine Dorfhomepage (www.dinkelhausen.eu) habe ich das Design "St. Petersburg" gewählt, da mir das Menü auf der linken Seite gefallen hat. Einige Teile, wie die Buttons, habe ich schon fixiert und sieht auch (für mich) gut aus. Ich möchte nun den Hintergrund der Navigation ebenfalls fixieren, scheitere aber irgendwie. Gebe ich als option "fixiert" an, verschieben sich die Buttons und das gesamte Design schiebt sich nach oben. Ich weiß nicht, wie ich es genaus ausdrücken soll.

Anbei habe ich den Code hinter dem Header angehängt. Ich hoffe ich habe es richtig gemacht.

Ich hoffe, das jemand mir helfen kann

Mfg

Christoph

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
 

 
<style type="text/css">
/*<![CDATA[*/
/* Änderungsschema für ST. PETERSBURG */
.jtpl-navigation__inner {padding-left: 460px; position:fixed; top:2px; z-index: 9998}
 
/* .jtpl-footer footer-options border-options" style="height: 80px;padding-bottom: 10px;" */
.jtpl-footer__inner,
.jtpl-navigation__inner,
.jtpl-section {max-width: 1280px!important; height: 60px!!important; }
.jtpl-footer {margin-top: 0rem!important;}
 /* Dies klappt */
 .jtpl-navigation {
    padding: 32px; 
    top: 2px; 
    z-index: 9999
} 
/* Dies funktioniert nicht */
/* .jtpl-navigation {
    padding: 32px; 
    top: 2px; 
    position: fixed;
    z-index: 9999;
} */
/*]]>*/
</style>
 

 
 

Antworten

Beitrag melden

#2

08.01.2019 21:59 (zuletzt bearbeitet: 08.01.2019 22:00)

az_
#2

az_

...aufräumen, dann klappt es:

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
 

<style type="text/css">
/*<![CDATA[*/
/* Änderungsschema für ST. PETERSBURG */
 
    .jtpl-navigation__inner,
    .jtpl-section {
        max-width: 1280px!important; 
        }
 
@media (min-width:768px) {
    .jtpl-navigation {
        position: fixed;
        width: 100vw;
        padding: 32px 0 ; 
        top: 0; 
        z-index: 9999;
        }
 

    .jtpl-navigation__inner {
        position:fixed; 
        top:0; 
        z-index: 9999
        }
 

    .jtpl-section {
        margin-top: 130px;    
        }
} 
 
/*]]>*/
</style>
 
 

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

08.01.2019 22:02 (zuletzt bearbeitet: 08.01.2019 22:06)

az_
#3

az_

...und der iframe des Kalenders ist zu breit. Setze die Breite auf 100%:

1
2
3
 
<iframe src="https://calendar.google.com/calendar/embed?title=Termine%20in%20Dinkelhausen&amp;showNav=0&amp;showTabs=0&amp;mode=AGENDA&amp;height=550&amp;wkst=2&amp;bgcolor=%23ffffcc&amp;src=i0dljit8tmr0n137629k9tbnm4%40group.calendar.google.com&amp;color=%23875509&amp;src=n8n8q5t09oj4plmscvvk38m0kk%40group.calendar.google.com&amp;color=%23182C57&amp;src=de.german%23holiday%40group.v.calendar.google.com&amp;color=%2329527A&amp;src=eluvnbdl7qo5hv37lhsn3hjp6k%40group.calendar.google.com&amp;color=%23711616&amp;ctz=Europe%2FBerlin" 
style="border:solid 1px #777" width="100%" height="550" frameborder="0" scrolling="no">
</iframe>
 

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

#4

09.01.2019 00:13

chris37170
#4

chris37170

Hallo,

herzlichen Dank für deine Antwort. Ich habe die Änderungen so durchgeführt, wie du sie angegeben hast und es klappt wunderbar.
Das einzige was ich so gelassen habe, war die Einrückung der Buttons von Links.
Werde mich nun mit dem Footer beschäftigen. Der ist mir von der Höhe etwas zu hoch.

Mfg

Christoph.

Antworten

Beitrag melden

#5

10.01.2019 21:15

az_
#5

az_

...sehr problematisch, wenn Browserfenster klein (z.B. Tablet). Du kanst die Navigation aber vielleicht auch rechtsbündig setzen. Wenn nicht funzt, dann auch per CSS (text-align:right)

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

16.01.2019 19:03 (zuletzt bearbeitet: 16.01.2019 19:06)

Andrea
#6

Andrea

Hallo, kann ich das Logo über der Navigationsleiste bei der Vorlage St. Petersburg einfügen, sodass das Bild über die ganze Seite angezeigt wird ? Z.Z. habe ich das Logo und den Seitentitel ausgeblendet.

Ein Beispiel habe ich angehängt
Vielen Dank im Voraus

P.S. welche Größe müsste so ein Foto haben?

Gruß Andrea

www.hovawart-ajay.de|addpics|l4o-2-8cf2.png|/addpics|

Antworten

Beitrag melden

#7

16.01.2019 19:31

miCromiCro
#7

miCromiCro

Hallo @Andrea,

ich glaube ein anderes Design zu wählen, wird die einfachste Lösung sein.
Wenn ich richtig nachgesehen habe wäre da für Dich Riga oder Rio de Janeiro eine Option.

Viele Grüße

Aber vieleicht hat noch jemand eine Idee

Homepage: https://www.forceandfire.de
Design: Stockholm

Traffic ist dem, der schreibt, nicht dem, über den geschrieben wird.

Antworten

Beitrag melden