Hello I have a search arrow on my website and right it transitions on both left and right.
Because the arrow is on the right side of my website I want it to only transition left only.
In other words I want the search icon to stay in place and not move and input to transition to the left only so you can type in the input. I hope this makes sense.
body {
background: darkgrey;
}
.search-box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #2f3640;
height: 40px;
border-radius: 40px;
padding: 10px;
}
.search-box:hover>.search-txt {
width: 240px;
padding: 0 6px;
}
.search-box:hover>.search-btn {
background: white;
}
.search-btn {
/* position: absolute; */
color: lightblue;
float: right;
width: 40px;
height: 40px;
border-radius: 50%;
background: #2f3640;
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
transition: 0.4s;
}
.search-txt {
border: none;
background: none;
outline: none;
float: left;
padding: 0;
color: white;
font-size: 16px;
transition: 0.4s;
line-height: 40px;
width: 0px;
}
<head>
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
</head>
<div class="search-box">
<input class="search-txt" type="text" name="" placeholder="Type to Search">
<a class="search-btn" href="#">
<i class="fas fa-search"></i>
</a>
</div>
You only need to change few properties as below:
.search-box {
position: absolute;
top:50%;
right:50%;
transform: translate(0, -50%);
background: #2f3640;
height: 40px;
border-radius: 40px;
padding: 10px;
}
Please, find the complete code below. Hope it helps.
body {
background: darkgrey;
}
.search-box {
position: absolute;
top:50%;
right:50%;
transform: translate(0, -50%);
background: #2f3640;
height: 40px;
border-radius: 40px;
padding: 10px;
}
.search-box:hover>.search-txt {
width: 240px;
padding: 0 6px;
}
.search-box:hover>.search-btn {
background: white;
}
.search-btn {
/* position: absolute; */
color: lightblue;
float: right;
width: 40px;
height: 40px;
border-radius: 50%;
background: #2f3640;
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
transition: 0.4s;
}
.search-txt {
border: none;
background: none;
outline: none;
float: left;
padding: 0;
color: white;
font-size: 16px;
transition: 0.4s;
line-height: 40px;
width: 0px;
}
<head>
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
</head>
<div class="search-box">
<input class="search-txt" type="text" name="" placeholder="Type to Search">
<a class="search-btn" href="#">
<i class="fas fa-search"></i>
</a>
</div>
Just add some focus and valid check in your css. and if you only want the input to slide left from where it is, just let me know, I will change the code
body {
background: darkgrey;
}
.search-box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #2f3640;
height: 40px;
border-radius: 40px;
padding: 10px;
}
.search-box:hover>.search-txt , .search-txt:focus, .search-txt:valid {
width: 240px;
padding: 0 6px 0 50px;
}
.search-box:hover>.search-btn {
background: white;
}
.search-btn {
position: absolute;
color: lightblue;
left: 10px;
float: right;
width: 40px;
height: 40px;
border-radius: 50%;
background: #2f3640;
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
transition: 0.4s;
}
.search-txt {
border: none;
background: none;
outline: none;
float: left;
padding: 0;
color: white;
font-size: 16px;
transition: 0.4s;
line-height: 40px;
width: 40px;
}
<head>
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
</head>
<div class="search-box">
<input class="search-txt" type="text" name="" placeholder="Type to Search" required>
<a class="search-btn" href="#">
<i class="fas fa-search"></i>
</a>
</div>
Related
body {
font-family: Bahnschrift SemiBold, sans-serif;
background-color: #fcfefe;
width: 100%;
height: 100%;
overflow-x: hidden;
}
*{
margin:0; padding: 0;
}
.logonav{
position: top;
left: 0px;
width: 250px;
height: 65px;
padding-top: 70px;
padding-bottom: 20px;
padding-left: 40px;
}
.content{
position: absolute;
bottom: 330px;
left: 30px;
text-align: justify;
font-size: 20px;
font-family: 'Titillium Web', sans-serif;
color: #ffffff;
}
.bn632-hover {
position: absolute;
bottom: 200px;
left: 1200px;
width: 160px;
font-size: 16px;
font-weight: 600;
color: #00bbf0;
cursor: pointer;
margin: 20px;
height: 55px;
text-align:center;
color: whitesmoke;
border: none;
background-size: 300% 100%;
border-radius: 50px;
moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.bn632-hover:hover {
background-position: 100% 0;
moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.bn632-hover:focus {
outline: none;
}
.bn632-hover.bn18 {
background-image: linear-gradient(
to right,
#25aae1,
#00bbf0,
#00bbf0,
#00bbf0
);
box-shadow: 0 4px 15px 0 rgba(49, 196, 190, 0.75);
}
.image_container.img{
max-height: 100vh;
max-width: 100%;
object-fit: cover;
object-position: bottom;
}
.pozadina{
background-color: #83a3c7;
background-image: url("womandoctor.jpg");
background-size: cover;
width: 110%;
background-blend-mode: normal;
position: relative;
padding-top: 450px;
padding-bottom: 100px;
}
.hornav1{
overflow: hidden;
width: 100%;
background-color: #00bbf0;
list-style-type: none;
margin: 0px;
padding: 0px;
border-bottom: solid 2px #eaf6f6;
size: 100px;
position:fixed;
top:0;
z-index:100;
}
.hornav1 a{
float: right;
color: whitesmoke;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
box-sizing: border-box;
margin-left: 5px 10 px;
}
.hornav1 i{
color: whitesmoke;
}
#pocetna{
padding-right: 1000px;
font-size: 20px;
}
.hornav2{
overflow: hidden;
width: 100%;
background-color: #ffffff;
list-style-type: none;
margin: 0px;
padding: 0px;
position: sticky;
top: 0px;
border-bottom: solid 2px #eaf6f6;
}
.hornav2 a{
float: right;
color: #333;
text-align: center;
padding: 14px 16px;
font-size: 17px;
box-sizing: border-box;
margin-left: 5px 10 px;
}
.hornav3{
overflow: hidden;
width: 100%;
background-color: #00bbf0;
list-style-type: none;
margin: 0px;
padding: 10px;
position:sticky;
border-bottom: solid 2px #eaf6f6;
size: 150px;
}
.hornav3 a{
position: relative;
color: whitesmoke;
text-align: center;
padding-left: 50px;
text-decoration: none;
font-size: 24px;
box-sizing: border-box;
right : -270px;
}
.navcontainer{
top:0;
width:100%;
z-index:100;
}
.hornav3 a::before{
content: '';
position: absolute;
bottom: 0;
right: 0;
width: 0;
height: 2px;
background-color: whitesmoke;
transition: width 0.6s cubic-bezier(0.5, 1, 0.5, 1);
}
#media (hover: hover) and (pointer: fine) {
.hornav3 a:hover::before{
left: 0.5;
right: auto;
width: 70%;
}
}
.pregledi{
background-color: #fafafa;
}
.pregledi .heading{
padding-top: 40px;
text-transform: uppercase;
color: deepskyblue;
text-align: center;
font-size: 35px;
}
.pregledi .heading2{
padding-top: 5px;
text-align: center;
font-size: 20px;
font-family: unset;
color: #2c5d63;
}
.pregledi .box-container{
padding-top: 30px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(20rem, 7fr));
gap:4rem;
margin-left: 60px;
margin-right: 30px;
}
.pregledi .box-container .box h3{
padding-top: 10px;
color: deepskyblue;
text-transform: uppercase;
font-size: 2.1rem;
}
.pregledi .box-container .box p{
padding-top: 10px;
font-family: sans-serif;
font-size: 1rem;
line-height: 1;
}
.pregledi .box-container .box a{
position: relative;
top: 10px;
}
.bn111 {
margin-top: 10px;
padding: 1.3em 0.01em;
font-size: 12px;
text-transform: uppercase;
text-indent: 10px;
letter-spacing: 2.5px;
font-weight: 500;
color: #ffffff;
background-color: #00bbf0;
border: none;
border-radius: 45px;
box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
transition: all 0.24s ease 0s;
cursor: pointer;
outline: none;
}
.bn111:hover {
background-color: #00bbf0;
box-shadow: 0px 15px 20px rgba(34, 180, 255, 0.4);
color: #ffffff;
transform: translateX(7px) translateY(-1.1px);
}
.bn111:active {
transform: translateY(-1px);
}
.bn111 i{
color: #ffffff;
font-size: 1.3em;
padding-right: 4px;
}
.izborna{
background-color: #83a3c7;
background-size: cover;
width: 100%;
background-blend-mode: normal;
opacity: 1;
display: block;
height: auto;
transition: .5s ease;
backface-visibility: hidden;
}
.containerslike{
position: relative;
width: 100%;
max-width: 400px;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .3s ease;
background-color: #ececec;
}
.containerslike:hover .overlay {
opacity: 0.5;
}
.ikona {
color: deepskyblue;
font-size: 40px;
position: absolute;
top: 100%;
left: 45%;;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
opacity: 1;
}
.fa-magnifying-glass{
position: absolute;
top: 100px;
}
.bn112 {
margin-top: 10px;
padding: 1.3em 0.01em;
font-size: 18px;
text-transform: uppercase;
text-indent: 10px;
letter-spacing: 2.5px;
font-weight: 500;
color: #ffffff;
background-color: #00bbf0;
border: none;
border-radius: 45px;
box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
transition: all 0.24s ease 0s;
cursor: pointer;
outline: none;
width: 400px;
}
.bn112:hover {
background-color: #00bbf0;
box-shadow: 0px 15px 20px rgba(34, 180, 255, 0.4);
color: #ffffff;
transform: translateY(-1.1px);
}
.bn112:active {
transform: translateY(-1px);
}
.bn112 i{
color: #ffffff;
font-size: 1.3em;
padding-right: 4px;
}
.podnopregled{
margin-left: 500px;
}
.infodiv{
margin-top: 30px;
background-color: deepskyblue;
}
.row {
display: flex;
width: 100%;
}
.noMargin {
margin: 1px;
}
.one {
background-color: #79c2d0;
border: solid #ececec;
height: 300px;
width: 100%;
border-radius: 15px;
margin-top: 30px;
}
.two {
background-color: #79c2d0;
border: solid #ececec;
height: 300px;
width: 100%;
border-radius: 15px;
margin-top: 30px;
}
.three {
background-color: #79c2d0;
border: solid #ececec;
height: 300px;
width: 100%;
border-radius: 15px;
margin-top: 10px;
}
.four {
background-color: #79c2d0;
border: solid #ececec;
height: 300px;
width: 100%;
border-radius: 15px;
margin-top: 10px;
}
.noMargin p{
text-align: center;
margin-top: 100px;
}
#media only screen and (max-width:800px) {
/* For tablets: */
.main {
width: 80%;
padding: 0;
}
.right {
width: 100%;
}
}
#media only screen and (max-width:500px) {
/* For mobile phones: */
.menu, .main, .right {
width: 100%;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>VivaMed medicina rada i sporta</title>
<script src="https://kit.fontawesome.com/60681a69ff.js" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="VivamedCSS.css">
<link href="https://fonts.googleapis.com/css2?family=Titillium+Web:wght#300&display=swap" rel="stylesheet">
</head>
<body>
<div class="navcontainer">
<div class="hornav1">
<i class="fas fa-envelope" style="font-size:20px;"></i> info#vivamed.hr
<i class="fa-solid fa-phone"style="font-size:20px;" ></i> +385 1 233 55 00
Početna
</div>
<div class="hornav2">
<img src="vivalogo.webp" alt="logo" class="logonav">
<a class="active" style="font-size: 20px; padding-right: 550px; padding-top: 100px; font-family: 'Titillium Web', sans-serif; font-style: italic; font-weight: bolder;"> Zdrav radnik je uspješan i produktivan radnik.</a>
</div>
<div class="hornav3">
<a class="active" href="https://www.vivamed.hr/kontakt"><i class="fas fa-envelope" style="font-size:20px;"></i> Kontakt</a>
<a class="active" href="https://www.vivamed.hr/kontakt"><i class="fas fa-cloud" style="font-size:20px; color: whitesmoke;"></i> Kontakt</a>
<a class="active" href="https://www.vivamed.hr/kontakt"><i class="fas fa-comment" style="font-size:20px;"></i> Kontakt</a>
<a class="active" href="https://www.vivamed.hr/kontakt"><i class="fas fa-car" style="font-size:20px;"></i> Kontakt</a>
<a class="active" href="https://www.vivamed.hr/galerija"><i class="fas fa-bolt" style="font-size:20px;"></i> O nama</a>
<a class="active" href="file:///C:/Users/Admin/Desktop/Vivamed/VIVAMED%20JEDAN.html#slide-2"><i class="fas fa-envelope"></i> Početna</a>
</div>
</div>
<div class="pozadina">
<div class="content">
<h3>Dobro došli na stranicu Medicine rada i sporta VivaMed!</h3>
<p>Pogledajte sve profesionalne usluge koje nudi
<br>naš tim vrhunskih i renomiranih stručnjaka!
</p>
</div>
<button class="bn632-hover bn18">Naručite se!</button>
</div>
<section class="pregledi" id="pregledi">
<h1 class="heading"> <span> Stručno, brzo i povoljno! </span> </h1>
<h2 class="heading2"> <span>Izdvojeni pregledi</span></h3>
<div class="box-container">
<div class="box">
<div class="containerslike">
<img src="pexels-pixabay-262524.jpg" class="izborna">
<div class="overlay">
<a href="https://www.vivamed.hr/usluge/pregledi" class="ikona">
<i class="fa-solid fa-magnifying-glass"></i>
</a>
</div>
</div>
<h3>Pregled sportaša</h3>
<p>Rekreativci, amateri, profesionalci</p>
<button class="bn111" id="bn111"> Opširnije<i class="fa-solid fa-arrow-right"></i></button>
</div>
<div class="box">
<div class="containerslike">
<img src="delivery-driver-smiling-camera-his-van_13339-235836.jpg" class="izborna">
<div class="overlay">
<a href="https://www.vivamed.hr/usluge/pregledi" class="ikona">
<i class="fa-solid fa-magnifying-glass"></i>
</a>
</div>
</div>
<h3>Pregled vozača</h3>
<p>Sve vrste kategorija i pregleda</p>
<button class="bn111" id="bn111"> Opširnije<i class="fa-solid fa-arrow-right"></i></button>
</div>
<div class="box">
<div class="containerslike">
<img src="happy-graduate-woman-mantle-rejoicing-laughing-smiling_176420-14226.webp" class="izborna">
<div class="overlay">
<a href="https://www.vivamed.hr/usluge/pregledi" class="ikona">
<i class="fa-solid fa-magnifying-glass"></i>
</a>
</div>
</div>
<h3>Učenici i studenti</h3>
<p>Upisi u srednje škole, fakultete i druge akadamske ustanove</p>
<button class="bn111" id="bn111"> Opširnije<i class="fa-solid fa-arrow-right"></i></button>
</div>
<div class="podnopregled">
<button class="bn112" id="bn112"> Svi pregledi<i class="fa-solid fa-arrow-right"></i></button>
</div>
</div>
</section>
<!--
-->
<div class="infodiv">
<div class="row noMargin">
<div class="one">
<p>Radno vrijeme<br>
ponedjeljak 07 - 15
utorak 07 - 18
srijeda 07 - 14
četvrtak 07 - 14
petak 07 - 14
i prema dogovoru </p>
</div>
<div class="two">
<p>Adresa<br>
Krešićeva ul. 32/1. Kat (okretište tramvaja Borongaj)</p>
</div>
</div>
<div class="row noMargin">
<div class="three">
<p>Email<br>
info#vivamed.hr</p>
</div>
<div class="four">
<p>Telefon<br>
+385 1 233 55 00</p>
</div>
</div>
</div>
</body>
</html>
I've been coding a website in html,css and used some javascript scripts to do it. It is a medical website and so far I've done a lot to the main page which is my main problem here. I am self-taught and all the paddings, margins and screen-fits that I've coded into it are were actually applying only to the screen size that is on my laptop, and not others. I've tested this by uploading the files to InfintyFree and making it online just for the sake of testing it on other screens, and what happens is that all the content is scattered around the screen. I've put some pictures to show how it looks in comparison with my laptop, other laptop that I have and my phone. Also I've put the html and css code if you can check it out and see where I screwed up and just point me to the core because I really cannot comprehend what is going on.
Thank in advance, and sorry if there was a question like this before, because I haven't found one.[][]
I have tried putting the *{} and changing properties with it, in the body{}, height, width, overflow, padding, margins, Media only screen, everything. Still, everything fixed but only on my laptop on which it was built.
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
My code for a simple webpage works on chrome, but it refuses to read the css on ie and ms edge. It may be a compatibility problem, but I am unsure on how to make it work.
My HTML is:
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="https://kit.fontawesome.com/849cf0a04d.js" crossorigin="anonymous"></script>
</head>
<body>
<header>
<div class="main">
<div class="logo">
<img src="glasses2.png">
<ul>
<li class="active">Home</li>
<li>Animation</li>
<li>Video</li>
<li>Audio</li>
<li>Image</li>
</ul>
</div>
<div class="title">
</div>
<div class="search-box">
<input class="search-txt" type="text" name="input" placeholder="Search..">
<a class="search-btn" href="#">
<i class="fas fa-search"></i>
</a>
</header>
</body>
</html>
And the CSS (which may be the reason for not working as intended) is this:
*{
margin: 0;
padding: 0;
font-family: century gothic;
}
header {
background-image: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)), url(../cyber.gif);
height: 100vh;
background-size: cover;
background-position: center;
}
ul{
position: absolute;
top: 0.1%;
right: 5%;
list-style-type: none;
margin-top: 25px;
}
ul li{
display: inline-block;
}
ul li a{
text-decoration: none;
color: #fff;
transform: translate(-50%, -50%);
background: none;
height: 25px;
border-radius: 25px;
padding: 10px;
border: 1px solid transparent;
transition: 0.6s ease;
}
ul li a:hover{
background-color: #fff;
color: #000;
}
ul li.active a{
background-color: #fff;
color: #000;
}
.logo img{
float: left;
width: 150px;
height: auto;
}
.main{
max-width: 1200px
margin: auto;
}
.search-box{
position: absolute;
top: 5.5%;
left: 50%;
transform: translate(-50%, -50%);
background: #2f3640;
height: 25px;
border-radius: 25px;
padding: 10px;
}
.search-btn{
color: #6C92C8;
float: right;
width: 25px;
height: 25px;
border-radius: 50%;
background: #2f3640;
display: flex;
justify-content: center;
align-items: center;
}
.search-txt{
border: none;
background: none;
outline: none;
float: left;
padding: 0;
color: white;
font-size: 16px;
line-height: 25px;
width: 240px;
}
here is how it looks like on edge:
Not sure on what I should do...
There was an issue where you missed a semicolon which may have caused it to break, but if that was not it, this may work:
*{
margin: 0;
padding: 0;
font-family: century gothic;
}
header {
background-image: -webkit-gradient(linear,left top, left bottom,from(rgba(0,0,0,0.5)),to(rgba(0,0,0,0.5))), url(../cyber.gif);
background-image: -o-linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)), url(../cyber.gif);
background-image: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)), url(../cyber.gif);
height: 100vh;
background-size: cover;
background-position: center;
}
ul{
position: absolute;
top: 0.1%;
right: 5%;
list-style-type: none;
margin-top: 25px;
}
ul li{
display: inline-block;
}
ul li a{
text-decoration: none;
color: #fff;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
background: none;
height: 25px;
border-radius: 25px;
padding: 10px;
border: 1px solid transparent;
-webkit-transition: 0.6s ease;
-o-transition: 0.6s ease;
transition: 0.6s ease;
}
ul li a:hover{
background-color: #fff;
color: #000;
}
ul li.active a{
background-color: #fff;
color: #000;
}
.logo img{
float: left;
width: 150px;
height: auto;
}
.main{
max-width: 1200px;
margin: auto;
}
.search-box{
position: absolute;
top: 5.5%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
background: #2f3640;
height: 25px;
border-radius: 25px;
padding: 10px;
}
.search-btn{
color: #6C92C8;
float: right;
width: 25px;
height: 25px;
border-radius: 50%;
background: #2f3640;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.search-txt{
border: none;
background: none;
outline: none;
float: left;
padding: 0;
color: white;
font-size: 16px;
line-height: 25px;
width: 240px;
}
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 know I have created a similar post before this, but I did not get an answer so I thought I'd give it another shot and see if anyone can help me out here. Basically, my CSS elements are overlapping (specifically the login box, vertical line and side text classes). I tried using percentages to avoid this problem but it did not really workout.
And if I use media queries the resizing would not be accurate on a computer web browser application, right? If I were to use media queries, how would I know what to set the minimum width to if the user is resizing the window browser?
Here is my code that I have so far...
*:focus {
outline: none;
}
body {
background: #ced4da;
margin: 0;
padding: 0;
font-family: sans-serif;
}
.login-box {
width: 300px;
height: 170px;
background: rgba(0, 0, 0, 0);
color: white;
top: 50%;
left: 33%;
position: absolute;
transform: translate(-50%, -50%);
box-sizing: border-box;
padding-top: 12.5px;
}
.email-input-field {
position: relative;
}
.password-input-field {
position: relative;
}
.email-input-field i {
position: absolute;
left: 0px;
top: 4px;
padding: 9px 8px;
color: darkgrey;
transition: 0.3s;
}
.password-input-field i {
position: absolute;
left: 0px;
top: 4px;
padding: 9px 12px;
color: darkgrey;
transition: 0.3s;
}
.email-input-field input:focus+i,
.password-input-field input:focus+i {
color: dodgerblue;
}
.login-box .email-input-field,
.password-input-field {
margin-bottom: 10px;
}
.login-box input[type="email"],
input[type="password"] {
border: none;
background: white;
height: 40px;
font-size: 12px;
width: 83%;
padding-left: 50px;
}
.login-box input[type="submit"] {
border: none;
background-color: #3DBB96;
color: white;
outline: none;
height: 40px;
width: 100%;
font-size: 15px;
font-weight: lighter;
}
.login-box input[type="submit"]:hover {
background-color: #07A973;
}
::placeholder {
color: grey;
}
.vertical-line {
border-left: 1px solid darkgrey;
width: 1px;
height: 170px;
top: 50%;
left: 50%;
position: absolute;
transform: translate(-50%, -50%);
box-sizing: border-box;
}
.side-text {
width: 200px;
height: 80px;
top: 50%;
left: 63%;
position: absolute;
transform: translate(-50%, -50%);
line-height: 100%;
}
.side-text p {
font-weight: lighter;
}
.side-text h1 {
font-weight: normal;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="login-box">
<form action="Login.php" method="POST">
<div class="email-input-field">
<input type="email" name="emailPost" placeholder="Email" autocomplete="off">
<i class="fa fa-envelope fa-lg" aria-hidden="true"></i>
</div>
<div class="password-input-field">
<input type="password" name="passwordPost" placeholder="Password" autocomplete="off">
<i class="fa fa-lock fa-lg" aria-hidden="true"></i>
</div>
<input type="submit" name="submit" value="Login">
</form>
</div>
<div class="vertical-line"></div>
<div class="side-text">
<h1> COLD OPS </h1>
<p> ADMINISTRATION PANEL </p>
</div>
Thank you so much!
The quick solution:
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
<title> Admin Login </title>
<link rel="stylesheet" type="text/css" href="CSS/Login.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
*:focus {
outline: none;
}
body {
background: #ced4da;
margin: 0;
padding: 0;
font-family: sans-serif;
}
.login-box {
width: 300px;
height: 170px;
background: rgba(0,0,0,0);
color: white;
box-sizing: border-box;
padding-top: 12.5px;
}
.email-input-field {
position: relative;
}
.password-input-field {
position: relative;
}
.email-input-field i {
position: absolute;
left: 0px;
top: 4px;
padding: 9px 8px;
color:darkgrey;
transition: 0.3s;
}
.password-input-field i {
position: absolute;
left: 0px;
top: 4px;
padding: 9px 12px;
color:darkgrey;
transition: 0.3s;
}
.email-input-field input:focus + i, .password-input-field input:focus + i {
color:dodgerblue;
}
.login-box .email-input-field, .password-input-field {
margin-bottom: 10px;
}
.login-box input[type="email"], input[type="password"] {
border: none;
background: white;
height: 40px;
font-size: 12px;
width: 83%;
padding-left: 50px;
}
.login-box input[type="submit"] {
border: none;
background-color: #3DBB96;
color: white;
outline: none;
height: 40px;
width: 100%;
font-size: 15px;
font-weight: lighter;
}
.login-box input[type="submit"]:hover {
background-color: #07A973;
}
::placeholder {
color: grey;
}
.splitter {
border-left: 1px solid darkgrey;
width:1px;
height: 170px;
box-sizing: border-box;
margin: 0 20px;
}
.side-text {
width: 200px;
height: 80px;
line-height: 100%;
}
.side-text p {
font-weight: lighter;
}
.side-text h1 {
font-weight: normal;
}
.wrapper {
display: flex;
align-items: center;
height: 100vh;
justify-content: center;
}
#media (max-width: 640px) {
.wrapper {
flex-direction: column;
}
.splitter {
border-top: 1px solid darkgrey;
height:1px;
width: 170px;
margin: 20px 0;
}
.side-text {
text-align: center;
}
}
</style>
</head>
<body>
<div class="wrapper">
<div class = "login-box">
<form action = "Login.php" method = "POST">
<div class = "email-input-field">
<input type = "email" name = "emailPost" placeholder = "Email" autocomplete = "off">
<i class = "fa fa-envelope fa-lg" aria-hidden = "true"></i>
</div>
<div class = "password-input-field">
<input type = "password" name = "passwordPost" placeholder = "Password" autocomplete = "off">
<i class = "fa fa-lock fa-lg" aria-hidden = "true"></i>
</div>
<input type = "submit" name = "submit" value = "Login">
</form>
</div>
<div class = "splitter"></div>
<div class = "side-text">
<h1> COLD OPS </h1>
<p> ADMINISTRATION PANEL </p>
</div>
</div>
</body>
</html>