Correct scrolling

About the template and stylesheet - and changing the menu
Post Reply
Tata
Posts: 3586
Joined: Tue May 20, 2008 5:34 am
Location: Slovakia
Contact:

Correct scrolling

Post by Tata » Wed Mar 28, 2018 9:18 am

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
You do not have the required permissions to view the files attached to this post.
CMSimple.sk
It's no shame to ask for an answer if all efforts failed.
But it's awful to ask without any effort to find the answer yourself.

frase
Posts: 5085
Joined: Thu Apr 21, 2016 6:32 am
Location: Saxony
Contact:

Re: Correct scrolling

Post by frase » Wed Mar 28, 2018 10:45 am

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. ;)

lck
Posts: 2963
Joined: Wed Mar 23, 2011 11:43 am
Contact:

Re: Correct scrolling

Post by lck » Wed Mar 28, 2018 10:58 am

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.
„Bevor du den Pfeil der Wahrheit abschießt, tauche die Spitze in Honig!“   👉 Ludwig's XH-Templates for MultiPage & OnePage

frase
Posts: 5085
Joined: Thu Apr 21, 2016 6:32 am
Location: Saxony
Contact:

Re: Correct scrolling

Post by frase » Wed Mar 28, 2018 11:27 am

Klasse, Ludwig!

Versionen 1 und 3 funktionieren nicht so gut, weil:
tata.png
Version 2 funktioniert bestens!
You do not have the required permissions to view the files attached to this post.

lck
Posts: 2963
Joined: Wed Mar 23, 2011 11:43 am
Contact:

Re: Correct scrolling

Post by lck » Wed Mar 28, 2018 12:24 pm

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-->
„Bevor du den Pfeil der Wahrheit abschießt, tauche die Spitze in Honig!“   👉 Ludwig's XH-Templates for MultiPage & OnePage

Tata
Posts: 3586
Joined: Tue May 20, 2008 5:34 am
Location: Slovakia
Contact:

Re: Correct scrolling

Post by Tata » Wed Mar 28, 2018 12:51 pm

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.
CMSimple.sk
It's no shame to ask for an answer if all efforts failed.
But it's awful to ask without any effort to find the answer yourself.

cmb
Posts: 14225
Joined: Tue Jun 21, 2011 11:04 am
Location: Bingen, RLP, DE
Contact:

Re: Correct scrolling

Post by cmb » Wed Mar 28, 2018 1:38 pm

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. :)
Christoph M. Becker – Plugins for CMSimple_XH

Post Reply