One page responsive template with video in background

Please post the URLs to pages, where you've made a CMSimple template available for download

Moderator: mikey

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

One page responsive template with video in background

Post by Tata » Wed Dec 30, 2015 1:17 pm

After studying Ludwig's op-metro2 template, I have tried to create another one with a full screen video background.
I have ended with some unsolved problems:
1. The newsboxes placed on the bottom are only accessible if scrolling full page down - I have not found the way linking the "footer" part from the main navigation.
2. I solved the previous problem by making the "footer" expandable - on smaller devices it doesn't keep the height and thus coveres higher part of the bottom, sometime even covering the full screen, so that the content of the page is inaccessible, however. The responsivity is not absolutely correct either.
3. I have not achieved smooth fluid responsivity - it's mostly because of used "display: flex" attributes.

Any comments/advises are welcome.

[ external image ] [ external image ]

DEMO & DOWNLOAD
Last edited by Tata on Mon Jan 25, 2016 1:11 pm, edited 1 time in total.
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.

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

Re: One page responsive template with video in background

Post by lck » Wed Dec 30, 2015 6:51 pm

Tata wrote:I have not found the way linking the "footer" part from the main navigation.
Weiterleitungen sind in OnePage-Webseiten so nicht möglich, siehe Thread

zu 1.) Warum nicht eine neue Seite am Ende der Menüstruktur anlegen, sagen wir mal "Info" und diese mit den boxes (Newsboxen/Infoboxes), die du jetzt in der template.htm angelegt hast, direkt in der neuen Seite anlegen. Dann funktioniert der Link auf alle Fälle und kannst die Boxen auf einer Seite editieren.

zu 2.) Das müsste man sich genauer anschauen, vielleicht hilft das schon etwas weiter

Code: Select all

@media (max-width: 640px) and (min-width: 361px) {
.boxes {
    max-width: 100vw;
    margin: 1em auto 0.5em;
    overflow-y: auto; /* neu */
    overflow-x: hidden; /* neu */
    max-height: 22em; /* neu */
}
}
 
BTW: Dem body evtl. noch ein overflow-x: hidden; hinzufügen
„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: One page responsive template with video in background

Post by Tata » Wed Dec 30, 2015 9:02 pm

Vielen Dank, Ludwig. Werde im nächsten Jahr versuchen :-).
Eigentlich habe ich davon überlegt, nur habe ich es in meinem alter seit gestern vergessen.
Jetzt bastle ich eine neue Variante un versuche sie so einfach machen, wie möglich.

Vünsche schöne NeuJahrFeste.
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.

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

Re: One page responsive template with video in background

Post by Tata » Sun Jan 03, 2016 3:25 pm

Die neue Variante ist noch nicht fertig, aber ich habe mit der alten noch bisschen gespielt und biunm dayu gekommen, dass es genügt

Code: Select all

#boxes:hover{bottom: 0em; overflow: auto;}
unter der Hauptdefinition yu geben und schon ist es fast, wie gewünscht. Der Footer skrollt nur wenn aktiviert.
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.

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

Re: One page responsive template with video in background

Post by Tata » Sun Jan 24, 2016 8:29 pm

Jetzt habe ich mit ine-page folgende Selektore definiert;

Code: Select all

.navigation ul {}
.navigation li {}
.navigation span {}

.navigation ul ul {}
.navigation ul ul li {}
.navigation ul ul li span {}

.navigation ul ul ul {}
.navigation ul ul ul li {}
.navigation ul ul ul li span {}
und einige ":hover" Pseudos.

Was ich aber nicht lösen kann ist das Benehmen, wenn ich die Seite am iPad oder iPhone anschaue und die horizontale Navigation in z.B. 2 Zeilen "wrapped", die H2, H3 elemente der Navigation hinter H1 Elementen versteckt sind. Ich habe es mit z-index versucht. Hat aber nichts gebracht. Oder habe ich sie nur falsch benutzt?

1900 x 1280 | 800 x 1280
[ external image ] | [ external image ]
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.

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

Re: One page responsive template with video in background

Post by lck » Sun Jan 24, 2016 8:59 pm

Tata wrote:Ich habe es mit z-index versucht. Hat aber nichts gebracht. Oder habe ich sie nur falsch benutzt?
Die Verwendung von z-index funktioniert nur im Zusammenhang mit der Angabe position, die von static abweicht.
Beispiel:

Code: Select all

.menulevel1 {
    position: relativ;
    z-index: 100;
}
.menulevel2 {
    position: relativ;
    z-index: 200;
}
.menulevel3 {
    position: relativ;
    z-index: 300;
}
„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: One page responsive template with video in background

Post by Tata » Sun Jan 24, 2016 9:38 pm

Leider, nix :-(

Code: Select all

.navigation ul{...
position: relative; z-index: 100;}
.navigation ul ul{...
position: relative; z-index: 200;}
.navigation ul ul ul{...
position: relative; z-index: 300}
[ external image ]
mit

Code: Select all

.navigation ul li{...
position: relative; z-index: 100;}
.navigation ul ul li{...
position: relative; z-index: 200;}
.navigation ul ul ul li{...
position: relative; z-index: 300}
wie vorher...
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.

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

Re: One page responsive template with video in background

Post by lck » Mon Jan 25, 2016 9:54 am

Hast du die Seite online? Obiger Link ist nicht mehr gültig.
„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: One page responsive template with video in background

Post by Tata » Mon Jan 25, 2016 1:13 pm

Schon sind die Links korrigiert. Das original habe ich leider nicht mit (erst am Wochenende). Das vorige ist aber verlinkt und es braucht nur die obige Navigation "fixed" zu stellen.
Vielen Dank.
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.

Post Reply