I have a simple page. What I want to do is when I make the width smaller, I would like the "middle" div to be on top of the "left" div. Right now, the middle div is second as it should be, but I'm wondering how I would make it so that the middle div goes on top of the left div.
http://jsfiddle.net/nynou9mr/
div{
font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
font-size:60px;
}
body{
margin:0;padding:0;
}
#header{
height:100px;
width:100%;
background:purple;
text-align:center;
position:relative;
}
.wrap{
width:100%;
text-align:center;
background:blue;
overflow:hidden;
white-space:nowrap;
}
#left{
display: inline-block;
margin-top:10px;
height:500px;
width:300px;
background:red;
}
#middle{
display: inline-block;
margin-top:10px;
margin-left:10px;
height:500px;
width:1570px;
background:gray;
}
#media (max-width:1320px){
#left{
width:800px;
height:200px;
margin:20px auto;display:block;
}
#middle{
width:800px;
}
#bottom{
margin-top:100px;
}
}
#media (max-width:1625px){
#right{
width:100%;
height:300px;
}
}
/* -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=For Footer */
* {
padding: 0;
}
html, body {
height: 100%;
padding:0;
}
.forfooter{
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto;
}
#bottom{
/*position:absolute;
bottom:0;
width:100%;*/
height:100px;
background:orange;
}
.push{
height:0px;
margin-top:-100px;
}
<title>First Responsiveness</title>
</head>
<body>
<div class="forfooter">
<div id="header">Header</div>
<div class="wrap">
<div id="left">left</div>
<div id="middle">Middle</div>
</div>
<div class="push"></div>
</div>
<div class="push"></div>
<div id="bottom">Bottom</div>
Depending on what browser support you need.
flexbox makes this easy.
.wrap {
width: 80%;
margin: 10px auto;
border: 1px solid grey;
display: flex;
flex-direction: column;
padding: 25px;
}
#left,
#middle {
height: 50px;
line-height: 50px;
text-align: center;
order: 1;
}
#left {
background: #bada55;
}
#middle {
background: #663399;
color: white;
}
#media screen and (max-width: 760px) {
#middle {
order: 0;
}
}
<div class="wrap">
<div id="left">left</div>
<div id="middle">Middle</div>
</div>
Codepen Demo
Check this out: http://jsfiddle.net/e42q63w5/1/
The trick is to have div#middle before div#left in your html and control the position with float: left | right
div{
font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
font-size:60px;
}
body{
margin:0;padding:0;
}
#header{
height:100px;
width:100%;
background:purple;
text-align:center;
position:relative;
}
.wrap{
width:100%;
text-align:center;
background:blue;
overflow:hidden;
white-space:nowrap;
}
#left{
float: left
display: inline-block;
margin-top:10px;
height:500px;
width:20%;
background:red;
}
#middle{
float: right;
display: inline-block;
margin-top:10px;
margin-left:10px;
height:500px;
width:75%;
background:gray;
}
#media (max-width:1320px){
#left{
float: none;
width:800px;
height:200px;
margin:20px auto;
display:block;
}
#middle{
float: none;
width:800px;
}
#bottom{
margin-top:100px;
}
}
#media (max-width:1625px){
#right{
width:100%;
height:300px;
}
}
/* -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=For Footer */
* {
padding: 0;
}
html, body {
height: 100%;
padding:0;
}
.forfooter{
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto;
}
#bottom{
/*position:absolute;
bottom:0;
width:100%;*/
height:100px;
background:orange;
}
.push{
height:0px;
margin-top:-100px;
}
<div class="forfooter">
<div id="header">Header</div>
<div class="wrap">
<div id="middle">Middle</div>
<div id="left">left</div>
</div>
<div class="push"></div>
</div>
<div class="push"></div>
<div id="bottom">Bottom</div>
</div>
Related
Goodday all,
Please i am still getting a hang of node and express js.
I created dynamic div in html using javascript (in my public folder) and it works fine. i try to change the location of the javascript to make it more accessible by placing it in a route folder when i want to retrieve data from mongodb.
I render it and the dynamic divs don't show anymore.
I am guessing it has to do with the placement but i don't know where to start.
please can somebody help me with this logic
where the issue is, is with the javascript function multidivs(); which works fine outside express.
Thank you
i placed multidivs() this way below
<form action="/routes/top100" method="POST" >
<div id="bodydiv">
<div id="leftdiv" >
<script type="text/javascript"> ***multidivs();*** </script>
</div>
</div>
</form>
for some reason it works well with netbeans IDE
below are the codes
HTML
<html>
<head>
<title>TODO supply a title</title>
<link href="/css/index.css" rel="Stylesheet"/>
<script src="bower_components/jquery/dist/jquery.js"> </script>
<script src="bower_components/jquery-ui/jquery-ui.js"></script>
<script src="/routes/top100.js" type="text/javascript"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body >
<div id="wrapper">
<div id="container">
<nav>
<div class="logodiv">logo </div>
charts
news
music
<a href=""><img height="20" src='/images/fblogo.png' alt="" class=''
width="20"/></a>
<a href=""><img height="20" src='/images/Instagram.png'
alt="" class='' width="20"/></a>
<a href=""><img height="20" src='/images/twitter.png'
alt="" class='' width="20"/></a>
<a href=""><img src='/images/search.png' alt=""
class='searchicon'/></a><!--
-->
<div class="menudiv"> <a href=""> <img
src='/images/menu.png' alt="" class='icons'/> </a>
</div>
</nav>
<form action="/routes/top100" method="POST" >
<div id="bodydiv"> <div id="leftdiv" > <script
type="text/javascript" >multidivs();</script></div>
<!--<script type="text/javascript" > multidivs();
</script>-->
<div id="rightdiv">
<div class="topdiv"><div class="innertop"> Top100
news</div> </div>
<div class="bottomdiv"><div class="innerbottom">
Highlights</div> </div>
</div></div>
</form>
</div>
</div>
</body>
</html>
the css
*
{
margin: 0px;
}
#admin
{
margin-top: 100px;
font-family:"Times New Roman";
font-size: 14px;
font-weight: bold;
margin-left: 400px;
line-height: 30px;
}
#login
{
margin-top: 100px;
font-family:"Times New Roman";
font-size: 14px;
font-weight: bold;
margin-left: 400px;
line-height: 20px;
}
body
{
background-color: white;
font-family: "Intro-Inline";
}
/*wrapper for the main container*/
#wrapper
{
margin: auto;
}
/*all divs under this container to be maintained in aspect*/
#container
{
position:absolute;
margin:0px auto;
}
/*wrapper for navigation divs and <a>*/
.wrapper1
{
width:780px;
height:55px;
margin-left: 15vh;
margin-top:30px;
text-align: left;
display: inline-block;
border-width: 4px;
border-style: solid;
border-color: orange;
position: static;
}
/*div for charts news music*/
.div1
{
width:380px;
height:50px;
font-size: 25px;
font-weight: lighter;
color: white;
float:left;
padding:0px 10px 0px 10px;
text-align: left;
border-width: 4px;
border-style: solid;
border-color: red;
}
/*div for facebook twitter instagram and search*/
.searchdiv
{
width:140px;
height:50px;
float:left;
white-space: nowrap;
display:inline-block;
border-style: solid;
border-color:yellow;
border-width:4px;
}
.menudiv
{
float:right;
padding-right: 50px;
margin-left: 30px;
}
.searchboxdiv
{
width:120px;
height:40px;
white-space:nowrap;
font-size:0px;
display:inline-block;
align-items: center;
float:left ;
padding:0px 30px 0px 0px;
border-width: 4px;
border-style: solid;
border-color: chartreuse;
}
.searchicon
{
width:20px;
margin:0 auto;
padding:0px;
}
/*div for menu*/
.divmenu
{
width:50px;
height:50px;
float:left;
margin-left: 0vh;
border-width: 4px;
border-style: solid;
border-color: green;
}
/*navigation*/
nav
{
position:fixed;
width:100%;
height:120px;
background-color: black;
text-align: right;
vertical-align: middle;
color:white;
z-index: 99;
}
nav a
{
color: white;
font-size: 18px;
text-decoration: none;
margin-left: 30px;
line-height: 150px;
}
/*div for logo*/
.logodiv
{
float:left;
color:white;
width: 80px;
margin-top:5vh;
margin-bottom:2vh;
font-weight: bolder;
font-size: 50px;
z-index:10;
position: fixed; /*newly added*/
left: 30vh; /*newly added*/
vertical-align: middle;
}
/*css for the icons on nav*/
.icons
{
width:20px;
height:20px;
}
/*css for the body*/
#bodydiv
{
margin:0 auto;
padding:0px;
}
#leftdiv
{
margin-top:30vh;
margin-left:30vh;
width:60vh;
height:75vh;
float:left;
}
#rightdiv
{
margin-top: 30vh;
float:right;
margin-left: 130vh;
position: fixed;
width:40vh;
height:75vh;
}
.topdiv
{
width:35vh;
height:35vh;
text-align: center;
vertical-align: middle;
background-color: gray;
float: right;
min-width: 25%;
}
.bottomdiv
{
line-height: 100px;
text-align: center;
width:35vh;
height:30vh;
margin-top:5vh;
background-color: black;
float: right;
min-width: 25%;
}
/*div to multiply*/
.innerdiv
{
align-content: center;
align-self: center;
width:80vh;
height:20vh;
background-color: gray;
border-width: 1px;
border-style: solid;
border-color: black;
}
.innertop
{
z-index: 99;
position: fixed;
width:34.5vh;
height:5vh;
background-color: black;
color: white;
font-stretch: extra-expanded;
font-size:25px;
line-height: 30px;
border-width: 1px;
border-style: solid;
border-color: black;
}
.innerbottom
{
z-index: 99;
position: fixed;
width:35vh;
height:5vh;
background-color:gray;
color: white;
font-stretch: extra-expanded;
font-size:28px;
line-height: 30px;
}
/*div working for contents of music*/
.contentdiv
{
width:20vh;
height:15vh;
margin-top:2vh;
display:inline-block;
float:left;
margin-left:1vh;
}
.arrowdiv
{
width:8vh;
height:19.8vh;
margin:0vh;
line-height: 2vh;
background-color:#131212;
display:inline-block;
float:left;
}
.ccontentdiv
{
width:20vh;
height:15vh;
line-height: 2vh;
margin-top:2vh;
margin-left: 1vh;
display:inline-block;
float:left;
}
.rcontentdiv
{
width:20vh;
height:15vh;
line-height: 2vh;
margin-top:2vh;
margin-left: 1vh;
background-color: beige;
text-align: center;
float:right;
display:inline-block;
float:left;
}
.hoverdiv
{
width:3vh;
height:5vh;
background-color: beige;
border-width: 2px;
border-style: solid;
border-color: red;
float:left;
}
.imgdiv
{
margin-top: 50px;
margin-left: 10px;
width:20px;
height:20px;
}
.leftsub
{
width:60px;
height:10px;
float: left;
border-width: 2px;
border-style: solid;
border-color: green;
}
#popup
{
}
.popup
{
width:135px;
height:40px;
float: right;
text-align: center;
display: inline-block;
vertical-align: middle;
margin-right: 50px;
line-height: 50%;
}
.col1
{
width:35px;
height:40px;
text-align: center;
display: inline-block;
background-color: black;
color:white;
border-right:1px solid white;
}
.col2
{
width:35px;
height:40px;
text-align: center;
display: inline-block;
background-color: black;
color:white;
}
.col3
{
width:35px;
height:40px;
text-align: center;
display: inline-block;
background-color: black;
color:white;
border-left: 1px solid white;
}
.img
{
max-width:180px;
}
the javascript code
/*define function for multidivs*/
var popup = document.createElement('div'); //div
popup.className ="popup";
var innercol =["col1","col2","col3","col4"];
for (j=0;j<3;j++){
var colone = document.createElement('div'); //div
var imgcol = document.getElementById("col4");
var colimg=document.createElement('img');
colimg.className= "col4";
colimg.src="images/blackarrow.png";
colone.className=innercol[j];
popup.appendChild(colone);
}
popup.appendChild(colimg);
function multidivs(){
var columnnames=
["arrowdiv","contentdiv","ccontentdiv","rcontentdiv"];//styles for innerdiv
var columnids=["arrow", "content", "ccontent", "rcontent"];
for(x=0; x<100;x++) {
var row= document.createElement('div');
row.className = "innerdiv";
for(i=0; i<4; i++){
var columndiv = document.createElement('div'); //div
columndiv.className =columnnames[i];
columndiv.id=columnids[i];
//attach arrow image
if(columndiv.className=== columnnames[0]){
attachImage(columndiv);
}
row.appendChild(columndiv);
}
document.getElementById('leftdiv').appendChild(row);
}
}
//attach arrow image onload and thn on mouseover and mouseout
function attachImage(columndiv){
var img =document.createElement('img');
img.className= "imgdiv";
img.src="images/orangearrow.png";
columndiv.appendChild(img);
domouseover(); /*this will change the arrow directions and also add popup*/
domouseout();/*take out popup*/
//onmouseover changes the arrow
function domouseover(){
columndiv.addEventListener("mouseover", function(){
img.src="images/whitearrow.png";
columndiv.appendChild(img);
columndiv.appendChild(popup);
}); }
function domouseout(){
columndiv.addEventListener("mouseout", function(){
img.src="images/orangearrow.png";
columndiv.removeChild(popup);
}); }
}
I have been working on a website for the past few weeks and i've run into a problem. I have a header centered then body called .content a few inches underneath. The problem is that they both scroll when I scroll and i'd rather that not be a thing.
<style type="text/css">
body{
margin:0px;
background:#000;
}
.header-cont {
width:100%;
position:fixed;
top:0px;
}
.header {
height:50px;
background:#000;
border:1px solid #fff;
width:960px;
margin:0px auto;
}
.content {
width:960px;
background: #000;
border: 1px solid #fff;
height: 4000px;
margin: 70px auto;
}
</style>
I think you want a fixed header with a scrolling body. Your CSS is right this far as it works.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
margin: 0px;
background: #000;
}
.header-cont {
width: 100%;
position: fixed;
top: 0px;
}
.header {
height: 50px;
background: #99ff00;
border: 1px solid #fff;
width: 960px;
margin: 0px auto;
}
.content {
width: 960px;
background: #33ff99;
border: 1px solid #fff;
height: 4000px;
margin: 70px auto;
}
</style>
</head>
<body>
<div class="header-cont">
<div class="header">Test</div>
</div>
<div class="content">test test test</div>
</body>
</html>
could it be that you got your .header-cont class at the wrong position?
Is it possible to make a div fixed on the location where it is drawn (it's standard 'static/relative' location)?
So I want div .one, .three and .four to be fixed in the location where it is drawn initially. So that it doesn't scroll. https://jsfiddle.net/sor8hntk/2/
Yes! https://jsfiddle.net/sor8hntk/7/
body {
margin-top:40px;
}
.one {
float:left;
background-color:green;
width:33%;
height:50px;
position: fixed;
}
.two {
float:left;
background-color:red;
width:33%;
height:500px;
left: 33%;
position: absolute;
}
.three {
float:left;
background-color:blue;
width:33%;
height:50px;
position: fixed;
left: 66%;
}
.four {
width:33%;
background-color:purple;
height:10px;
position: fixed;
}
.five {
width:100%;
background-color:pink;
margin-top: 10px;
}
.six {
width:100%;
height:10px;
background-color:yellow;
}
I would like to know how to make the rslides style transition with scale transition like the way clients div is changing after the clients link is clicked, here is the fiddle:
http://jsfiddle.net/vladicorp/ktqfq/1/
HTML CODE:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div id="container">
<div id="sections">
<div id="slider">
<div id="index_slider">
<ul class="rslides" >
<li><img src="http://www.emocool.com/work/slide2.jpg"></li>
<li><img src="http://www.emocool.com/work/slide2.jpg"></li>
</ul></div></div>
<script src="http://www.emocool.com/work/js/responsiveslides.min.js"></script>
<script>
$(function() {
$(".rslides").responsiveSlides({
speed: 1000,
maxwidth: 1200
});
});
</script>
<div id="menu">clients </div>
<div id="clients">gfgd</div>
<div id="services"></div>
<div id="portfolio"></div>
<div id="contacts"></div>
</div></div>
CSS CODE:
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background:#fff;
}
#media (min-width: 1200px) {
#container {
width:1200px;
height:100%;
margin: 0 auto;
z-index:40;
position:relative;
}}
#media (max-width: 1200px) {
#container {
width:100%;
height:100%;
margin: 0 auto;
z-index:40;
position:relative;
}}
.rslides {
position: relative;
list-style: none;
overflow: hidden;
width: 100%;
padding: 0;
margin: 0;
transition:all 1s ease;
}
.rslides li {
-webkit-backface-visibility: hidden;
position: absolute;
display: none;
width: 100%;
left: 0;
top: 0;
}
.rslides li:first-child {
position: relative;
display: block;
float: left;
}
.rslides img {
display: block;
height: auto;
float: left;
width: 100%;
border: 0;
}
#index_slider
{
width:100%;
position: relative;
float: left;
}
#slider {
margin: 0 auto;
}
a {
color:#fff;
}
/* menu styles */
#menu {
background:#181818;
color:#6e7166;
height:63px;
width:100%;
float:left;
position:relative;
}
/* sections */
#sections {
transition:all 1s ease;
}
#clients {
height:44px;
background:#333;
position:relative;
float:left;
}
#sections:target #clients {
height:90px;
background:#333;
transition:all 1s ease;
}
#sections:target .rslides {
height:0px;
transition:all 1s ease;
}
adding the height of the slides fixed it:
.rslides {
position: relative;
list-style: none;
overflow: hidden;
width: 100%;
padding: 0;
margin: 0;
transition:all 1s ease;
height:432px;
}
I am using this code for transition between my HTML pages and it works just fine:
http://www.onextrapixel.com/2010/02/23/how-to-use-jquery-to-make-slick-page-transitions/
But there is tiny issue that I cannot resolve and that is the blank white background shown between fade in and fade out transitions.
basically when the page is faded out and the code is trying to the load the next page, there is a slight delay (almost 1 seconds) and in that 1 second gap a blank white screen is shown. I know that I have to use some CSS and i added this to my HTML css code:
html{
font-size: 100%;
background-color:#000;
}
but when i do that, a black line is shown on the loaded page for some strange reason!
is there anyway to eliminate the 1 second delay or eliminate the black line on the page as i really don't know what is causing the issue?
Here is my Entire CSS code:
<style type="text/css" media="screen">
html{
font-size: 100%;
background-color:#000;
}
#maximage {
/* position:fixed !important;*/
}
#container{
overflow:hidden;
}
#footer{
color:#FFF;
text-align:left;
}
/*Set my logo in bottom left*/
#logo {
top:2%;
height:auto;
left:60%;
position:absolute;
width:38%;
z-index:1000;
}
#txt1 {
top:55%;
height:auto;
left:5%;
position:absolute;
width:55%;
z-index:1000;
color:#FFF;
font-size:100%;
font-family:Verdana, Geneva, sans-serif;
}
#txt2 {
top:59%;
height:auto;
left:5%;
width:55%;
z-index:1000;
color:#cf0226;
font-size:100%;
font-family:Verdana, Geneva, sans-serif;
position:absolute;
}
#txt3 {
top:63%;
height:auto;
left:5%;
width:55%;
z-index:1000;
color:#cf0226;
font-size:100%;
font-family:Verdana, Geneva, sans-serif;
position:absolute;
}
#txt4{
top:22%;
height:auto;
left:3%;
width:55%;
z-index:1000;
color:#cf0226;
font-size:100%;
font-family:Verdana, Geneva, sans-serif;
position:absolute;
margin-top:4%;
float:left;
}
#txt5{
height:auto;
width:100%;
z-index:1000;
color:#fff;
font-size:4%;
font-family:Verdana, Geneva, sans-serif;
position:absolute;
text-align:center;
}
#logo img {
width:69%;
}
body {
background-color:#000;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
font: 16px/1.8 sans-serif;
font-family:Verdana, Geneva, sans-serif;
}
#preloader{
position:absolute;
top: 45%;
left: 75%;
width:278px;
height: 105px;
margin-top: -45px;
margin-left: -210px;
z-index:1000;
}
#wait{
position:absolute;
top: 37%;
left: 45%;
width:300px;
height: 113px;
margin-top: -45px;
margin-left: -120px;
z-index:1000;
}
h1 {
text-align: left;
color:#fff;
font: 16px/1 "Verdana, Geneva, sans-serif";
display: inline-block;
width: 100%;
font-family:Verdana, Geneva, sans-serif;
}
#wrap {
position: relative;
width: 39%;
margin: 0 auto;
height:50%;
overflow: hidden;
}
#navigation{
margin-left:2%;
margin-top:2%;
}
#home{
width:10%;
margin-bottom:0.5%;
text-align:center;
font-size:12px;
}
#products{
width:10%;
margin-bottom:0.5%;
text-align:center;
}
a:link { text-decoration:none;} /* unvisited link */
a:visited { text-decoration:none;} /* visited link */
a:hover {
text-decoration:none;
} /* mouse over link */
a:active { text-decoration:none;} /* selected link */
#div101:hover{
border:thin;
border:#FFF;
background-color:#FFF;
color:#000;
background: rgba(FFF, 0, 0, 0.6);
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
padding: 20px;
border-radius: 15px;
/* HOVER ON */
-webkit-transition: border-radius 2s;
transition:all 2s ease-in-out;
perspective: 800px;
}
#div102:hover{
border:thin;
border:#FFF;
background-color:#FFF;
color:#000;
background: rgba(FFF, 0, 0, 0.6);
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
/* Landscape */
#media screen and (orientation:landscape) {
#logo{
top:2%;
height:auto;
left:60%;
position:absolute;
width:38%;
z-index:1000;
}
#preloader{
position:absolute;
top: 45%;
left: 55%;
width:278px;
height: 105px;
margin-top: -45px;
margin-left: -210px;
z-index:1000;
}
}
#media screen and (max-width: 600px) , screen and (max-height: 700px) {
#logo {
top:2%;
height:auto;
left:60%;
position:absolute;
width:38%;
z-index:1000;
}
}
#media screen and (max-width: 4000px) , screen and (max-height: 2000px) {
#logo {
top:2%;
height:auto;
left:60%;
position:absolute;
width:38%;
z-index:1000;
}
}
#media only screen and (min-width : 321px) {
#logo {
top:2%;
height:auto;
left:60%;
position:absolute;
width:38%;
z-index:1000;
}
}
#media only screen and (max-width : 321px) {
#footer {
font-size:10px;
text-align: left;
margin-left:10%;
margin-bottom:5%;
font-family:Verdana, Geneva, sans-serif;
width:42%;
}
#home{
width:35%;
margin-bottom:0.5%;
text-align:center;
font-size:12px;
border-radius:2px;
color:#fff;
border:#666;
border:2px solid;
}
#products{
width:35%;
margin-bottom:0.5%;
text-align:center;
font-size:12px;
border-radius:2px;
font-weight:bold;
color:#fff;
border:#666;
border:2px solid;
}
#vodka{
background-color:#C0C0C0;
width:35%;
margin-bottom:0.5%;
text-align:center;
font-size:12px;
border-radius:2px;
color:#fff;
border:#666;
border:2px solid;
}
#contact{
width:35%;
margin-bottom:0.5%;
text-align:center;
font-size:12px;
border-radius:2px;
color:#fff;
border:#666;
border:2px solid;
}
#div101:hover{
border:thin;
border:#FFF;
background-color:#FFF;
color:#000;
background: rgba(FFF, 0, 0, 0.6);
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
padding: 5px;
border-radius: 5px;
/* HOVER ON */
-webkit-transition: border-radius 1s;
transition:all 1s ease-in-out;
perspective: 800px;
}
}
#media only screen and (min-width : 321px) {
#footer {
font-size:13px;
text-align:left;
margin-left:5%;
margin-bottom:10%;
font-family:Verdana, Geneva, sans-serif;
width:30%;
}
#home{
width:145px;
margin-bottom:0.5%;
text-align:center;
font-size:12px;
border-radius:2px;
color:#fff;
border:#666;
border:2px solid;
}
#products{
width:145px;
margin-bottom:0.5%;
text-align:center;
font-size:12px;
border-radius:2px;
color:#fff;
border:#666;
border:2px solid;
}
#vodka{
background-color:#C0C0C0;
width:145px;
margin-bottom:0.5%;
text-align:center;
font-size:12px;
border-radius:2px;
color:#fff;
border:#666;
border:2px solid;
}
#contact{
width:145px;
margin-bottom:0.5%;
text-align:center;
font-size:12px;
border-radius:2px;
color:#fff;
border:#666;
border:2px solid;
}
.rotate{
cursor:pointer;
}
.rotate:hover
{
background-color:#da2128;
}
}
#keyframes filleffect
{
from {width:0;}
to {width: 400px;}
}
#-webkit-keyframes filleffect /* Safari and Chrome */
{
from {width:0;}
to {width: 400px;}
}
</style>
I suspect the reason you are getting a black line is because your html tag contains no content in between page transitions, so what you are seeing is in fact the dark background of a very narrow page. Try adding height: 100%; min-height: 100% to your html tag to force the page to be full height.