html,
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.wrap {
height: 100%;
width: 100%;
background-size: cover;
position: relative;
overflow: hidden;
background: #000;
color: #000;
text-align: center;
font-family: Arial, san-serif;
}
header {
background: #3E474F;
box-shadow: 0 .5em 1em #111;
position: absolute;
top: 0;
left: 0;
z-index: 900;
width: 100%;
}
header label {
color: #788188;
cursor: pointer;
display: inline-block;
line-height: 4.25em;
font-size: .677em;
font-weight: bold;
padding: 0 1em;
}
header label:hover {
background: #2E353B;
}
h1 {
font-size: 300%;
}
.slide {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 100%;
z-index: 10;
padding: 8em 1em 0;
background-color: #120103;
background-position: 50% 50%;
background-size: cover;
}
.slide-one {
background-image: url('jupiter.jpg');
}
.slide-two {
background-image: url('neptune.jpg');
}
.slide-three {
background-image: url('mars.jpg');
}
.slide-four {
background-image: url('moon.jpg');
}
[id^="slide"]:checked+.slide {
left: 0;
z-index: 100;
}
video {
z-index: 10000;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Pure CSS Horizontal Slider</title>
<meta name="viewport" content="width=device-width, initial-scale=" 1 "/>
<link rel="stylesheet " type="text/css " href="main1.css " />
</head>
<body>
<div class="wrap ">
<header>
<label for="slide-1-trigger ">Slide One</label>
<label for="slide-2-trigger ">Slide Two</label>
<label for="slide-3-trigger ">Slide Three</label>
<label for="slide-4-trigger ">Slide Four</label>
</header>
<input id="slide-1-trigger " type="radio " name="slides " checked/>
<section class="slide slide-one ">
<h1>Headline One</h1>
<video width="250 " height="170 " controls>
<source src="jupitergif.webm " type="video/webm ">
</source>
</video>
</section>
<input id="slide-2-trigger " type="radio " name="slides " />
<section class="slide slide-two ">
<h1>Headline Two</h1>
</section>
<input id="slide-3-trigger " type="radio " name="slides " />
<section class="slide slide-three ">
<h1>Headline Three</h1>
</section>
<input id="slide-4-trigger " type="radio " name="slides " />
<section class="slide slide-four ">
<h1>Headline Four</h1>
</section>
</div>
</body>
</html>
I am having trouble styling the video so that it is in the bottom right corner of the page. Also, how can I make the video autoplay on a loop? Also, how can I get rid of any play/maximize icons on the video? The video is in section class slide slide-one. Much appreciated.
Add autoplay and loop attributes to <video> and remove controls. The <source> void element which doesn't have an end tag </source>
<video width="250" height="170" autoplay loop>
For placing the video in the bottom right corner use:
video {
z-index: 10000;
position:fixed;
bottom:0;
right:0;
}
BTW keep your format consistent all of the right quotes have a space before them, remove those spaces.
SNIPPET
html,
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.wrap {
height: 100%;
width: 100%;
background-size: cover;
position: relative;
overflow: hidden;
background: #000;
color: #000;
text-align: center;
font-family: Arial, san-serif;
}
header {
background: #3E474F;
box-shadow: 0 .5em 1em #111;
position: absolute;
top: 0;
left: 0;
z-index: 900;
width: 100%;
}
header label {
color: #788188;
cursor: pointer;
display: inline-block;
line-height: 4.25em;
font-size: .677em;
font-weight: bold;
padding: 0 1em;
}
header label:hover {
background: #2E353B;
}
h1 {
font-size: 300%;
}
.slide {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 100%;
z-index: 10;
padding: 8em 1em 0;
background-color: #120103;
background-position: 50% 50%;
background-size: cover;
}
.slide-one {
background-image: url('https://pbs.twimg.com/profile_images/628266121313947648/Zk_c8qnD.jpg');
}
.slide-two {
background-image: url('https://dperkins.org/gal/2014/thumb/2014-10-06.18.Neptune.jpg');
}
.slide-three {
background-image: url('https://at-cdn-s01.audiotool.com/2011/10/04/documents/FHCjD1iBHjEiCESy8ubgBopVfNr/0/cover256x256-dd1bb728ff564ec69ededd71b2ba4ada.jpg');
}
.slide-four {
background-image: url('https://is5-ssl.mzstatic.com/image/thumb/Purple71/v4/82/42/9a/82429a1b-a489-d421-5ec2-cb38613b54f4/source/256x256bb.jpg');
}
[id^="slide"]:checked+.slide {
left: 0;
z-index: 100;
}
video {
z-index: 10000;
position:fixed;
bottom:0;
right:0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Pure CSS Horizontal Slider</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="wrap">
<header>
<label for="slide-1-trigger">Slide One</label>
<label for="slide-2-trigger">Slide Two</label>
<label for="slide-3-trigger">Slide Three</label>
<label for="slide-4-trigger">Slide Four</label>
</header>
<input id="slide-1-trigger" type="radio" name="slides" checked/>
<section class="slide slide-one">
<h1>Headline One</h1>
<video width="250" height="170" autoplay loop>
<source src="http://media6000.dropshots.com/photos/1381926/20170326/005609.mp4" type="video/webm">
</video>
</section>
<input id="slide-2-trigger" type="radio" name="slides">
<section class="slide slide-two">
<h1>Headline Two</h1>
</section>
<input id="slide-3-trigger" type="radio" name="slides">
<section class="slide slide-three">
<h1>Headline Three</h1>
</section>
<input id="slide-4-trigger" type="radio" name="slides">
<section class="slide slide-four">
<h1>Headline Four</h1>
</section>
</div>
</body>
</html>
Related
I found this slider in JSFiddle on https://www.cssscript.com/demo/full-width-horizontal-page-slider-with-pure-html-css/ and I have changed it little bit.
I am trying to slide the sections automatically every 5 seconds in a loop. Currently, it slides down every 5 seconds but if you just visit the page and click Section Four on the header in 3rd second, after 2 seconds later it will bring you to 2nd slide but actually it should've brought you to 1st section.
I have tried to find something on thus but unfortunately, my knowledge on this very limited. Your help is much appreciated.
JSFiddle
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>slider</title>
<style>
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.page-slider {
height: 100%;
width: 100%;
position: relative;
overflow: hidden;
background: #120103;
color: #fff;
text-align: center;
}
header {
background: #3e474f;
box-shadow: 0 0.5em 1em #111;
position: absolute;
top: 0;
left: 0;
z-index: 900;
width: 100%;
}
header label {
color: #788188;
cursor: pointer;
display: inline-block;
line-height: 4.25em;
font-size: 1em;
font-weight: bold;
padding: 0 1em;
}
header label:hover { background: #2e353b; }
.slide {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 100%;
z-index: 10;
padding: 8em 1em 0;
background-color: #120103;
background-position: 50% 50%;
background-size: cover;
transition: left 0s 0.75s;
}
.slide-one { background-image: url(https://unsplash.it/1800/1200?image=222); }
.slide-two { background-image: url(https://unsplash.it/1800/1200?image=333); }
.slide-three { background-image: url(https://unsplash.it/1800/1200?image=444); }
.slide-four { background-image: url(https://unsplash.it/1800/1200?image=555); }
[id^="slide"]:checked + .slide {
left: 0;
z-index: 100;
transition: left 0.65s ease-out;
}
.slide h1 {
opacity: 0;
transform: translateY(100%);
transition: transform 0.5s 0.5s, opacity 0.5s;
}
[id^="slide"]:checked + .slide h1 {
opacity: 1;
transform: translateY(0);
transition: all 0.5s 0.5s;
}
</style>
</head>
<body>
<div class="page-slider">
<header>
<label class="btn slide1 active" for="slide-1-trigger">Section One</label>
<label class="btn slide2" for="slide-2-trigger">Section Two</label>
<label class="btn slide3" for="slide-3-trigger">Section Three</label>
<label class="btn slide4" for="slide-4-trigger">Section Four</label>
</header>
<input id="slide-1-trigger" type="radio" name="slides" checked>
<section class="slide slide-one">
<h1>Full Width Horizontal Page Slider Demo</h1>
</section>
<input id="slide-2-trigger" type="radio" name="slides">
<section class="slide slide-two">
<h1>Section Two</h1>
</section>
<input id="slide-3-trigger" type="radio" name="slides">
<section class="slide slide-three">
<h1>Section Three</h1>
</section>
<input id="slide-4-trigger" type="radio" name="slides">
<section class="slide slide-four">
<h1>Section Four</h1>
</section>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$('.btn').click(function () {
$(this).siblings().removeClass('active');
$(this).addClass('active');
});
var variableToCancelInterval = setInterval(function () {
$(".slide2").click();
}, 5000);
var variableToCancelInterval = setInterval(function () {
$(".slide3").click();
}, 10000);
var variableToCancelInterval = setInterval(function () {
$(".slide4").click();
}, 15000);
var variableToCancelInterval = setInterval(function () {
$(".slide1").click();
}, 20000);
</script>
</body>
</html>
You can use setInterval() like this
var i = 0;
$('.btn').click(function () {
$(this).siblings().removeClass('active');
$(this).addClass('active');
i = $(this).index() + 1;
});
var Interval = setInterval(function(){
i = (i === $('.btn').length) ? 1 : i + 1;
$('.btn.slide'+i).click();
} , 5000);
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.page-slider {
height: 100%;
width: 100%;
position: relative;
overflow: hidden;
background: #120103;
color: #fff;
text-align: center;
}
header {
background: #3e474f;
box-shadow: 0 0.5em 1em #111;
position: absolute;
top: 0;
left: 0;
z-index: 900;
width: 100%;
}
header label {
color: #788188;
cursor: pointer;
display: inline-block;
line-height: 4.25em;
font-size: 1em;
font-weight: bold;
padding: 0 1em;
}
header label:hover { background: #2e353b; }
.slide {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 100%;
z-index: 10;
padding: 8em 1em 0;
background-color: #120103;
background-position: 50% 50%;
background-size: cover;
transition: left 0s 0.75s;
}
.slide-one { background-image: url(https://unsplash.it/1800/1200?image=222); }
.slide-two { background-image: url(https://unsplash.it/1800/1200?image=333); }
.slide-three { background-image: url(https://unsplash.it/1800/1200?image=444); }
.slide-four { background-image: url(https://unsplash.it/1800/1200?image=555); }
[id^="slide"]:checked + .slide {
left: 0;
z-index: 100;
transition: left 0.65s ease-out;
}
.slide h1 {
opacity: 0;
transform: translateY(100%);
transition: transform 0.5s 0.5s, opacity 0.5s;
}
[id^="slide"]:checked + .slide h1 {
opacity: 1;
transform: translateY(0);
transition: all 0.5s 0.5s;
}
.btn.active{
background : #62ce36;
color : #fff;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>slider</title>
</head>
<body>
<div class="page-slider">
<header>
<label class="btn slide1 active" for="slide-1-trigger">Section One</label>
<label class="btn slide2" for="slide-2-trigger">Section Two</label>
<label class="btn slide3" for="slide-3-trigger">Section Three</label>
<label class="btn slide4" for="slide-4-trigger">Section Four</label>
</header>
<input id="slide-1-trigger" type="radio" name="slides" checked>
<section class="slide slide-one">
<h1>Full Width Horizontal Page Slider Demo</h1>
</section>
<input id="slide-2-trigger" type="radio" name="slides">
<section class="slide slide-two">
<h1>Section Two</h1>
</section>
<input id="slide-3-trigger" type="radio" name="slides">
<section class="slide slide-three">
<h1>Section Three</h1>
</section>
<input id="slide-4-trigger" type="radio" name="slides">
<section class="slide slide-four">
<h1>Section Four</h1>
</section>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
</script>
</body>
</html>
I am caught in problem due to relative position
My Other content get pushed under the showcase.
I am giving you full code please tell me what I am doing wrong.
I have given the link to google drive which cotain screenshot.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
min-height: 100vh;
}
a {
color: #000;
text-decoration: none;
}
.container {
max-width: 1200px;
width: 80%;
margin: auto;
}
.d-4 {
font-size: 2.6rem;
text-align: center;
font-weight: 600;
}
.lead {
font-size: 1.8rem;
font-weight: 300;
}
.relative {
position: relative;
top: 0;
left: 0;
}
nav {
position: absolute;
top: 0;
left: 0;
z-index: 1;
display: flex;
font-size: 17px;
font-weight: bold;
justify-content: space-between;
align-items: center;
width: 100%;
padding: 10px 0;
}
nav>a {
display: flex;
justify-content: center;
align-items: center;
color: #fff;
font-size: 28px;
padding: 0 20px;
}
nav ul a {
padding: 15px;
margin: 0 5px;
color: #fff;
border-radius: 4px;
}
nav ul a:hover {
background: rgba(0, 0, 0, 0.6);
}
.showcase {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background: url('https://cdn.pixabay.com/photo/2017/06/24/23/03/railway-2439189_1280.jpg') no-repeat center center/cover, rgba(0, 0, 0, 0.5);
background-blend-mode: darken;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Website | Getting Started</title>
<!-- My CSS -->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="relative">
<nav>
<img height="70" src="img/logo.png" alt="Logo"> Title
<ul>
Home
Login
SignUp
Dashboard
</ul>
</nav>
<div class="showcase">
<h1 class="d-4">Welcome to my Website.</h1>
<p class="lead">
Way of heaven is here.
</p>
</div>
</div>
<div class="container">
<h1 class="text-center">Contact Us</h1>
<form id="footer" class="control">
<input class="input" type="text" id="name" placeholder="Enter your Name">
<input class="input" type="email" id="email" placeholder="Enter your E-mail">
<input class="input" type="number" id="mob" placeholder="Enter your phone No.">
<input class="input" type="textr" id="subject" placeholder="Enter your subject">
<textarea class="textarea" placeholder="Enter your message"></textarea>
</form>
</div>
</body>
</html>
Screenshot
https://drive.google.com/file/d/1hn4-dyx0h8BrY42zAjL4801yCZ_0YYnB/view?usp=drivesdk
To prevent overlapping of showcase on container, add position: relative; to .container.
And if you want conatiner not to overlap with .relative, then just just add height: 100vh; in .relative.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
min-height: 100vh;
}
a {
color: #000;
text-decoration: none;
}
.container {
max-width: 1200px;
width: 80%;
position: relative;
background: red;
margin: auto;
}
.d-4 {
font-size: 2.6rem;
text-align: center;
font-weight: 600;
}
.lead {
font-size: 1.8rem;
font-weight: 300;
}
.relative {
position: relative;
}
nav {
position: absolute;
top: 0;
left: 0;
z-index: 1;
display: flex;
font-size: 17px;
font-weight: bold;
justify-content: space-between;
align-items: center;
width: 100%;
padding: 10px 0;
}
nav>a {
display: flex;
justify-content: center;
align-items: center;
color: #fff;
font-size: 28px;
padding: 0 20px;
}
nav ul a {
padding: 15px;
margin: 0 5px;
color: #fff;
border-radius: 4px;
}
nav ul a:hover {
background: rgba(0, 0, 0, 0.6);
}
.showcase {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background: url('https://cdn.pixabay.com/photo/2017/06/24/23/03/railway-2439189_1280.jpg') no-repeat center center/cover, rgba(0, 0, 0, 0.5);
background-blend-mode: darken;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
<div>
<div class="relative">
<nav>
<img height="70" src="img/logo.png" alt="Logo"> Title
<ul>
Home
Login
SignUp
Dashboard
</ul>
</nav>
<div class="showcase">
<h1 class="d-4">Welcome to my Website.</h1>
<p class="lead">
Way of heaven is here.
</p>
</div>
</div>
<div class="container">
<h1 class="text-center">Contact Us</h1>
<form id="footer" class="control">
<input class="input" type="text" id="name" placeholder="Enter your Name">
<input class="input" type="email" id="email" placeholder="Enter your E-mail">
<input class="input" type="number" id="mob" placeholder="Enter your phone No.">
<input class="input" type="textr" id="subject" placeholder="Enter your subject">
<textarea class="textarea" placeholder="Enter your message"></textarea>
</form>
</div>
</div>
was such a result needed?
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
min-height: 100vh;
}
a {
color: #000;
text-decoration: none;
}
.container {
max-width: 1200px;
width: 80%;
margin: auto;
}
.d-4 {
font-size: 2.6rem;
text-align: center;
font-weight: 600;
}
.lead {
font-size: 1.8rem;
font-weight: 300;
}
.relative {
display: flex; /* added */
height: 100vh; /* added */
flex-direction: column; /* added */
position: relative;
top: 0;
left: 0;
}
nav {
position: absolute;
top: 0;
left: 0;
z-index: 1;
display: flex;
font-size: 17px;
font-weight: bold;
justify-content: space-between;
align-items: center;
width: 100%;
padding: 10px 0;
}
nav > a {
display: flex;
justify-content: center;
align-items: center;
color: #fff;
font-size: 28px;
padding: 0 20px;
}
nav ul a {
padding: 15px;
margin: 0 5px;
color: #fff;
border-radius: 4px;
}
nav ul a:hover {
background: rgba(0,0,0,0.6);
}
.showcase {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background: url('https://cdn.pixabay.com/photo/2017/06/24/23/03/railway-2439189_1280.jpg') no-repeat center center/cover,rgba(0,0,0,0.5);
background-blend-mode: darken;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Website | Getting Started</title>
<!-- My CSS -->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="relative">
<nav>
<img height="70" src="img/logo.png" alt="Logo"> Title
<ul>
Home
Login
SignUp
Dashboard
</ul>
</nav>
<div class="showcase">
<h1 class="d-4">Welcome to my Website.</h1>
<p class="lead">
Way of heaven is here.
</p>
</div>
</div>
<div class="container">
<h1 class="text-center">Contact Us</h1>
<form id="footer" class="control">
<input class="input" type="text" id="name" placeholder="Enter your Name">
<input class="input" type="email" id="email" placeholder="Enter your E-mail">
<input class="input" type="number" id="mob" placeholder="Enter your phone No.">
<input class="input" type="textr" id="subject" placeholder="Enter your subject">
<textarea class="textarea" placeholder="Enter your message"></textarea>
</form>
</div>
</body>
</html>
You need to add position:absolute to your .container. The position property in CSS works like this:
the property-value couple position:relative tells your layout which element shall be used as a reference for its child elements which contain the property-value pair position:absolute, for their positioning.
Then, you can use the properties top, right, bottom, and left to specify the distancing of the child HTML element having the position: absolute pair from the edges of its first parent element (walking upwards in the HTML doc from the child) which has the position:relative pair.
In your CSS code, you simply set your parent element to position:relative, which does not change anything in your layout; it just tells your page that any child of the element X having position:relative, which has position:absolute must use that X for the relative positioning using the four properties top, right, bottom, and left. And yeah, obviously, as soon as you set a HTML child of a parent having position:relative to position:absolute, it will be placed above it.
As I tried to add a video on my top-wrapper previously.
(Thank you so much for those who leave me some comments.)
However, I still cannot solve the problem.
Well, I could upload a video, but still cannot style properly.
After I uploaded a video like in top-wrapper, then very struggling to style....
please teach me how to code css so that i can place a video in my top-wrapper,,,
body {
margin: 0;
font-family: "Hiragino Kaku Gothic ProN";
}
a {
text-decoration: none;
}
.container {
max-width: 1170px;
width: 110%;
padding: 0 15px;
margin: 0 auto;
}
.top-wrapper {
padding: 100px 0 50px 0;
text-align: center;
background:rgba(255,0,0,0.1);
}
.top-wrapper h1 {
font-size: 75px;
letter-spacing: 5px;
padding-top: 5px;
color: white;
text-align: center;
}
.top-wrapper p {
font-size: 25px;
color: white;
text-align: center;
}
header {
height: 65px;
width: 100%;
background-color: rgba(34, 49, 52, 0.9);
top: 0;
position: fixed;
z-index: 10;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>TakashiKaida</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="responsive.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css">
</head>
<body>
<header>
<div class="container">
<div class="header-left">
</div>
<div class="header-right">
Home
About
Blog
CV
</div>
</div>
</header>
<div class="top-wrapper">
<div class="video" src="video3344.mov" autoplay loop muted type="video/mp4"></video>
<div class="container">
<h1>HELLO, IT'S ME.</h1>
<h1>I AM TAKASHI</h1>
<p><br><br>Marketing Analyst/Assistant</p>
<p>Co-Founder and CEO of <strong>FLOW</strong></p>
</div>
</div>
</div>
See the description of Mozilla with an example: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video
In your code add the absolute positioning for container to overlay the content. Second thing add the transparent background color :before for top-wrapper class. And also I adjusted the padding based on header height.
body {
margin: 0;
font-family: "Hiragino Kaku Gothic ProN";
}
* {
box-sizing: border-box;
}
a {
text-decoration: none;
}
.mt-50 {
margin-top: 50px;
}
.container {
max-width: 1170px;
width: 110%;
padding: 0 15px;
margin: 0 auto;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
color: #fff;
z-index: 1;
}
.top-wrapper:before {
content: "";
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
z-index: 1;
background: rgba(255, 0, 0, 0.1);
}
.top-wrapper {
padding: 65px 0 0px 0;
text-align: center;
position: relative;
}
.top-wrapper h1 {
font-size: 75px;
letter-spacing: 5px;
padding-top: 5px;
color: white;
text-align: center;
}
.top-wrapper p {
font-size: 25px;
color: white;
text-align: center;
}
header {
height: 65px;
width: 100%;
background-color: rgba(34, 49, 52, 0.9);
top: 0;
position: fixed;
z-index: 10;
}
<header>
<div class="container">
<div class="header-left">
</div>
<div class="header-right">
Home
About
Blog
CV
</div>
</div>
</header>
<div class="top-wrapper">
<video autoplay loop width="100%">
<source src="https://www.w3schools.com/howto/rain.mp4" type="video/mp4" /> Your browser does not support the video tag. We suggest you upgrade your browser.
</video>
<div class="container">
<h1>HELLO, IT'S ME.</h1>
<h1>I AM TAKASHI</h1>
<p class="mt-50">Marketing Analyst/Assistant</p>
<p>Co-Founder and CEO of
<strong>FLOW</strong>
</p>
</div>
</div>
I'm doing a project on freeCodeCamp regarding a product placement page. The page is now asking me to fix my #navbar at the top of the viewport. Although this works with position: fixed, after I add the fixed position in CSS, the navbar no longer remains in the centre and moves to the left. If you remove position: fixed;, you'll see what I mean. Why is this happening?
Before adding the fixed position, the navbar was centred (UK spelling ;-}) via margin-left: center;, margin-right: center;. I also have my viewport as 800px wide with auto height (I.e. BBC style).
Important note: There was a logo I created of which I subsequently added to the document, but this does not seem to display (it's hosted by tinypic). If you can't see this logo, it's positioned between the title and the video.
Additional Info:
My video was centred before I made a change. If you could also help me with that, I'd appreciate it. But that's not the main point of this question.
#mainbody {
width: 800px;
height: auto;
margin-right: auto;
margin-left: auto;
font-family: garamond, serif;
}
#h1title {
text-align: center;
text-shadow: 16px 8px 16px;
font-size: 38px;
padding-top: 10px;
}
#header-img {
display: block;
width: auto;
height: auto;
margin-left: auto;
margin-right: auto;
}
#nav-bar {
text-align: center;
position: fixed;
right: 0;
left: 0;
}
.nav-link {
text-decoration: none;
color: black;
font-weight: 900;
}
.nav-link:hover {
color: black;
}
.nav-button {
-webkit-border-radius: 50%;
background-color: orange;
height: auto;
width: 100px;
transition: opacity 1s linear;
}
.nav-button:hover {
background-color: white;
opacity: 0.30;
}
#video {
display: block;
margin-right: auto;
margin-left: auto;
}
#form {
}
legend {
font-weight: 700;
}
#submit {
margin-top: 5px;
}
<!DOCTYPE html>
<html lang="en-GB">
<head>
<meta charset="utf-8">
<title>Quality Prints</title>
</head>
<body id="mainbody">
<a name="home-link"></a>
<header id="header">
<nav id="nav-bar">
<button class="nav-button"><a class="nav-link" href="#home-link">Home</a></button>
<button class="nav-button"><a class="nav-link" href="#">Products</a></button>
<button class="nav-button"><a class="nav-link" href="#contact-link">Contact</a></button>
</nav>
<h1 id="h1title">Quality Prints ™</h1><hr />
<img id="header-img" src="http://i66.tinypic.com/157ltle.jpg">
</header>
<iframe id="video" width="560" height="315" src="https://www.youtube.com/embed/CqtLKw7cJaY?rel=0&showinfo=0&start=5" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe><br />
<form action="https://www.freecodecamp.com/email-submit" id="form">
<a name="contact-link"></a>
<fieldset>
<legend>Information Pack by Email</legend>
<label for="emailme">Email Address:</label><br />
<input name="emailme" type="email" id="emailmeinput" placeholder="Your email address"><br />
<input type="submit" value="Send" id="submit" formaction="https://www.freecodecamp.com/email-submit">
</fieldset>
</form>
</body>
</html>
I have edited to correct the syntax. As Andriy said, there was a missing '}' after '.nav-button:hover'. I also added 'left: 0;' and 'right: 0;' to '#nav-bar'.
try to add right and left rules with zero value:
#nav-bar {
text-align: center;
position: fixed;
right: 0;
left: 0;
}
#mainbody {
width: 800px;
height: auto;
margin-right: auto;
margin-left: auto;
font-family: garamond, serif;
}
#h1title {
text-align: center;
text-shadow: 16px 8px 16px;
font-size: 38px;
padding-top: 10px;
}
#header-img {
display: block;
width: auto;
height: auto;
margin-left: auto;
margin-right: auto;
}
#nav-bar {
text-align: center;
position: fixed;
right: 0;
left: 0;
}
.nav-link {
text-decoration: none;
color: black;
font-weight: 900;
}
.nav-link:hover {
color: black;
}
.nav-button {
-webkit-border-radius: 50%;
background-color: orange;
height: auto;
width: 100px;
transition: opacity 1s linear;
}
.nav-button:hover {
background-color: white;
opacity: 0.30;
}
#video {
display: block;
margin-right: auto;
margin-left: auto;
}
#form {
}
legend {
font-weight: 700;
}
#submit {
margin-top: 5px;
}
<!DOCTYPE html>
<html lang="en-GB">
<head>
<meta charset="utf-8">
<title>Quality Prints</title>
</head>
<body id="mainbody">
<a name="home-link"></a>
<header id="header">
<nav id="nav-bar">
<button class="nav-button"><a class="nav-link" href="#home-link">Home</a></button>
<button class="nav-button"><a class="nav-link" href="#">Products</a></button>
<button class="nav-button"><a class="nav-link" href="#contact-link">Contact</a></button>
</nav>
<h1 id="h1title">Quality Prints ™</h1><hr />
<img id="header-img" src="http://i66.tinypic.com/157ltle.jpg">
</header>
<iframe id="video" width="560" height="315" src="https://www.youtube.com/embed/CqtLKw7cJaY?rel=0&showinfo=0&start=5" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe><br />
<form action="https://www.freecodecamp.com/email-submit" id="form">
<a name="contact-link"></a>
<fieldset>
<legend>Information Pack by Email</legend>
<label for="emailme">Email Address:</label><br />
<input name="emailme" type="email" id="emailmeinput" placeholder="Your email address"><br />
<input type="submit" value="Send" id="submit" formaction="https://www.freecodecamp.com/email-submit">
</fieldset>
</form>
</body>
</html>
Your body width is set to 800px; which is a little odd.
So your .navbar width is inherited by this width. Which makes it look not centered because the window is not 800px;
Just add width: 100%; to #nav-bar - a fixed element doesn't have full width by default, you have to define it. (and then the buttons will center within these 100%):
(note: left: 0; right: 0 will bring the same result, since that way the left and right ends are defined, which also results in 100% width)
#mainbody {
width: 800px;
height: auto;
margin-right: auto;
margin-left: auto;
font-family: garamond, serif;
}
#h1title {
text-align: center;
text-shadow: 16px 8px 16px;
font-size: 38px;
padding-top: 10px;
}
#header-img {
display: block;
width: auto;
height: auto;
margin-left: auto;
margin-right: auto;
}
#nav-bar {
text-align: center;
position: fixed;
width: 100%;
}
.nav-link {
text-decoration: none;
color: black;
font-weight: 900;
}
.nav-link:hover {
color: black;
}
.nav-button {
-webkit-border-radius: 50%;
background-color: orange;
height: auto;
width: 100px;
transition: opacity 1s linear;
}
.nav-button:hover {
background-color: white;
opacity: 0.30;
#video {
display: block;
margin-right: auto;
margin-left: auto;
}
#form {}
legend {
font-weight: 700;
}
#submit {
margin-top: 5px;
}
<!DOCTYPE html>
<html lang="en-GB">
<head>
<meta charset="utf-8">
<title>Quality Prints</title>
</head>
<body id="mainbody">
<a name="home-link"></a>
<header id="header">
<nav id="nav-bar">
<button class="nav-button"><a class="nav-link" href="#home-link">Home</a></button>
<button class="nav-button"><a class="nav-link" href="#">Products</a></button>
<button class="nav-button"><a class="nav-link" href="#contact-link">Contact</a></button>
</nav>
<h1 id="h1title">Quality Prints ™</h1>
<hr />
<img id="header-img" src="http://i66.tinypic.com/157ltle.jpg">
</header>
<iframe id="video" width="560" height="315" src="https://www.youtube.com/embed/CqtLKw7cJaY?rel=0&showinfo=0&start=5" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe><br />
<form action="https://www.freecodecamp.com/email-submit" id="form">
<a name="contact-link"></a>
<fieldset>
<legend>Information Pack by Email</legend>
<label for="emailme">Email Address:</label><br />
<input name="emailme" type="email" id="emailmeinput" placeholder="Your email address"><br />
<input type="submit" value="Send" id="submit" formaction="https://www.freecodecamp.com/email-submit">
</fieldset>
</form>
</body>
</html>
Is it possible to create a slideshow using HTML with CSS? Similar to the slideshows created by Powerpoint, except in code.
You can do it like that in your HTML file.
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<style>
.mySlides {display:none;}
</style>
<body>
<h2 class="w3-center">Automatic Slideshow</h2>
<div class="w3-content w3-section" style="max-width:500px">
<img class="mySlides" src="img_la.jpg" style="width:100%">
<img class="mySlides" src="img_ny.jpg" style="width:100%">
<img class="mySlides" src="img_chicago.jpg" style="width:100%">
</div>
<script>
var myIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("mySlides");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
myIndex++;
if (myIndex > x.length) {myIndex = 1}
x[myIndex-1].style.display = "block";
setTimeout(carousel, 2000); // Change image every 2 seconds
}
</script>
</body>
</html>
Or you can go to W3 school to try it yourself.
https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_slideshow_rr
you can use only slider with html and css:
<div class="slider-container">
<div class="menu">
<label for="slide-dot-1"></label>
<label for="slide-dot-2"></label>
<label for="slide-dot-3"></label>
</div>
<input id="slide-dot-1" type="radio" name="slides" checked>
<div class="slide slide-1"></div>
<input id="slide-dot-2" type="radio" name="slides">
<div class="slide slide-2"></div>
<input id="slide-dot-3" type="radio" name="slides">
<div class="slide slide-3"></div>
</div>
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
font-family: "Helvetica", sans-serif;
}
img {
max-width: 100%;
}
.slider-container{
height: 100%;
width: 100%;
position: relative;
overflow: hidden;
text-align: center;
}
.menu {
position: absolute;
left: 0;
z-index: 900;
width: 100%;
bottom: 0;
}
.menu label {
cursor: pointer;
display: inline-block;
width: 16px;
height: 16px;
background: #fff;
border-radius: 50px;
margin: 0 .2em 1em;
&:hover {
background: red;
}
}
.slide {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 100%;
z-index: 10;
padding: 8em 1em 0;
background-size: cover;
background-position: 50% 50%;
transition: left 0s .75s;
}
[id^="slide"]:checked + .slide {
left: 0;
z-index: 100;
transition: left .65s ease-out;
}
.slide-1 {
background-image: url("https://source.unsplash.com/t7YycgAoVSw/1600x900");
}
.slide-2 {
background-image: url("https://source.unsplash.com/11H1SSVcIxc/1600x900");
}
.slide-3 {
background-image: url("https://source.unsplash.com/OlZ1nWLEEgM/1600x900");
}