By using nth-child(1) & nav .start-home,a:nth-child(1):hover~.animation I should define the properties of home link and it's animation like it's width and position. But to adjust the width and position of the animation of the home link I have to make adjustments in nnth-child(2). And same goes for about link I need to do adjustments in nth-child(3).
In the end I can make the animation work for the last sign-in link. Also the animation is not running properly, it's breaking in the middle. Run the code and you will get better understanding of my problem.
body{
box-sizing: border-box;
font-family: sans-serif;
background-color: rgb(255, 238, 238);
}
nav{
position: relative;
margin: 0;
padding: 0;
box-shadow: 0 2px 3px 0;
width: 100%;
height: 50px;
background-color: #04111ffa;
line-height: 50px;
font-size: 15px;
padding: 0px 20px;
}
nav a{
width: 100%;
font-size: 15px;
color: seashell;
position: relative;
text-decoration: none;
text-transform: uppercase;
line-height: 50px;
z-index: 5;
text-align: center;
}
nav .animation{
position: absolute;
height: 50px;
top: 0;
z-index: 0;
width: 100px;
background-color: rgb(58, 233, 218);
border-radius: 10%;
transition: all 0.5s ease 0s;
}
a:nth-child(1){
width: 150px;
left: 0;
}
nav .start-home,a:nth-child(1):hover~.animation {
width: 80px;
left: 70px;
}
a:nth-child(2){
left: 50px;
width: 150px;
}
nav .start-about,a:nth-child(2):hover~.animation {
width: 80px;
left: 70px;
}
a:nth-child(3){
left: 70px;
width: 120px;
}
nav .start-contact,a:nth-child(3):hover~.animation {
width: 80px;
left: 140px;
}
a:nth-child(4){
left: 90px;
width: 170px;
}
nav .start-privacy-policy,a:nth-child(4):hover~.animation {
width: 90px;
left: 225px;
}
a:nth-child(5){
left: 110px;
width: 200px;
}
nav .start-docs,a:nth-child(5):hover~.animation {
width: 145px;
left: 315px;
}
a:nth-child(6){
left: 130px;
width: 100px;
}
.search-container{
float: right;
}
input[type=text]{
padding: 6px;
margin-top: 13px;
font-size: 17px;
border: none;
border-radius: 15px;
}
.search-container button{
float: right;
padding: 6px 10px;
margin-top: 13px;
margin-right: 30px;
font-size: 17px;
border-radius: 15px;
background-color: rgb(58, 233, 218);
}
.search-container button:hover{
background-color: rgb(35, 168, 157);
}
.icon{
color: white;
z-index: 5;
}
.search-container{
float: right;
}
.links{
display: inline-block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous">
<link rel="stylesheet" href="navbar.css">
<title>Document</title>
</head>
<body>
<header>
<nav>
<div class="links">
<span class="icon fas fa-bars"></span>
Home
About
Contact
Privacy Policy
Sign-in
<div class="animation start-home"></div>
</div>
<div class="search-container">
<form>
<input type="text" placeholder="Search..." name="search" class="searchbar">
<button type="submit"><i class="fas fa-search"></i><span class="text">Search</span></button>
</form>
</div>
</nav>
</header>
</body>
</html>
If I understood you correctly, then perhaps this example can help you:
const animationElement = document.querySelector('.links .animation');
const defaultElement = document.querySelector('.links a'); // set default element !
const slideToElement = (el) => {
if (el) {
animationElement.style.left = el.offsetLeft + 'px';
animationElement.style.width = el.offsetWidth + 'px';
} else {
animationElement.style.removeProperty('left');
animationElement.style.removeProperty('width');
}
}
// tracking all hovers on "a" links
document.querySelector('.links').addEventListener('mouseover', (ev) => ev.target.matches('a') && slideToElement(ev.target))
// tracking leaving the links area
document.querySelector('.links').addEventListener('mouseleave', () => slideToElement(defaultElement))
slideToElement(defaultElement); // setting the slide to the default position
body {
box-sizing: border-box;
font-family: sans-serif;
background-color: rgb(255, 238, 238);
}
nav {
position: relative;
margin: 0;
padding: 0;
box-shadow: 0 2px 3px 0;
width: 100%;
height: 50px;
background-color: #04111ffa;
line-height: 50px;
font-size: 15px;
padding: 0px 20px;
}
nav a {
width: 100%;
font-size: 15px;
color: seashell;
position: relative;
text-decoration: none;
text-transform: uppercase;
line-height: 50px;
z-index: 5;
text-align: center;
margin-left: 30px;
padding: 0 10px;
}
nav .animation {
position: absolute;
height: 50px;
top: 0;
z-index: 0;
width: 100px;
background-color: rgb(58, 233, 218);
border-radius: 10%;
transition: all 0.5s ease 0s;
}
a:nth-child(1) {
width: 150px;
left: 0;
}
input[type=text] {
padding: 6px;
margin-top: 13px;
font-size: 17px;
border: none;
border-radius: 15px;
}
.search-container button {
float: right;
padding: 6px 10px;
margin-top: 13px;
margin-right: 30px;
font-size: 17px;
border-radius: 15px;
background-color: rgb(58, 233, 218);
}
.search-container button:hover {
background-color: rgb(35, 168, 157);
}
.icon {
color: white;
z-index: 5;
}
.search-container {
float: right;
}
.links {
display: inline-block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous">
<link rel="stylesheet" href="navbar.css">
<title>Document</title>
</head>
<body>
<header>
<nav>
<div class="links">
<span class="icon fas fa-bars"></span>
Home
About
Contact
Privacy Policy
Sign-in
<div class="animation start-home"></div>
</div>
<div class="search-container">
<form>
<input type="text" placeholder="Search..." name="search" class="searchbar">
<button type="submit"><i class="fas fa-search"></i><span class="text">Search</span></button>
</form>
</div>
</nav>
</header>
</body>
</html>
This solution is made in JS, which made it possible to remove excess from CSS and not depend on pre-set CSS values.
I hope this can help somehow.
Related
I am making a website where people can watch videos and I want my videos to fit the screens on telephones but it wont fit. The widht does not want to change.
Here is my HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hamza</title>
<link rel="icon" href="profile.jpg">
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://kit.fontawesome.com/e838428f0c.js" crossorigin="anonymous"></script>
</head>
<body>
<nav>
<ul>
<a class="hamxa" href="index.html">
<center>
<img class="profile-pic-1" src="profile.jpg">
</center>
<h1 class="hamza">Hamza</h1>
</a>
<div class="items">
<a href="videos.html">
<button><i class="fa-solid fa-circle-play"></i>VIDEOS</button>
</a>
<a href="https://docs.google.com/forms/d/e/1FAIpQLSc4uB40mPR_idarZm--J8_0iM3je3ipRw4wY_L9Ka_pqYMQPg/viewform">
<button><i class="fa-solid fa-briefcase"> WORK</i></button>
</a>
</div>
</ul>
</nav>
<p></p>
<div class="container">
<div class="video-container">
<div>
<div class="video"><video poster="welcome.jpg" src="Video1.mp4"></video></div>
<p>Welcome To The Cult.</p>
</div>
</div>
<h2>New Videos</h2>
<div class="video-container">
<div>
<div class="video"><video poster="Video1.jpg" src="Video1.mp4"></video></div>
<p>BECOME THE STRONG MAN THEY NEED / TESTOSTERONE IS AT ALL TIME LOW</p>
</div>
<div>
<div class="video"><video poster="Video2.jpg" src="Video1.mp4"></video></div>
<p>7 Reasons People Dislike You Immediately</p>
</div>
<div>
<div class="video"><video poster="Video3.jpg" src="Video1.mp4"></video></div>
<p>PSYCHOLOGICAL SECRETS OF ATTRACTION</p>
</div>
</div>
<div class="popup-video">
<span>×</span>
<video src="Video1.mp4" autoplay controls></video>
</div>
</div>
<script>
document.querySelectorAll('.video-container video').forEach(vid =>{
vid.onclick = () =>{
document.querySelector('.popup-video').style.display = 'block';
document.querySelector('.popup-video video').src = vid.getAttribute('src')
}
});
document.querySelector('.popup-video span').onclick = () =>{
document.querySelector('.popup-video').style.display = 'none';
document.querySelector('.popup-video video').src = 'none';
}
</script>
</body>
</html>
Here is my CSS:
#import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght#500&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Josefin Sans', sans-serif;
text-align: center;
}
h1 {
color: white;
}
h2 {
margin: 30px;
text-decoration: underline;
}
a {
color: black;
margin: 0;
font-size: 18px;
font-weight: 700;
line-height: 20px;
margin-bottom: 12px;
margin-left: 12px;
text-align: left;
text-decoration: none;
max-width: 100%;
}
p {
width: 437px;
font-size: 18px;
margin-top: 20px;
}
nav {
background: #222222;
border: 1px solid #222222;
border-right: none;
border-left: none;
}
ul {
padding: 0;
margin: 0;
}
button {
padding: 0;
border: none;
background: #222222;
color: white;
width: 100px;
height: 50px;
}
button:hover {
padding: 0;
background: white;
border: none;
color: black;
width: 100px;
height: 50px;
border-radius: 5px;
transition: 0.25s;
}
center {
margin-bottom: 30px;
}
textarea {
height: 20px;
width: 100%;
border: none;
border-bottom: 2px solid #aaa;
background-color: transparent;
margin-bottom: 10px;
resize: none;
outline: none;
transition: .5s;
}
i {
padding-right: 5px;
}
.items {
margin-bottom: 30px;
}
.profile-pic-1 {
width: 100px;
border-radius: 100px;
}
.profile-pic-1:hover {
opacity: 0.75;
transition: 0.25s;
}
.hamza {
margin-bottom: 30px;
margin-top: 0;
text-align: center;
}
.hamza:hover {
opacity: 0.75;
transition: 0.25s;
}
.container {
position: relative;
min-height: 100vh;
}
.container .video-container {
display: flex;
flex-wrap: wrap;
gap: 15px;
justify-content: center;
padding: 10px;
}
.container .video-container .video {
height: 250px;
width: 437px;
border: 5px solid white;
border-radius: 5px;
box-shadow: 0 5px 15px rgba(0, 0, 0, .7);
cursor: pointer;
overflow: hidden;
}
.container .video-container .video video {
height: 100%;
width: 100%;
object-fit: cover;
transition: .2s linear;
}
.container .video-container .video:hover video {
transform: scale(1.1);
}
.container .popup-video {
position: fixed;
top: 0;
left: 0;
z-index: 100;
background: rgba(0, 0, 0, 0.8);
height: 100%;
width: 100%;
display: none;
}
.container .popup-video video {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 750px;
border-radius: 5px;
border: 3px solid white;
object-fit: cover;
}
.container .popup-video span {
position: absolute;
top: 5px;
right: 20px;
font-size: 50px;
color: white;
font-weight: bold;
z-index: 100;
cursor: pointer;
}
#media (max-width: 768px){
.container .popup-video video {
width: 95%;
}
}
I have tried to change the width of the videos but it does not work. And i have no idea what to do. I am new to programing.
I'm a beginner in html and I want to learn. Three days ago I started my html journey and I'm running into a problem...
So, I created a 'dark-mode' theme on my page and it's working.
My problem is: when I click the Theme button, I want to change the search bar color and text and I don't know how to do it.
Basically when I click the Theme button to change theme to dark mode I want the search bar to change background color to #121212 and text color to white.
And when I re-click the Theme button and come back to light mode, to undo the things, but I can't figure out how.
Thank you in advance.
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
<style>
body {
background-color: white;
color: #369497;
transition: 0.5s;
}
.dark-mode {
background-color: #121212;
color: white;
transition: 0.5s;
}
.button {
display: inline-block;
border-radius: 4px;
background-color: #369497;
border: none;
color: white;
text-align: center;
font-size: 18px;
padding: 12px;
width: 120px;
transition: all 0.5s;
cursor: pointer;
margin: 10px;
}
.button-pos {
margin: 0;
position: absolute;
bottom: 0%;
right: 0%;
transform: translate(-20%, -15%);
}
.button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.button span:after {
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
.button:hover span {
padding-right: 25px;
}
.button:hover span:after {
opacity: 1;
right: 0;
}
input[type=text] {
width: 480px;
box-sizing: border-box;
border: 2px solid #369497;
border-radius: 4px;
font-size: 16px;
background-color: white;
padding: 12px 20px 12px 10px;
}
.searchbar-pos {
margin: 0;
position: absolute;
top: 25%;
left: 25%;
}
</style>
</head>
<body>
<div class="bgimg w3-display-container w3-animate-opacity">
<div class="w3-display-topmiddle">
<img src="logo" alt="logo">
</div>
</div>
<div class="bgimg w3-display-container w3-animate-opacity">
<div class="w3-display-topleft w3-padding-large w3-xlarge">
Logo
</div>
</div>
<script>
function myFunction() {
var element = document.body;
element.classList.toggle("dark-mode");
}
</script>
<div class="w3-animate-opacity">
<div class="button-pos">
<button onclick="myFunction()" class="button" style="vertical-align:middle"><span>Theme </span></button>
</div>
</div>
<div class="searchbar-pos">
<form>
<input type="text" name="search" placeholder="Search...">
</form>
</div>
</body>
</html>
You have to write a css rule for that, basically something that overrides the input styling when there's a parent element with dark-mode class applied (body in this case).
All you need is ti add this to your css:
.dark-mode input[type=text] {
background-color: #121212;
color: white;
}
Here's your code with that change:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
<style>
body {
background-color: white;
color: #369497;
transition: 0.5s;
}
.dark-mode {
background-color: #121212;
color: white;
transition: 0.5s;
}
.button {
display: inline-block;
border-radius: 4px;
background-color: #369497;
border: none;
color: white;
text-align: center;
font-size: 18px;
padding: 12px;
width: 120px;
transition: all 0.5s;
cursor: pointer;
margin: 10px;
}
.button-pos {
margin: 0;
position: absolute;
bottom: 0%;
right: 0%;
transform: translate(-20%, -15%);
}
.button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.button span:after {
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
.button:hover span {
padding-right: 25px;
}
.button:hover span:after {
opacity: 1;
right: 0;
}
input[type=text] {
width: 480px;
box-sizing: border-box;
border: 2px solid #369497;
border-radius: 4px;
font-size: 16px;
background-color: white;
padding: 12px 20px 12px 10px;
}
.dark-mode input[type=text] {
background-color: #121212;
color: white;
}
.searchbar-pos {
margin: 0;
position: absolute;
top: 25%;
left: 25%;
}
</style>
</head>
<body>
<div class="bgimg w3-display-container w3-animate-opacity">
<div class="w3-display-topmiddle">
<img src="logo" alt="logo">
</div>
</div>
<div class="bgimg w3-display-container w3-animate-opacity">
<div class="w3-display-topleft w3-padding-large w3-xlarge">
Logo
</div>
</div>
<script>
function myFunction() {
var element = document.body;
element.classList.toggle("dark-mode");
}
</script>
<div class="w3-animate-opacity">
<div class="button-pos">
<button onclick="myFunction()" class="button" style="vertical-align:middle"><span>Theme </span></button>
</div>
</div>
<div class="searchbar-pos">
<form>
<input type="text" name="search" placeholder="Search...">
</form>
</div>
</body>
</html>
This question already has answers here:
Content overlapping with "position:fixed"
(1 answer)
How can I make content appear beneath a fixed DIV element?
(13 answers)
Closed 2 years ago.
Here is the code:
body {
margin: 0;
padding: 0;
}
/* NAVIGATION */
nav {
background: #222222;
padding: 10px 40px 10px 70px;
color: #ffffff;
}
header {
position: fixed;
width: 100%;
top: 0;
}
#nav-list {
display: flex;
list-style: none;
justify-content: space-around;
align-items: center;
padding-left: 0;
}
#search {
height: 40px;
width: 240px;
display: flex;
border-radius: 5px;
}
#searchBar {
height: 100%;
width: 200px;
border: none;
border-radius: 5px 0 0 5px;
outline: none;
padding: 0 10px;
color: #000;
font-size: 16px;
}
#search #searchButton {
height: 100%;
width: 40px;
line-height: 40px;
text-align: center;
border-radius: 0 5px 5px 0;
cursor: pointer;
background-color: rgb(81, 22, 219);
color: #222222;
transition: color 0.75s;
}
#search #searchButton:hover {
color: #fff;
}
#page-title {
font-size: 24px;
}
/* MAIN CONTENT */
#content {
/* test to see if the color will appear */
background: blue;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Movie Vault</title>
<link rel="stylesheet" href="test.css">
</head>
<body>
<header>
<nav>
<ul id="nav-list">
<li id="search">
<input id="searchBar" type="search" placeholder="Search...">
<label id="searchButton">
<i class="fas fa-search"></i>
</label>
</li>
<li id="page-title">Video Vault</li>
</ul>
</nav>
</header>
<section>
test
</section>
</body>
</html>
The goal I am trying to achieve is having the text from the section tag and have it directly below my fixed navbar. I have attempted to put a z-index with the values of above 1 into header, nav and #nav-list, but it has not worked. What can be re-configured to make this work? I am sorry. I have tried all I know and searched this site but to no success.
I would just add a margin-top equivalent to the nav offsetHeight, which in this case is 106 pixels.
body {
margin: 0;
padding: 0;
}
/* NAVIGATION */
nav {
background: #222222;
padding: 10px 40px 10px 70px;
color: #ffffff;
}
header {
position: fixed;
width: 100%;
top: 0;
}
#nav-list {
display: flex;
list-style: none;
justify-content: space-around;
align-items: center;
padding-left: 0;
}
#search {
height: 40px;
width: 240px;
display: flex;
border-radius: 5px;
}
#searchBar {
height: 100%;
width: 200px;
border: none;
border-radius: 5px 0 0 5px;
outline: none;
padding: 0 10px;
color: #000;
font-size: 16px;
}
#search #searchButton {
height: 100%;
width: 40px;
line-height: 40px;
text-align: center;
border-radius: 0 5px 5px 0;
cursor: pointer;
background-color: rgb(81, 22, 219);
color: #222222;
transition: color 0.75s;
}
#search #searchButton:hover {
color: #fff;
}
#page-title {
font-size: 24px;
}
/* MAIN CONTENT */
#content {
/* test to see if the color will appear */
background: blue;
}
section{
margin-top:106px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Movie Vault</title>
<link rel="stylesheet" href="test.css">
</head>
<body>
<header>
<nav>
<ul id="nav-list">
<li id="search">
<input id="searchBar" type="search" placeholder="Search...">
<label id="searchButton">
<i class="fas fa-search"></i>
</label>
</li>
<li id="page-title">Video Vault</li>
</ul>
</nav>
</header>
<section>
test
</section>
</body>
</html>
If you have a responsive navigation bar you could use JS to dynamically set the margin top.
document.getElementsByTagName("section")[0].style.marginTop = document.getElementsByTagName("nav")[0].offsetHeight+"px";
body {
margin: 0;
padding: 0;
}
/* NAVIGATION */
nav {
background: #222222;
padding: 10px 40px 10px 70px;
color: #ffffff;
}
header {
position: fixed;
width: 100%;
top: 0;
}
#nav-list {
display: flex;
list-style: none;
justify-content: space-around;
align-items: center;
padding-left: 0;
}
#search {
height: 40px;
width: 240px;
display: flex;
border-radius: 5px;
}
#searchBar {
height: 100%;
width: 200px;
border: none;
border-radius: 5px 0 0 5px;
outline: none;
padding: 0 10px;
color: #000;
font-size: 16px;
}
#search #searchButton {
height: 100%;
width: 40px;
line-height: 40px;
text-align: center;
border-radius: 0 5px 5px 0;
cursor: pointer;
background-color: rgb(81, 22, 219);
color: #222222;
transition: color 0.75s;
}
#search #searchButton:hover {
color: #fff;
}
#page-title {
font-size: 24px;
}
/* MAIN CONTENT */
#content {
/* test to see if the color will appear */
background: blue;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Movie Vault</title>
<link rel="stylesheet" href="test.css">
</head>
<body>
<header>
<nav>
<ul id="nav-list">
<li id="search">
<input id="searchBar" type="search" placeholder="Search...">
<label id="searchButton">
<i class="fas fa-search"></i>
</label>
</li>
<li id="page-title">Video Vault</li>
</ul>
</nav>
</header>
<section>
test
</section>
</body>
</html>
position: fixed; and position: absolute; puts the header out of the normal flow. use position: sticky; instead:
body {
margin: 0;
padding: 0;
}
/* NAVIGATION */
nav {
background: #222222;
padding: 10px 40px 10px 70px;
color: #ffffff;
}
header {
position: sticky;
width: 100%;
top: 0;
}
#nav-list {
display: flex;
list-style: none;
justify-content: space-around;
align-items: center;
padding-left: 0;
}
#search {
height: 40px;
width: 240px;
display: flex;
border-radius: 5px;
}
#searchBar {
height: 100%;
width: 200px;
border: none;
border-radius: 5px 0 0 5px;
outline: none;
padding: 0 10px;
color: #000;
font-size: 16px;
}
#search #searchButton {
height: 100%;
width: 40px;
line-height: 40px;
text-align: center;
border-radius: 0 5px 5px 0;
cursor: pointer;
background-color: rgb(81, 22, 219);
color: #222222;
transition: color 0.75s;
}
#search #searchButton:hover {
color: #fff;
}
#page-title {
font-size: 24px;
}
/* MAIN CONTENT */
#content {
/* test to see if the color will appear */
background: blue;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Movie Vault</title>
<link rel="stylesheet" href="test.css">
</head>
<body>
<header>
<nav>
<ul id="nav-list">
<li id="search">
<input id="searchBar" type="search" placeholder="Search...">
<label id="searchButton">
<i class="fas fa-search"></i>
</label>
</li>
<li id="page-title">Video Vault</li>
</ul>
</nav>
</header>
<section>
test
</section>
</body>
</html>
Alternatively, you can use a top-margin at the section:
body {
margin: 0;
padding: 0;
}
/* NAVIGATION */
nav {
background: #222222;
padding: 10px 40px 10px 70px;
color: #ffffff;
}
header {
position: fixed;
width: 100%;
top: 0;
}
#nav-list {
display: flex;
list-style: none;
justify-content: space-around;
align-items: center;
padding-left: 0;
}
#search {
height: 40px;
width: 240px;
display: flex;
border-radius: 5px;
}
#searchBar {
height: 100%;
width: 200px;
border: none;
border-radius: 5px 0 0 5px;
outline: none;
padding: 0 10px;
color: #000;
font-size: 16px;
}
#search #searchButton {
height: 100%;
width: 40px;
line-height: 40px;
text-align: center;
border-radius: 0 5px 5px 0;
cursor: pointer;
background-color: rgb(81, 22, 219);
color: #222222;
transition: color 0.75s;
}
#search #searchButton:hover {
color: #fff;
}
#page-title {
font-size: 24px;
}
/* MAIN CONTENT */
#content {
/* test to see if the color will appear */
background: blue;
}
section {
margin-top: 90px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Movie Vault</title>
<link rel="stylesheet" href="test.css">
</head>
<body>
<header>
<nav>
<ul id="nav-list">
<li id="search">
<input id="searchBar" type="search" placeholder="Search...">
<label id="searchButton">
<i class="fas fa-search"></i>
</label>
</li>
<li id="page-title">Video Vault</li>
</ul>
</nav>
</header>
<section>
test
</section>
</body>
</html>
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>
I just started coding CSS and i am very mad because my login form in the header is going below my contact us nav link on smaller screens then my desktop. Can anyone tell me why? HTML & CSS BELOW
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<meta name="description" content="Site Description">
<meta name="keywords" content="Site Keywords">
<title>AffAttraction | Performance Based Marketing Network</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="js/showcase.js"></script>
</head>
<body>
<header>
<div class="container">
<div id="branding">
<h1>AffAttraction</h1>
</div>
<nav>
<ul>
<li>Home</li>
<li>Advertisers</li>
<li>Publishers</li>
<li>About Us</li>
<li>Contact Us</li>
</nav>
<div id="login">
<form action="publishers/login.php" method="post">
<input type="email" name="email" placeholder="Email" required>
<input type="password" name="password" placeholder="Password" required>
<button type="submit" class="header_login_btn">Login</button>
</form>
</div>
</div>
</header>
<section id="showcase">
<div class="container">
<h1><span class="highlight">Performance</span> Based Marketing</h1>
<p>AffAttraction will help you make money from your Websites, Apps, Games, and More!</p>
</div>
</section>
</body>
</html>
CSS
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
line-height: : 1.5;
margin: 0;
padding: 0;
background-color: #F4F4F4;
}
/* Global */
.container {
width: 80%;
margin: auto;
overflow: hidden;
}
ul {
margin: 0;
padding: 0;
}
.header_login_btn {
color: #FFFFFF;
background-color: #00CF03;
width: 70px;
height: 35px;
margin-top: 10px;
border: #00CF03 2px solid;
border-radius: 2px;
}
.header_login_btn:hover {
color: #FFFFFF;
background-color: #42DB4C;
width: 70px;
height: 35px;
margin-top: 10px;
border: #42DB4C 2px solid;
border-radius: 2px;
}
/* Header */
header {
color: #FFFFFF;
background-color: #418DD9;
padding-top: 15px;
min-height: 50px;
}
header a {
color: #FFFFFF;
text-decoration: none;
font-size: 16px;
}
header li {
float: left;
display: inline;
padding-right: 20px;
padding-left: 20px;
}
header #branding {
float: left;
font-weight: bold;
}
header #branding h1 {
margin: 0;
}
header nav {
float: center;
padding-top: 10px;
}
header a:hover {
color: #42DB4C;
}
header #login {
margin-top: -15px;
float: right;
}
header #login input {
height: 25px;
width: 110px;
border: #FFFFFF;
border-radius: 8px;
padding: 5px;
float: none;
}
/* Showcase */
#showcase {
color: #FFFFFF;
min-height: 500px;
background: url('../img/cover.jpg') no-repeat;
text-align: center;
}
#showcase h1 {
margin-top: 100px;
font-size: 50px;
font-weight: bold;
}
#showcase p {
font-size: 30px;
}
#showcase .highlight {
color: #42DB4C;
}
Any help is appreciated!
(1) In your css file, you should set header #login margin-top to -35px.
header #login {
margin-top: -35px;
float: right;
}
（2）Use position:absolute to solve the problem
header {
color: #FFFFFF;
background-color: #418DD9;
padding-top: 15px;
min-height: 50px;
position: relative;
}
header #login {
position: absolute;
right: 20px;
transform: translateY(-50%);
}
(3)
header {
color: #FFFFFF;
background-color: #418DD9;
padding-top: 15px;
min-height: 50px;
position: relative;
}
header #login {
position: absolute;
top: 50%;
right: 20px;
margin-top: -22.25px;
}