Problem mit Navigation und responsive

22.02.2019 11:25 (zuletzt bearbeitet: 22.02.2019 21:48)
#1
ba

Hallo Leute,

Ihr habt hier wirklich ein super Forum aufgebaut. Für Leute wie mich die in CSS kaum Erfahrung haben ist es wirklich Gold wert.

Leider komme ich an einem bestimmten Punkt nicht so richtig weiter, aber vielleicht kann mir ja jemand ein paar Tipps geben.
Ich verwende für meine Jimdo Website das Design Tokyo und habe mit dem folgenden Code erreicht das mein Content über die komplette Bildschrimbreite aufgebaut werden kann.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
<style type="text/css">
/*<![CDATA[*/

div#content_area {margin-bottom: 0px;}
#cc-inner #content_area {

position:absolute;
margin-top: 0vw;
z-index:99999;
width: 94vw;
left: calc(-47vw + 50%);
position: relative;
padding: 0px;
height: auto !important;

}
/*]]>*/
</style>
 



Leider habe ich auf verschiedene Bildschirmen Probleme mit den Bildergrößen, diese werden nicht automatisch angepasst und ich weiß einfach nicht weiter. Ich weiß es ist ein responsive Problem, aber nicht wie ich es fixen kann.

Hier erstmal die Website www.bastian-springmann.com und ein paar Screenshots auf denen man die Verschiebung gut erkennen kann.



So habe ich die Aufteilung auf meinem 17 Zoll Notebook erstellt und so sollte sie idealer Weise auch auf größeren Bildschirmen oder auf dem Tablet aussehen.



Und so sieht es auf einem größeren Bildschirm aus.

Das zweite Problem ist in der mobilen Ansicht verschiebt sich der Navigationsbutton und man kann Ihn praktisch nicht mehr benutzten, aber wenigstens ist die Bildaufteilung hier in Ordnung.



In dem rot eingekreisten Feld kann man die Navigation aufrufen, aber nicht weiter nutzen :/

Ich hoffen mir kann jemand ein wenig weiterhelfen.

|addpics|o50-1-38ab.png-invaddpicsinvv,o50-2-3734.png-invaddpicsinvv,o50-3-8fac.png-invaddpicsinvv|/addpics|


 Antworten

 Beitrag melden
22.02.2019 21:50
avatar  az_
#2
avatar
az_

...schau mal hier: https://expanding.jimdo.com/hacks/full-width-slider/ - das gilt auch für normale Elemente.

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
23.02.2019 13:05
#3
ba

Danke, das eine Problem konnte ich jetzt lösen :D.

Nur macht immernoch die Navigationsleiste in der mobilen Ansicht Probleme.



Der Button verschwindet völlig und so ist die Navigation im mobilen Modus fast unbrauchbar. Auch mit rumprobieren bin ich da jetzt nicht weitergekommen :/.|addpics|o50-2-3734.png-invaddpicsinvv|/addpics|


 Antworten

 Beitrag melden
23.02.2019 17:39 (zuletzt bearbeitet: 24.02.2019 12:25)
#4
R.

probier mal diesen Code:

( den anderen löschen )

1
2
3
4
5
6
7
8
9
10
11
 
<style type="text/css">
/*<![CDATA[*/
/* Änderungsschema für Tokyo*/
.jtpl-content__inner, .jtpl-footer__inner,
.jtpl-sidebar__inner {width:100%!important;
max-width: 95%!important;}
.jtpl-header__inner {width: 100%!important;
max-width:95%!important;}
 
/*]]>*/
</style>
 



MUSTERSEITE


 Antworten

 Beitrag melden
23.02.2019 21:32
#5
ba

Perfekt, mir dem Code funktioniert die Navigation wieder einwandfrei und das der Button nicht sichtbar war, lag lediglich an der falschen Farbwahl der Navigation.

Vielen Dank Leute! :)


 Antworten

 Beitrag melden
07.06.2020 11:02 (zuletzt bearbeitet: 07.06.2020 11:03)
avatar  Maria12
#6
Ma

Hallo Basti,
ich habe auch das Problem, dass die 3 Striche zum Aufrufen der Navigationsleise in der mobilen Ansicht nicht sichtbar sind. Wie kann ich diese wieder sichtbar stellen? Unter Style finde ich nichts zum Markieren und farblich anpassen.
VG Maria


 Antworten

 Beitrag melden
07.06.2020 13:51 (zuletzt bearbeitet: 07.06.2020 14:03)
#7
R.

du hast den Navi-Hintergrund transparent eingestellt , unter Style oben ganz links mit der Farbrolle draufklicken und dort weiss einstellen ohne tranparenz. In der Vorlage Malaga hattest du noch einen transparenten Navi-Hintergrund eingestellt, das ist bei allen Vorlagen verschieden und muss wieder angepasst werden.
Unter dem Eintrag #4 geschriebenen Code kannst den Content auch breiter machen für Tokyo, einfach im Head unter allgemein einfügen wenn du möchtest, dann würde ich die Navi 1 unter Style rechts ausrichten


 Antworten

 Beitrag melden
07.06.2020 14:04
avatar  Maria12
#8
Ma

Vielen Dank! Jetzt passt wieder alles......hätt ich auch selber drauf kommen können.....


 Antworten

 Beitrag melden
Bereits Mitglied?
Jetzt anmelden!
Mitglied werden?
Jetzt registrieren!