Non-clickable links

Asked

Viewed 55 times

-1

Hello, I’m creating the home of a site that has a full-screen video that automatically plays but with the video in full screen even with the z-index the links are not clickable as you can see, how do I solve this?

		*{
			margin: 0;
			padding: 0;
		}
		.bloco{
			width: 100vw;
			height: 100vh;
			justify-content: center;
			align-items: center;
			display: flex;
		}
		.links{
			width: 100%;
			height: 50px;
			z-index: 100;
			position: fixed;
			display: flex;
		}
		.links label{
			z-index: 101;
			padding: 10px 0;
			flex-grow: 1;
			cursor: pointer;
			transition: all .4s;
			text-align: center;
			font-family: 'Arial';
			font-size: 100%;
			color: #fff;
		}
		.links label:hover{
			background-color: rgba(255,255,255,.2);
		}
		.scroll input{
			display: none;
		}
		#home{
			background-color: #7fbd42;
		}
		#login{
			background-color: #7c2096;
		}
		#register{
			background-color: #414950;
		}
		#contact{
			background-color: #aaa;
		}
		#news{
			background-color: #7fbd42;
		}
		.scroll{
			display: flex;
			width: 100vw;
			height: 100vh;
			overflow: hidden;
		}
		.sections{
			transition: all .4s;
		}
		#rd_login:checked ~ .sections{
			margin-top: -100vh;
		}
		#rd_register:checked ~ .sections{
			margin-top: -200vh;
		}
		#rd_contact:checked ~ .sections{
			margin-top: -300vh;
		}
		#rd_news:checked ~ .sections{
			margin-top: -400vh;
		}
		#bg{
			position: fixed;
			right: 0;
			bottom: 0;
			min-width: 100%;
			min-height: 100%;
			width: auto;
			height: auto;
			background-cover: cover;
		}
		#content{
			position: absolute;
			top: 20px;
			padding: 30px;
			color: #fff;
			text-shadow: #000 2px 2px 2px;
			font-family: Arial;
		}
<nav class="links">
	<label for="rd_pi">Pagina Inicial</label>
	<label for="rd_login">Login</label>
	<label for="rd_register">Registrar-me</label>
	<label for="rd_contact">Entrar em Contato</label>
	<label for="rd_news">Novidades</label>
</nav>
<div class="scroll">
	<input type="radio" name="grupo_menu" id="rd_pi" checked="true">
	<input type="radio" name="grupo_menu" id="rd_login">
	<input type="radio" name="grupo_menu" id="rd_register">
	<input type="radio" name="grupo_menu" id="rd_contact">
	<input type="radio" name="grupo_menu" id="rd_news">
<section class="sections">
	<section class="bloco" id="home">
	<video id="bg" src="https://www.quirksmode.org/html5/videos/big_buck_bunny.mp4" autoplay="" loop="true"></video>
	</section>
	<section class="bloco" id="login"></section>
	<section class="bloco" id="register"></section>
	<section class="bloco" id="contact"></section>
	<section class="bloco" id="news"></section>
</section>
</div>

I am following the following tutorial : TUTORIAL

html css html5 css3

  • Your navigation list does not have <a> with respective attributes href logo has not links but text only.

  • This page does not work with <a> but with <label> and each label is associated with a radio button that in css when checked from a margin-top to the content the user wants to see, following the one-page model

  • The problem is position:fixed of the video, which makes you always on top of everything. Besides background-cover does not exist, and would be background-size but only applicable to the same background. "links" have always been clickable.

2 answers

0


Your main problem was that you were using position:fixed in the video, not much to do with label, link or any of that...

See which now I put with position:absolute and it worked.

OBS: Here it does not work right Snippet Stackoverflow is very narrow, but on your page will work normal.

*{
        margin: 0;
        padding: 0;
    }
    .bloco{
        width: 100vw;
        height: 100vh;
        justify-content: center;
        align-items: center;
        display: flex;
    }
    .links{
        width: 100%;
        height: 50px;
        z-index: 100;
        position: fixed;
        display: flex;
    }
    .links label{
        z-index: 101;
        padding: 10px 0;
        flex-grow: 1;
        cursor: pointer;
        transition: all .4s;
        text-align: center;
        font-family: 'Arial';
        font-size: 100%;
        color: #fff;
    }
    .links label:hover{
        background-color: rgba(255,255,255,.2);
    }
    .scroll input{
        display: none;
    }
    #home{
        background-color: #7fbd42;
        position: relative;
    }
    #login{
        background-color: #7c2096;
    }
    #register{
        background-color: #414950;
    }
    #contact{
        background-color: #aaa;
    }
    #news{
        background-color: #7fbd42;
    }
    .scroll{
        display: flex;
        width: 100vw;
        height: 100vh;
        overflow: hidden;
    }
    .sections{
        transition: all .4s;
    }
    #rd_login:checked ~ .sections{
        margin-top: -100vh;
    }
    #rd_register:checked ~ .sections{
        margin-top: -200vh;
    }
    #rd_contact:checked ~ .sections{
        margin-top: -300vh;
    }
    #rd_news:checked ~ .sections{
        margin-top: -400vh;
    }
    #bg{
        min-width: 100%;
        min-height: 100%;
        position: absolute;
    }
    #content{
        position: absolute;
        top: 20px;
        padding: 30px;
        color: #fff;
        text-shadow: #000 2px 2px 2px;
        font-family: Arial;
    }
<nav class="links">
    <label for="rd_pi">Pagina Inicial</label>
    <label for="rd_login">Login</label>
    <label for="rd_register">Registrar-me</label>
    <label for="rd_contact">Entrar em Contato</label>
    <label for="rd_news">Novidades</label>
</nav>
<div class="scroll">
    <input type="radio" name="grupo_menu" id="rd_pi" checked="true">
    <input type="radio" name="grupo_menu" id="rd_login">
    <input type="radio" name="grupo_menu" id="rd_register">
    <input type="radio" name="grupo_menu" id="rd_contact">
    <input type="radio" name="grupo_menu" id="rd_news">
    <section class="sections">
        <section class="bloco" id="home">
            <video id="bg" src="https://www.quirksmode.org/html5/videos/big_buck_bunny.mp4" autoplay="" loop="true"></video>
        </section>
        <section class="bloco" id="login"></section>
        <section class="bloco" id="register"></section>
        <section class="bloco" id="contact"></section>
        <section class="bloco" id="news"></section>
    </section>
</div>

0

Instead of using a label use a a href

Follow an example to understand

<a href="https://www.w3schools.com">Visit W3Schools</a>

  • The problem is that <a> does not allow you to dial/uncheck radio Buttons https://www.youtube.com/watch?v=QiI6PbD6Ei4

  • you followed everything to the detail of the tutorial??

  • yes but in the tutorial he puts an image and I put a video and I took the code of another tutorial https://www.youtube.com/watch?v=B1BMxu_kAE4

  • ve if you can with this - https://codepen.io/saladeestudo/pen/mErOkg

  • the problem is not in the links because if I take the tag video it works

  • already checked if the video tag works with this property ? It is that not always work all tags

Show 1 more comment

Browser other questions tagged html css html5 css3

You are not signed in. Login or sign up in order to post.