Tokyo-Design: 2. Sidebar links erstellen
Aktualisierung: Dieser Beitrag kann gelöscht werden, da ich die Sache fallen gelassen habe - war für mich als Laie zu kompliziert, es hat zu viele Bereiche verschoben und ich hätte wohl auch an (zu) vielen anderen Stellen den Code anpassen müssen.
LG, Sonja
Liebes Forum, lieber az,
Ich habe versucht, eine 2. Sidebar links zu erstellen im Tokyo-Design (die eigentliche Sidebar ist ja unten platziert). Es scheint mehr oder weniger zu funktionieren. Allerdings weiss ich noch nicht, wie es bei verschiedenen Bildschirmbreiten aussehen wird... 
Ich habe Spalten in der offiziellen Design-Sidebar erstellt und diese Element-ID's dann in diese 2. Sidebar-Position gebracht.
Dazu hätte ich jedoch noch folgende Fragen:
1. Wie kann ich den grauen Hintergrund der Sidebar so konfigurieren, dass er nur jeweils so lang ist wie der Inhalt?
2. Wie kann ich um die Titel und Buttons in der Sidebar einen Rand/Abstand machen? (Das funktioniert nicht mit dem padding im Code)
3. Wie kann ich erreichen, dass die Sidebar in der mobilen Version unter die Seiteninhalte gestellt wird und nicht daneben?
Herzlichen Dank für Antworten!
LG Sonja
Hier die Seite und der Code:
https://www.cheminee-staffieri.ch
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[*/
/**2. Sidebar links**/
.jtpl-sidebar #cc-m-12091734891{
height: 50%;
width: 260px;
position: absolute;
left: 0;
top: 0;
margin-top: 70vh;
padding-left: 50px;
padding-right: 50px;
background-color: #444444;
display: block;
}
.jtpl-sidebar #cc-m-12126492491 {
height: 50%;
width: 260px;
position: absolute;
left: 0;
top: 0;
margin-top: 860px;
padding-left: 50px;
padding-right: 50px;
background-color: #444444;
display: block;
}
.jtpl-sidebar #cc-m-12126513891 {
height: 50%;
width: 260px;
position: absolute;
left: 0;
top: 0;
margin-top: 1320px;
padding-left: 50px;
padding-right: 50px;
background-color: #444444;
display: block;
}
/*]]>*/
</style>
Hallo Sonja,
...Du kannst Deine Beiträge selbst löschen, aber in einem Forum können auch Fehler hilfreich sein und auch erfolglose Versuche. So etwas kann für jmd. anderes ein wertvoller Tipp sein. Deshalb würde ich mich freuen, wenn Du den Beitrag stehen lassen würdest.
Um eine 2. (pseudo-) Sidebar zu schaffen, würde ich, genau wie Du es gemacht hast, diese als Spalten-Element in der echten Sidebar anlegen, und diesen Container dann so formatieren, dass er an der richtigen Stelle erscheint.
Das gibt Dir auch die Möglichkeit, ihn in den mobilen Ansichten anders zu behandeln. Ohne Formatierung würde er zB einfach da erscheinen, wo er angelegt wurde. Das wäre sehr einfach zu bewerkstelligen, denn dafür müsstest Du die Formatierung nur per @media (min-width: ****px) auf die Ansichten mit größerer Fensterbreite als gewählt beschränken.
Übrigens: wenn Du das Spaltenelement per ID auswählst, brauchst Du .jtpl-sidebar nicht zu schreiben:
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
#cc-m-12091734891{
height: 50%; /* warum? */
transform: scale(0.5); /* zum Verkleinern, falls nötig */
width: 260px;
position: absolute;
left: 0;
top: 0;
margin-top: 70vh;
/* padding-left: 50px;
padding-right: 50px; */
padding: 15px 25px; /* 1. Wert oben und unten, 2. Wert recht und links */
background-color: #44444480;
display: block; /* nicht nötig */
}
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 az
Vielen Dank für deine Hilfe! Ok, gut, dann versuche ich es weiter. 
Zu deinem Code-Beispiel:
du schreibst
height: 50% *warum?* - meine Antwort: keine Ahnung, hab ich irgendwie von irgendwo kopiert, ich weiss es nicht mehr!
Eine Bitte:
Könntest du hier im Forum einen kleinen Beitrag schreiben zu Media-Queries? Ich weiss ungefähr, was das ist, aber nicht genau, wie das funktioniert. Z.Bsp. wie ermittelt man da die unterschiedlichen px-Werte für die verschiedenen Medias, wie weiss man, was man da eintragen soll?
LG, Sonja
...das ist eigentlich ganz einfach:
Mobile Ansichten haben Fensterbreiten bis 767px. Alles darüber ist dann iPad/Tablet oder Desktop-Ansicht.
Wenn eine Schriftgröße z.B.: nur in der mobilen Ansicht geändert werden soll, schreibst Du:
2
3
4
5
6
7
8
9
10
@media (max-width:767px) {
.jtpl-content p {
font-size: 0.25vw;
}
}
Das bedeutet dann für den Browser: "wenn die Fensterbreite kleiner ist als 767px (also Mobil), dann setze die Schriftgröße aller p (Standard-Absätze) im Content-Bereich auf 0.25 der Fensterbreite".
Den Wert kannst Du dann beliebig anpassen. Testen im Chrome-Browser (Dev-Tolls). Ich mache auch Schulungen (TeamViewer). Bitte per e-Mail anmelden!
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
Jetzt anmelden!
Jetzt registrieren!
