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;
}
Related
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
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);
}
I tried to change the color of my website. For example I changed "background-color: #3695F6;" to "background-color: #fff;". but my website background doesn't change. I tried to find a missing
semicolon but I didn't find any. I also tried to delete parts of the Css/Html code which I didn't fully understand but that changed nothing. After all that failed I tried to change a margin on the website from 40px to 100px and nothing changed. I think my Css isn't properly connected. can someone please help.
#charset "utf-8";
body {
font: 0.9em Tahoma, Verdana, Arial;
line-height:172%;
background-color: #fff;
margin: 0px;
}
.center {
display: block;
margin-left: 0px;
margin-right: 0px;
}
#containercontainer {
display: block;
margin-left: 0px;
margin-right: 0px;
padding: 30px;
}
/* bovenste kopje ========================================*/
h1.titel {
color: black;
font: Gill Sans, sans-serif;
font-size: 20px;
margin-bottom: -2px;
margin-top: 0px;
}
#titel {
display: block;
margin-left: 0px;
margin-right: 0px;
padding-left: 10px;
border-bottom: solid black 1px;
width: 5.5%;
left: 45%;
margin-top: -5px;
position: relative;
margin-bottom: 20px;
}
/* De Slideshow ========================================*/
.fling-minislide {
width:100%;
height:100%;
padding-bottom: 0%;
overflow:hidden;
position:relative;
}
.fling-minislide img{
position:absolute;
animation:fling-minislide 15s infinite;
opacity: 0;
size: 100% 100%;
}
#keyframes fling-minislide {33%{opacity:1;} 60%{opacity:0;}}
.fling-minislide img:nth-child(3){animation-delay:0s;}
.fling-minislide img:nth-child(2){animation-delay:5s;}
.fling-minislide img:nth-child(1){animation-delay:10s;}
#slideshow {
display: block;
margin-left: 0px;
margin-right: 0px;
padding: 0px;
float: center;
border: solid black 2px;
width: 55%;
margin-bottom: 20px;
height: 300px;
position: relative;
left: 21%;
}
/* Het nieuws blokje ========================================*/
img.nieuws {
margin-top: -20px;
height: 300px;
width: 400px;
position: relative;
border: solid black 2px;
margin-bottom: 20px;
}
p.nieuws {
float: right;
margin-top: -10px;
position: relative;
margin-bottom: 20px;
}
#nieuws {
display: block;
margin-left: 0px;
margin-right: 0px;
padding-left: 10px;
width: 78%;
height: 50px;
left: 10%;
position: relative;
margin-bottom: 20px;
}
/* Het vragen blokje ========================================*/
#vragen {
display: block;
margin-left: 0px;
margin-right: 0px;
padding-left: 0px;
width: 80%;
height: 1000px;
left: 10%;
position: relative;
margin-bottom: 20px;
top: 300px;
}
p.A{
margin-top: 10px;
font-size: 22px;
width: 250px;
margin-left: 20px;
font-weight: bold;
}
#pointer {
width: 20px;
height: 20px;
position: relative;
background: black;
margin-left: 30px;
}
#pointer:after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 0;
border-left: 10px solid white;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
}
#pointer:before {
content: "";
position: absolute;
right: -10px;
bottom: 0;
width: 0;
height: 0;
border-left: 10px solid black;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
}
p.vragentop1 {
margin-left: 80px;
margin-top: -25px;
text-decoration: underline;
width: 600px;
}
p.vragentext1 {
margin-left: 80px;
margin-top: -10px;
position: relative;
margin-bottom: 50px;
width: 600px;
}
/* hoveren over plaatje in directie//////////////////////////////////////////////////////////////////////*/
.container::after, .row::after {
content: "";
clear: both;
display: table;
}
.column {
float: left;
width: 30%;
margin-bottom: 16px;
margin-left: 10px;
margin-top: 20px;
padding: 0 8px;
}
#media screen and (max-width: 650px) {
.column {
width: 100%;
display: block;
}
}
.columnL {
float: left;
width: 30%;
margin-left: 30px;
margin-bottom: 16px;
padding: 0 8px;
margin-top: 20px;
}
.card {
box-shadow: 6px 7px 6px 3px rgba(0,0,0,0.75);
border: solid black 2px;
padding-left: 10px;
}
/*//////////////////////////////////////////////////////////////////////////////////*/
#cbrlogo {
background: #fff;
width: 50px;
}
#container {
width: relative;
padding: relative;
background: #fff;
min-height: 500px;
}
#containercontainer2 {
display: block;
margin-left: 0px;
margin-right: 0px;
padding: 30px;
}
.afbeelding_container {
position: relative;
float: left;
margin-left: 0px;
}
.afbeelding_container .tekst_container {
position: relative;
top: 25px;
left: 50px;
color: #00f;
font-size: 36px;
}
.schoon {
clear: both;
}
#overzicht {
margin-left: 25px;
}
.links {
float: left;
width: 320px;
}
#rechts {
float: right;
}
#onder {
clear: both;
}
.breder {
width: 4000px;
}
ul {
padding-left: 35px;
padding-right: 35px;
list-style: none;
background: #00f;
}
hr {
margin: 0px 0;
height: 1px;
border: 1px solid #fff;
border-top: 10px solid #00f;
background-color: #fff;
}
a:link {
color: black;
text-decoration: none;
}
a:visited {
color: black;
text-decoration: none;
}
a:hover {
color: black;
text-decoration: none;
}
a:active {
color: blue;
text-decoration: none;
}
.menu {
display: block;
margin: 0px;
padding:0px;
position: absolute;
width: 100%;
background-color: #3695F6;
}
ul.menu {
list-style-type: none;
}
img.menu{
border: solid black 2px;
}
.menu li {
float:left;
position:relative;
width: 200px;
text-align:center;
text-decoration: none;
margin: 0px;
padding: 0;
}
.menu li a {
display: block;
padding-bottom: 20px;
padding-right: 10px;
padding-top: 10px;
padding-left: 10px;
text-decoration: none;
position: relative;
z-index: 100;
}
.menu li a span{
display: block;
padding-top: 10px;
font-weight: 700;
font-size: 20px;
color: black;
font-size: 18px;
}
.menu li:hover span{
color: #FFFFFF;
}
th {
padding: 10px 30px 10px 30px;
}
td {
padding: 0 30px 0 30px;
}
td.muteren {
padding: 0 0 0 10px;
}
tbody:before {
line-height:1em;
display:block;
}
thead {
text-align: left;
}
Body
this problem could be the caching problem try clearing your cache if that doesn't work check how you are linking your css to your HTML file if it's correct you can do the last thing which is add !important to the end of the background color like the example below:
background-color:#fff !important;
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>
I have been having a problem with a little project I have been working on. I have a header and a footer and middle content. I want to have the middle content have a scrolling feature but I cannot set a definitive height. Is there a way to get around the required height for scroll to work?
#Bar, #sea {
-webkit-appearance: none;
-webkit-border-radius: 0;
}
#header {
font-size: 50px;
font-weight: bold;
text-align: center;
padding-top: 25px;
}
#form {
text-align: center;
}
#Bar {
height: 35px;
width: 400px;
font-size: 15px;
box-sizing: border-box;
border-style: solid;
vertical-align: top;
border-width: 1px;
border-color: #c7c7cd;
}
#Bar:focus {
outline: none;
border-style: solid;
border-width: 1px;
border-color: #3A89D8;
}
#sea:active {
outline: none;
border-width: 1px;
border-style: solid;
border-color: #3A89D8;
background-color: #1172d2;
}
#sea:focus {
outline: none;
border-style: solid;
border-width: 1px;
border-color: #3A89D8;
}
#sea {
background-color: #4199F0;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;
height: 35px;
color: #ffffff;
font-weight: bold;
font-family: Arial;
border-style: solid;
border-width: 1px;
font-size: 15px;
text-decoration: none;
border-color: #3A89D8;
box-sizing: border-box;
vertical-align: top;
}
body {
margin: 0 auto;
font-family: Arial;
}
#hid {
visibility: hidden;
}
#NoteHolder {
padding-left: 125px;
padding-right: 125px;
overflow: auto;
}
#BarHold {
padding-top: 10px;
}
#SearchOP {
top: 0;
left: 0;
position: fixed;
width: 100%;
height: 120%;
background-color: rgba(0,0,0,0.5);
display: none;
}
#NavSave {
top: 0;
left: 0;
position: fixed;
width: 100%;
height: 120%;
background-color: rgba(0,0,0,0.5);
display: none;
}
#popupBoxOnePosition {
top: 0;
left: 0;
position: fixed;
width: 100%;
height: 120%;
background-color: rgba(0,0,0,0.5);
display: none;
}
.popupBoxWrapper {
width: 550px;
margin: 50px auto;
text-align: left;
}
.popupBoxContent {
background-color: #FFF;
padding: 15px;
overflow: hidden;
}
#popup-Sub {
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;
height: 45px;
background-color: #3232ff;
border-style: solid;
border-width: 1px;
font-family: Arial;
font-size: 15px;
float: right;
color: #FFFFFF;
border-color: #1919ff;
text-align: center;
width: 80px;
font-weight: bold;
}
.HeaderNote {
color: #7E7E7E;
font-family: Arial;
font-size: 12px;
}
#Col {
font-weight: bold;
}
table {
border: 1px solid #e0e0e0;
border-collapse: collapse;
margin: auto;
}
th, td {
border: 1px solid #e0e0e0;
border-collapse: collapse;
}
td {
padding: 5px;
text-align: left;
}
th {
background-color: #e6e6e6;
}
#Oper {
float: right;
padding-right: 15px;
cursor: default;
}
a:hover {
text-decoration: underline;
font-weight: bold;
}
#NoteAv {
top: 0;
left: 0;
position: fixed;
width: 100%;
height: 120%;
background-color: rgba(0,0,0,0.5);
display: none;
}
#Settings {
top: 0;
left: 0;
position: fixed;
width: 100%;
height: 120%;
background-color: rgba(0,0,0,0.5);
display: none;
}
#FirstVisit {
top: 0;
left: 0;
position: fixed;
width: 100%;
height: 120%;
background-color: rgba(0,0,0,0.5);
display: none;
}
#MarkList {
vertical-align: middle;
position: fixed;
display: inline;
left: 0;
bottom: 0;
height: 56px;
width: 100%;
border-top-style: solid;
border-width: 1px;
border-color: #3A89D8;
background-color: #eff5f9;
overflow-x: hidden;
}
#MarkList > button {
height: 36px;
color: #39739d;
font-size: 18px;
text-align: center;
white-space: nowrap;
background: #E1ECF4;
border: 1px solid;
display: inline;
margin: 10px 10px 10px;
border-radius: 1px;
border-style: solid;
border-color: #39739d;
}
.YelColBox {
background-color: #F0F041;
}
.LastCol {
background-color: #F0F041;
}
.GreColBox {
background-color: #62ff62;
}
.BluColBox {
background-color: #4199F0;
}
.PurColBox {
background-color: #9941F0;
}
.RedColBox {
background-color: #F04141;
}
.OraColBox {
background-color: #F09941;
}
.ColorBox {
float: right;
width: 12px;
height: 12px;
margin: 5px 5px 5px 5px;
border-width: 1px;
border-style: solid;
border-color: rgba(0,0,0,.2);
}
<body onload="FirstVisit('Settings');">
<div style="height: 30%;">
<div>
<a id="Oper" onClick="toggle_visibility('NoteAv');">Notes</a><a id="Oper" onClick="toggle_visibility('Settings');">Settings</a>
<p id="header">Note Searcher</p>
</div>
<hr>
<p id="form">
<input onClick="this.setSelectionRange(0, this.value.length)" class="SearchInp" autocomplete="off" id="Bar" name="Input" type="text" placeholder="Removed JS for the fiddle.">
<input class="SearchInp" type="submit" id="sea" onClick="SetOff ()" value="Search">
<br>
<input id="Highlight" type="radio" name="textOp" checked>Highlight
<input id="Filter" type="radio" name="textOp">Filter
</p>
</div>
<div id="NoteHolder">
<p class="NoteOp">
Imagine if this filled up the whole text area.
</p>
</div>
<div id=Hid>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="note.js"></script>
<footer id="MarkList">
</footer>
</body>
Setting the overflow property to scroll will show scrollbars (albeit disabled).
#Bar, #sea {
-webkit-appearance: none;
-webkit-border-radius: 0;
}
#header {
font-size: 50px;
font-weight: bold;
text-align: center;
padding-top: 25px;
}
#form {
text-align: center;
}
#Bar {
height: 35px;
width: 400px;
font-size: 15px;
box-sizing: border-box;
border-style: solid;
vertical-align: top;
border-width: 1px;
border-color: #c7c7cd;
}
#Bar:focus {
outline: none;
border-style: solid;
border-width: 1px;
border-color: #3A89D8;
}
#sea:active {
outline: none;
border-width: 1px;
border-style: solid;
border-color: #3A89D8;
background-color: #1172d2;
}
#sea:focus {
outline: none;
border-style: solid;
border-width: 1px;
border-color: #3A89D8;
}
#sea {
background-color: #4199F0;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;
height: 35px;
color: #ffffff;
font-weight: bold;
font-family: Arial;
border-style: solid;
border-width: 1px;
font-size: 15px;
text-decoration: none;
border-color: #3A89D8;
box-sizing: border-box;
vertical-align: top;
}
body {
margin: 0 auto;
font-family: Arial;
}
#hid {
visibility: hidden;
}
#NoteHolder {
padding-left: 125px;
padding-right: 125px;
overflow: scroll;
}
#BarHold {
padding-top: 10px;
}
#SearchOP {
top: 0;
left: 0;
position: fixed;
width: 100%;
height: 120%;
background-color: rgba(0,0,0,0.5);
display: none;
}
#NavSave {
top: 0;
left: 0;
position: fixed;
width: 100%;
height: 120%;
background-color: rgba(0,0,0,0.5);
display: none;
}
#popupBoxOnePosition {
top: 0;
left: 0;
position: fixed;
width: 100%;
height: 120%;
background-color: rgba(0,0,0,0.5);
display: none;
}
.popupBoxWrapper {
width: 550px;
margin: 50px auto;
text-align: left;
}
.popupBoxContent {
background-color: #FFF;
padding: 15px;
overflow: hidden;
}
#popup-Sub {
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;
height: 45px;
background-color: #3232ff;
border-style: solid;
border-width: 1px;
font-family: Arial;
font-size: 15px;
float: right;
color: #FFFFFF;
border-color: #1919ff;
text-align: center;
width: 80px;
font-weight: bold;
}
.HeaderNote {
color: #7E7E7E;
font-family: Arial;
font-size: 12px;
}
#Col {
font-weight: bold;
}
table {
border: 1px solid #e0e0e0;
border-collapse: collapse;
margin: auto;
}
th, td {
border: 1px solid #e0e0e0;
border-collapse: collapse;
}
td {
padding: 5px;
text-align: left;
}
th {
background-color: #e6e6e6;
}
#Oper {
float: right;
padding-right: 15px;
cursor: default;
}
a:hover {
text-decoration: underline;
font-weight: bold;
}
#NoteAv {
top: 0;
left: 0;
position: fixed;
width: 100%;
height: 120%;
background-color: rgba(0,0,0,0.5);
display: none;
}
#Settings {
top: 0;
left: 0;
position: fixed;
width: 100%;
height: 120%;
background-color: rgba(0,0,0,0.5);
display: none;
}
#FirstVisit {
top: 0;
left: 0;
position: fixed;
width: 100%;
height: 120%;
background-color: rgba(0,0,0,0.5);
display: none;
}
#MarkList {
vertical-align: middle;
position: fixed;
display: inline;
left: 0;
bottom: 0;
height: 56px;
width: 100%;
border-top-style: solid;
border-width: 1px;
border-color: #3A89D8;
background-color: #eff5f9;
overflow-x: hidden;
}
#MarkList > button {
height: 36px;
color: #39739d;
font-size: 18px;
text-align: center;
white-space: nowrap;
background: #E1ECF4;
border: 1px solid;
display: inline;
margin: 10px 10px 10px;
border-radius: 1px;
border-style: solid;
border-color: #39739d;
}
.YelColBox {
background-color: #F0F041;
}
.LastCol {
background-color: #F0F041;
}
.GreColBox {
background-color: #62ff62;
}
.BluColBox {
background-color: #4199F0;
}
.PurColBox {
background-color: #9941F0;
}
.RedColBox {
background-color: #F04141;
}
.OraColBox {
background-color: #F09941;
}
.ColorBox {
float: right;
width: 12px;
height: 12px;
margin: 5px 5px 5px 5px;
border-width: 1px;
border-style: solid;
border-color: rgba(0,0,0,.2);
}
<body onload="FirstVisit('Settings');">
<div style="height: 30%;">
<div>
<a id="Oper" onClick="toggle_visibility('NoteAv');">Notes</a><a id="Oper" onClick="toggle_visibility('Settings');">Settings</a>
<p id="header">Note Searcher</p>
</div>
<hr>
<p id="form">
<input onClick="this.setSelectionRange(0, this.value.length)" class="SearchInp" autocomplete="off" id="Bar" name="Input" type="text" placeholder="Removed JS for the fiddle.">
<input class="SearchInp" type="submit" id="sea" onClick="SetOff ()" value="Search">
<br>
<input id="Highlight" type="radio" name="textOp" checked>Highlight
<input id="Filter" type="radio" name="textOp">Filter
</p>
</div>
<div id="NoteHolder">
<p class="NoteOp">
Imagine if this filled up the whole text area.
</p>
</div>
<div id=Hid>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="note.js"></script>
<footer id="MarkList">
</footer>
</body>
A screenshot of the scrollbars: