header2-49 Überlappung Menüleiste

Allgemeine Fragen
Boomer
Mitglied (Level 7)
Mitglied (Level 7)
Beiträge: 68
Registriert: Mo 10. Jan 2022, 09:59

header2-49 Überlappung Menüleiste

Ungelesener Beitrag von Boomer »

Hallo zusammen,

eine einfache Frage habe ich noch zu meiner Unterseite https://sonoboomer.com/register.php:
Oben links besteht eine Überlappung zwischen der Menüleiste und der Überschrift "Registrierung" des headers 2-49:
Screenshot_Überlappung.jpg
Wie kann ich die Überlappung beseitigen ? Im CSS Code hatte ich schon versucht das top padding zu vergrößern, ging aber nicht. Wie kriege ich den Titel "Registrierung" überlappungsfrei unter die Menüleiste ?

Danke, Thomas
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5744
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: header2-49 Überlappung Menüleiste

Ungelesener Beitrag von Tommy Herrmann »

... normalerweise schreibt man da einen Innenabstand in den Bereich "CSS Editor" vom "Code Editor", wie:

padding-top: 80px;

... oder so. Das geht mit dieser CSS-Anweisung in jedem Fall, sonst hast Du es irgendwie falsch gemacht.

Oder Du fügst einfach über dem Text "Registrierung" einige Leerzeilen mit der Eingabetaste ein.

Das obere Ende vom Block ist das Seitenende, da die Menüleiste - wenn diese fixiert ist - über diesem Block liegt

Du könntest also die Menüleiste auch nicht fixieren, dann sitzt der Header-Block unter der Menüleiste.
Boomer
Mitglied (Level 7)
Mitglied (Level 7)
Beiträge: 68
Registriert: Mo 10. Jan 2022, 09:59

Re: header2-49 Überlappung Menüleiste

Ungelesener Beitrag von Boomer »

Hallo Tommy,

danke für die Soforthilfe. Habe einfach mehr Zeilen eingefügt, das ging am einfachsten.
Frage mich trotzdem, warum das mit dem top padding 80px nicht geht wie hier rechts oben:
Screenshot_padding.jpg
Gruß, Thomas
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5744
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: header2-49 Überlappung Menüleiste

Ungelesener Beitrag von Tommy Herrmann »

Moin,

nee Du - so funktioniert das auch nicht.

Stelle mal diese 80px wieder auf 1rem, denn das ist eine Variable mit der gerechnet wird:

padding-top: (@paddingTop * 1rem);

... die dann in den Parametern (links im "HTML Code") mit dem Eingabefeld-Namen name="paddingTop" verarbeitet wird:

<input type="range" inline title="Top" name="paddingTop" min="0" max="10" step="1" value="5" condition="fullScreen == false">

Das aber auch nur, wenn der Schalter nicht auf "Full Screen" (gesamter Bildschirm) steht, denn sonst wird das (wie Du oben im Code sehen kannst):

condition="fullScreen == false"

... ignoriert. Wenn die Kondition "Full Screen" eingeschaltet ist, dann ist diese Funktion "false" (unwirksam).

Weiterhin kann man den Schieberegler dann auch nur in einer "Range" (Reichweite) von 1 bis 10 in Schritten (step) von "1" bewegen (dieser steht oben jetzt mit einem Wert (value) von 5 eingetragen (also: 5rem). Wollte man das weiter als 10rem schieben können (1rem sind ca. 16px), dann müsste man den Code z.B. so ändern, also auch max hochsetzen:

<input type="range" inline title="Top" name="paddingTop" min="0" max="20" step="1" value="15" condition="fullScreen == false">

Oben könnte man den Regler nun bis 20rem schieben - und ich habe diesen auf 15 (value) geschoben. Also

padding-top: (@paddingTop * 1rem);

... multipliziert die eingestellte Variable (Schieberegler) @paddingTop mit dem Wert von 1rem.

Mobirise bastelt sich grundsätzlich mit solchen "input" Parametern die Block-Einstellungen zusammen. So könnte man sich diese Block-Einstellungen auch individuell selbst anpassen.



Du solltest für den Text das "padding-top" eben auch dort hin schreiben, wo Du es brauchst.

Hier mal im Screenshot beispielhaft an den Titel geschrieben:

padding-top: 300px;

... dann wirkt das auch. Das ist die class="mbr-section-title":


padding-top Code.jpg


In der Toolbox kann man meist "Full Screen" einschalten:


FullScreen eingeschaltet.jpg


... oder eben auch ausschalten - nur dann sieht man die Schieberegler für die Abstände oben und unten überhaupt und nur dann wirken diese Einstellungen auch:


FullScreen ausgeschaltet.jpg


P.S.:

Du kannst das mit den Umbrüchen als <br> Tag jetzt aber auch so lassen - das ist ja nicht falsch - höchstens nicht so ganz "elegant".

Ich habe nur versucht das System zu erklären und wie und wann dieses "padding" (Innenabstand) eben auch wirkt.
Antworten

Wer ist online?

Mitglieder in diesem Forum: Ahrefs [Bot], Bing [Bot] und 20 Gäste