Page 1 of 1

Correct scrolling

Posted: Wed Mar 28, 2018 9:18 am
by Tata
I play with a template both for multi- and onepage and CMSimple_XH-1.7.2. With the multi version everything works fine. With onepage I reached the point of problem. Using the navigation, the content shall scroll just below the "pseudo header". It goes to the top and is covered by the "pseudo header". What is the trick? The image shows the Standard state, scrolling after menu clicking and desired state.
onepage.jpg
sliding-nav.zip

Re: Correct scrolling

Posted: Wed Mar 28, 2018 10:45 am
by frase
Ich glaube nicht, dass das dein Problem löst, aber so etwas gibt es nicht:

Code: Select all

<navigation>
...
</navigation>
Das muss wohl so heißen:

Code: Select all

<nav>
...
</nav>
Weiter habe ich noch nicht geforscht. ;)

Re: Correct scrolling

Posted: Wed Mar 28, 2018 10:58 am
by lck
Tata wrote:
Wed Mar 28, 2018 9:18 am
Using the navigation, the content shall scroll just below the "pseudo header". It goes to the top and is covered by the "pseudo header". What is the trick?
Examples:

Code: Select all

.onepage_page:before {
	clear: both;
	content: "";
	display: inline-block;
	height: 100px; /* height of the header */
	position: relative;
	visibility: hidden;
}
OR

Code: Select all

:target[class="onepage_page"]:before {
	clear: both;
	content: "";
	display: inline-block;
	height: 100px; /* height of the header */
	position: relative;
	visibility: hidden;
}
OR

Code: Select all

.onepage_page:before {
	clear: both;
	content: "";
	display: block;
	height: 100px;
	margin: -100px 0 0;
	pointer-events: none;
	position: relative;
	visibility: hidden;
	z-index: -1;
}
OR an JS-script for setting the offset.

Re: Correct scrolling

Posted: Wed Mar 28, 2018 11:27 am
by frase
Klasse, Ludwig!

Versionen 1 und 3 funktionieren nicht so gut, weil:
tata.png
Version 2 funktioniert bestens!

Re: Correct scrolling

Posted: Wed Mar 28, 2018 12:24 pm
by lck
frase wrote:
Wed Mar 28, 2018 11:27 am
Version 2 funktioniert bestens!
Schön.
frase wrote:
Wed Mar 28, 2018 11:27 am
Versionen 1 und 3 funktionieren nicht so gut, weil:
WEIL(!): die Klasse .onepage_page 2mal vorhanden ist, also auch nochmal im Eltern-Element (1.Zeile). Die Klasse muss geändert werden.

Code: Select all

<div class="onepage_page" id="content">
                <div class="content">
                    <div id="Start" class="onepage_page"><div class="onepage_page_inner"><!--XH_ml1:Start-->

Re: Correct scrolling

Posted: Wed Mar 28, 2018 12:51 pm
by Tata
Super, Jungs! Riesen Dank. Nur noch finden, wie "fullscreen background" für die Seiten einstellen, ohne div.onepage_page zu 100% mit z.B. padding: 0 30% zu setzen. Mit morepagedata ist es absolute einfach. Es muss aber auch mit rein CSS gehen. Mit jetzinem stylesheet gilt die "nth-child" nur für content Bereich.

Re: Correct scrolling

Posted: Wed Mar 28, 2018 1:38 pm
by cmb
lck wrote:
Wed Mar 28, 2018 12:24 pm
WEIL(!): die Klasse .onepage_page 2mal vorhanden ist, also auch nochmal im Eltern-Element (1.Zeile). Die Klasse muss geändert werden.

Code: Select all

<div class="onepage_page" id="content">
                <div class="content">
                    <div id="Start" class="onepage_page"><div class="onepage_page_inner"><!--XH_ml1:Start-->
Grundsätzlich würde ich empfehlen, zusätzliche CSS-Klassen im Template mit einem eigenen Präfix zu versehen, z.B. tpl_. Dann passieren solche Dinge nicht. :)