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.
Related
the keyframes i created in my scss should be animating my height to make it a 2s animation but it has not done that instead the height is just transforming instantly but the width in the same keyframe is being animated.
#import url("https://fonts.googleapis.com/css2?family=Maven+Pro:wght#500&family=Roboto&display=swap");
* {
font-family: "Maven Pro", sans-serif;
color: white;
animation-delay: 1s;
}
body {
width: 100%;
height: 100vh;
margin: 0%;
background-color: green;
display: flex;
justify-content: center;
align-items: flex-end;
overflow: hidden;
position: absolute;
bottom: 5%;
}
.swipe {
animation-name: swipeWidthHeight, close;
animation-duration: 0.3s 2s;
animation-delay: 1s, 10s;
animation-fill-mode: forwards, forwards;
display: flex;
justify-content: center;
height: 179px;
width: 434px;
background-color: #fff;
}
.swipe .side {
width: 180px;
height: 100%;
background-color: #fff;
display: flex;
justify-content: center;
animation-name: imageSize;
animation-fill-mode: forwards;
animation-duration: 0.3s;
}
.swipe .side img {
width: 80%;
}
.swipe .center {
position: relative;
animation-name: centerExpand;
animation-fill-mode: forwards;
animation-duration: 0.3s;
width: 74px;
height: 100%;
background-color: #38003c;
display: flex;
justify-content: center;
align-items: center;
}
.swipe .center .popup.firstHalf {
opacity: 0;
position: absolute;
transform: translateX(-50%);
left: 50%;
width: 135px;
height: 35px;
background-color: white;
color: #38003c;
text-align: center;
font-family: "roboto";
font-size: 22px;
line-height: 35px;
font-weight: 500;
animation-name: firstHalf;
animation-delay: 2s;
animation-duration: 3s;
animation-fill-mode: forwards;
}
.swipe .center .popup.eaSports {
opacity: 0;
position: absolute;
transform: translateX(-50%);
left: 50%;
width: 110px;
height: 76px;
background-color: #38003c;
color: #38003c;
display: flex;
align-items: center;
justify-content: center;
animation-name: firstHalf;
animation-delay: 4.8s;
animation-duration: 3s;
animation-fill-mode: forwards;
}
.swipe .center .popup.eaSports img {
width: 61px;
}
.swipe .center .textContainer {
font-weight: 400;
opacity: 0;
margin: 0% 2% 0% 2%;
height: 100%;
width: 100%;
}
.swipe .center .textContainer.left {
text-align: right;
animation-delay: 1.15s;
animation-name: leftText;
animation-duration: 0.2s;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.34, 0.58, 0.37, 1.48);
}
.swipe .center .textContainer.right {
animation-name: rightText;
animation-delay: 1.15s;
animation-duration: 0.2s;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.34, 0.58, 0.37, 1.48);
}
.swipe .center img {
width: 44px;
}
#keyframes swipeWidthHeight {
0% {
height: 179px;
width: 434px;
}
100% {
height: 77px;
width: 1064px;
}
}
#keyframes centerExpand {
90% {
justify-content: space-between;
}
100% {
width: 1020px;
justify-content: space-between;
}
}
#keyframes rightText {
0% {
opacity: 1;
}
100% {
padding-left: 10%;
opacity: 1;
}
}
#keyframes leftText {
0% {
opacity: 1;
}
100% {
padding-right: 10%;
opacity: 1;
}
}
#keyframes imageSize {
100% {
height: 77px;
width: 77px;
}
}
#keyframes firstHalf {
0% {
opacity: 1;
bottom: 0%;
z-index: -1;
}
10% {
z-index: -1;
opacity: 1;
bottom: 100%;
}
90% {
z-index: -1;
opacity: 1;
bottom: 100%;
}
99% {
z-index: -1;
opacity: 1;
bottom: 0%;
}
100% {
z-index: -1;
opacity: 0;
bottom: 0%;
}
}
#keyframes close {
100% {
width: 1064px;
height: 77px;
bottom: -20%;
}
}
<body>
<div class="swipe">
<div class="left side">
<img src="https://cdn.discordapp.com/attachments/868038988437536768/918357217772732446/crest.svg" alt="">
</div>
<div class="center">
<div class="firstHalf popup">First Half</div>
<div class="eaSports popup">
<img src="https://cdn.discordapp.com/attachments/868038988437536768/918357218003415080/ea-sports-logo.png" alt="">
</div>
<div class="textContainer left">
<h1 class="text ">MANCHESTER CITY</h1>
</div>
<img src="https://cdn.discordapp.com/attachments/868038988437536768/918357218208907274/premier-league-icon.png" alt="">
<div class="textContainer right">
<h1 class="text ">MANCHESTER CITY</h1>
</div>
</div>
<div class="right side">
<img src="https://cdn.discordapp.com/attachments/868038988437536768/918357217772732446/crest.svg" alt="">
</div>
</div>
</body>
In the codepen the class "swipe" and key frame of 'swipeWidthHeight'is the element thats is having issues with the height not animating.
here is a codepen below if the whole project for a better understanding
https://codepen.io/charlieschuyler/pen/zYBZzZv
Comma Missing:
.swipe {
animation-name: swipeWidthHeight, close;
animation-duration: 0.3s, 2s; /* missing comma */
animation-delay: 1s, 10s;
animation-fill-mode: forwards, forwards;
display: flex;
justify-content: center;
height: 179px;
width: 434px;
background-color: #fff;
}
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 an h2 header text with the class name "headertekst". I want to center it. I tried to use margin-left: auto, margin-right: auto and width: 100% but nothing happened.
I can give it a margin-left: 20% which will center it but that's just on my laptop. It will not be centered on other screen sizes and on mobile devices.
How do I center it the correct way?
You can just add style in h2 as:
<h2 style="text-align: center;">Text</h2>
h2.headertekst {
text-align: center;
}
<h2 class="headertekst">Test 1</h2>
You can use below css for this
h2 {
width: 100%;
text-align:center;
}
Or
header {
text-align: center;
}
h2 {
display: inline-block;
}
<h2 class="headertekst"> centered text </h2>
.headertekst {
{
text-align: center;
width:100%
}
This is all you need:
.headertekst {
text-align: center;
}
And if you need to center the h2 itself, then just add the text-align: center rule to the parent of the h2 tag.
add style as:
.headertekst{
text-align: center;
}
Here is a workign snippet:
.headertekst{
text-align: center;
}
<h2 class="headertekst">Align this to center</h2>
Ok, the problem is that the last part of your heading is rotating and position absolute. You have to define an approximate average width of the three rotating words.
body {
background: #363636;
}
.headertekst {
color: white;
font-size: 20px;
font-family: "Raleway", Helvetica, Arial, sans-serif;
font-weight: 600;
text-transform: uppercase;
text-align: center;
}
.headertekstrotate {
position: relative;
display: inline-block;
padding: 0 0 0 8px;
width: 150px;
}
.headertekstrotate span {
animation: clock 12s linear infinite 0s;
-ms-animation: clock 12s linear infinite 0s;
-webkit-animation: clock 12s linear infinite 0s;
position: absolute;
left: 0;
top: 0;
opacity: 0;
}
.headertekstrotate span:nth-child(2) {
animation-delay: 4s;
-ms-animation-delay: 4s;
-webkit-animation-delay: 4s;
}
.headertekstrotate span:nth-child(3) {
animation-delay: 8s;
-ms-animation-delay: 8s;
-webkit-animation-delay: 8s;
}
#keyframes clock {
0% {
opacity: 0;
}
10% {
opacity: 1;
}
25% {
opacity: 1;
}
30% {
opacity: 0;
}
80% {
opacity: 0;
}
100% {
opacity: 0;
}
}
<h2 class="headertekst">Interlaser is
<div class="headertekstrotate">
<span>professioneel.</span>
<span>voordelig.</span>
<span>betrouwbaar.</span>
</div>
</h2>
Other way:
body {
background: #363636;
}
.headertekst {
color: white;
font-size: 20px;
font-family: "Raleway", Helvetica, Arial, sans-serif;
font-weight: 600;
text-transform: uppercase;
text-align: center;
}
.headertekstrotate {
position: relative;
}
.headertekstrotate span {
animation: clock 12s linear infinite 0s;
-ms-animation: clock 12s linear infinite 0s;
-webkit-animation: clock 12s linear infinite 0s;
position: absolute;
left: 0;
top: 0;
width: 100%;
opacity: 0;
}
.headertekstrotate span:nth-child(2) {
animation-delay: 4s;
-ms-animation-delay: 4s;
-webkit-animation-delay: 4s;
}
.headertekstrotate span:nth-child(3) {
animation-delay: 8s;
-ms-animation-delay: 8s;
-webkit-animation-delay: 8s;
}
#keyframes clock {
0% {
opacity: 0;
}
10% {
opacity: 1;
}
25% {
opacity: 1;
}
30% {
opacity: 0;
}
80% {
opacity: 0;
}
100% {
opacity: 0;
}
}
<h2 class="headertekst">
<div class="headertekstrotate">
<span>Interlaser is short.</span>
<span>Interlaser is very very long.</span>
<span>Interlaser is professioneel.</span>
</div>
</h2>
Try to something like this.
.headertekst{
left: 0;
right: 0;
width: 100%;
text-align: center;
}
<h2 class="headertekst">This is Heading</h2>
try this
.headertekst
{
text-align:center;
width:100%;
}
.headertekst
{
text-align:center;
width:100%;
}
<h2 class="headertekst">This is center text</h2>
Simply change the Css properties to this:
.headertekst {
width: 100%
display: inline-block;
overflow: hidden;
text-align: center;
}
Reason: Sometimes text-align does not works if there is no width set. And overflow should always be kept hidden in these cases. display: inline-block As its name says: it displays the element in a line in a block. And finally, text-align: center it aligns the text to center.
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