Mobirise Navigation

[bonapart]

Hallo zusammen,

ich bastele schon seit einiger Zeit, zuletzt mit einigen gesundheitlichen Pausen, an unserer Vereinswebseite.
Nachdem das Projekt bereits durch den Vorstand begutachtet wurde fiel auf, dass auf allen Seiten .html die Navigation oben auch nach Scrollen wie gewünscht fixiert bleibt und das Hamburger-Menu auch immer rechts im Sichtbereich ist.
Bei den .php Seiten dagegen, in denen ich dank Formulargenerator einige Formulare einbauen konnte, schiebt sich die Navi-Leiste oben beim Scrollen mit weg. Und das Hamburger-Menu ist dann nur weiter rechts außerhalb des Sichtbereichs durch seitliches Scrollen zu finden.
Das Problem tritt nur bei Aufruf mit dem Handy auf, egal ob hochkant oder quer. Beim arbeiten an der Webseite und Publizieren ist am PC alles ok und mir selber gar nicht aufgefallen.

Ich vermute (bin kein PHP Fachmann) dass das mit der anderen Breite durch die Formularfelder zu tun hat und sich die jeweilige Seite in der Navi "verbreitert" bzw. die Menüleiste mit weg gescrollt wird. Kann man im Code was einstellen oder im HTML-Bereich, dass wenigstens die Navileiste fixiert ist? Wünschenswert wäre natürlich auch das stets sichtbare Hamburger-Menu am Handy.

Die URL lautet www.zenkerweb.de
Die entsprechenden Seiten wären Kontakt (unter "Verein") und Registrierung (unter "Mitglieder").
Ich nutze Mobirise 5 und habe mit meinem Android-Handy getestet.

Ich bedanke mich vorab für Eure Ideen

Gruß bonapart

[Tommy Herrmann]

Hallo,

ich habe gerade nur noch 10 Minuten Zeit und muss daher wahrscheinlich morgen weiter helfen.

Du hast die CSS von Werners Formular-Generator als Style-Anweisung übernommen. Das hätte man wahrscheinlich besser auf "Bootstrap" gestellt, die Option hat der Generator.

Ich habe jetzt mal eine maximale Breite im Style von 90%, also max-width: 90%; bei den Selektoren "form" und "blockquote" hinzugefügt, denn das Handy-Display hat meist nur 360 Pixel:

Code: Alles auswählen

<style>
body, textarea {
font-family: Verdana, Sans-Serif;
font-size: 1rem;
}

form {
width: 410px;
max-width: 90%;
padding: 10px;
margin: Auto;
}

span.pflichtfeld {
font-size: 0.90rem;
color: Red;
}

span.hilfetext {
font-family: Arial, Tahoma, Sans-Serif;
font-size: 0.80rem;
font-style: Oblique;
color: #009500;
}

blockquote {
width: 385px;
max-width: 90%;
margin: Auto;
}

</style>

Weiterhin müssen die `input` Felder bei `size` nicht eine absolute Länge erhalten sondern z.B. 90%. Den Mobirise-Block selbst musst Du dann auf die gewünschte Größe am Desktop reduzieren (am Schieber).

Also anstatt:

size='35'

dann zum Beispiel:

size='90%'

Gucke Dir Dein Formular mal am Handy an, dann kannst Du sehen, dass es durch die zu langen Felder einen Überlauf (Querscroller) gibt (mit dem Finger nach links schieben) und damit auch das Hamburger-Menü nach rechts verschoben wird, weil das am rechten Rand positioniert ist.

[bonapart]

Vielen Dank Tommy,

Dir fällt in 10 Minuten mehr ein als mir in 2 Stunden ...
Da war ich schon auf der richtigen Spur mit den Formulatfeldern.
Ich werde das mal ausprobieren bzw. Deine tollen Tipps umsetzen.

Bootstrap: Kann man den in fertigen Formularen (wie jetzt) noch aktivieren? Bevor ich die Formulare noch mal neu erstellen muß. Ich weiß auch gar nicht so genau, was mit und ohne Bootstrap genau bedeutet...
Ich wünschte, ich hätte mehr Zeit für ein intensiveres Studium von PHP & Co.
Jetzt probiere ich aber zunächst die Auswirkungen Deiner Änderungsvorschläge mit den prozentualen Angaben. Ggf. genügt das schon.

Schönen (Feier-) Abend noch. VG

[Tommy Herrmann]

... das bekommst Du auch ohne Bootstrap hin.

Mit Bootstrap müsstest Du lediglich an jedes Eingabe-Feld des Formulars noch die Bootstrap class='form-control' schreiben. Hier kannst Du das im Beispielcode eines solchen Formulars sehen:

https://www.mobirise-tutorials.com/Form ... mular.html

Dann passt sich die Breite des Formulars und alle Felder automatisch jeder Displaygröße responsive an. Dann könntest Du die <style> Anweisung vom Werner auch komplett weglassen.

[bonapart]

Moin Tommy,

Danke nochmals für Deine Info zu Bootstrap. Hatte ich im Formulareditor sicherlich deaktiviert.

Dennoch 2 Fragen:
Du erwähntest "Den Mobirise-Block selbst musst Du dann auf die gewünschte Größe am Desktop reduzieren (am Schieber)"
Was bedeutet das? Die Formulare stecken in einem Article-Block von Mobirise. Wo gibt es da einen Schieber für den ganzen Block? Vielleicht stehe ich auf der Leitung ...

Und zweitens: Das mit dem Bootstrap klingt plausibel. Ich erwäge, die beiden Formulare ggf. noch mal neu im Generator zu erstellen. Genügt es dann, den Haken bei Bootstrap zu belassen, um das ursprüngliche Problem mit meiner "wegscrollenden" Navileiste und zu breitem Formular zu vermeiden? Wenn dem so wäre würde ich dann ggf. die beiden Formulare eher neu erstellen, als an den fertigen rum zu basteln.

Vielen Dank für die Antworten. Kann ich immer wieder was dazu lernen.

Schönen Tag noch
bonapart

[Tommy Herrmann]

Moin,

die Breite des Mobirise-Blocks kann man sehr häufig, zum Beispiel bei dem einfachen Textblock aus der Gruppe "Article" vom Standard-Thema "Mobirise5" in der Breite einstellen. Das habe ich nur geschrieben, weil ja sonst bei breiten Blöcken, das Formular vielleicht über die gesamte Bildschirmbreite am Desktop angezeigt wird, was nicht unbedingt gewollt sein dürfte.

Du kannst die Formulare neu erstellen und "Bootstrap" eben anhaken. Dann passiert aber nichts anderes als ich Dir bereits geschrieben habe, es wird die class='form-control' hinzugefügt. Das wäre sicherlich einfacher, das schnell händisch im bereits vorhandenen Code dran zu schreiben.

… und ja - das ist das Problem mit der Navi gelöst, denn das entsteht ja nur durch den Überlauf der Breite.

[Tommy Herrmann]

Beispiel:

Dein `input` Feld "name" sieht zur Zeit so aus:

Code: Alles auswählen

<input type='text' name='name' value='' size='40' tabindex='1'>

Dann schreibe einfach noch die Bootsrap class='form-control' hinten dran, also so:

Code: Alles auswählen

<input type='text' name='name' value='' size='40' tabindex='1' class='form-control'>

... ebenso bei allen anderen Feldern.

[bonapart]

Moin,

ja, das werde ich mal so machen und die bestehenden Eingabefelder auf Bootstrap umstellen.
Bin derzeit dienstlich eingespannt und komme ggf. in den nächsten Tagen nicht dazu.
Sollte weitere Fragen sein melde ich mich.

Vielen Dank, Tommy, bis hierher. Wie immer eine große Hilfe !!

VG bonapart