i made a slidermenu, but i failed some stuff. I dont know how to make it sticky. but the biggest problem is that it looks wheird when i add it to my main file. it works fine when i run the slidebar on a clear page but when i implemnt it into this file it looks crazy. the sysmbols r not infront of the text anymore.
can anyone tell me how i can add the slidermenu to this file right
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<script src="../js/jquery-3.5.1.min.js"></script>
<link rel="stylesheet" href="../css/stylesearch.css">
<link rel="icon" href="../images/logo.ico">
<link rel="stylesheet" href="../css/slidebar.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Search</title>
</head>
<body>
<div id="background-box" onclick="tag()"></div>
<div class="container" id="tag-box">
<div><a class="close-box" onclick="tag(), getValue()">×</a></div>
<br>Selectable Tags:</br>
</div>
<nav>
<script src="../js/slidebar.js"></script>
<img class="image-size" src="../images/logo.png">
<div class="bars"><i class="fa fa-bars fa-4x" id="scale" onclick="slidebar()"></i></div>
<a><img class="image-size" src="../images/menu.png" onclick=""></a>
<button id="btnabout" onclick="tag()">Tags</button>
<div class="search_box"><input type="text" name="box" id="search_text" placeholder="Search by name" class="form-control" /></div>
<div id="background-boxtitle" onclick="tag()"></div>
</nav>
<section class="sec1">
<div class="slidebar" id="slidebar"><?php include '../db/slidebar.php'; echo $slidebarbutton;?></div>
</section>
<section class="sec2">
<script src="../js/search.js"></script>
<div id="result"></div>
<div style="clear:both"></div>
</section>
<section class="sec3">
</section>
</body>
</html>
:root {
--slidermenu-color: #303030;
}
#slidebar{
position:absolute;
left:-15%;
width: 15%;
height: 100%;
transition: .5s;
background: var(--slidermenu-color);
overflow: scroll;
overflow-x: hidden;
}
#slidebar.active{
left: 0%;
}
#slidebarlock{
position: absolute;
left: -100%;
width: 85%;
height: 100%;
background: transparent;
transition: .5s;
}
#slidebarlock.active{
left: 15%;
}
.slidebarbutton {
background-color: #303030;
border: none;
color: white;
text-align: left;
text-decoration: none;
display: inline-block;
font-size: 30px;
cursor: pointer;
padding: 20px 0px;
width: 100%;
}
.slidebarbutton:hover{
background-color: #494949;
}
.bars:hover{
cursor: pointer;
}
.slidebarbutton div i{
padding-left:20px;
padding-right: 40px;
}
#slidebar::-webkit-scrollbar {
width: 5px;
}
#slidebar::-webkit-scrollbar-track {
background: var(--slidermenu-color);
}
#slidebar::-webkit-scrollbar-thumb {
background: transparent;
}
#slidebar:hover::-webkit-scrollbar-thumb{
background: black;
opacity: .8;
border-radius: 30px;
}
body{
margin: 0;
padding: 0;
font-family: sans-serif;
background: #222;;
}
header{
padding: 10px 100px;
box-sizing: border-box;
}
section{
width: 100%;
height: 100vh;
}
section.sec1{
width: 100%;
height: 50px;
}
div.gallery:hover {
border: 2px solid #404040;
background: #404040;
}
div.gallery {
margin: 5px;
border: 2px solid #222;
float: left;
width: 215px;
height: 400px;
color: #fff;
}
div.gallery img {
width: 100%;
height: 80%;
}
div.desc {
padding: 15px;
text-align: center;
}
section.sec3{
padding: 100px;
box-sizing: border-box;
height: auto;
}
section.sec3 h2{
font-size: 3em;
margin:0;
padding: 0;
color: #fff;
}
nav{
width: 100%;
height: 120px;
background: url(../images/bg1.jpg);
position: sticky;
top: 0px;
}
nav ul{
display: flex;
}
.image-size{
position: absolute;
top: 10%;
right: 1%;
height: 40px;
}
.search_box{
position: absolute;
top: 20%;
left: 50%;
transform: translate(-150%, -50%);
height: 20px;
}
.search_box input[type="text"]{
width: 300%;
padding: 20px;
padding-right: 60px;
box-sizing: border-box;
background: rgba(0,0,0,0.3);
border: 2px solid #fff;
border-radius: 10px;
font-size: 18px;
color: #fff;
outline: none;
}
.fa-search{
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 25px;
color: #fff;
font-size: 25px;
}
::-webkit-input-placeholder {
color: #fff;
}
::-moz-placeholder {
color: #fff;
}
:-ms-input-placeholder {
color: #fff;
}
#media screen and (max-width: 425px){
.search_box{
width: 95%;
}
}
#tag-box{
position: absolute;
top: -120%;
left: 20%;
width: 60%;
height: 500px;
background: #000;
transition: .5s;
opacity: 0.9;
border-radius: 30px;
}
#tag-box.active{
top: 25%;
}
.container{
max-width: 60%;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
}
.container div{
margin: 5px;
}
.container div a{
font-size: 2em;
margin:0;
padding: 0;
color: #fff;
cursor: pointer;
}
.container div a:hover{
color: #f00;
}
.container div label{
cursor: pointer;
}
.container div label input[type="checkbox"]{
display: none;
}
.container div label span{
position: relative;
display: inline-block;
background: #424242;
color: #fff;
padding: 5px 10px;
color: 555;
text-shadow: 0 1px 4px rgba(0,0,0,.5);
border-radius: 15px;
font-size: 12px;
transition: 0.5s;
user-select: none;
overflow: hidden;
border: 2px solid #FFA500;
}
.container div label span:before{
content: '';
position: absolute;
top: absolute;
top: 0;
left: 0;
width: 100%;
height: 50%
}
.container div label input[type="checkbox"]:checked ~ span{
background: #FFA500;
color: #fff;
border: 2px solid #FFA500;
box-shadow: 0 2px 15px #FFA500;
}
#background-box {
position: absolute;
top: -120%;
left: 0%;
width: 100%;
height: 100%;
background: #000;
opacity: 0;
}
#background-box.active{
top: 0%;
}
#background-boxtitle {
position: absolute;
top: -120%;
left: 0%;
width: 100%;
height: 100%;
background: #000;
opacity: 0;
}
#background-boxtitle.active{
top: 0%;
}
#scale{
transition: .5s;
color:white;
transform: translate(22px, 16px);
}
#scale.active{
transition: .5s;
transform: translate(22px, 16px) rotate(90deg);
}
Related
I have been working on a custom-styled checkbox, but for some reason, the square when the toggle is checked is getting lost.
Anyone could please point out what I did wrong with this checkbox?
https://jsfiddle.net/d67k5uyq/6/
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>switch toggle menu using html css only</title>
</head>
<body>
<div class="container">
<div>
<input type="checkbox" class="toggle" id="default">
<label for="default" data-checked="Checked" data-unchecked="Unchecked"></label>
</div>
</div>
</body>
</html>
I believe is something to do with the before and after where I'm forgetting to set some value.
CSS
body{
background: #485461;
font-family: sans-serif;
height: 100vh;
overflow: hidden;
}
.container{
margin: 0 auto;
text-align: center;
padding-top: 30px;
color: white;
}
input[type=checkbox].toggle{
display: none;
}
input[type=checkbox].toggle + label{
display: inline-block;
height: 60px;
width: 200px;
position: relative;
font-size:20px;
border: 4px solid white;
padding: 0;
margin: 0;
cursor: pointer;
box-sizing: border-box;
transition: all 0.3s ease;
}
input[type=checkbox].toggle + label:before{
position: absolute;
top: 4px;
height: 44px;
width: 44px;
content: '';
transition: all 0.3s ease;
z-index: 3;
}
input[type=checkbox].toggle + label:after{
width: 140px;
text-align: center;
z-index: 2;
text-transform: uppercase;
position: absolute;
top: 50%;
transform: translateY(-50%);
text-overflow: ellipsis;
overflow: hidden;
}
input[type=checkbox].toggle:not(:checked) + label{
background-color: transparent;
text-align: right;
}
input[type=checkbox].toggle:not(:checked) + label:after{
content: attr(data-unchecked);
right: 0;
left: auto;
opacity: 1;
color: white;
}
input[type=checkbox].toggle:not(:checked) + label:before{
left: 4px;
background-color: white;
}
input[type=checkbox].toggle:checked + label{
text-align: left;
border-color: yellow;
}
input[type=checkbox].toggle:checked + label:after{
content: attr(data-checked);
left: 4px;
right: auto;
opacity: 1;
color: white;
}
input[type=checkbox].toggle:checked + label:before{
left: 144px;
border-color: yellow;
}
When the input is unchecked then the before pseudo element is given a background color of white.
When it is checked then it is given a color to the border, but the border has not been given any width.
Assuming you want a yellow bordered square the this snippet not only sets the border color but also solid and 1px width.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>switch toggle menu using html css only</title>
<style>
body {
background: #485461;
font-family: sans-serif;
height: 100vh;
overflow: hidden;
}
.container {
margin: 0 auto;
text-align: center;
padding-top: 30px;
color: white;
}
input[type=checkbox].toggle {
display: none;
}
input[type=checkbox].toggle+label {
display: inline-block;
height: 60px;
width: 200px;
position: relative;
font-size: 20px;
border: 4px solid white;
padding: 0;
margin: 0;
cursor: pointer;
box-sizing: border-box;
transition: all 0.3s ease;
}
input[type=checkbox].toggle+label::before {
position: absolute;
top: 4px;
height: 44px;
width: 44px;
content: '';
transition: all 0.3s ease;
z-index: 3;
}
input[type=checkbox].toggle+label::after {
width: 140px;
text-align: center;
z-index: 2;
text-transform: uppercase;
position: absolute;
top: 50%;
transform: translateY(-50%);
text-overflow: ellipsis;
overflow: hidden;
content: 'A';
}
input[type=checkbox].toggle:not(:checked)+label {
background-color: transparent;
text-align: right;
}
input[type=checkbox].toggle:not(:checked)+label::after {
content: attr(data-unchecked);
right: 0;
left: auto;
opacity: 1;
color: white;
}
input[type=checkbox].toggle:not(:checked)+label::before {
left: 4px;
background-color: white;
}
input[type=checkbox].toggle:checked+label {
text-align: left;
border-color: yellow;
}
input[type=checkbox].toggle:checked+label::after {
content: attr(data-checked);
left: 4px;
right: auto;
opacity: 0.5;
color: white;
}
input[type=checkbox].toggle:checked+label::before {
left: 144px;
border-color: yellow;
border-style: solid;
border-width: 1px;
}
</style>
</head>
<body>
<div class="container">
<div>
<input type="checkbox" class="toggle" id="default">
<label for="default" data-checked="Checked" data-unchecked="Unchecked"></label>
</div>
</div>
</body>
</html>
When I hover over search icon, div with class "forma" expands and pushes the list with links to the left. How can I prevent this? My guess is something to do with position, display or width, but I am not sure. This is probably not a complicated task, but I am not very good with CSS.
Here is HTML:
<nav>
<div class=logo>
<img src="images/logoicon.png" alt="sunce">
<img src="images/logotext.png" alt="outdoors" id="logotext"></a>
</div>
<ul class="nav-ul">
<li>Destinations</li>
<li>Travel style</li>
<li>Trabel deals</li>
<li>Gear</li>
</ul>
<div class="forma">
<input type="search" placeholder="search" class="pretraga">
<i class="fa fa-search"></i>
</div>
</nav>
Here is CSS:
nav {
background-color: steelblue;
display: flex;
align-items: center;
justify-content: space-between;
padding: 15px;
position: sticky;
top: 0;
z-index: 2;
}
.nav-ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
/* background-color: #333; */
}
.nav-ul li {
display: inline;
float: left;
}
.nav-ul li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.nav-ul li:last-child {
float: right;
}
.nav-ul li a:hover:not(.active) {
background-color: #111;
}
.forma {
position: relative;
top: 20px;
left: 20px;
transform: translate(0, -50%);
transition: all 1s;
width: 50px;
height: 50px;
background: white;
box-sizing: border-box;
border-radius: 25px;
border: 4px solid white;
padding: 5px;
}
input {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 40px;
line-height: 30px;
outline: 0;
border: 0;
display: none;
font-size: 1em;
border-radius: 20px;
padding: 0 20px;
}
.fa {
box-sizing: border-box;
padding: 10px;
width: 40px;
height: 40px;
position: absolute;
top: 0;
right: 0;
border-radius: 50%;
color: black;
text-align: center;
font-size: 1.2em;
transition: all 1s;
}
.forma:hover {
width: 200px;
cursor: pointer;
}
.forma:hover input {
display: block;
}
Try below CSS here I have changed little bit code
Your Code
.forma {
position: relative;
top: 20px;
left: 20px;
transform: translate(0, -50%);
transition: all 1s;
width: 50px;
height: 50px;
background: white;
box-sizing: border-box;
border-radius: 25px;
border: 4px solid white;
padding: 5px;
}
input {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 40px;
line-height: 30px;
outline: 0;
border: 0;
display: none;
font-size: 1em;
border-radius: 20px;
padding: 0 20px;
}
.forma:hover {
width: 200px;
cursor: pointer;
}
.forma:hover input {
display: block;
}
Updated Code
Add this link in your HTML page for icon
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
.forma {
height: 50px;
width: 250px;
position: relative;
top: 20px;
left: 20px;
transform: translate(0, -50%);
}
input {
position: absolute;
right: 21px;
width: 90px;
max-width: 350px;
transition: all 1s;
height: 50px;
background: white;
box-sizing: border-box;
border-radius: 25px;
border: 4px solid white;
padding: 5px;
outline: 0;
}
input:focus{
outline: 0;
}
input:hover{
width: 350px;
}
You can check Live preview
nav {
background-color: steelblue;
display: flex;
align-items: center;
justify-content: space-between;
padding: 15px;
position: sticky;
top: 0;
z-index: 2;
}
.nav-ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
/* background-color: #333; */
}
.nav-ul li {
display: inline;
float: left;
}
.nav-ul li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.nav-ul li:last-child {
float: right;
}
.nav-ul li a:hover:not(.active) {
background-color: #111;
}
.forma {
height: 50px;
width: 250px;
position: relative;
top: 20px;
left: 20px;
transform: translate(0, -50%);
}
input {
position: absolute;
right: 21px;
width: 90px;
max-width: 350px;
transition: all 1s;
height: 50px;
background: white;
box-sizing: border-box;
border-radius: 25px;
border: 4px solid white;
padding: 5px;
outline: 0;
}
.fa {
box-sizing: border-box;
padding: 10px;
width: 40px;
height: 40px;
position: absolute;
top: 5px;
right: 20px;
border-radius: 50%;
color: black;
text-align: center;
font-size: 1.2em;
transition: all 1s;
}
input:focus{
outline: 0;
}
input:hover{
width: 350px;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<nav>
<div class=logo>
<img src="images/logoicon.png" alt="sunce">
<img src="images/logotext.png" alt="outdoors" id="logotext">
</div>
<ul class="nav-ul">
<li>Destinations</li>
<li>Travel style</li>
<li>Trabel deals</li>
<li>Gear</li>
</ul>
<div class="forma">
<input type="search" placeholder="search" class="pretraga">
<i class="fa fa-search"></i>
</div>
</nav>
you can check Here
NOTE : Better view on desktop you have to write code for mobile also with #media rule
Hi I have created the following search bar:
<div class="container-fluid">
<div class="search-bar">
<form class="searchBar">
<div class="row" >
<div class="allElements">
<div class="input-group" >
<span style="color:black" class="input-group-addon">
<select id="selection" onchange="getValues(this.value)">
<option>Choose Category</option>
<option>All</option>
<option>Notary</option>
<option>Deed Date</option>
<option>Person</option>
<option>Place</option>
<option>Register Reference</option>
<option>Subject</option>
</select>
</span>
<div class="autocomplete" style ="width:400px">
<input id="search" type="text" class="form-control" name="search" placeholder="Choose a category" style ="width:400px" disabled=true>
</div>
<span class="input-group-addon" style="color:black"> <button type="button" onclick="doSparql(this.value)">Search</button></span>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
Where on firefox is rendered perfectly while on the chrome, the search button is on the other side of the screen not grouped with the rest of the search bar as shown in the picture below. Any idea why this is happening and how I can solve it pls?
The css is:
-moz-webkit-margin:0px
html, body {
max-width: 100%;
overflow-x: hidden;
}
.footer-div {
display: inline;
height: 100%;
}
.panel-footer
{
position: fixed;
bottom: 0;
width: 100%;
padding: 0px 0px;
background-color: rgba(70,131,172,1);
height: 10%;
max-height: 50px;
border-color: #fff;
border-top: 0px solid #ddd;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
z-index: 100;
}
.container-midvalign
{
height:100%;
padding: 0 0;
vertical-align: middle;
display: inline-table;
text-align: left;
}
.contents-midvalign
{
font-weight: bold;
color: #FFFFFF;
font-size: 14px;
vertical-align:middle;
display: table-cell;
text-align: left;
position: relative
}
.contents-midvalign:hover
{
color: #fff;
text-decoration: underline;
}
.footer-img {
background: url(../media/icons/MALTA_COAT_OF_ARMS_WHITE.png) no-repeat;
height: 100%;
max-height: 50px;
background-size: contain;
position: relative;
padding: 0px 0px;
margin-left: 25px;
margin-right: 10px;
margin-top: 0px;
margin-bottom: 0px;
vertical-align: middle;
background-color: transparent;
border: 0px solid transparent;
border-radius: 0px;
}
.footer-div
{
display: inline;
height: 100%;
}
.footer-icon
{
font-size: 24px;
padding-right: 25px;
}
.footer-icon:hover
{
text-decoration: none;
}
.bg-gemma
{
background-color: rgba(70,131,172,1) !important;
}
.bg-transparent
{
background-color: transparent !important;
border-color: transparent !important;
box-shadow: 0 0 0 0 rgba(108,117,125,0) !important;
}
.navbar
{
/* height: 10%;*/
min-height: 50px;
/* overflow: hidden;*/
margin: 0 auto;
padding: 0px;
position: fixed;
border: 0px solid transparent;
width: 100%;
background-color: rgba(70,131,172,1);
}
.fixed-top {
position: fixed;
top: 0;
right: 0;
left: 0;
z-index: 1030;
}
h2{
font-weight: bold;
color: black;
font-size: 40px;
position: relative;
}
#headerdiv {
margin-top: 10px;
margin-bottom: 10px;
}
#fullpagecont
{
padding-left: 25px;
padding-right: 25px;
}
#pheader
{
text-align: center;
}
html body .container-fluid.body-content {
position: absolute;
top: 50px;
bottom: 50px;
right: 0;
left: 0;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
select {
background: transparent;
border: none;
padding: 6px 12px;
}
.input-group-addon {
padding: 0!important;
}
#results{
margin-left: 120px;
margin-right: 120px;
position: relative;
}
.add_data{
margin-left: 150px;
width:20%;
margin-top:5px;
text-align:center;
}
.search-bar{
position: absolute;
left: 35%;
top:130px;
}
.autocomplete {
/*the container must be positioned relative:*/
position: relative;
}
.autocomplete-items {
position: absolute;
text-align: left;
border: 1px solid #d4d4d4;
border-bottom: none;
border-top: none;
z-index: 99;
/*position the autocomplete items to be the same width as the container:*/
top: 100%;
left: 0;
right: 0;
}
button {
padding: 6px 12px;
background: transparent;
border: none;
}
.autocomplete-items div {
padding:10px;
cursor: pointer;
background-color: #fff;
border-bottom: 1px solid #d4d4d4;
}
.autocomplete-items div:hover {
/*when hovering an item:*/
background-color: #e9e9e9;
}
.autocomplete-active {
/*when navigating through the items using the arrow keys:*/
background-color: DodgerBlue !important;
color: #ffffff;
}
#div_pagination{
width:100%;
margin-top:5px;
text-align:center;
}
#div_pagination_all{
width:100%;
margin-top:5px;
text-align:center;
}
#pageNo{
text-align:center;
margin-top: 20px;
}
#main-container{
margin-top: 200px;
width:90%;
margin-left: 75px;
}
#details{
margin-top: 25px;
margin-left: 25px;
}
.deedList{
margin-left: 15px;
}
#media (max-width: 575px)
{
.footer-icon
{
padding-right: 10px;
}
.footer-img
{
margin-left: 10px;
}
}
I saw this in chrome:
and this in FF:
To get on the line I added this:
.autocomplete {
position: relative;
display: inline-block;
}
I've created a page with HTML and CSS, the problem is horizontal scrollbar is showing up although as far as I've checked there is no element with width over 100% or inappropriate padding or margin.
here is the complete HTML and CSS code: https://jsfiddle.net/m11nsbag/9/
#keyframes modalAnimation {
from {
top: 90vh;
}
to {
top: 95vh;
background-color: darkcyan;
box-shadow: 5px 5px 25px #747474;
}
}
#headerImage {
width: 100vw;
height: 100vh;
overflow: hidden;
position: fixed;
padding: 0px;
margin: 0px;
z-index: -10000000;
}
#main-nav>li {
width: 9vw;
height: 7vh;
color: #ffffff;
float: right;
text-align: center;
line-height: 7vh;
margin: 0px;
font-size: medium;
z-index: 100;
list-style-type: none;
transition: 0.25s;
}
#main-nav {
background-color: rgba(245, 255, 249, 0.5);
width: 100%;
height: 7vh;
position: fixed;
z-index: 100;
float: right;
transition: all 0.25s;
}
/*
#main-nav:hover {
background-color: rgba(0,129,129,1);
} */
#main-nav>li:hover {
background-color: rgb(232, 255, 92);
}
#wall {
background-color: #d2d2d2;
width: 100%;
height: 100vh;
z-index: -10;
}
* {
margin: 0px;
padding: 0px;
}
#main-nav>li>a {
color: #000;
text-decoration: none;
}
.modalLayout {
opacity: 0;
}
.modalLayout:target {
position: fixed;
background-color: rgba(0, 0, 0, 0.5);
width: 100vw;
height: 100vh;
opacity: 1;
transition: all 0.4s;
z-index: 200;
}
.modal {
text-align: center;
padding: 6% 1% 1.7% 1%;
width: 30vw;
height: 20vh;
margin: 30vh 35vw;
background-color: crimson;
position: fixed;
transition: all 0.4s;
z-index: 10;
border-radius: 10px;
box-shadow: 2px 2px #484848;
}
.closeBtn {
font-size: 35px;
position: absolute;
top: 25vh;
right: 33vw;
float: right;
color: #fff;
font-weight: bold;
text-decoration: none;
z-index: 1000;
cursor: pointer;
margin-right: 5px;
transition: all 0.4s;
}
.mainPageButton>div {
display: none;
}
.mainPageButton:hover>div {
display: block;
transition: all 0.25s;
}
.mainPageButton>div>div {
width: 15vw;
height: 8vh;
background-color: #d2d2d2;
color: #000;
font-size: medium;
float: top;
border-bottom: black 1px solid;
list-style-type: none;
position: relative;
line-height: 8vh;
}
.mainPageButton>div>div>a {
text-decoration: none;
color: #fff;
font-size: medium;
text-align: center;
list-style-type: none;
background-color: #d2d2d2;
padding-right: 2px;
}
.mainMenu {
position: absolute;
top: 88vh;
z-index: 0;
margin-right: 1vw;
}
.mainMenu>div {
width: 15vw;
height: 10vh;
border-bottom: black solid 2px;
margin-bottom: 3vh;
background-color: white;
transition: all .3s;
text-align: center;
line-height: 10vh;
}
.mainMenu>div:hover {
width: 17vw;
height: 12vh;
background-color: #ffcfce;
}
.mainMenu>div>a {
font-size: x-large;
color: #000;
cursor: pointer;
text-decoration: none;
}
.about {
width: 20vw;
height: 40vh;
background-color: #94ffca;
border-radius: 5px;
position: absolute;
top: 88vh;
left: 0;
float: left;
font-size: larger;
padding: 1vw;
transition: all 0.3s;
margin-left: 4px;
overflow: auto;
}
.about:hover {
transform: translate(5px);
background-color: rgba(148, 255, 202, 0.5);
}
#modalcontainer {
background-color: rgba(256, 256, 256, 0.75);
top: 80vh;
position: absolute;
width: 100vw;
height: 200%;
z-index: -10;
border-top-left-radius: 50px;
border-top-right-radius: 50px;
}
#modalswall {
width: 50vw;
height: 150vh;
background-color: #0d213c;
position: absolute;
top: 85vh;
right: 20vw;
z-index: -5;
border-radius: 8px;
box-shadow: 20px 20px 25px grey;
filter: opacity(90%);
}
.bodyModals {
background-color: #acd7ff;
top: 90vh;
width: 35vw;
height: 25vh;
right: 28vw;
position: relative;
z-index: 5;
border-radius: 10px;
transition: all .5s;
margin-bottom: 10vh;
}
.bodyModals:hover {
-webkit-animation: modalAnimation;
-webkit-animation-duration: 3s;
-webkit-animation-direction: alternate;
-webkit-animation-iteration-count: infinite;
}
.bodyModals>p {
padding: 1vw;
font-size: large;
}
#wrapper {
margin-bottom: 170vh;
position: relative;
}
#footer {
position: relative;
width: 100vw;
min-height: 25vh;
bottom: 0;
background-color: #0d213c;
}
#footer>p {
font-size: large;
text-align: center;
color: #fff;
padding: 10px 0px;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
I think there maybe a padding or margin which I'm overlooking but I've been looking at it for several hours and tried almost anything.
thanks for your sincere help.
Update: I changed all the 100vw with 100% and the problem was fixed.
Vertical scrollbars are included in vw units.
So when there's a vertical scrollbar, 100vw is wider than the viewport (without scrollbars).
One suggestion is to change #modalcontainer to width:100% instead of width:100vw.
#keyframes modalAnimation {
from {
top: 90vh;
}
to {
top: 95vh;
background-color: darkcyan;
box-shadow: 5px 5px 25px #747474;
}
}
#headerImage {
width: 100vw;
height: 100vh;
overflow: hidden;
position: fixed;
padding: 0px;
margin: 0px;
z-index: -10000000;
}
#main-nav>li {
width: 9vw;
height: 7vh;
color: #ffffff;
float: right;
text-align: center;
line-height: 7vh;
margin: 0px;
font-size: medium;
z-index: 100;
list-style-type: none;
transition: 0.25s;
}
#main-nav {
background-color: rgba(245, 255, 249, 0.5);
width: 50%;
height: 7vh;
position: fixed;
z-index: 100;
float: right;
transition: all 0.25s;
}
/*
#main-nav:hover {
background-color: rgba(0,129,129,1);
} */
#main-nav>li:hover {
background-color: rgb(232, 255, 92);
}
#wall {
background-color: #d2d2d2;
width: 50%;
height: 100vh;
z-index: -10;
}
* {
margin: 0px;
padding: 0px;
}
#main-nav>li>a {
color: #000;
text-decoration: none;
}
.modalLayout {
opacity: 0;
}
.modalLayout:target {
position: fixed;
background-color: rgba(0, 0, 0, 0.5);
width: 100vw;
height: 100vh;
opacity: 1;
transition: all 0.4s;
z-index: 200;
}
.modal {
text-align: center;
padding: 6% 1% 1.7% 1%;
width: 30vw;
height: 20vh;
margin: 30vh 35vw;
background-color: crimson;
position: fixed;
transition: all 0.4s;
z-index: 10;
border-radius: 10px;
box-shadow: 2px 2px #484848;
}
.closeBtn {
font-size: 35px;
position: absolute;
top: 25vh;
right: 33vw;
float: right;
color: #fff;
font-weight: bold;
text-decoration: none;
z-index: 1000;
cursor: pointer;
margin-right: 5px;
transition: all 0.4s;
}
.mainPageButton>div {
display: none;
}
.mainPageButton:hover>div {
display: block;
transition: all 0.25s;
}
.mainPageButton>div>div {
width: 15vw;
height: 8vh;
background-color: #d2d2d2;
color: #000;
font-size: medium;
float: top;
border-bottom: black 1px solid;
list-style-type: none;
position: relative;
line-height: 8vh;
}
.mainPageButton>div>div>a {
text-decoration: none;
color: #fff;
font-size: medium;
text-align: center;
list-style-type: none;
background-color: #d2d2d2;
padding-right: 2px;
}
.mainMenu {
position: absolute;
top: 88vh;
z-index: 0;
margin-right: 1vw;
}
.mainMenu>div {
width: 15vw;
height: 10vh;
border-bottom: black solid 2px;
margin-bottom: 3vh;
background-color: white;
transition: all .3s;
text-align: center;
line-height: 10vh;
}
.mainMenu>div:hover {
width: 17vw;
height: 12vh;
background-color: #ffcfce;
}
.mainMenu>div>a {
font-size: x-large;
color: #000;
cursor: pointer;
text-decoration: none;
}
.about {
width: 20vw;
height: 40vh;
background-color: #94ffca;
border-radius: 5px;
position: absolute;
top: 88vh;
left: 0;
float: left;
font-size: larger;
padding: 1vw;
transition: all 0.3s;
margin-left: 4px;
overflow: auto;
}
.about:hover {
transform: translate(5px);
background-color: rgba(148, 255, 202, 0.5);
}
#modalcontainer {
background-color: rgba(256, 256, 256, 0.75);
top: 80vh;
position: absolute;
width: 100%;
height: 200%;
z-index: -10;
border-top-left-radius: 50px;
border-top-right-radius: 50px;
}
#modalswall {
width: 50vw;
height: 150vh;
background-color: #0d213c;
position: absolute;
top: 85vh;
right: 20vw;
z-index: -5;
border-radius: 8px;
box-shadow: 20px 20px 25px grey;
filter: opacity(90%);
}
.bodyModals {
background-color: #acd7ff;
top: 90vh;
width: 35vw;
height: 25vh;
right: 28vw;
position: relative;
z-index: 5;
border-radius: 10px;
transition: all .5s;
margin-bottom: 10vh;
}
.bodyModals:hover {
-webkit-animation: modalAnimation;
-webkit-animation-duration: 3s;
-webkit-animation-direction: alternate;
-webkit-animation-iteration-count: infinite;
}
.bodyModals>p {
padding: 1vw;
font-size: large;
}
#wrapper {
margin-bottom: 170vh;
position: relative;
}
#footer {
position: relative;
width: 50vw;
min-height: 25vh;
bottom: 0;
background-color: #0d213c;
}
#footer>p {
font-size: large;
text-align: center;
color: #fff;
padding: 10px 0px;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
<ul id="main-nav">
<li class="mainPageButton">
<div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
</div>
</li>
<li>
</li>
<li>
</li>
</ul>
<img src="http://ghmahdi.ir/wp-content/uploads/header.jpg" id="headerImage">
<div id="wrapper">
<div id="aboutMe" class="modalLayout">
<div>
×
</div>
<div class="modal"></div>
</div>
<div id="contactUS" class="modalLayout">
<div>
×
</div>
<div class="modal"></div>
</div>
<div class="mainMenu">
<div> </div>
<div></div>
<div></div>
<div></div>
</div>
<div class="about"></div>
<div id="modalswall"></div>
<div class="bodyModals"> </div>
<div class="bodyModals"></div>
<div class="bodyModals"></div>
<div id="modalcontainer"> </div>
</div>
<div id="footer">
</div>
For interest, also see:
Bug 133271
viewport units in case of 'overflow:auto'
Ever since I added "position absoulte" to my div ".container" in my code below, my CSS animate code zooms in from the bottom then hiccups and positions itself to the center.
How can I make my animate zoom just zoom in right to the center without this hiccup where it goes down first then a second later it automatically moves to the center?
If I remove the position absolute from the .container div the animate zoom works just fine but it's not centered anymore vertically (just horizontally). The reason I used position absolute and left 0 and right 0 was to center it both ways.
Here is my code:
* {
box-sizing: border-box;
}
html,
body {
height: 100%;
margin: 0 auto;
color: white;
text-align: center;
font-family: 'Lato', serif;
background: linear-gradient(white 70px, #007580 70px);
-webkit-text-size-adjust: none;
}
header,
footer {
background: #007580
}
body,
main {
display: flex;
flex: 1;
}
body {
flex-flow: column;
}
header {
min-height: 35px;
}
footer {
min-height: 35px;
}
section {
margin: auto;
width: 95%;
height: 100%;
color: black;
background-color: white;
}
.categories {
position: relative;
top: 3px;
color: white;
font-size: 16px;
font-weight: 300;
word-spacing: 26px;
padding-bottom: 2px;
}
.categories a {
text-decoration: none;
color: inherit;
}
.legal {
position: absolute;
bottom: 0;
width: 100%;
height: 30px;
font-weight: 300;
word-spacing: 15px;
}
.legal a {
text-decoration: none;
font-size: 14px;
color: white;
}
.quote {
position: relative;
margin: auto;
font-size: 20px;
font-weight: 300;
bottom: 80px;
height: 0;
}
.searchcontainer {
position: relative;
height: 0;
bottom: 43px;
margin: auto;
width: 380px;
;
}
input[type=text] {
width: 100%;
display: inline-block;
border: 2px solid #ddd;
border-radius: 4px;
padding: 6px 0 7px 40px;
background-image: url('https://image.ibb.co/j9esac/searchicon.png');
background-position: 10px 6px;
background-repeat: no-repeat;
font-size: 16px;
background-color: white;
}
.innercircle {
height: 89px;
width: 89px;
border-radius: 50%;
background-color: white;
margin: auto;
position: relative;
bottom: 93px;
}
.outercircle {
height: 120px;
width: 120px;
border-radius: 50%;
background-color: #007580;
margin: auto;
position: relative;
top: 11px;
}
.D {
font-size: 100px;
font-weight: 100;
position: relative;
bottom: 196px;
right: 3px;
margin: auto;
color: #007580;
height: 0;
font-family: 'Amiri', serif;
letter-spacing: -10px;
}
.D a {
text-decoration: none;
color: inherit;
}
.R {
font-size: 55px;
font-weight: 100;
position: relative;
bottom: 173px;
right: 2px;
margin: auto;
color: #007580;
height: 0;
font-family: 'Amiri', serif;
letter-spacing: -10px;
}
.R a {
text-decoration: none;
color: inherit;
}
.ICONwhatsnew {
position: relative;
margin: auto;
bottom: 194px;
right: 191px;
width: 0;
display: block;
height: 0;
}
.ICONwhatsnew a {
text-decoration: none;
color: inherit;
}
.ICONworldlanguages {
position: relative;
margin: auto;
bottom: 190px;
right: 116px;
width: 0;
display: block;
height: 0;
}
.ICONworldlanguages a {
text-decoration: none;
color: inherit;
}
.ICONsignin {
position: relative;
margin: auto;
bottom: 192px;
left: 83px;
width: 0;
display: block;
height: 0;
}
.ICONsignin a {
text-decoration: none;
color: inherit;
}
.ICONcart {
position: relative;
margin: auto;
bottom: 192px;
left: 149px;
width: 0;
display: block;
height: 0;
}
.ICONcart a {
text-decoration: none;
color: inherit;
}
.container {
font-size: 17px;
font-weight: 400;
color: #007580;
top: 50%;
left: 0;
right: 0;
position: absolute;
}
input[type=unams] {
width: 80%;
padding: 12px 45px;
margin: 22px 0 0 0;
border: 1px solid #007580;
box-sizing: border-box;
border-radius: 0px;
-webkit-appearance: none;
font-size: 17px;
background-image: url('https://image.ibb.co/fZHHnc/signin.png');
background-position: 10px 8px;
background-repeat: no-repeat;
background-size: 25px;
}
input[type=password] {
width: 80%;
padding: 12px 45px;
/* first is how big you want the input box 2nd is positioning of word password */
margin: 22px 0 15px 0;
border: 1px solid #007580;
box-sizing: border-box;
border-radius: 0px;
-webkit-appearance: none;
font-size: 17px;
background-image: url('https://image.ibb.co/jC7gfx/lock.png');
background-position: 10px 8px;
background-repeat: no-repeat;
background-size: 25px;
}
.buttonlg {
background-color: #007580;
border: none;
color: white;
width: 25%;
font-size: 17px;
height: 38px;
margin: auto;
text-align: center;
}
.outerform {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.innerform {
width: 90%;
height: 90%;
}
.box {
background-color: white;
border: 1px solid #007580;
height: 100%;
}
.animate {
-webkit-animation: animatezoom 0.6s;
animation: animatezoom 0.6s
}
#-webkit-keyframes animatezoom {
from {
-webkit-transform: scale(0)
}
to {
-webkit-transform: scale(1)
}
}
::-webkit-input-placeholder {
/* WebKit browsers */
color: lightgrey;
opacity: 1 !important;
}
.circlelogo1 {
background: #007580;
border-radius: 50%;
height: 30px;
width: 30px;
position: relative;
margin: auto;
/*
Child elements with absolute positioning will be
positioned relative to this div
*/
}
.circlelogo2 {
position: absolute;
background: white;
border-radius: 50%;
height: 18px;
width: 18px;
/*
Put top edge and left edge in the center
*/
top: 50%;
left: 50%;
margin: -9px 0px 0px -9px;
/*
Offset the position correctly with
minus half of the width and minus half of the height
*/
}
<div class="outercircle"></div>
<div class="innercircle"></div>
<div class="D">
D
</div>
<div class="R">
R
</div>
<div class="quote">
You will always be your greatest investment.
</div>
<div class="searchcontainer">
<form>
<input name="search" placeholder="Search all resources..." type="text">
</form>
</div>
<div class="ICONsignin">
<img height="37px" src="https://svgshare.com/i/5SR.svg">
</div>
<div class="ICONcart">
<img height="39px" src="https://svgshare.com/i/5SE.svg">
</div>
<div class="ICONworldlanguages">
<img height="34px" src="https://svgshare.com/i/5XW.svg">
</div>
<div class="ICONwhatsnew">
<img height="43px" src="https://svgshare.com/i/5aX.svg">
</div>
<header>
<div class="categories">
<b>Categories</b> Newest Popular Music Youth
</div>
</header>
<main>
<section>
<div class="outerform">
<div class="innerform">
<form class="animate box">
<div class="container">
<div class="circlelogo1">
<div class="circlelogo2">
</div>
</div>
<input type="unams" placeholder="Username" name="uname" required>
<input type="password" placeholder="Password" name="psw" required><br>
<button class="buttonlg" type="submit">Log In</button>
</div>
</form>
</div>
</div>
</section>
</main>
<footer>
<div class="legal">
Contact Privacy Terms Copyright About
</div>
</footer>
You are using position:absolute and the parent element is not set with relative so the form is not relative to the scaled container which is creating this issue. You need to set position:relative to the parent container and then adjust the centering:
.box {
...
position:relative; /*Added this*/
}
.container {
...
transform:translate(0,-50%); /*Added this*/
top: 50%;
...
}
Here is the full code:
* {
box-sizing: border-box;
}
html,
body {
height: 100%;
margin: 0 auto;
color: white;
text-align: center;
font-family: 'Lato', serif;
background: linear-gradient(white 70px, #007580 70px);
-webkit-text-size-adjust: none;
}
header,
footer {
background: #007580
}
body,
main {
display: flex;
flex: 1;
}
body {
flex-flow: column;
}
header {
min-height: 35px;
}
footer {
min-height: 35px;
}
section {
margin: auto;
width: 95%;
height: 100%;
color: black;
background-color: white;
}
.categories {
position: relative;
top: 3px;
color: white;
font-size: 16px;
font-weight: 300;
word-spacing: 26px;
padding-bottom: 2px;
}
.categories a {
text-decoration: none;
color: inherit;
}
.legal {
position: absolute;
bottom: 0;
width: 100%;
height: 30px;
font-weight: 300;
word-spacing: 15px;
}
.legal a {
text-decoration: none;
font-size: 14px;
color: white;
}
.quote {
position: relative;
margin: auto;
font-size: 20px;
font-weight: 300;
bottom: 80px;
height: 0;
}
.searchcontainer {
position: relative;
height: 0;
bottom: 43px;
margin: auto;
width: 380px;
;
}
input[type=text] {
width: 100%;
display: inline-block;
border: 2px solid #ddd;
border-radius: 4px;
padding: 6px 0 7px 40px;
background-image: url('https://image.ibb.co/j9esac/searchicon.png');
background-position: 10px 6px;
background-repeat: no-repeat;
font-size: 16px;
background-color: white;
}
.innercircle {
height: 89px;
width: 89px;
border-radius: 50%;
background-color: white;
margin: auto;
position: relative;
bottom: 93px;
}
.outercircle {
height: 120px;
width: 120px;
border-radius: 50%;
background-color: #007580;
margin: auto;
position: relative;
top: 11px;
}
.D {
font-size: 100px;
font-weight: 100;
position: relative;
bottom: 196px;
right: 3px;
margin: auto;
color: #007580;
height: 0;
font-family: 'Amiri', serif;
letter-spacing: -10px;
}
.D a {
text-decoration: none;
color: inherit;
}
.R {
font-size: 55px;
font-weight: 100;
position: relative;
bottom: 173px;
right: 2px;
margin: auto;
color: #007580;
height: 0;
font-family: 'Amiri', serif;
letter-spacing: -10px;
}
.R a {
text-decoration: none;
color: inherit;
}
.ICONwhatsnew {
position: relative;
margin: auto;
bottom: 194px;
right: 191px;
width: 0;
display: block;
height: 0;
}
.ICONwhatsnew a {
text-decoration: none;
color: inherit;
}
.ICONworldlanguages {
position: relative;
margin: auto;
bottom: 190px;
right: 116px;
width: 0;
display: block;
height: 0;
}
.ICONworldlanguages a {
text-decoration: none;
color: inherit;
}
.ICONsignin {
position: relative;
margin: auto;
bottom: 192px;
left: 83px;
width: 0;
display: block;
height: 0;
}
.ICONsignin a {
text-decoration: none;
color: inherit;
}
.ICONcart {
position: relative;
margin: auto;
bottom: 192px;
left: 149px;
width: 0;
display: block;
height: 0;
}
.ICONcart a {
text-decoration: none;
color: inherit;
}
.container {
font-size: 17px;
font-weight: 400;
color: #007580;
transform:translate(0,-50%);
top: 50%;
left: 0;
right: 0;
position: absolute;
}
input[type=unams] {
width: 80%;
padding: 12px 45px;
margin: 22px 0 0 0;
border: 1px solid #007580;
box-sizing: border-box;
border-radius: 0px;
-webkit-appearance: none;
font-size: 17px;
background-image: url('https://image.ibb.co/fZHHnc/signin.png');
background-position: 10px 8px;
background-repeat: no-repeat;
background-size: 25px;
}
input[type=password] {
width: 80%;
padding: 12px 45px;
/* first is how big you want the input box 2nd is positioning of word password */
margin: 22px 0 15px 0;
border: 1px solid #007580;
box-sizing: border-box;
border-radius: 0px;
-webkit-appearance: none;
font-size: 17px;
background-image: url('https://image.ibb.co/jC7gfx/lock.png');
background-position: 10px 8px;
background-repeat: no-repeat;
background-size: 25px;
}
.buttonlg {
background-color: #007580;
border: none;
color: white;
width: 25%;
font-size: 17px;
height: 38px;
margin: auto;
text-align: center;
}
.outerform {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.innerform {
width: 90%;
height: 90%;
}
.box {
background-color: white;
border: 1px solid #007580;
height: 100%;
position:relative;
}
.animate {
-webkit-animation: animatezoom 0.6s;
animation: animatezoom 0.6s
}
#-webkit-keyframes animatezoom {
from {
-webkit-transform: scale(0)
}
to {
-webkit-transform: scale(1)
}
}
::-webkit-input-placeholder {
/* WebKit browsers */
color: lightgrey;
opacity: 1 !important;
}
.circlelogo1 {
background: #007580;
border-radius: 50%;
height: 30px;
width: 30px;
position: relative;
margin: auto;
/*
Child elements with absolute positioning will be
positioned relative to this div
*/
}
.circlelogo2 {
position: absolute;
background: white;
border-radius: 50%;
height: 18px;
width: 18px;
/*
Put top edge and left edge in the center
*/
top: 50%;
left: 50%;
margin: -9px 0px 0px -9px;
/*
Offset the position correctly with
minus half of the width and minus half of the height
*/
}
<div class="outercircle"></div>
<div class="innercircle"></div>
<div class="D">
D
</div>
<div class="R">
R
</div>
<div class="quote">
You will always be your greatest investment.
</div>
<div class="searchcontainer">
<form>
<input name="search" placeholder="Search all resources..." type="text">
</form>
</div>
<div class="ICONsignin">
<img height="37px" src="https://svgshare.com/i/5SR.svg">
</div>
<div class="ICONcart">
<img height="39px" src="https://svgshare.com/i/5SE.svg">
</div>
<div class="ICONworldlanguages">
<img height="34px" src="https://svgshare.com/i/5XW.svg">
</div>
<div class="ICONwhatsnew">
<img height="43px" src="https://svgshare.com/i/5aX.svg">
</div>
<header>
<div class="categories">
<b>Categories</b> Newest Popular Music Youth
</div>
</header>
<main>
<section>
<div class="outerform">
<div class="innerform">
<form class="animate box">
<div class="container">
<div class="circlelogo1">
<div class="circlelogo2">
</div>
</div>
<input type="unams" placeholder="Username" name="uname" required>
<input type="password" placeholder="Password" name="psw" required><br>
<button class="buttonlg" type="submit">Log In</button>
</div>
</form>
</div>
</div>
</section>
</main>
<footer>
<div class="legal">
Contact Privacy Terms Copyright About
</div>
</footer>
By the way it's better to consider another way than positioned element to center. You can do it with flex since you are already using it:
.box {
....
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
Then remove everything related to positionning from .container.
Here is the full code:
* {
box-sizing: border-box;
}
html,
body {
height: 100%;
margin: 0 auto;
color: white;
text-align: center;
font-family: 'Lato', serif;
background: linear-gradient(white 70px, #007580 70px);
-webkit-text-size-adjust: none;
}
header,
footer {
background: #007580
}
body,
main {
display: flex;
flex: 1;
}
body {
flex-flow: column;
}
header {
min-height: 35px;
}
footer {
min-height: 35px;
}
section {
margin: auto;
width: 95%;
height: 100%;
color: black;
background-color: white;
}
.categories {
position: relative;
top: 3px;
color: white;
font-size: 16px;
font-weight: 300;
word-spacing: 26px;
padding-bottom: 2px;
}
.categories a {
text-decoration: none;
color: inherit;
}
.legal {
position: absolute;
bottom: 0;
width: 100%;
height: 30px;
font-weight: 300;
word-spacing: 15px;
}
.legal a {
text-decoration: none;
font-size: 14px;
color: white;
}
.quote {
position: relative;
margin: auto;
font-size: 20px;
font-weight: 300;
bottom: 80px;
height: 0;
}
.searchcontainer {
position: relative;
height: 0;
bottom: 43px;
margin: auto;
width: 380px;
;
}
input[type=text] {
width: 100%;
display: inline-block;
border: 2px solid #ddd;
border-radius: 4px;
padding: 6px 0 7px 40px;
background-image: url('https://image.ibb.co/j9esac/searchicon.png');
background-position: 10px 6px;
background-repeat: no-repeat;
font-size: 16px;
background-color: white;
}
.innercircle {
height: 89px;
width: 89px;
border-radius: 50%;
background-color: white;
margin: auto;
position: relative;
bottom: 93px;
}
.outercircle {
height: 120px;
width: 120px;
border-radius: 50%;
background-color: #007580;
margin: auto;
position: relative;
top: 11px;
}
.D {
font-size: 100px;
font-weight: 100;
position: relative;
bottom: 196px;
right: 3px;
margin: auto;
color: #007580;
height: 0;
font-family: 'Amiri', serif;
letter-spacing: -10px;
}
.D a {
text-decoration: none;
color: inherit;
}
.R {
font-size: 55px;
font-weight: 100;
position: relative;
bottom: 173px;
right: 2px;
margin: auto;
color: #007580;
height: 0;
font-family: 'Amiri', serif;
letter-spacing: -10px;
}
.R a {
text-decoration: none;
color: inherit;
}
.ICONwhatsnew {
position: relative;
margin: auto;
bottom: 194px;
right: 191px;
width: 0;
display: block;
height: 0;
}
.ICONwhatsnew a {
text-decoration: none;
color: inherit;
}
.ICONworldlanguages {
position: relative;
margin: auto;
bottom: 190px;
right: 116px;
width: 0;
display: block;
height: 0;
}
.ICONworldlanguages a {
text-decoration: none;
color: inherit;
}
.ICONsignin {
position: relative;
margin: auto;
bottom: 192px;
left: 83px;
width: 0;
display: block;
height: 0;
}
.ICONsignin a {
text-decoration: none;
color: inherit;
}
.ICONcart {
position: relative;
margin: auto;
bottom: 192px;
left: 149px;
width: 0;
display: block;
height: 0;
}
.ICONcart a {
text-decoration: none;
color: inherit;
}
.container {
font-size: 17px;
font-weight: 400;
color: #007580;
}
input[type=unams] {
width: 80%;
padding: 12px 45px;
margin: 22px 0 0 0;
border: 1px solid #007580;
box-sizing: border-box;
border-radius: 0px;
-webkit-appearance: none;
font-size: 17px;
background-image: url('https://image.ibb.co/fZHHnc/signin.png');
background-position: 10px 8px;
background-repeat: no-repeat;
background-size: 25px;
}
input[type=password] {
width: 80%;
padding: 12px 45px;
/* first is how big you want the input box 2nd is positioning of word password */
margin: 22px 0 15px 0;
border: 1px solid #007580;
box-sizing: border-box;
border-radius: 0px;
-webkit-appearance: none;
font-size: 17px;
background-image: url('https://image.ibb.co/jC7gfx/lock.png');
background-position: 10px 8px;
background-repeat: no-repeat;
background-size: 25px;
}
.buttonlg {
background-color: #007580;
border: none;
color: white;
width: 25%;
font-size: 17px;
height: 38px;
margin: auto;
text-align: center;
}
.outerform {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.innerform {
width: 90%;
height: 90%;
}
.box {
background-color: white;
border: 1px solid #007580;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.animate {
-webkit-animation: animatezoom 0.6s;
animation: animatezoom 0.6s
}
#-webkit-keyframes animatezoom {
from {
-webkit-transform: scale(0)
}
to {
-webkit-transform: scale(1)
}
}
::-webkit-input-placeholder {
/* WebKit browsers */
color: lightgrey;
opacity: 1 !important;
}
.circlelogo1 {
background: #007580;
border-radius: 50%;
height: 30px;
width: 30px;
position: relative;
margin: auto;
/*
Child elements with absolute positioning will be
positioned relative to this div
*/
}
.circlelogo2 {
position: absolute;
background: white;
border-radius: 50%;
height: 18px;
width: 18px;
/*
Put top edge and left edge in the center
*/
top: 50%;
left: 50%;
margin: -9px 0px 0px -9px;
/*
Offset the position correctly with
minus half of the width and minus half of the height
*/
}
<div class="outercircle"></div>
<div class="innercircle"></div>
<div class="D">
D
</div>
<div class="R">
R
</div>
<div class="quote">
You will always be your greatest investment.
</div>
<div class="searchcontainer">
<form>
<input name="search" placeholder="Search all resources..." type="text">
</form>
</div>
<div class="ICONsignin">
<img height="37px" src="https://svgshare.com/i/5SR.svg">
</div>
<div class="ICONcart">
<img height="39px" src="https://svgshare.com/i/5SE.svg">
</div>
<div class="ICONworldlanguages">
<img height="34px" src="https://svgshare.com/i/5XW.svg">
</div>
<div class="ICONwhatsnew">
<img height="43px" src="https://svgshare.com/i/5aX.svg">
</div>
<header>
<div class="categories">
<b>Categories</b> Newest Popular Music Youth
</div>
</header>
<main>
<section>
<div class="outerform">
<div class="innerform">
<form class="animate box">
<div class="container">
<div class="circlelogo1">
<div class="circlelogo2">
</div>
</div>
<input type="unams" placeholder="Username" name="uname" required>
<input type="password" placeholder="Password" name="psw" required><br>
<button class="buttonlg" type="submit">Log In</button>
</div>
</form>
</div>
</div>
</section>
</main>
<footer>
<div class="legal">
Contact Privacy Terms Copyright About
</div>
</footer>
There's a few issues. In your .box styling you should add position: relative; this will force .container's absolute positioning to respect its parent, in this case .box's positioning and size. The second is the top: 50%; on .container. In certain scenarios that can seem to center the item but in others it does not. What you can do to center .container within .box is add transform: translate(0, -50%); which offsets top: 50% and centers the element. Same can be done horizontally with left: 50% and transform: translate(-50%, -50%);.
* {
box-sizing: border-box;
}
html,
body {
height: 100%;
margin: 0 auto;
color: white;
text-align: center;
font-family: 'Lato', serif;
background: linear-gradient(white 70px, #007580 70px);
-webkit-text-size-adjust: none;
}
header,
footer {
background: #007580
}
body,
main {
display: flex;
flex: 1;
}
body {
flex-flow: column;
}
header {
min-height: 35px;
}
footer {
min-height: 35px;
}
section {
margin: auto;
width: 95%;
height: 100%;
color: black;
background-color: white;
}
.categories {
position: relative;
top: 3px;
color: white;
font-size: 16px;
font-weight: 300;
word-spacing: 26px;
padding-bottom: 2px;
}
.categories a {
text-decoration: none;
color: inherit;
}
.legal {
position: absolute;
bottom: 0;
width: 100%;
height: 30px;
font-weight: 300;
word-spacing: 15px;
}
.legal a {
text-decoration: none;
font-size: 14px;
color: white;
}
.quote {
position: relative;
margin: auto;
font-size: 20px;
font-weight: 300;
bottom: 80px;
height: 0;
}
.searchcontainer {
position: relative;
height: 0;
bottom: 43px;
margin: auto;
width: 380px;
;
}
input[type=text] {
width: 100%;
display: inline-block;
border: 2px solid #ddd;
border-radius: 4px;
padding: 6px 0 7px 40px;
background-image: url('https://image.ibb.co/j9esac/searchicon.png');
background-position: 10px 6px;
background-repeat: no-repeat;
font-size: 16px;
background-color: white;
}
.innercircle {
height: 89px;
width: 89px;
border-radius: 50%;
background-color: white;
margin: auto;
position: relative;
bottom: 93px;
}
.outercircle {
height: 120px;
width: 120px;
border-radius: 50%;
background-color: #007580;
margin: auto;
position: relative;
top: 11px;
}
.D {
font-size: 100px;
font-weight: 100;
position: relative;
bottom: 196px;
right: 3px;
margin: auto;
color: #007580;
height: 0;
font-family: 'Amiri', serif;
letter-spacing: -10px;
}
.D a {
text-decoration: none;
color: inherit;
}
.R {
font-size: 55px;
font-weight: 100;
position: relative;
bottom: 173px;
right: 2px;
margin: auto;
color: #007580;
height: 0;
font-family: 'Amiri', serif;
letter-spacing: -10px;
}
.R a {
text-decoration: none;
color: inherit;
}
.ICONwhatsnew {
position: relative;
margin: auto;
bottom: 194px;
right: 191px;
width: 0;
display: block;
height: 0;
}
.ICONwhatsnew a {
text-decoration: none;
color: inherit;
}
.ICONworldlanguages {
position: relative;
margin: auto;
bottom: 190px;
right: 116px;
width: 0;
display: block;
height: 0;
}
.ICONworldlanguages a {
text-decoration: none;
color: inherit;
}
.ICONsignin {
position: relative;
margin: auto;
bottom: 192px;
left: 83px;
width: 0;
display: block;
height: 0;
}
.ICONsignin a {
text-decoration: none;
color: inherit;
}
.ICONcart {
position: relative;
margin: auto;
bottom: 192px;
left: 149px;
width: 0;
display: block;
height: 0;
}
.ICONcart a {
text-decoration: none;
color: inherit;
}
.container {
font-size: 17px;
font-weight: 400;
color: #007580;
top: 50%;
left: 0;
right: 0;
position: absolute;
transform: translate(0, -50%);
}
input[type=unams] {
width: 80%;
padding: 12px 45px;
margin: 22px 0 0 0;
border: 1px solid #007580;
box-sizing: border-box;
border-radius: 0px;
-webkit-appearance: none;
font-size: 17px;
background-image: url('https://image.ibb.co/fZHHnc/signin.png');
background-position: 10px 8px;
background-repeat: no-repeat;
background-size: 25px;
}
input[type=password] {
width: 80%;
padding: 12px 45px;
/* first is how big you want the input box 2nd is positioning of word password */
margin: 22px 0 15px 0;
border: 1px solid #007580;
box-sizing: border-box;
border-radius: 0px;
-webkit-appearance: none;
font-size: 17px;
background-image: url('https://image.ibb.co/jC7gfx/lock.png');
background-position: 10px 8px;
background-repeat: no-repeat;
background-size: 25px;
}
.buttonlg {
background-color: #007580;
border: none;
color: white;
width: 25%;
font-size: 17px;
height: 38px;
margin: auto;
text-align: center;
}
.outerform {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.innerform {
width: 90%;
height: 90%;
}
.box {
position: relative;
background-color: white;
border: 1px solid #007580;
height: 100%;
}
.animate {
-webkit-animation: animatezoom 0.6s;
animation: animatezoom 0.6s
}
#-webkit-keyframes animatezoom {
from {
-webkit-transform: scale(0)
}
to {
-webkit-transform: scale(1)
}
}
::-webkit-input-placeholder {
/* WebKit browsers */
color: lightgrey;
opacity: 1 !important;
}
.circlelogo1 {
background: #007580;
border-radius: 50%;
height: 30px;
width: 30px;
position: relative;
margin: auto;
/*
Child elements with absolute positioning will be
positioned relative to this div
*/
}
.circlelogo2 {
position: absolute;
background: white;
border-radius: 50%;
height: 18px;
width: 18px;
/*
Put top edge and left edge in the center
*/
top: 50%;
left: 50%;
margin: -9px 0px 0px -9px;
/*
Offset the position correctly with
minus half of the width and minus half of the height
*/
}
<div class="outercircle"></div>
<div class="innercircle"></div>
<div class="D">
D
</div>
<div class="R">
R
</div>
<div class="quote">
You will always be your greatest investment.
</div>
<div class="searchcontainer">
<form>
<input name="search" placeholder="Search all resources..." type="text">
</form>
</div>
<div class="ICONsignin">
<img height="37px" src="https://svgshare.com/i/5SR.svg">
</div>
<div class="ICONcart">
<img height="39px" src="https://svgshare.com/i/5SE.svg">
</div>
<div class="ICONworldlanguages">
<img height="34px" src="https://svgshare.com/i/5XW.svg">
</div>
<div class="ICONwhatsnew">
<img height="43px" src="https://svgshare.com/i/5aX.svg">
</div>
<header>
<div class="categories">
<b>Categories</b> Newest Popular Music Youth
</div>
</header>
<main>
<section>
<div class="outerform">
<div class="innerform">
<form class="animate box">
<div class="container">
<div class="circlelogo1">
<div class="circlelogo2">
</div>
</div>
<input type="unams" placeholder="Username" name="uname" required>
<input type="password" placeholder="Password" name="psw" required><br>
<button class="buttonlg" type="submit">Log In</button>
</div>
</form>
</div>
</div>
</section>
</main>
<footer>
<div class="legal">
Contact Privacy Terms Copyright About
</div>
</footer>