here is a simplified version of my webpage. I am experiencing an issue where my buttons ( tags) are overlapping my main h1 element. How can I fix this, so they do not overlap? I believe that the issue is being caused because I have set the position of the div #MOVE to fixed. However, I need this due to my animated navigation bar.
HTML:
<!DOCTYPE html>
<html>
<head>
<link href="main.css" rel="stylesheet" type="text/css">
<script src="jquery-1.10.2.min.js">
</script>
<script src="main.js">
</script>
<title>A'S COFFEE</title>
</head>
<body>
<div id="MOVE">
<h1 class="logoone">COFFEE.</h1>
<h1 class="logotwo">BETTER WITH A'S</h1>
</div>
<div class="centeralign">
<a class="button" href="place.html" id="btn1">Want to Place<br>
an Order?</a><br>
<a class="button" href="#" id="btn2">View Orders?</a>
</div>
<footer></footer>
</body>
</html>
CSS:
h1{
color: #e5b78e;
font-family: Arial;
font-size: 100pt;
padding: 0px;
margin: 0px;
display: block;
}
.logoone{
margin-left: 50px;
padding-top: 40px;
letter-spacing: 15px;
}
.logotwo{
margin-left: 50px;
margin-bottom: 70px;
letter-spacing: 15px;
}
body{
background: url("../img/image3.jpg") no-repeat center center fixed;
background-size: cover;
}
.button{
text-decoration: none;
padding: 30px;
background-color: white;
opacity: 0.5;
font-family: arial;
font-size: 25pt;
text-transform: uppercase;
font-weight: bolder;
color: #202530;
border-radius: 1px;
transition: opacity .2s ease-out;
margin-top: 10px;
letter-spacing: 4px;
}
.button a{
color: rgba(0,0,0,0.5);
}
#btn1{
margin-top:30px;
display: inline-block;
padding-left: 30px;
padding-right:30px;
}
#btn2{
margin-top:30px;
display: inline-block;
padding-left: 47px;
padding-right: 47px;
}
.button:hover{
opacity: 1;
transition: opacity .2s ease-in;
}
.centeralign{
text-align: center;
}
br{
padding: 40px;
}
/* NAV */
#MenuIcon{
height: 25px;
width: 50px;
position: fixed;
top:50;
right: 50;
}
#MenuIcon:hover{
cursor: pointer;
}
#MenuLine{
height: 4px;
width: 50px;
background-color: #e5b78e;
position: absolute;
top:50%;
left: 50%;
transform: translate(-50%,-50%);
transition: all .3s;
}
#MenuIcon:hover #MenuLine{
width: 40px;
}
#MenuLine::before{
content: '';
height: 4px;
width: 40px;
background-color: #e5b78e;
position: absolute;
margin-top: 10px;
transition: all .3s;
}
#MenuIcon:hover #MenuLine::before{
width: 50px;
}
#MenuLine::after{
content: '';
height: 4px;
width: 40px;
background-color: #e5b78e;
position: absolute;
margin-top: -10px;
transition: all .3s;
}
#MenuIcon:hover #MenuLine::after{
width: 50px;
}
#MainMenu{
height: 100vh;
width: 300px;
background-color: #181818;
-webkit-clip-path:polygon(0 0,100% 0,0% 100%,0% 100%);
position: fixed;
top:0;
left: -300px;
transition: all .5s ease-in-out;
}
ul{
list-style: none;
padding: 0px;
margin: 0px;
font-family: arial;
font-weight: bold;
color:white;
text-align: center;
position: absolute;
top: 55%;
left: 50%;
transform: translate(-50%,-50%);
}
ul li{
margin: 20px;
}
ul li:hover{
cursor: pointer;
}
.line{
height: 2px;
width: 150px;
background-color: white;
margin-top: 10px;
position: absolute;
left: 50%;
transform: translate(-50%);
transition: all .3s;
}
ul li:hover .line{
width: 180px;
}
#logo{
position: absolute;
top:100;
left: 50%;
transform: translate(-50%);
}
#close{
position: absolute;
bottom: 150;
left: 50%;
transform: translate(-50%);
}
#close:hover{
cursor: pointer;
}
.LOGO{
font-size: 4.5em;
}
#MOVE{
position:fixed;
top:0%;
left: 0px;
transition: all .5s ease-in-out;
width:85%;
height: 100%;
}
Try
#MOVE{
position:relative;
top:0%;
left: 0px;
transition: all .5s ease-in-out;
width:85%;
height: 100%;
}
That sets the position relative to other elements within the page
Related
when you hover over the image blue arrow moves slowly. When you remove the cursor from the image white arrow comes back sharply. How to make a white arrow return slowly?
#keyframes left_to_right {
from {margin-left: -15px;}
to {margin-left: 0; }
}
div .footer-text{
position: absolute;
top: 10%;
left: 3%;
height: 20px;
width: 85%;
}
div .footer-text:after{
content: '';
background: url('https://www.nsartmuseum.ru/images/test/arrow-after-3.png') no-repeat;
width: 130px;
height: 15px;
display: inline-block;
margin-left: 10px;
position: relative;
}
div:hover .footer-text:before{
content: '';
background: url('https://www.nsartmuseum.ru/images/test/arrow-before-3.png') no-repeat;
width: 130px;
height: 15px;
margin-right: 5px;
display: inline-block;
animation: left_to_right 0.4s ease;
}
div:hover .footer-text:after{
content: '';
background: none;
}
div .footer-text span{
position: relative;
top:-5px;
font-size: 12px;
color: #313B78;
display: inline-block;
}
<div>
<a href="" class='footer-text'>
<span>13 September</span>
</a>
</div>
Obviously, there are ways to do this by CSS animation, but I've never used this in my development.
It's not required to use animation for that. transition is enough
just add transition: width .4s ease; to :after for unhovered element and play with width attribute
div .footer-text{
position: absolute;
top: 10%;
left: 3%;
height: 20px;
width: 85%;
}
div .footer-text span{
position: relative;
top:-5px;
font-size: 12px;
color: #313B78;
display: inline-block;
}
div .footer-text:after{
content: '';
background: url('https://www.nsartmuseum.ru/images/test/arrow-after-3.png') no-repeat right;
width: 130px;
height: 15px;
display: inline-block;
margin-left: 10px;
position: relative;
transition: width .4s ease;
}
div:hover .footer-text:after{
width: 0;
}
div .footer-text:before{
content: '';
background: url('https://www.nsartmuseum.ru/images/test/arrow-before-3.png') no-repeat right;
width: 0;
height: 15px;
margin-right: 5px;
display: inline-block;
transition: width .4s ease;
}
div:hover .footer-text:before{
width: 130px;
}
<div>
<a href="" class='footer-text'>
<span>13 September</span>
</a>
</div>
I do it:)
div {
width:50%;
position: relative;
height: 20px;
}
div .footer-text{
position: absolute;
top: 0;
left: 0;
line-height: 20px;
width: 100%;
height: 100%;
font-family: sans-serif;
overflow: hidden;
}
div .footer-text:before {
content: '';
background: url('data:image/svg+xml;charset=utf-8,%3Csvg%20width%3D%228%22%20height%3D%2215%22%20viewBox%3D%220%200%208%2015%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M1%201.5l6%206-6%206%22%20stroke%3D%22%23C5C8D0%22%20stroke-width%3D%221.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E') no-repeat right center;
background-size: 8px;
width: 8px;
height: 15px;
position: absolute;
right: 0;
top: 50%;
transform: translate(0,-7px);
z-index: 2;
transition: .4s ease-in-out;
}
div .footer-text span {
position: absolute;
top: 0;
left: 0;
font-size: 12px;
color: #313B78;
display: block;
white-space: nowrap;
z-index: 1;
transition: .4s ease-in-out;
}
div .footer-text span:before {
content: '';
display: block;
width: 100vw;
height: 15px;
position: absolute;
top: 50%;
right: 100%;
margin: -7px 20px 0 0;
background: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221110%22%20height%3D%2214%22%20viewBox%3D%220%200%201110%2014%22%3E%3Cpath%20fill%3D%22%23313B78%22%20d%3D%22M1109.424%206.076l-6-6a.599.599%200%2010-.848.848l4.975%204.976H1a.6.6%200%20100%201.2h1106.551l-4.975%204.976a.599.599%200%2010.848.848l6-6a.6.6%200%20000-.848z%22%2F%3E%3C%2Fsvg%3E') no-repeat right top;
background-size: auto 14px;
}
div .footer-text span:after {
content: '';
display: block;
width: 100vw;
height: 1px;
position: absolute;
top: 50%;
background: #C5C8D0;
left: calc(100% + 20px);
}
div .footer-text:hover:before {
transform: translate(20px,-7px);
}
div .footer-text:hover span {
left: 100%;
transform: translateX(-100%);
}
<div>
<a href="" class='footer-text'>
<span>13 September</span>
</a>
</div>
#keyframes left_to_right {
from {
margin-left: -15px;
}
to {
margin-left: 0;
}
}
div .footer-text {
position: absolute;
top: 10%;
left: 3%;
height: 20px;
width: 85%;
}
div .footer-text:after {
content: '';
background: url('https://www.nsartmuseum.ru/images/test/arrow-after-3.png') no-repeat;
width: 130px;
height: 15px;
display: inline-block;
margin-left: 10px;
position: relative;
animation: left_to_right 0.4s ease;
}
div:hover .footer-text:before {
content: '';
background: url('https://www.nsartmuseum.ru/images/test/arrow-before-3.png') no-repeat;
width: 130px;
height: 15px;
margin-right: 5px;
display: inline-block;
animation: left_to_right 0.4s ease;
}
div:hover .footer-text:after {
display: none;
}
div .footer-text span {
position: relative;
top: -5px;
font-size: 12px;
color: #313B78;
display: inline-block;
}
<div>
<a href="" class='footer-text'>
<span>13 September</span>
</a>
</div>
I am trying to position a button 10px off the horizontal center of the screen. This is the button code. The button uses some fancy hovering effect, which doesn't move with the button. How can I put the button 10px off the horizontal center of the screen?
body {
background-color: green;
}
.button-2 {
width: 140px;
height: 50px;
border: 2px solid white;
float: left;
text-align: center;
cursor: pointer;
position: relative;
box-sizing: border-box;
overflow: hidden;
margin: 0 0 40px 50px;
}
.button-2 a {
font-family: arial;
font-size: 16px;
color: white;
text-decoration: none;
line-height: 50px;
transition: all .5s ease;
z-index: 2;
position: relative;
}
.eff-2 {
width: 140px;
height: 50px;
top: -50px;
background: white;
position: absolute;
transition: all .5s ease;
z-index: 1;
}
.button-2:hover .eff-2 {
top: 0;
}
.button-2:hover a {
color: #666;
}
.watch-video-position {}
<div class="watch-video-position">
<div class="button-2 watch-video-position">
<div class="eff-2 watch-video-position"></div>
CLICK ME
</div>
</div>
I have made some changes in the css to class button-2.
.button-2 {
float: none;
margin: 0 auto;
top: 10px;
}
body {
background-color: green;
}
.button-2 {
border: 2px solid white;
box-sizing: border-box;
cursor: pointer;
float: none;
height: 50px;
margin: 0 auto;
overflow: hidden;
position: relative;
text-align: center;
top: 10px;
width: 140px;
}
.button-2 a {
font-family: arial;
font-size: 16px;
color: white;
text-decoration: none;
line-height: 50px;
transition: all .5s ease;
z-index: 2;
position: relative;
}
.eff-2 {
width: 140px;
height: 50px;
top: -50px;
background: white;
position: absolute;
transition: all .5s ease;
z-index: 1;
}
.button-2:hover .eff-2 {
top: 0;
}
.button-2:hover a {
color: #666;
}
.watch-video-position {}
<div class="watch-video-position">
<div class="button-2 watch-video-position">
<div class="eff-2 watch-video-position"></div>
CLICK ME
</div>
</div>
You need to use this:
.top {
position: relative;
}
.top .button-2 {
position: absolute;
left: 50%;
margin-left: -70px;
}
Make sure you add the unique class top to the first <div> and use that to position. You can also use margin and padding on the .top.
body {
background-color: green;
}
.button-2 {
width: 140px;
height: 50px;
border: 2px solid white;
float: left;
text-align: center;
cursor: pointer;
position: relative;
box-sizing: border-box;
overflow: hidden;
margin: 0 0 40px 50px;
}
.button-2 a {
font-family: arial;
font-size: 16px;
color: white;
text-decoration: none;
line-height: 50px;
transition: all .5s ease;
z-index: 2;
position: relative;
}
.eff-2 {
width: 140px;
height: 50px;
top: -50px;
background: white;
position: absolute;
transition: all .5s ease;
z-index: 1;
}
.button-2:hover .eff-2 {
top: 0;
}
.button-2:hover a {
color: #666;
}
.top {
position: relative;
padding-top: 25px;
}
.top .button-2 {
position: absolute;
left: 50%;
margin-left: -70px;
}
<div class="top watch-video-position">
<div class="button-2 watch-video-position">
<div class="eff-2 watch-video-position"></div>
CLICK ME
</div>
</div>
try centering its parent and shifting it within its parent:
body {
background-color: green;
text-align: center;
}
.outer {
width: 200px;
margin: auto;
background-color: blue;
}
.button-2 {
width: 140px;
height: 50px;
border: 2px solid white;
cursor: pointer;
position: relative;
box-sizing: border-box;
overflow: hidden;
margin: 0 0 40px 50px;
}
.button-2 a {
font-family: arial;
font-size: 16px;
color: white;
text-decoration: none;
line-height: 50px;
transition: all .5s ease;
z-index: 2;
position: relative;
}
.eff-2 {
width: 140px;
height: 50px;
top: -50px;
background: white;
position: absolute;
transition: all .5s ease;
z-index: 1;
}
.button-2:hover .eff-2 {
top: 0;
}
.button-2:hover a {
color: #666;
}
.watch-video-position {}
<div class="watch-video-position outer">
<div class="button-2 watch-video-position">
<div class="eff-2 watch-video-position"></div>
CLICK ME
</div>
</div>
try width 90% of div.button-2 and set border and padding to anchor.
body {
background-color: green;
}
.button-2 {
width: 90%;
height: 50px;
float: left;
text-align: center;
cursor: pointer;
position: relative;
box-sizing: border-box;
overflow: hidden;
margin: 0 0 40px 50px;
}
.button-2 a {
font-family: arial;
font-size: 16px;
color: white;
text-decoration: none;
line-height: 50px;
transition: all .5s ease;
z-index: 2;
position: relative;
border: 2px solid white;
padding:15px;
}
.eff-2 {
width: 140px;
height: 50px;
top: -50px;
background: white;
position: absolute;
transition: all .5s ease;
z-index: 1;
}
.button-2:hover .eff-2 {
top: 0;
}
.button-2:hover a {
color: #666;
}
.top {
position: relative;
padding-top: 25px;
}
.top .button-2 {
position: absolute;
left: 50%;
margin-left: -70px;
}
<div class="top watch-video-position">
<div class="button-2 watch-video-position">
<div class="eff-2 watch-video-position"></div>
CLICK ME
</div>
</div>
When adding position: relative; to the code the background popup window won't get any opacity - what is the reason for that? I don't understand why centering the web page should affect background opacity.
Thanks for anyone that can help!!
<html>
<head>
<style>
body {
background-color: white;
width: 960px;
margin: auto;
position: relative;
}
.one {
background: black;
-webkit-border-radius: 12;
-moz-border-radius: 12;
border-radius: 12px;
font-family: Book Antiqua;
color: #ffffff;
font-size: 60px;
text-align: center;
width: 75px;
height: 75px;
overflow:hidden;
float:left;
position:absolute;
transition: .5s ease;
top: 120px;
left: 140px;
text-align: center;
text-vertical-align: middle;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.8);;
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
.popup {
margin: 70px auto;
padding: 20px;
background: #fff;
border-radius: 5px;
width: 30%;
position: relative;
transition: all 5s ease-in-out;
}
.popup h2 {
margin-top: 0;
color: #333;
font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
position: absolute;
top: 20px;
right: 30px;
transition: all 200ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
}
.popup .close:hover {
color: orange;
}
.popup .content {
max-height: 30%;
overflow: auto;
}
</style>
</head>
<body>
<a class="one" id="one" href="#popup1" onclick="changeZIndex(this)">1</a>
<div id="popup1" class="overlay">
<div class="popup">
<h2>Here i am</h2>
<a class="close" href="#">×</a>
<div class="content">
1
</div>
</div>
</div>
</body>
</html>
Link
Add height to the html and body element
CSS
html,
body
{
height: 100%;
}
CSS Errors
.one
{
background: black;
-webkit-border-radius: 12;
-moz-border-radius: 12;
border-radius: 12px;
font-family: Book Antiqua;
color: #ffffff;
font-size: 60px;
text-align: center;
width: 75px;
height: 75px;
overflow: hidden;
float: left;
position: absolute;
transition: .5s ease;
top: 120px;
left: 140px;
text-align: center;
/* incorrect value
text-vertical-align: middle;
*/
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.8);
/*
transition: opacity 500ms;
*/
transition: opacity 0.5s;
visibility: hidden;
opacity: 0;
}
I tried to add a background image to the span but, for some reason, it doesn't seem to be properly loading. The jsfiddle is below.
P.S-I know its kinda straight "it doesn't works question" just got stuck for a while couldn't find a answer
http://jsfiddle.net/whnb3yf2/46/
<div class="learn">
<a>Learn More</a>
<span></span>
</div>
.learn
{
width: 200px;
height: 60px;
font-family: 'Open Sans',sans-serif;
background-color: transparent;
border:2px solid #fff;
position: relative;
text-align: center;
font-size: 18pt;
line-height:60px;
overflow: hidden;
}
.learn a
{
color: white;
display: block;
transition: all 0.2s ease-in-out;
}
.learn:hover {
background-color: white;
}
.learn:hover a
{
color: black;
margin-left: -20px;
}
.learn span
{
background:url(https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-forward-128.png) center;
display: block;
width: 9px;
height: 16px;
position: absolute;
top: 22px;
left: 110%;
transition: all 0.2s ease-in-out;
}
.learn:hover span{
left: 80%;
}
body {
background-color: black;
}
You need to add background-size: 9px 16px; to your .learn span rule.
.learn {
width: 200px;
height: 60px;
font-family: 'Open Sans',sans-serif;
background-color: transparent;
border:2px solid #fff;
position: relative;
text-align: center;
font-size: 18pt;
line-height:60px;
overflow: hidden;
}
.learn a {
color: white;
display: block;
transition: all 0.2s ease-in-out;
}
.learn:hover {
background-color: white;
}
.learn:hover a {
color: black;
margin-left: -20px;
}
.learn span {
background:url(https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-forward-128.png) center center;
background-size: 9px 16px;
display: block;
width: 9px;
height: 16px;
position: absolute;
top: 22px;
left: 110%;
transition: all 0.2s ease-in-out;
}
.learn:hover span{
left: 80%;
}
body {
background-color: black;
}
<div class="learn">
<a>Learn More</a>
<span></span>
</div>
The issue you are having is that the background image for the button is too small. You can fix that by setting the background size equal to that of the button. For more information on the background-size attribute, check out http://www.w3schools.com/cssref/css3_pr_background-size.asp
.learn {
width: 200px;
height: 60px;
font-family: 'Open Sans',sans-serif;
background-color: transparent;
border:2px solid #fff;
position: relative;
text-align: center;
font-size: 18pt;
line-height:60px;
overflow: hidden;
}
.learn a {
color: white;
display: block;
transition: all 0.2s ease-in-out;
}
.learn:hover {
background-color: white;
}
.learn:hover a {
color: black;
margin-left: -20px;
}
.learn span {
background:url(https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-forward-128.png) center center;
background-size: 9px 15px;
display: block;
width: 9px;
height: 16px;
position: absolute;
top: 22px;
left: 110%;
transition: all 0.2s ease-in-out;
}
.learn:hover span{
left: 80%;
}
body {
background-color: black;
}
<div class="learn">
<a>Learn More</a>
<span></span>
</div>
Anyone know how to prevent the "watch the stream" and "dice game" to move like that?
HTML:
<!doctype html>
<html>
<head>
<meta charset="UTC-8">
<title>RLESSON85</title>
<link href="main.css" rel="stylesheet">
</head>
<body>
<h1 class="index">HOME</h1>
<h1 id="indextitle">RLEESON85</h1>
<h1 id="stream">WATCH THE STREAM</div>
<h1 id="dice">DICE GAME</h1>
</body>
</html>
CSS:
body {
background: #333;
}
footer {
}
.index {
font-family: bebas neue;
font-size: 33px;
font-style: inherit;
font-weight: inherit;
color: white;
letter-spacing: 3px;
float: left;
margin-left: 30px;
background: transparent;
height: 60px;
width: 140px;
line-height: 60px;
text-align: center;
border-style: solid;
border-width: 2px;
border-radius: 6px;
transition: all 0.3s ease 0s;
}
#indextitle {
font-family: bebas neue;
font-size: 190px;
font-style: inherit;
font-weight: inherit;
color: white;
letter-spacing: 5px;
position: absolute;
top: 30%;
left: 50%;
transform: translateX(-50%) translatey(-50%);
}
#dicetitle {
font-family: bebas neue;
font-size: 160px;
font-style: inherit;
font-weight: inherit;
color: white;
letter-spacing: 5px;
position: absolute;
top: 30%;
left: 50%;
transform: translateX(-50%) translatey(-50%);
}
#stream {
font-family: bebas neue;
font-size: 33px;
font-style: inherit;
font-weight: inherit;
color: white;
letter-spacing: 3px;
position: absolute;
top: 56%;
left: 50%;
transform: translateX(-50%) translatey(-50%);
background: transparent;
height: 60px;
width: 320px;
line-height: 60px;
text-align: center;
border: 0;
border-style: solid;
border-width: 2px;
border-radius: 6px;
transition: all 0.3s ease 0s;
}
#dice {
font-family: bebas neue;
font-size: 33px;
font-style: inherit;
font-weight: inherit;
color: white;
letter-spacing: 3px;
position: absolute;
top: 66%;
left: 50%;
transform: translateX(-50%) translatey(-50%);
background: transparent;
height: 60px;
width: 200px;
line-height: 60px;
text-align: center;
border: 0;
border-style: solid;
border-width: 2px;
border-radius: 6px;
transition: all 0.3s ease 0s;
}
.index:hover {
font-family: bebas neue;
font-size: 33px;
font-style: inherit;
font-weight: inherit;
color: white;
letter-spacing: 3px;
float: left;
margin-left: 40px;
background: #777;
height: 60px;
width: 120px;
line-height: 60px;
text-align: center;
border-style: solid;
border-width: 2px;
border-radius: 6px;
transition: all 0.3s ease 0s;
}
#stream:hover {
font-family: bebas neue;
font-size: 33px;
font-style: inherit;
font-weight: inherit;
color: white;
letter-spacing: 3px;
position: absolute;
top: 56%;
left: 50%;
transform: translateX(-50%) translatey(-50%);
background: #777;
height: 60px;
width: 300px;
line-height: 60px;
text-align: center;
border: 0;
border-style: solid;
border-width: 2px;
border-radius: 6px;
transition: all 0.3s ease 0s;
}
#dice:hover {
font-family: bebas neue;
font-size: 33px;
font-style: inherit;
font-weight: inherit;
color: white;
letter-spacing: 3px;
position: absolute;
top: 66%;
left: 50%;
transform: translateX(-50%) translatey(-50%);
background: #777;
height: 60px;
width: 180px;
line-height: 60px;
text-align: center;
border: 0;
border-style: solid;
border-width: 2px;
border-radius: 6px;
transition: all 0.3s ease 0s;
}
a:link {
text-decoration: none;
color: white;
}
a:visited {
text-decoration: none;
color: white;
}
Don't position each element individually, but position the whole block.
Also, you shouldn't use <h1> for everything.
<head>
<meta charset="UTC-8">
<title>RLESSON85</title>
<link href="main.css" rel="stylesheet">
</head>
<body>
<div class="index">HOME</div>
<div class="maingroup">
<h1 id="indextitle">RLEESON85</h1>
<div id="stream">WATCH THE STREAM</div>
<div id="dice">DICE GAME</div>
</div>
</body>
CSS
.maingroup {
position: absolute;
top: 50%;
height: 450px;
margin-top: -225px;
text-align: center;
}
#stream, #dice {
margin: 0 auto 20px;
}
See the JSFiddle
I just tried... just put the class you want to use inside the div like
<head>
<meta charset="UTC-8">
<title>RLESSON85</title>
<link href="main.css" rel="stylesheet">
</head>
<body>
<div><h1 class="index">HOME</h1><div>
<div><h1 id="indextitle">RLEESON85</h1></form></div>
<div><h1 id="stream">WATCH THE STREAM</div>
<div><h1 id="dice">DICE GAME</h1><div>
</body>
try something like this....
HTML
<div id="outerwrapper">
<div id="innerwrapper">
<p class="links">Home</p>
<h1>RLEESSON85</h1>
<p class="links">Watch the Stream Dice game</p>
</div>
</div>
CSS
#outerwrapper {
background:url("http://www.freeppt.net/background/violet-vector-leaves-circles-backgrounds-for-powerpoint.jpg") no-repeat left top;
background-position:cover;
height: 100%;
position: absolute;
width: 100%;
}
#innerwrapper {
background-color:#333;
position:absolute;
width:100%;
height:100%;
transition: all 0.3s ease 0s;
}
.links a, links a:hover, links a:visited {
color:white;
text-decoration:none;
padding:10px 25px;
display:inline-block;
border-radius:7px;
border:1px solid white;
}
h1 {
font-size:80px;
color:white;
}
Script
$(".links a").click(function () {
$("#innerwrapper").css("height", "50%");
setTimeout(function () {
$("#innerwrapper").css("height", "100%");
}, 2000);
});
Fiddle Demo