So I want to have an image that covers the entire screen until you start scrolling down. (This image is also a slideshow with fading animation) At the center of that image should be text. A header should overlap the image and a footer should be beneath it. (I will add more content inbetween the footer and the image later)
However, currently it is not working as intended. Both the header and the footer are overlapped by the background image. The text centers right where the header and footer snap together instead of in the middle of the background image. I need some help with this. Refer to an image and code below. You may also view the page at https://www.mh-rp.com.
image with notes and clarification
<body style="background-color:#111111">
<header>
<div class="header">
<div class="inner_header">
<div class="logo_container">
<img src="/images/weblogo.png" alt="MHRP">
</div>
<ul class="navigation">
<li><i class="fa fa-home"></i> Home</li>
<li><i class="fa fa-address-card"></i> About</li>
<li><i class="fa fa-comments"></i> Forum</li>
<li><i class="fa fa-sign-in"></i> UCP</li>
<li><i class="fab fa-discord"></i> Discord</li>
</ul>
<div class="menu-toggle"><i class="fa fa-bars" aria-hidden="true"></i></div>
</div>
</div>
</header>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.menu-toggle').click(function(){
$('.navigation').toggleClass('active')
})
})
</script>
<main>
<div class="image_container">
<div id="background-preload" class="background-start"></div>
<script>$('#background-preload').delay(5000).fadeOut('slow');</script>
<ul class="cb-slideshow">
<li><span></span></li>
<li><span></span></li>
<li><span></span></li>
<li><span></span></li>
<li><span></span></li>
<li><span></span></li>
</ul>
<div class="maintext">Mulholland Roleplay
<div><img class="ipimage" src="/images/sa-mp.png"></div>
<div><span class="mainip">57.80.79.165:1050</span></div>
<div><a class="mainbutton" href="https://www.forum.mh-rp.com/wiki/game-server/">Play Now</a></div>
</div>
</div>
</main>
<footer>
<div class="footer">
<div class="inner_footer">
<div class="logo_container2">
<img src="/images/logo.png" alt="MHRP">
<div>
<img src ="https://images.dmca.com/Badges/dmca_protected_sml_120l.png?ID=6c4220d8-268c-4e0c-897f-3ba9a38e002d" alt="DMCA.com Protection Status" /> <script src="https://images.dmca.com/Badges/DMCABadgeHelper.min.js"> </script>
</div>
</div>
<div class="footer_third">
<h1>Need Help?</h1>
Contact Us
Cookie Usage
Terms & Conditions
Privacy Policy
</div>
<div class="footer_third">
<h1>More</h1>
Encyclopedia
Credit Store
Rockstar Games
San Andreas Multiplayer
</div>
<div class="footer_third">
<h1>Follow Us</h1>
<li><i class="fa fa-instagram"></i> Instagram</li>
<li><i class="fa fa-twitter"></i> Twitter</li>
<li><i class="fa fa-youtube"></i> YouTube</li>
</div>
<br/>
<div class="footer_third">
<p style="color:white; text-align:center; font-size:16px;"><br/><br/>Copyright © 2019 mh-rp.com
<br/>
The mh-rp game server is powered by sa-mp.com. sa-mp.com is powered by Grand Theft Auto: San Andreas.
<br/>
mh-rp.com and the contents herein, are not affiliated with Rockstar Games, Rockstar North, Take-Two Interactive Software Inc or sa-mp.com.
<br/>
Grand Theft Auto and Grand Theft Auto: San Andreas are registered trademarks of Take-Two Interactive Software Inc.</p>
</div>
</div>
</footer>
<script src="/js/cookieconsent.min.js" data-cfasync="false"></script>
<script>
window.cookieconsent.initialise({
"palette": {
"popup": {
"background": "#3a3a3a",
"text": "#a0a09e"
},
"button": {
"background": "#185886"
}
},
"content": {
"message": "This site uses cookies to help personalise content, tailor your experience, advertise and to keep you logged in if you register.\nBy continuing to use this site, you are consenting to our use of cookies.",
"dismiss": "Accept",
"link": "Learn more..."
},
"position": "bottom-left"
});
</script>
</body>
#import url('https://fonts.googleapis.com/css?family=Staatliches&display=swap');
*
{
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
/* start of not found */
.logo_container3
{
text-align: center;
}
.headertext
{
color: white;
display: block;
text-align: center;
width: 100%;
padding-top: 20px;
}
.buttontext
{
color: white;
font-family: "Verdana";
padding: 0px 20px;
}
.buttontext:hover
{
color:white; background:#292929;
-o-transition:color .2s ease-out, background 0.5s ease-in;
-ms-transition:color .2s ease-out, background 0.5s ease-in;
-moz-transition:color .2s ease-out, background 0.5s ease-in;
-webkit-transition:color .2s ease-out, background 0.5s ease-in;
/* ...and now override with proper CSS property */
transition:color .2s ease-out, background 0.5s ease-in;
background-color: #185886;
}
/* end of not found */
/* start of header */
.header
{
width: 100%;
height: 80px;
display: block;
background-color: #292929;
}
.inner_header
{
width: 1000px;
height: 100%;
display: block;
margin: 0 auto;
background-color: #292929;
}
.logo_container
{
height: 100%;
display: table;
float: left;
}
.logo_container img
{
display: table-cell;
vertical-align: middle;
padding-top: 5%;
height:60px
}
.navigation
{
float: right;
height: 100%;
}
.navigation a
{
height: 100%;
display: table;
float: left;
padding: 0px 20px;
}
.navigation a li
{
display: table-cell;
vertical-align: middle;
height: 100%;
color: white;
font-family: "Verdana";
font-size: 16px;
}
.navigation a:first-child
{
background-color: #185886;
}
.navigation a:hover
{
color:white; background:#292929;
-o-transition:color .2s ease-out, background 0.5s ease-in;
-ms-transition:color .2s ease-out, background 0.5s ease-in;
-moz-transition:color .2s ease-out, background 0.5s ease-in;
-webkit-transition:color .2s ease-out, background 0.5s ease-in;
/* ...and now override with proper CSS property */
transition:color .2s ease-out, background 0.5s ease-in;
background-color: #185886;
}
/* mobile */
.menu-toggle
{
color: white;
float:right;
line-height: 77px;
font-size: 48px;
cursor: pointer;
display: none;
}
#media (max-width: 1000px)
{
.menu-toggle
{
display: block;
}
.navigation
{
position: absolute;
width: 100%;
height: calc(100vh -50px);
background: #333;
top: 80px;
left: -100%;
transition: 0.5s;
display: grid;
}
.navigation.active
{
left: 0;
}
.navigation ul
{
display: block;
text-align: center;
}
.navigation ul li a
{
border-bottom: 1px solid rgba(0,0,0,.2);
}
.inner_header
{
width: 90%;
}
}
/* end of header */
/* start of footer */
.footer
{
width: 100vw;
display: block;
overflow: hidden;
padding: 70px 0;
box-sizing: border-box;
background-color: #18181a;
}
.inner_footer
{
display: block;
margin: 0 auto;
width: 1100px;
height: 100%;
}
.inner_footer .logo_container2
{
width:35%;
float: left;
height: 100%;
display: block;
}
.inner_footer .logo_container2 img
{
width: 100px;
height: auto;
}
.inner_footer .footer_third
{
width: calc(21.6666666667% -20px);
margin-right: 10px;
float: left;
height: 100%;
}
.inner_footer .footer_third:last-child
{
margin-right: 0;
}
.inner_footer .footer_third h1
{
font-family: 'arial';
font-size: 22px;
color: white;
display: block;
width: 100%;
margin-bottom: 20px;
}
.inner_footer .footer_third a
{
font-family: "Arial";
font-size: 18px;
color: white;
display: block;
font-weight: 200;
width: 100%;
}
.inner_footer .footer_third a:hover
{
color:white; background:#292929;
-o-transition:color .2s ease-out, background 0.5s ease-in;
-ms-transition:color .2s ease-out, background 0.5s ease-in;
-moz-transition:color .2s ease-out, background 0.5s ease-in;
-webkit-transition:color .2s ease-out, background 0.5s ease-in;
/* ...and now override with proper CSS property */
transition:color .2s ease-out, background 0.5s ease-in;
background-color: #185886;
}
/* mobile */
#media(max-width: 1000px)
{
.footer .inner_footer
{
width: 90%;
}
.inner_footer .logo_Container2,
.inner_footer .footer_third
{
width: 100%;
margin-bottom: 30px;
}
}
/* end of footer */
/* start of main */
body
{
overflow-x: hidden;
}
/* this is there to show no fading animation when you load the page for the first time */
.background-start
{
background-image: url(../images/1.png);
position: fixed;
background-attachment: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
background-size: cover;
background-position: 50% 50%;
background-repeat: none;
}
.cb-slideshow,
.cb-slideshow:after {
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
z-index: 0;
}
.cb-slideshow li span {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
color: transparent;
background-size: cover;
background-position: 50% 50%;
background-repeat: none;
background-attachment: fixed;
opacity: 0;
z-index: 0;
-webkit-backface-visibility: hidden;
-webkit-animation: imageAnimation 36s linear infinite 0s;
-moz-animation: imageAnimation 36s linear infinite 0s;
-o-animation: imageAnimation 36s linear infinite 0s;
-ms-animation: imageAnimation 36s linear infinite 0s;
animation: imageAnimation 36s linear infinite 0s;
}
.cb-slideshow li:nth-child(1) span {
background-image: url(../images/1.png);
}
.cb-slideshow li:nth-child(2) span {
background-image: url(../images/2.png);
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
.cb-slideshow li:nth-child(3) span {
background-image: url(../images/3.png);
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-o-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
.cb-slideshow li:nth-child(4) span {
background-image: url(../images/4.png);
-webkit-animation-delay: 18s;
-moz-animation-delay: 18s;
-o-animation-delay: 18s;
-ms-animation-delay: 18s;
animation-delay: 18s;
}
.cb-slideshow li:nth-child(5) span {
background-image: url(../images/5.png);
-webkit-animation-delay: 24s;
-moz-animation-delay: 24s;
-o-animation-delay: 24s;
-ms-animation-delay: 24s;
animation-delay: 24s;
}
.cb-slideshow li:nth-child(6) span {
background-image: url(../images/6.png);
-webkit-animation-delay: 30s;
-moz-animation-delay: 30s;
-o-animation-delay: 30s;
-ms-animation-delay: 30s;
animation-delay: 30s;
}
/* Animation for the slideshow images */
#-webkit-keyframes imageAnimation {
0% { opacity: 0;
-webkit-animation-timing-function: ease-in; }
8% { opacity: 1;
-webkit-animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
#-moz-keyframes imageAnimation {
0% { opacity: 0;
-moz-animation-timing-function: ease-in; }
8% { opacity: 1;
-moz-animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
#-o-keyframes imageAnimation {
0% { opacity: 0;
-o-animation-timing-function: ease-in; }
8% { opacity: 1;
-o-animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
#-ms-keyframes imageAnimation {
0% { opacity: 0;
-ms-animation-timing-function: ease-in; }
8% { opacity: 1;
-ms-animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
#keyframes imageAnimation {
0% { opacity: 0;
animation-timing-function: ease-in; }
8% { opacity: 1;
animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
/* Show at least something when animations not supported */
.no-cssanimations .cb-slideshow li span{
opacity: 1;
}
#media screen and (max-width: 1140px) {
.cb-slideshow li div h3 { font-size: 140px }
}
#media screen and (max-width: 600px) {
.cb-slideshow li div h3 { font-size: 80px }
}
.image_container
{
position:relative;
}
.maintext
{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-family: "Staatliches", "Arial", sans-serif;
font-weight:normal;
font-style:normal;
font-size: 72px;
}
.mainbutton
{
position: absolute;
top: 150%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-family: "Staatliches", "Arial", sans-serif;
font-weight:normal;
font-style:normal;
font-size: 32px;
border-style: solid;
border-width: 1px;
border-color: white;
transition: border-width 0.3s;
padding: 5px 5px 5px 5px;
}
.mainip
{
position: absolute;
top: 100%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-family: "Staatliches", "Arial", sans-serif;
font-weight:normal;
font-style:normal;
font-size: 32px;
}
.ipimage
{
position: absolute;
top: 80%;
left: 27.5%;
width: 32px;
}
.mainbutton:hover
{
border-width: 3px;
}
/* end of main */
Add those two selectors.
.image-container { height: 100vh }
header, footer { position: relative; z-index: 1 }
Related
Hi I have a problem trying to getting the animation at the left hand side of the button when user mouse over the button. One of the example that explain as below:
HTML:
<div class="block">
<div class="normal">
<span>Follow me...</span>
</div>
<a target="_BLANK" class="hover" href="http://twitter.com/benoitboucart" title="My twitter profile">
on Twitter
</a>
CSS:
/**
* CSS3 balancing hover effect
* Read the tutorial here: http://webbb.be/blog/little-css3-3d-hover-effects/
*/
body {background: #f06;background: linear-gradient(45deg, #f06, yellow);min-height: 100%;}
.block {
width: 150px; color: #fff; margin: 30px auto; text-transform: uppercase; text-align: center; font-family: Helvetica;
position: relative;
perspective: 350;
}
.block .normal {
background: gray; padding: 15px; cursor: pointer;
position:relative; z-index:2;
}
.block .hover {
background: #00aced; margin-top:-48px; padding: 15px; display: block; color: #fff; text-decoration: none;
position: relative; z-index:1;
transition: all 250ms ease;
}
.block:hover .normal {
background: #0084b4;
}
.block:hover .hover {
margin-right: 0;
transform-origin: top;
/*
animation-name: balance;
animation-duration: 1.5s;
animation-timing-function: ease-in-out;
animation-delay: 110ms;
animation-iteration-count: 1;
animation-direction: alternate;
*/
animation: balance 1.5s ease-in-out 110ms 1 alternate;
}
#keyframes balance {
0% { margin-top: 0; }
15% { margin-top: 0; transform: rotateX(-50deg); }
30% { margin-top: 0; transform: rotateX(50deg); }
45% { margin-top: 0; transform: rotateX(-30deg); }
60% { margin-top: 0; transform: rotateX(30deg); }
75% { margin-top: 0; transform: rotateX(-30deg); }
100% { margin-top: 0; transform: rotateX(0deg);}
}
https://jsfiddle.net/9dwk8vzg/
Original link:http://dabblet.com/gist/5559193
But for this example is at the bottom instated of at the left hand side of the button, I tried using margin-right and padding-left still unable to get the mouse over appeal div tag to be on the right hand side, may I know what do I miss to get the div tag to appeal on the right hand side/
/**
* CSS3 balancing hover effect
* Read the tutorial here: http://webbb.be/blog/little-css3-3d-hover-effects/
*/
body {background: #f06;background: linear-gradient(45deg, #f06, yellow);min-height: 100%;}
.block {
width: 150px; color: #fff; margin: 30px auto; text-transform: uppercase; text-align: center; font-family: Helvetica;
position: relative;
perspective: 350;
}
.block .normal {
width: 100%;
background: gray; padding: 15px; cursor: pointer;
position:relative; z-index:2;
}
.block .hover {
width: 100%;
background: #00aced;
padding: 15px;
display: block;
position:absolute;
color: #fff;
text-decoration: none;
z-index:1;
transition: all 250ms ease;
right: -30px;
top: 0;
}
.block:hover .normal {
background: #0084b4;
}
.block:hover .hover {
right: 100%;
transform-origin: top;
/*
animation-name: balance;
animation-duration: 1.5s;
animation-timing-function: ease-in-out;
animation-delay: 110ms;
animation-iteration-count: 1;
animation-direction: alternate;
*/
animation: balance 1.5s ease-in-out 110ms 1 alternate;
}
#keyframes balance {
15% { width: 95%; }
30% { width: 105%; }
45% { width: 97%; }
60% { width: 103%; }
75% { width: 97%; }
100% { width: 100%; }
}
<div class="block">
<div class="normal">
<span>Follow me...</span>
</div>
<a target="_BLANK" class="hover" href="http://twitter.com/benoitboucart" title="My twitter profile">
on Twitter
</a>
</div>
been working and learning to build this page for about 4-5 hours and I cannot seem to find out why I am unable to get the navigation links on the same line as the navbar-logo and secondly is there any way I could make this code more efficient and less dependent/error-prone?
One more thing I wanted to ask is can we use flexbox in this webpage? and is CSS animation used is efficient here?
body{
background-color: #000;
color: #f1f1f1;
animation: fade-in 2s 1;
}
header{
width: 100%;
height: 10%;
margin: auto;
}
.navbar-logo{
padding: 2px 0px 2px 100px;
position: absolute;
z-index: 100;
}
.navbar-logo-sub{
padding: 55px 0px 0px 200px;
}
#logo-main{
font-family: 'Didact Gothic', sans-serif;
color: white;
font-size: 40px;
font-weight: 800;
margin: 0;
}
.parenthesis1{
color: #b22121;
font-family: 'Bungee', cursive;
}
.parenthesis2{
color: #787878;
font-family: 'Bungee', cursive;
}
#logo-sub{
color: white;
font-size: 14px;
font-weight: 20;
font-family: 'Coming Soon', cursive;
}
#banner-image{
width: 50%;
padding-left: 20%;
filter: blur(3px);
position: relative;
padding-top: 5%;
}
#banner-text{
top: 50%;
left: 50%;
position: fixed;
transform: translate(-50%, -50%);
font-size: 50px;
text-align: left;
}
nav{
padding: 0px 0px 0px 60%;
}
li{
float: left;
margin-right: 100px;
list-style-type: none;
}
a{
text-decoration: none;
color: white;
}
h1{
margin-top: 0px;
margin-bottom: -50px;
font-family: 'Permanent Marker', cursive;
font-weight: 300;
text-shadow: 4px 2px rgba(238, 238, 238, 0.5);
opacity: 0;
-webkit-animation: slide-in 3s 1 forwards;
}
div h1:nth-of-type(2){
animation-delay: 0.1s;
-webkit-animation-delay: 0.1s;
}
div h1:nth-of-type(3){
animation-delay: 0.2s;
-webkit-animation-delay: 0.2s;
}
div h1:nth-of-type(4){
animation-delay: 0.3s;
-webkit-animation-delay: 0.3s;
}
div h1:nth-of-type(5){
animation-delay: 0.4s;
-webkit-animation-delay: 0.4s;
}
div h1:nth-of-type(6){
animation-delay: 0.5s;
-webkit-animation-delay: 0.5s;
}
div h1:nth-of-type(7){
animation-delay: 0.6s;
-webkit-animation-delay: 0.6s;
}
div h1:nth-of-type(8){
animation-delay: 0.7s;
-webkit-animation-delay: 0.7s;
}
div h1:nth-of-type(9){
animation-delay: 0.8s;
-webkit-animation-delay: 0.8s;
}
#keyframes slide-in {
0%{
transform: rotateY(90deg) translateY(-50%);
opacity: 0.0;
}
100%{
transform: rotateY(0deg) translateY(0%);
opacity: 1.0;
}
}
#-webkit-keyframes slide-in {
0%{
-webkit-transform: rotateY(90deg) translateY(25%);
opacity: 0.0;
}
100%{
-webkit-transform: rotateY(0deg) translateY(0%);
opacity: 1.0;
}
}
#keyframes fade-in {
0%{
opacity: 0.0;
}
50%{
opacity: 0.5;
}
100%{
opacity: 1.0;
}
<html>
<head>
<title>.whatsthecode.</title>
<link rel="stylesheet" href="index.css">
<link href="https://fonts.googleapis.com/css?
family=Didact+Gothic|Coming+Soon|Bungee|Permanent+Marker" rel="stylesheet">
</head>
<body>
<header>
<div class="navbar-logo">
<p id="logo-main">WhatsTheCode<span class="parenthesis1">(</span>
<span class="parenthesis2">)</span></p>
</div>
<div class="navbar-logo-sub"><p id="logo-sub">{<html><span style="color: #b22121"><style></span><span style="color: #787878"><script></span>}</p></div>
<nav>
<ul>
<li>Home</li>
<li>FAQ</li>
<li>About</li>
</ul>
</nav>
</header>
<section>
<div class="banner">
<img src="banner-background.png" id="banner-image">
<div id="banner-text"><h1>Your</h1><h1>web development</h1>
<h1>develops</h1><h1>here.</h1></div>
</div>
</section>
</body>
</html>
Here you go brother, I added a div with class="navbar-wrapper" and placed the header elements inside it. I used the display:inline-block on the header elements so that they are horizontally aligned. For the navbar-logo-sub, I placed it inside the navbar-logo and used position:absolute, and bottom:0 to place it at the bottom of the parent element. Run Code snippet and view it on full page.
body {
background-color: #000;
color: #f1f1f1;
animation: fade-in 2s 1;
}
header {
width: 100%;
}
.navbar-wrapper{
padding-left:50px; padding-right:50px;
}
header .navbar-logo {
display: inline-block;
position: relative;
}
header nav {
display: inline-block;
}
header .navbar-logo-sub {
display: block;
position: absolute;
bottom: 0;
left: 20%;
}
nav {
padding: 0px;
margin: 0px;
}
header li {
float: left;
margin-right: 50px;
list-style-type: none;
}
header li:last-of-type {
margin-right: 0px;
}
a {
text-decoration: none;
color: white;
}
#logo-main {
font-family: 'Didact Gothic', sans-serif;
color: white;
font-size: 2.3em;
font-weight: 800;
margin: 0;
}
.parenthesis1 {
color: #b22121;
font-family: 'Bungee', cursive;
}
.parenthesis2 {
color: #787878;
font-family: 'Bungee', cursive;
}
#logo-sub {
color: white;
font-size: 14px;
font-weight: 20;
font-family: 'Coming Soon', cursive;
}
#banner-image {
width: 50%;
padding-left: 20%;
filter: blur(3px);
position: relative;
padding-top: 5%;
}
#banner-text {
top: 50%;
left: 50%;
position: fixed;
transform: translate(-50%, -50%);
font-size: 50px;
text-align: left;
}
h1 {
margin-top: 0px;
margin-bottom: -50px;
font-family: 'Permanent Marker', cursive;
font-weight: 300;
text-shadow: 4px 2px rgba(238, 238, 238, 0.5);
opacity: 0;
-webkit-animation: slide-in 3s 1 forwards;
}
div h1:nth-of-type(2) {
animation-delay: 0.1s;
-webkit-animation-delay: 0.1s;
}
div h1:nth-of-type(3) {
animation-delay: 0.2s;
-webkit-animation-delay: 0.2s;
}
div h1:nth-of-type(4) {
animation-delay: 0.3s;
-webkit-animation-delay: 0.3s;
}
div h1:nth-of-type(5) {
animation-delay: 0.4s;
-webkit-animation-delay: 0.4s;
}
div h1:nth-of-type(6) {
animation-delay: 0.5s;
-webkit-animation-delay: 0.5s;
}
div h1:nth-of-type(7) {
animation-delay: 0.6s;
-webkit-animation-delay: 0.6s;
}
div h1:nth-of-type(8) {
animation-delay: 0.7s;
-webkit-animation-delay: 0.7s;
}
div h1:nth-of-type(9) {
animation-delay: 0.8s;
-webkit-animation-delay: 0.8s;
}
#keyframes slide-in {
0% {
transform: rotateY(90deg) translateY(-50%);
opacity: 0.0;
}
100% {
transform: rotateY(0deg) translateY(0%);
opacity: 1.0;
}
}
#-webkit-keyframes slide-in {
0% {
-webkit-transform: rotateY(90deg) translateY(25%);
opacity: 0.0;
}
100% {
-webkit-transform: rotateY(0deg) translateY(0%);
opacity: 1.0;
}
}
#keyframes fade-in {
0% {
opacity: 0.0;
}
50% {
opacity: 0.5;
}
100% {
opacity: 1.0;
}
<html>
<head>
<title>.whatsthecode.</title>
<link href="https://fonts.googleapis.com/css?
family=Didact+Gothic|Coming+Soon|Bungee|Permanent+Marker" rel="stylesheet">
</head>
<body>
<header>
<div class="navbar-wrapper">
<div class="navbar-logo">
<p id="logo-main">WhatsTheCode<span class="parenthesis1">(</span>
<span class="parenthesis2">)</span></p>
<div class="navbar-logo-sub">
<p id="logo-sub">{<html><span style="color: #b22121"><style></span><span style="color:
#787878"><script></span>}</p>
</div>
</div>
<nav>
<ul>
<li>Home</li>
<li>FAQ</li>
<li>About</li>
</ul>
</nav>
</div>
</header>
<section>
<div class="banner">
<img src="banner-background.png" id="banner-image">
<div id="banner-text">
<h1>Your</h1>
<h1>web development</h1>
<h1>develops</h1>
<h1>here.</h1>
</div>
</div>
</section>
</body>
</html>
I am making a website, where I want a slideshow on one on the pages. However, since the slideshow takes up the whole page, my header and menu places itself underneath it. I tried making a div with a link where you can press "go back", to return to the index page, but it is not possible to click the link, and it is only visible when the slideshow changes from one image to another. The z-index on the slideshow is 1, and I tried making it 2, and the "button" 1, and vice versa. Still, I cannot come up with a solution. I really hope someone will be able to help with this. Thanks in advance.
I'm not posting any code, but if that is preferred, just ask!
CSS
.h1 { font-family:GeosansLight, Verdana, sans-serif; color: #fff; font-size: 40pt; }
.m1 { font-family:GeosansLight, Verdana, sans-serif; color: #fff; font-size: 18pt; }
.m2 { font-family:GeosansLight, Verdana, sans-serif; color: #fff; font-size: 15pt; }
.m3 { font-family:GeosansLight, Verdana, sans-serif; color: #fff; font-size: 30pt; }
body {
width: 100%;
height: 100%;
overflow: hidden;
}
.index-bg {
background-image: url(bild/1.png);
}
.kontakt-bg {
background-image: url(bild/2.png);
}
.porto-bg {
background-color: none;
}
#header {
height: 40px;
width: 100%;
text-align: center;
position: center;
}
#menu {
height: 20px;
width: 100%;
text-align: center;
}
ul.menli {
list-style-type: none;
}
ul.menli li {
display: inline-block;
margin: 0px 50px;
}
ul.menli li a {
text-decoration: none;
color: #fff;
}
ul.menli li a:hover {
text-decoration: underline;
}
#main-left {
height: 500px;
width: 50%;
float: left;
margin-top: 100px;
margin-left: 395px;
background-color: none;
}
ul.mainli {
list-style-type: none;
}
ul.mainli li{
margin-top: 10px;
}
ul.mainli li a {
color: #fff;
}
#main-right {
height: 500px;
width: 50%;
float: right;
margin-top: 10px;
background-color: none;
margin-top: 10px;
}
The button I added
#button {
float: right;
padding-right: 60px;
z-index: 2;
}
a {
color: pink;
}
Slideshow:
.slideshow {
list-style: none;
z-index: 1;
}
.slideshow li span {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
color: transparent;
background-size: cover;
background-position: 50% 50%;
background-repeat: none;
opacity: 0;
z-index: 0;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-animation: imageAnimation 24s linear infinite 0s;
-moz-animation: imageAnimation 24s linear infinite 0s;
animation: imageAnimation 24s linear infinite 0s;
}
.no-cssanimations .slideshow li span {
opacity: 1;
}
#-webkit-keyframes
imageAnimation {
0%
{
opacity: 0;
-webkit-animation-timing-function: ease-in;
}
12.5% {
opacity: 1;
-webkit-animation-timing-function: ease-out;
}
25% {
opacity: 1;
}
37.5% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#-moz-keyframes
imageAnimation {
0% {
opacity: 0;
-moz-animation-timing-function: ease-in;
}
12.5% {
opacity: 1;
-moz-animation-timing-function: ease-out;
}
25% {
opacity: 1;
}
37.5% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#keyframes
imageAnimation {
0% {
opacity: 0;
-webkit-animation-timing-function: ease-in;
-moz-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
12.5% {
opacity: 1;
-webkit-animation-timing-function: ease-out;
-moz-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
25% {
opacity: 1;
}
37.5% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#-webkit-keyframes
titleAnimation {
0% {
opacity: 0;
}
12.5% {
opacity: 1;
}
25% {
opacity: 1;
}
37.5% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#-moz-keyframes
titleAnimation {
0% {
opacity: 0;
}
12.5% {
opacity: 1;
}
25% {
opacity: 1;
}
37.5% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#keyframes
titleAnimation {
0% {
opacity: 0;
}
12.5% {
opacity: 1;
}
25% {
opacity: 1;
}
37.5% {
opacity: 0;
}
100% {
opacity: 0;
}
}
.slideshow li:nth-child(1) span { background-image: url(bild/1.png); }
.slideshow li:nth-child(2) span {
background-image: url(bild/2.png);
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
animation-delay: 6s;
}
.slideshow li:nth-child(3) span {
background-image: url(bild/3.png);
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
animation-delay: 12s;
}
.slideshow li:nth-child(4) span {
background-image: url(bild/1.png);
-webkit-animation-delay: 18s;
-moz-animation-delay: 18s;
animation-delay: 18s;
}
HTML on the page in question
<!DOCTYPE html>
<html class="porto-bg">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>
</script>
</head>
<body>
<div id="header" class="h1">
MUA: CAROLINE MIKKELSEN</div>
<div id="menu" class="m1">
<ul class="menli">
<li> forside </li>
<li> portofølje </li>
<li> samarbeidspartnere </li>
<li> kontakt </li>
</ul>
</div>
<ul class="slideshow">
<li> <span>Slide one</span> </li>
<li> <span>Slide two</span> </li>
<li> <span>Slide three</span> </li>
<li> <span>Slide four</span> </li>
</ul>
<div id="button" class="m3">
GO BACK
</div>
</body>
</html>
The carousel images might also been given z-index individually.
Please make your z-index = number of slides + 2 (container and one extra) and try
I think a correct use of positioning would solve your problem ...
whenever I have a problem of this sort I always refer to W3Schools website
as they have a very diverse set of info on everything ...
W3Schools - CSS position Property
furthermore I find it easier to wrap elements like lists in a container div
<div class="container">
<ul class="slideshow">
<li> <span>Slide one</span> </li>
<li> <span>Slide two</span> </li>
<li> <span>Slide three</span> </li>
<li> <span>Slide four</span> </li>
</ul>
</div>
just so they will be easier to manipulate on the larger scheme of things ....
I also noticed that you repeat some code that you can group to save a few lines like so :
.m1 .m2 .m3{
font-family: GeosansLight, Verdana, sans-serif;
color: #fff;
}
I have some HTML and CSS code for a webpage I am building. I finally figured out how to do the slideshow, but now I have this annoying white bar at the top of my home page (above the slideshow) that I can't get rid of.
Here is my HTML code:
<!DOCTYPE html>
<html>
<head>
<title>R. J. Farah Engineering</title>
<link rel="stylesheet" type="text/css" href="rjfe.css">
</head>
<body>
<div class="box fade-in logo">
<img src="../rjfe/logo.png" style="width:270px;height:128px;">
</div>
<div class="menu_box fade-in menu">
<div id="menu">
<ul>
<li>home</li>
<li>about</li>
<li>work</li>
<li>contact us</li>
</ul>
</div>
</div>
<ul class="cb-slideshow">
<li>
<span>Image 01</span>
<div>
<h3></h3>
</div>
</li>
<li>
<span>Image 02</span>
<div>
<h3></h3>
</div>
</li>
<li>
<span>Image 03</span>
<div>
<h3></h3>
</div>
</li>
</body>
</html>
And my CSS:
#-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
#-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
#keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
.fade-in {
opacity:0; /* make things invisible upon start */
-webkit-animation:fadeIn ease-in 1; /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
-moz-animation:fadeIn ease-in 1;
animation:fadeIn ease-in 1;
-webkit-animation-fill-mode:forwards; /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
-moz-animation-fill-mode:forwards;
animation-fill-mode:forwards;
-webkit-animation-duration:1s;
-moz-animation-duration:1s;
animation-duration:1s;
}
.box {
width: 270px;
height: 128px;
position: absolute; bottom: 0px; right: 0px;
margin: 10px;
float: left;
border: 1px solid transparent;
background: transparent;
}
.fade-in.logo {
-webkit-animation-delay: 0.5s;
-moz-animation-delay: 0.5s;
animation-delay: 0.5s;
}
.menu_box {
width: 270/2px;
height: 128/4px;
position: absolute; top: 0px; left: 0px;
margin: 10px;
float: left;
border: 1px solid transparent;
background: transparent;
}
.fade-in.menu {
-webkit-animation-delay: 0.5s;
-moz-animation-delay: 0.5s;
animation-delay: 0.5s;
}
/*Menus*/
#menu ul
{
margin: 0px;
padding: 0px;
list-style-type: none;
list-style: none;
z-index: 0;
}
#menu li
{
list-style-type: none;
z-index: 0;
}
#menu a
{
display: block;
width: 5em;
color: black;
background-color: transparent;
text-decoration: none;
text-align: center;
z-index: 0;
}
#menu a:hover
{
background-color: #6666AA;
z-index: 0;
}
#menu li
{
list-style-type: none;
float: left;
margin-right: 0.5em;
z-index: 0;
}
.cb-slideshow,
.cb-slideshow:after {
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
z-index: -9999;
}
.cb-slideshow:after {
content: '';
background: transparent url(../images/pattern.png) repeat top left;
}
.cb-slideshow li span {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
color: transparent;
background-size: cover;
background-position: 50% 50%;
background-repeat: none;
opacity: 0;
z-index: 0;
animation: imageAnimation 18s linear infinite 0s;
}
.cb-slideshow li div {
z-index: 1000;
position: absolute;
bottom: 30px;
left: 0px;
width: 100%;
text-align: center;
opacity: 0;
color: #fff;
animation: titleAnimation 18s linear infinite 0s;
}
.cb-slideshow li div h4 {
font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
font-size: 100px;
padding: 0;
line-height: 200px;
}
.cb-slideshow li:nth-child(1) span {
background-image: url(../rjfe3/img1.jpg)
}
.cb-slideshow li:nth-child(2) span {
background-image: url(../rjfe3/img2.jpg);
animation-delay: 6s;
}
.cb-slideshow li:nth-child(3) span {
background-image: url(../rjfe3/img3.jpg);
animation-delay: 12s;
}
#keyframes imageAnimation {
0% { opacity: 0; animation-timing-function: ease-in; }
8% { opacity: 1; animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
#keyframes titleAnimation {
0% { opacity: 0 }
8% { opacity: 1 }
17% { opacity: 1 }
19% { opacity: 0 }
100% { opacity: 0 }
}
#keyframes fadey {
0% { opacity: 0; }
15% { opacity: 1; }
85% { opacity: 1; }
100% { opacity: 0; }
}
figure#slideshow {
width: 80%;
margin: 0 auto;
position: relative;
}
figure#slideshow img {
position: absolute;
left: 0; top: 0;
width: 100%;
height: auto;
opacity: 0;
}
figure#slideshow img:first-child {
position: relative;
}
I have tried adjusting the position of the slideshow on the page because frankly that is all I can think to do...I have no idea what might be causing this.
This still isn't up, but here is a screenshot of the white bar in action!:
https://plus.google.com/u/0/+JosephFarahthefinalfrontier/posts/Vub3imwq1oq?pid=6193420991011414498&oid=105312277509825242261
Sorry it looks horrid--I don't have actual pictures yet, just filler, no real logo.
Thanks in advance!!
Your ul containing the slideshow still has the default top margin. Removing it should solve it.
.cb-slideshow
margin-top:0;
}
All you need to do is remove the comma when listing more than one class in css and thats it.
This is where your problem lies change this
.cb-slideshow,
.cb-slideshow:after {
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
z-index: -9999;
}
to:
.cb-slideshow .cb-slideshow:after {
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
z-index: -9999;
}
your problem is solved.
#-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
#-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
#keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
.fade-in {
opacity:0; /* make things invisible upon start */
-webkit-animation:fadeIn ease-in 1; /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
-moz-animation:fadeIn ease-in 1;
animation:fadeIn ease-in 1;
-webkit-animation-fill-mode:forwards; /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
-moz-animation-fill-mode:forwards;
animation-fill-mode:forwards;
-webkit-animation-duration:1s;
-moz-animation-duration:1s;
animation-duration:1s;
}
.box {
width: 270px;
height: 128px;
position: absolute; bottom: 0px; right: 0px;
float: top;
float: left;
border: 1px solid transparent;
background: transparent;
}
.fade-in.logo {
-webkit-animation-delay: 0.5s;
-moz-animation-delay: 0.5s;
animation-delay: 0.5s;
}
.menu_box {
width: 270/2px;
height: 128/4px;
position: absolute; top: 0px; left: 0px;
float: left;
float: top;
border: 1px solid transparent;
background: transparent;
}
.fade-in.menu {
-webkit-animation-delay: 0.5s;
-moz-animation-delay: 0.5s;
animation-delay: 0.5s;
}
.menu_box .fade-in .menu #menu ul li{
background-color: transparent;
}
/*Menus*/
#menu ul
{
margin: 0px;
padding: 0px;
list-style-type: none;
list-style: none;
z-index: 0;
background: transparent;
}
#menu li
{
list-style-type: none;
z-index: 0;
}
#menu a
{
display: block;
width: 5em;
color: black;
text-decoration: none;
text-align: center;
z-index: 0;
}
#menu a:hover
{
background-color: #6666AA;
z-index: 0;
}
#menu li
{
list-style-type: none;
float: left;
margin-right: 0.5em;
z-index: 0;
}
.cb-slideshow .cb-slideshow:after {
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
z-index: -9999;
}
.cb-slideshow:after {
content: '';
background: transparent url(../images/annoying_white_bar.png) repeat top left;
}
.cb-slideshow li span {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
color: transparent;
background-size: cover;
background-position: 50% 50%;
background-repeat: none;
opacity: 0;
z-index: 0;
animation: imageAnimation 18s linear infinite 0s;
}
.cb-slideshow li div {
z-index: 1000;
position: absolute;
bottom: 30px;
left: 0px;
width: 100%;
text-align: center;
opacity: 0;
color: #fff;
animation: titleAnimation 18s linear infinite 0s;
}
.cb-slideshow li div h4 {
font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
font-size: 100px;
padding: 0;
line-height: 200px;
}
.cb-slideshow li:nth-child(1) span {
background-image: url(./annoying_white_bar.png)
}
.cb-slideshow li:nth-child(2) span {
background-image: url(./annoying_white_bar.png);
animation-delay: 6s;
}
.cb-slideshow li:nth-child(3) span {
background-image: url(./annoying_white_bar.png);
animation-delay: 12s;
}
#keyframes imageAnimation {
0% { opacity: 0; animation-timing-function: ease-in; }
8% { opacity: 1; animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
#keyframes titleAnimation {
0% { opacity: 0 }
8% { opacity: 1 }
17% { opacity: 1 }
19% { opacity: 0 }
100% { opacity: 0 }
}
#keyframes fadey {
0% { opacity: 0; }
15% { opacity: 1; }
85% { opacity: 1; }
100% { opacity: 0; }
}
figure#slideshow {
width: 80%;
margin: 0 auto;
position: relative;
}
figure#slideshow img {
position: absolute;
left: 0; top: 0;
width: 100%;
height: auto;
opacity: 0;
}
figure#slideshow img:first-child {
position: relative;
}
You have
<div class="box fade-in logo">
<img src="../rjfe/logo.png" style="width:270px;height:128px;">
</div>
But it should look like
<div class="box-fade-in-logo">
<img src="../rjfe/logo.png" style="width:270px;height:128px;">
</div>
The class and id should always be one work or multiple words with dashes or underscores. Try this. Hopefully it works
I want to make center this Miss, hug...
This is my site: https://www.ajdinalic.cf/
Image: http://prntscr.com/69oewr
I am still new at this coding, and found this code on google
This is on weebly btw, i tried to fix but i dont know and i dont want to make it worse
.rw-wrapper{
width: 80%;
position: relative;
margin: 110px auto 0 auto;
font-family: 'Bree Serif';
padding: 10px;
}
.rw-sentence{
margin: 0;
text-align: center;
text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
}
.rw-sentence span{
color: #444;
white-space: initial;
font-size: 200%;
font-weight: normal;
}
.rw-words{
display: inline;
}
.rw-words span{
position: absolute;
opacity: 0;
overflow: hidden;
width: 100%;
color: #6b969d;
text-align: center;
}
.rw-words-1 span{
animation: rotateWordsFirst 18s linear infinite 0s;
text-align: center;
}
.rw-words-2 span{
animation: rotateWordsSecond 18s linear infinite 0s;
}
.rw-words span:nth-child(2) {
animation-delay: 3s;
color: #6b889d;
}
.rw-words span:nth-child(3) {
animation-delay: 6s;
color: #6b739d;
}
.rw-words span:nth-child(4) {
animation-delay: 9s;
color: #7a6b9d;
}
.rw-words span:nth-child(5) {
animation-delay: 12s;
color: #8d6b9d;
}
.rw-words span:nth-child(6) {
animation-delay: 15s;
color: #9b6b9d;
}
#keyframes rotateWordsFirst {
0% { opacity: 1; animation-timing-function: ease-in; height: 0px; }
8% { opacity: 1; height: 60px; }
19% { opacity: 1; height: 60px; }
25% { opacity: 0; height: 60px; }
100% { opacity: 0; }
}
#keyframes rotateWordsSecond {
0% { opacity: 1; animation-timing-function: ease-in; width: 0px; }
10% { opacity: 0.3; width: 0px; }
20% { opacity: 1; width: 100%; }
27% { opacity: 0; width: 100%; }
100% { opacity: 0; }
}
<!DOCTYPE html>
<html>
<head></head>
<section class="rw-wrapper">
<h2 class="rw-sentence">
<span>I</span>
<br>
<div class="rw-words rw-words-1">
<span>Miss</span>
<span>Want to hug</span>
<span>Want to kiss</span>
<span>Need</span>
<span>Want to see</span>
<span>Want to be with</span>
</div><br>
<span>You</span>
</h2>
</section>
<body class=' wsite-theme-light'>
<div style='display:none'>{title}</div>
<div style='display:none'>{menu}</div>
<div style='display:none'>{content}</div>
<div style='display:none'>{content}>{footer}</div>
</body>
</html>
Add top: 75px; left: 0; right: 0; to .rw-words span.
Let me know if this helps.