Jimdo-Specials (Tools, Widgets, HTML und CSS)

27.02.2019 15:17

chris37170
#1

Hallo Miteinander,

ich habe immer noch Schwierigkeiten die genaue Syntax von Jimdo zu verstehen. Ich versuche mich zwar einzuarbeiten, aber verstehe die einzelnen Bereichsnamen zur Änderung im Header nicht genau. Mein augenblickliches Problem ist die Breite der Navigationsleiste. Ich habe einen neuen Menüpunkt aufgenommen, der nicht über den hinerlegten Contentbereich steht, sondern als weiterer Menüpunkt umgebrochen wird. Dieser Punkt ist zwar ausgeblendet, aber bricht Mitten in der Navigation um.

Ich habe zwar schon einiges ausprobiert, und weiß das in diesem Fall die Breite ungefähr 1200px beträgt, aber beim nächsten Punkt stehe ich wahrscheinlich vor dem selben Problem. Das Menü ist außerdem nicht genau linksbündig, sondern scheint irgendwie zentriert zu sein.

Kann mir jemand bei einer Lösung helfen. Anbei der Code und eine Hardcopy des Menüs.
Design: St. Petersburg

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
 

 
<style type="text/css">
/*<![CDATA[*/
/* Änderungsschema für ST. PETERSBURG */
 
 
  .jtpl-section {
        max-width: 1280px!important; 
  }        
  .jtpl-footer {
        height: 50px!important;
        padding-bottom: 40px!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; 
        width: 1200px;
        z-index: 9999
     }
  
 
     .jtpl-section {
        margin-top: 90px;
        margin-left: 30px;
     }
 
        .navigation-colors {
                -webkit-box-shadow: 0px 10px 15px 0px rgba(50, 50, 50, 0.75);
                -moz-box-shadow:    0px 10px 15px 0px rgba(50, 50, 50, 0.75);
                 box-shadow:        0px 10px 15px 0px rgba(50, 50, 50, 0.75);
        }
        
        .navigation-colors a, .navigation-colors a:link, .navigation-colors a:visited {
                font-weight: normal;
                font-style: normal;
                color: #000;
                background-color: #6da7de;
                -webkit-box-shadow: 0px 10px 15px 0px rgba(50, 50, 50, 0.75);
                -moz-box-shadow:    0px 10px 15px 0px rgba(50, 50, 50, 0.75);
                 box-shadow:        0px 10px 15px 0px rgba(50, 50, 50, 0.75);
        }
    
} 
 
/*]]>*/
</style>
 
<link rel="stylesheet" type="text/css" href="https://www.snipzoo.com/func-nav8999.css" />
<link rel="stylesheet" type="text/css" href="https://www.snipzoo.com/func-lig0112.css" />
<link rel="stylesheet" type="text/css" href="https://www.snipzoo.com/func-cod2245.css" />
 
 

Antworten

Beitrag melden

#2

27.02.2019 16:46

az_
#2

az_

URL wäre gut...

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

27.02.2019 16:47

chris37170
#3

chris37170

Entschuldigung
www.dinkelhausen.eu

Antworten

Beitrag melden

#4

03.03.2019 13:28 (zuletzt bearbeitet: 03.03.2019 13:29)

az_
#4

az_

...das Problem ist die feste Breite, die Du bei

Zitat von chris37170 im Beitrag #1

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

eingesetzt hast. Wenn Du das rausnimmst, musst Du die Höhe der Navigation anpassen (...und den Abstand von Logo und Content):

1
2
3
4
5
6
7
8
9
10
11
 
@media (min-width:768px) and (max-width:970px) {
  .jtpl-navigation {
        min-height:130px;
      }
 
      .jtpl-content, 
      .jtpl-logo {
        margin-top: 70px;
      }
}
 
 

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

03.03.2019 17:03

chris37170
#5

chris37170

Hallo az,

leider brachte mich Deine Lösung mit mx-width nicht zum Ziel, da dann wieder alle Schattierungen und die Fixierung des Menüs wegfielen. Ich habe noch etwas rumprobiert und nun das erreicht, was ich gerne haben wollte. Die Navigationselemente stehen nun alle Links, das Menü wird nun über die Breite des Content Bereichs dargestellt. (www.dinkelhausen.eu).
Ich weiß zwar nicht ob es die optimalste Lösung ist, da ich zu wenig über css weiß, aber das Ergebnis stimmt (für mich).

Mfg und noch einmal herzlichen Dank

Christoph

Anbei der neue Code:

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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
 

 
<style type="text/css">
/*<![CDATA[*/
/* Änderungsschema für ST. PETERSBURG */
/* Homepage: www.dinkelhausen.eu */
 
  .jtpl-section {
        max-width: 1280px!important; 
  }        
  
  .jtpl-footer {
        height: 50px!important;
        padding-bottom: 40px!important;
  }  
  
@media (min-width:768px) {
    
    /* Breite des Navigationsbereichs auf 1400px geändert */
    .cc-nav-level-0 {
        width: 1400px!important;
    }   
  
   .jtpl-navigation {
        position: fixed;
        width: 100vw;
        padding: 32px 0 ; 
        top: 0; 
        z-index: 9999;
     }
    
    /* Änderung von center auf left */
    .navigation-alignment {
        text-align: left;
    }  
     
     .jtpl-navigation__inner {
        position:fixed;
        top: 0; 
        width: 1280px;
        z-index: 9999
     }
 
     .jtpl-section {
        margin-top: 90px;
        margin-left: 30px;
     }
  
        .navigation-colors {
                -webkit-box-shadow: 0px 10px 15px 0px rgba(50, 50, 50, 0.75);
                -moz-box-shadow:    0px 10px 15px 0px rgba(50, 50, 50, 0.75);
                 box-shadow:        0px 10px 15px 0px rgba(50, 50, 50, 0.75);
        }
        
        .navigation-colors a, .navigation-colors a:link, .navigation-colors a:visited {
                font-weight: normal;
                font-style: normal;
                color: #000;
                background-color: #6da7de;
                -webkit-box-shadow: 0px 10px 15px 0px rgba(50, 50, 50, 0.75);
                -moz-box-shadow:    0px 10px 15px 0px rgba(50, 50, 50, 0.75);
                 box-shadow:        0px 10px 15px 0px rgba(50, 50, 50, 0.75);
        }
    
} 
 
/*]]>*/
</style>
 
<link rel="stylesheet" type="text/css" href="https://www.snipzoo.com/func-nav8999.css" />
<link rel="stylesheet" type="text/css" href="https://www.snipzoo.com/func-lig0112.css" />
<link rel="stylesheet" type="text/css" href="https://www.snipzoo.com/func-cod2245.css" />
 

 