Welches Design? Sidebar unter Navigation?
Hallo nykytah,
Das Design "Hamburg" hat die SubNav links. Dieses Design ließe sich relativ einfach so anpassen, wie Du es haben willst. Nur das mit der Sidebar (auch links) unter der Navigation wird schwierig.
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
Das Design "Lima" hat Navigation und Sidebar links. Mit ein paar kleinen Anpassungen kannst du die Sidebar auf die rechte Seite bringen wie auf http://redesign-berlin-seminar.jimdo.com/
Das Design von http://www.gartenbauverein-bedburg.de/ sieht nach einem alten Jimdo-Design aus, das nicht mehr erhältlich ist. Die modernen Designs finde ich aber auch sehr viel schicker...
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
...mit ein bisschen CSS kannst Du das erreichen.
Ich habe z.B. für http://redesign-berlin-seminar.jimdo.com/ folgenden Code für den Inhalt benutzt:
2
3
4
#cc-inner .content-options { /*#cc-inner = gilt nur für Standard-Ansicht*/
width: calc(90% - 216px) !important; /*Anpassung der Breite*/
margin-top: 0px; /*Anpassung Abstand von oben*/
}
...und die Sidebar mit folgendem Code an die rechte Seite gesetzt:
2
3
4
5
6
7
.sidebar-options {
position: absolute; /*Positionierung absolut statt relativ*/
right: 5px; /*Abstand vom rechten Browser-Rand (absolut)*/
top: 150px; /*Abstand oben*/
width: 216px; /*Breite*/
padding: 10px; /*Randabstand zum Inhalt der Sidebar*/
}
...der Code wird in den Head-Bereich Deiner Jimdo-Seite eingesetzt und schon wirkt der Zauber.
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
Hallo @nykytah,
...wie war nochmal die URL (Adresse) Deiner Seite?
ein frohes Neues Jahr und 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
...Du könntest einen Spaltensatz in die Sidebar legen und den absolut positionieren, anstatt die ganze Sidebar. Dann hättest Du z.B. beim Design "Lima" die Sidebar links unter der Navi und eine zweite rechts.
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
Hallo @nykytah,
...tml, das kann ich leider nicht. Beim Havanna-Design ist die Sidebar in der Vorlage nicht im Container der Navigation untergebracht. Deshalb hab ich Dir Lima empfohlen - bei dem Design kannst Du das machen.
...was Du allerdings machen könntest (...so schlecht sieht das ja gar nicht aus, was du da schon gemacht hast):
statt:
2
3
4
5
6
7
8
9
10
11
12
13
<style type="text/css">
/*<![CDATA[*/
#cc-inner .sidebar-options {
position: absolute; /*Positionierung absolut statt relativ*/
right: 25px; /*Abstand vom rechten Browser-Rand (absolut)*/
top: 180px; /*Abstand oben*/
width: 295px; /*Breite*/
padding: 5px; /*Randabstand zum Inhalt der Sidebar*/
}
/*]]>*/
</style>
schreibst Du:
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<style type="text/css">
/*<![CDATA[*/
.sidebar-options:before {
border:none;
}
.sidebar-options {
position: absolute; /*Positionierung absolut statt relativ*/
right: calc( (100% - 982px) / 2) !important; /*Abstand vom rechten Browser-Rand (absolut)*/
top: 400px !important; /*Abstand oben*/
width: 295px; /*Breite*/
padding: 5px; /*Randabstand zum Inhalt der Sidebar*/
padding-bottom: 50px !important;
}
#content_area {
width: 495px;
min-height: 3100px;
}
/*]]>*/
</style>
Das käme dann in etwa so: 
...mit "right: calc( (100% - 983px) / 2) !important;" für .sidebar-options klebe ich die Sidebar mit dem richtigen Abstand an den rechten Rand des Content-Bereiches. Die min-height von #content_area müsstest Du allerdings immer händisch dem Content der Sidebar bzw. der Höhe der Sidebar anpassen.
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
...was meinst du damit?
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
...ach so, weil ich weiter oben gesagt hatte:
Zitat
...Du könntest einen Spaltensatz in die Sidebar legen und den absolut positionieren, anstatt die ganze Sidebar. Dann hättest Du z.B. beim Design "Lima" die Sidebar links unter der Navi und eine zweite rechts.
...das wäre in der Tat eine Möglichkeit - aber nur, wenn die Navigation eine fixe Höhe hätte. Das hat sie nicht, weil Du eine SubSub-Ebene auf der Seite hast. Deshalb geht das leider nicht.
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
...schade! ich hätte eher die Sidebar etwas schmaler gemacht. http://avalonia-institut.jimdo.com/ ...oder zumindest noch die Transparenz vom Hintergrund aus der Sidebar entfernt.
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
Hallo @nykytah,
...Gratulation! Dublin ist ein sehr gutes Design für dieses Vorhaben!
Das mit den Spalten geht so:
1. als erstes Element in Deiner Sidebar legst Du ein Spaltenelement an. Dann "Spalten bearbeiten" klicken und eine Spalte löschen. Wir brauchen nur eine Spalte.
2. in diese Spalte legst Du ein Textelement oder eine Überschrift "left-Sidebar" (...nur zum leichteren Wiederfinden, kannste später wieder löschen)
3. Jetzt wird´s ein bisschen tricky: Du gehst du in den Ansichtsmodus und rufst die Developer-Tools auf (strg/cmd+I). Mit Hilfe dieser kannst Du jetzt die ID der Spalte finden, die wir im nächsten Schritt neu positionieren wollen:
Fortsetzung folgt...
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
...Fortsetzung @nykytah
4. wenn Du die ID gefunden hast, öffnest Du den CSS-Editor unter Einstellungen > Head beaarbeiten und fügst dort Deinen CSS-Code ein, z.B.:
2
3
4
5
6
7
8
9
10
11
<style>
#cc-m-12939738625 {
position: absolute;
left: 25px;
top: 0;
width: 260px;
background-color: white;
border:1px solid #ccc;
}
</style>
Durch das "position:absolute;" befreist Du die Spalte mit der ID aus der Sidebar. Mit "left", "right" und "top" wird das Element positioniert.
Im Prinzip bist Du damit schon fertig. Nur möchte Dublin noch ein paar Einstellungen bez. des Contents geändert haben, sonst funktioniert die Seite nicht 100%tig in der Standardansicht. Schick mir eine PN, wenn ich Dir damit helfen soll.
LG, az
PS: ...die fertige "left-Sidebar" sieht so aus:
PPS: Im Bearbeitungsmodus liegt die "left-Sidebar" über der "Sidebar":
...wenn das zu sehr stört, kannst Du den Code mit /*...*/ vorübergehend auskommentieren!
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
Hallo @nykytah,
PS: was hältst Du davon: für http://avalonia-institut.jimdo.com/ hinzufügen:
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
div#fadeshow1 {
margin-left:-175px; /*Wert ggf. anpassen*/
}
#cc-inner #content_area {
width: 760px;
}
.layout-alignment {
width: 1200px;
border-radius: 3px;
border:1px solid #ccc;
}
.j-cart-icon {
margin-top: 80px;
padding:1px;
color: #000; /*Wert ggf. anpassen*/
text-decoration: none;
position: relative;
background-color: #FCE5CB !important; /*Wert ggf. anpassen*/
border:1px solid #ccc;
border-radius:5px;
min-width: 50px;
height:50px;
line-height: 2;
}
Damit der Bereich rechts nicht so leer ist:
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
Ui, das mit der rechten Sidebar hab ich jetzt hinbekommen. Links müsste noch ein kleiner Abstand rein und dann halt überall die Größen.... 
Hallo @nykytah,
...das sieht doch schon sehr gut aus!! Füg mal folgenden Code hinzu:
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
/*right-sidebar*/
.layout-alignment {
width: 100%;
}
#content {
position: absolute;
z-index: 1;
width: calc(100% - 596px);
margin-left: 270px;
border: 1px solid #ccc;
}
#sidebar {
z-index: 10;
background-color: white;
border: 1px solid #ccc;
}
#cc-m-12627153935 {
position: absolute;
right: 25px;
top: 0;
width: 260px;
background-color: white;
border:1px solid #ccc;
}
Das müsste passsen!
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
Ähnliche Themen
| Thema | Antworten | Aufrufe | Letzte Aktivität | ||
|---|---|---|---|---|---|
 |
Design Dublin - Navigation und Sidebar fixierenDesign Dublin - Navigation und Sidebar fixieren |
1
sgrafik
24.01.2025 |
201 |
|
|
|
Design Malaga - Navigation verbreiternDesign Malaga - Navigation verbreitern |
1
sgrafik
13.07.2021 |
979 |
|
|
|
Nur aktives Element in der Sidebar Navigation markierenNur aktives Element in der Sidebar Navigation markieren |
2
chris37170
22.02.2019 |
872 |
|
|
|
Welches DesignWelches Design |
3
Charles
07.09.2018 |
720 |
|
|
|
Design Lille Navigation auf einer LinieDesign Lille Navigation auf einer Linie |
1
az_
07.11.2017 |
967 |
|
|
|
Design Miami Navigation verändernDesign Miami Navigation verändern |
6
sgrafik
04.10.2017 |
1362 |
|
|
|
Welche Design ist das?Welche Design ist das? |
2
az_
23.07.2017 |
764 |
|
|
|
Design Milano, Navigation fixieren...Design Milano, Navigation fixieren... |
11
az_
09.10.2018 |
3242 |
|
|
|
Design zürich Navigation fixieren am oberen Bildschirm BereichDesign zürich Navigation fixieren am oberen Bildschirm Bereich |
2
the-martin
20.01.2017 |
1541 |
|
Jetzt anmelden!
Jetzt registrieren!
