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
Related
I have three bars set to slide in from the right and settle at the left. The animation itself is fine. The problem is that before the animation begins the three bars are positioned in the middle of the screen before disappearing and then commencing the animation.
When the page is refreshed I do not want these bars to be visible until they begin their slide-in. How can I do this?
<body>
<header>
<h1>xxxx xxxxxxx</h1>
<nav>
<ul>
<li>About Me</li>
<li id="contact_nav">Contact</li>
<li id="gallery_nav">Gallery</li>
</ul>
</nav>
<div class="container">
<div id="bar1" class="bar1"><p>Bespoke furniture ...</p></div><br>
<div id="bar2" class="bar2"><p>... and interesting items ...</p></div><br>
<div id="bar3" class="bar3"><p>... brought to life!</p></div><br>
</div>
</header>
</body>
</html>
* {
margin: 0;
padding: 0;
}
#font-face {
font-family: 'Avenida Std';
src: url('AvenidaStd.woff') format('woff');
font-weight: normal;
font-style: normal;
}
body {
background-image: linear-gradient(to right, #24243E, #302B63, #0F0C29);
}
h1, h2, h3, h4 {
font-family: 'Avenida Std';
}
header h1 {
font-size: 12vw;
color: grey;
position: absolute;
padding-left: 20px;
padding-top: 55px;
text-shadow: 0.10em 0.08em 5px black;
transform: rotate(-10deg);
}
nav {
position: relative;
}
nav ul {
align-content: right;
}
nav ul li {
font-family: 'Avenida Std';
font-size: 5rem;
margin-left: 85%;
padding-top: 20px;
list-style-type: none;
justify-content: right;
}
nav ul li a {
text-decoration: none;
color: white;
}
nav ul li a:hover {
color: yellow;
text-shadow: 0 0 40px yellow;
}
nav #contact_nav {
padding-top: 0.5rem;
}
nav #gallery_nav {
padding-top: 0.5rem;
padding-bottom: 0;
z-index: 100;
}
#bar1 {
width: 50vw;
height: 3rem;
background: black;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
}
#bar2 {
width: 50vw;
height: 3rem;
background: black;
}
#bar3 {
width: 50vw;
height: 3rem;
background: black;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
}
.container {
position: relative;
}
.container p {
color: white;
font-family: sans-serif;
font-size: 2.5rem;
position: relative;
padding-left: 5px;
}
/* Bars Animation CSS */
.bar1 {
animation: move1 1.5s ease-out infinite forwards;
animation-iteration-count: 1;
animation-delay: 500ms;
position: fixed;
top: 30%;
margin-bottom: 2px;
left: 30%;
z-index: 50;
}
#keyframes move1 {
0% {
transform: translateX(100vw);
}
100% {
transform: translateX(-100%);
left: 80%;
}
}
.bar2 {
animation: move2 1.5s ease-out infinite forwards;
animation-iteration-count: 1;
animation-delay: 1000ms;
position: fixed;
top: 36%;
left: 30%;
z-index: 999;
}
#keyframes move2 {
0% {
transform: translateX(100vw);
}
100% {
transform: translateX(-100%);
left: 65%;
}
}
.bar3 {
animation: move3 1.5s ease-out infinite forwards;
animation-iteration-count: 1;
animation-delay: 1500ms;
position: fixed;
top: 42%;
left: 30%;
z-index: 999;
}
#keyframes move3 {
0% {
transform: translateX(100vw);
}
100% {
transform: translateX(-100%);
left: 52%;
}
}
Just add default value for transform like this:
.bar1 {
animation: move1 1.5s ease-out infinite forwards;
animation-iteration-count: 1;
animation-delay: 500ms;
position: fixed;
top: 30%;
margin-bottom: 2px;
left: 30%;
z-index: 50;
transform: translateX(100vw); // added
}
.bar2 {
animation: move2 1.5s ease-out infinite forwards;
animation-iteration-count: 1;
animation-delay: 1000ms;
position: fixed;
top: 36%;
left: 30%;
z-index: 999;
transform: translateX(100vw); // added
}
.bar3 {
animation: move3 1.5s ease-out infinite forwards;
animation-iteration-count: 1;
animation-delay: 1500ms;
position: fixed;
top: 42%;
left: 30%;
transform: translateX(100vw); //added
z-index: 999;
}
I am trying to make it so when I open the page, test will show up as red and the testing will show up as white. There is a delay that I am using for when the page opens that I want to keep (if you run the program you will see).
Css
#hero h1 {
display: block;
width: fit-content;
font-size: 3rem;
position: relative;
color: transparent;
animation: text_reveal .5s ease forwards;
animation-delay: 1s;
}
#hero h1 .slide {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 0;
background-color: crimson;
animation: text_reveal_box 1s ease;
animation-delay: .5s;
}
/* KetFrames */
#keyframes text_reveal_box {
50% {
width: 100%;
left: 0;
}
100% {
width: 0;
left: 100%;
}
}
#keyframes text_reveal {
100% {
color: white;
}
}
HTML
<section id="hero">
<div class="hero container">
<div>
<h1><span class="red">test</span> testing<span class="slide"></span></h1>
</div>
</div>
</section>
Do you mean like this? See changes under /* added CSS */
body {
margin: 0;
padding: 0;
box-sizing: border-box;
background-color: grey;
}
html {
font-size: 20px;
font-family: 'Montserrat', sans-serif;
}
#hero h1 {
display: block;
width: fit-content;
font-size: 3rem;
position: relative;
color: transparent;
animation: text_reveal .5s ease forwards;
animation-delay: 1s;
}
#hero h1 .slide {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 0;
background-color: crimson;
animation: text_reveal_box 1s ease;
animation-delay: .5s;
}
/* KetFrames */
#keyframes text_reveal_box {
50% {
width: 100%;
left: 0;
}
100% {
width: 0;
left: 100%;
}
}
#keyframes text_reveal {
100% {
color: white;
}
}
/* added CSS */
.red {
animation: text_reveal_red ease forwards;
animation-delay: 1s;
animation-iteration-count: 1;
}
#keyframes text_reveal_red {
100% {
color: crimson;
}
}
<section id="hero">
<div class="hero container">
<div>
<h1><span class="red">test</span> testing<span class="slide"></span></h1>
</div>
</div>
</section>
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;
}
So I have just started to learn HTML/CSS and I am trying to create a website for a magazine I'm putting together. However, when I try adding two links to two different pieces of text, one is only partially clickable and the one below is not.
I am thinking it has something to do with my wrapper or the photos I have right beside the text because when I align them more right, they're now clickable. Seems to be like something is blocking part of the word (link) to be clicked on.
I have tried making a sidebar instead but I still get the same result. I tried moving my code around for different results, but still cannot figure it out.
#wrapper {
margin: 0 auto;
width: 1140px;
}
.slider {
max-width: 457px;
height: 451px;
margin: 0 auto;
position: relative;
}
.slide1,
.slide2,
.slide3,
.slide4,
.slide5 {
position: absolute;
width: 100%;
height: 100%;
}
.slide1 {
background: url(TPWeb.jpg)no-repeat center;
background-size: cover;
animation: fade 80s infinite;
-webkit-animation: fade 20s infinite;
margin-top: 20px;
margin-left: -155px;
}
.slide2 {
background: url(DS.jpg)no-repeat center;
background-size: cover;
animation: fade2 80s infinite;
-webkit-animation: fade2 20s infinite;
margin-top: 20px;
margin-left: -155px;
}
.slide3 {
background: url(IT95Web.jpg)no-repeat center;
background-size: cover;
animation: fade3 80s infinite;
-webkit-animation: fade3 20s infinite;
margin-top: 20px;
margin-left: -155px;
}
#font-face {
font-family:
}
#keyframes fade1 {
0% {
opacity: 1
}
33.333% {
opacity: 0
}
66.666% {
opacity: 0
}
100% {
opacity: 1
}
}
#keyframes fade2 {
0% {
opacity: 0
}
33.333% {
opacity: 1
}
66.666% {
opacity: 0
}
100% {
opacity: 0
}
}
#keyframes fade3 {
0% {
opacity: 0
}
33.333% {
opacity: 0
}
66.666% {
opacity: 1
}
100% {
opacity: 0
}
}
}
.TPWeb {
margin-top: 80px;
margin-left: 50px;
}
.DFBase1 {
margin-top: 45px;
margin-left: 183px;
width: 448px;
height: 127px;
}
.ATA {
margin-right: 305px;
margin-top: -475px;
font-family:
}
.B {
margin-right: 370px;
font-family:
}
.about {
color: #000;
text-decoration: none;
}
.blog {
color: #000;
text-decoration: none;
}
<div id="wrapper">
<div class='slider'>
<div class='slide1'></div>
<div class='slide2'></div>
<div class='slide3'></div>
</div>
<img src="DFBase1.png" alt="DFBase" class=DFBase1>
<div align="right" class=ATA>
<font size="5"><em><b>about the author</b></em></font>
</div>
<div align="right" class=B>
<font size="5"><em><b>blog</b></em></font>
</div>
</div>
.slider is overlapping the links since you're using a negative margin to move the links back up on the page.
A simple fix is to give the links a z-index by assigning position: relative
.ATA, .B {
position: relative;
}
#wrapper {
margin: 0 auto;
width: 1140px;
}
.slider {
max-width: 457px;
height: 451px;
margin: 0 auto;
position: relative;
}
.slide1,
.slide2,
.slide3,
.slide4,
.slide5 {
position: absolute;
width: 100%;
height: 100%;
}
.slide1 {
background: url(TPWeb.jpg)no-repeat center;
background-size: cover;
animation: fade 80s infinite;
-webkit-animation: fade 20s infinite;
margin-top: 20px;
margin-left: -155px;
}
.slide2 {
background: url(DS.jpg)no-repeat center;
background-size: cover;
animation: fade2 80s infinite;
-webkit-animation: fade2 20s infinite;
margin-top: 20px;
margin-left: -155px;
}
.slide3 {
background: url(IT95Web.jpg)no-repeat center;
background-size: cover;
animation: fade3 80s infinite;
-webkit-animation: fade3 20s infinite;
margin-top: 20px;
margin-left: -155px;
}
#font-face {
font-family:
}
#keyframes fade1 {
0% {
opacity: 1
}
33.333% {
opacity: 0
}
66.666% {
opacity: 0
}
100% {
opacity: 1
}
}
#keyframes fade2 {
0% {
opacity: 0
}
33.333% {
opacity: 1
}
66.666% {
opacity: 0
}
100% {
opacity: 0
}
}
#keyframes fade3 {
0% {
opacity: 0
}
33.333% {
opacity: 0
}
66.666% {
opacity: 1
}
100% {
opacity: 0
}
}
}
.TPWeb {
margin-top: 80px;
margin-left: 50px;
}
.DFBase1 {
margin-top: 45px;
margin-left: 183px;
width: 448px;
height: 127px;
}
.ATA {
margin-right: 305px;
margin-top: -475px;
font-family:
}
.B {
margin-right: 370px;
font-family:
}
.about {
color: #000;
text-decoration: none;
}
.blog {
color: #000;
text-decoration: none;
}
<div id="wrapper">
<div class='slider'>
<div class='slide1'></div>
<div class='slide2'></div>
<div class='slide3'></div>
</div>
<img src="DFBase1.png" alt="DFBase" class=DFBase1>
<div align="right" class=ATA>
<font size="5"><em><b>about the author</b></em></font>
</div>
<div align="right" class=B>
<font size="5"><em><b>blog</b></em></font>
</div>
</div>
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.