One page responsive template with video in background
Moderator: mikey
One page responsive template with video in background
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
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.
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.
Re: One page responsive template with video in background
Weiterleitungen sind in OnePage-Webseiten so nicht möglich, siehe ThreadTata wrote:I have not found the way linking the "footer" part from the main navigation.
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 */
}
}
„Bevor du den Pfeil der Wahrheit abschießt, tauche die Spitze in Honig!“ Ludwig's XH-Templates for MultiPage & OnePage
Re: One page responsive template with video in background
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.
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.
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.
Re: One page responsive template with video in background
Die neue Variante ist noch nicht fertig, aber ich habe mit der alten noch bisschen gespielt und biunm dayu gekommen, dass es genügtunter der Hauptdefinition yu geben und schon ist es fast, wie gewünscht. Der Footer skrollt nur wenn aktiviert.
Code: Select all
#boxes:hover{bottom: 0em; overflow: auto;}
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.
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.
Re: One page responsive template with video in background
Jetzt habe ich mit ine-page folgende Selektore definiert;
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 ]
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 {}
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.
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.
Re: One page responsive template with video in background
Die Verwendung von z-index funktioniert nur im Zusammenhang mit der Angabe position, die von static abweicht.Tata wrote:Ich habe es mit z-index versucht. Hat aber nichts gebracht. Oder habe ich sie nur falsch benutzt?
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
Re: One page responsive template with video in background
Leider, nix
[ external image ]
mit wie vorher...
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}
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}
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.
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.
Re: One page responsive template with video in background
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
Re: One page responsive template with video in background
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.
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.
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.