When I resize my browser window the input field is cut off a bit. I am using percentages but it still is being cut off and I do not know why. I have provided a screenshot below. If I am using percentages shouldn't it resize automatically? Thank you!
Here is my css code:
body {
margin: 0;
padding: 0;
background-color: #EFEFEF;
font-family: sans-serif;
}
.homepage-window {
height: 100vh;
display: flex;
}
.nav-bar {
width: 18%;
background-color: #2E3E4E;
}
.bar-manager {
width: 100%;
}
.top-bar {
display: flex;
align-items: center;
width: 100%;
height: 7%;
background-color: white;
border-bottom: 0.5px solid lightgrey;
}
.top-bar p {
margin-left: 10px;
font-weight: lighter;
}
.user-search-input-field {
margin-left: 70%;
width: 190px;
background-color: red;
}
.bottom-bar {
width: 100%;
height: 40px;
display: flex;
align-content: center;
line-height: 40%;
background-color: white;
border-bottom: 1px solid lightgrey;
}
.bottom-bar h1 {
font-size: 12px;
margin-left: 10px;
font-weight: 500;
}
.bottom-bar p {
font-size: 12px;
margin-left: 10px;
font-weight: lighter;
}
Here is my HTML code:
<!DOCTYPE html>
<html>
<link rel="stylesheet" type="text/css" href="CSS/Homepage.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<head>
<title>Cold-Ops Homepage</title>
</head>
<body>
<div class="homepage-window">
<div class="nav-bar">
</div>
<div class="bar-manager">
<div class="top-bar">
<p>Homepage</p>
<div class="user-search-input-field">
<form action="Login.php" method="POST">
<input type="text" name="userPost" placeholder="Search users..." required>
<i class = "fa fa-search" aria-hidden = "true"></i>
</form>
</div>
</div>
<div class="bottom-bar">
<div class="bottom-bar-texts">
<div><h1>Welcome, Omard2000</h1></div>
<div><p>Administrator</p></div>
</div>
</div>
</div>
</div>
</body>
</html>
Thank you!
You've positioned the element.
It's possible that the left is pushing it off the visible screen
Also, mixing view units and pixels is dangerous.
Updated Post:
becouse of this user-search-input-field not enough space. top-bar divide into two parts,part1 for p and part2 for user-search-input-field with more space. like this:
body {
margin: 0;
padding: 0;
background-color: #EFEFEF;
font-family: sans-serif;
}
.homepage-window {
height: 100vh;
display: flex;
}
.nav-bar {
width: 18%;
background-color: #2E3E4E;
}
.bar-manager {
width: 100%;
}
.top-bar {
display: flex;
align-items: center;
width: 100%;
height: 7%;
background-color: white;
border-bottom: 0.5px solid lightgrey;
}
.top-bar p {
margin-left: 10px;
font-weight: lighter;
}
.bottom-bar {
width: 100%;
height: 40px;
display: flex;
align-content: center;
line-height: 40%;
background-color: white;
border-bottom: 1px solid lightgrey;
}
.bottom-bar h1 {
font-size: 12px;
margin-left: 10px;
font-weight: 500;
}
.bottom-bar p {
font-size: 12px;
margin-left: 10px;
font-weight: lighter;
}
.user-search-input-field {
width: 100%;
}
form {
background-color: red;
display: inline-block;
float: right;
}
.top-bar p {
width: 20%;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="homepage-window">
<div class="nav-bar"></div>
<div class="bar-manager">
<div class="top-bar">
<p>Homepage</p>
<div class="user-search-input-field">
<form action="Login.php" method="POST">
<input type="text" name="userPost" placeholder="Search users..." required>
<i class = "fa fa-search" aria-hidden = "true"></i>
</form>
</div>
</div>
<div class="bottom-bar">
<div class="bottom-bar-texts">
<div><h1>Welcome, Omard2000</h1></div>
<div><p>Administrator</p></div>
</div>
</div>
</div>
</div>
Related
I'm making a website for school, but i have a problem with my css code. I want to place the section1 and the section2 underneath the header so that it looks like that :
WANTED
The problem is that it looks like that (the problem is this enormous gap on the left) :
REALITY
I know that the problem comes from the float on the header and nav bar but i don't know how to keep the header look and having the two boxes ("section1" and "section2", grouped as "content").
The CSS code :
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
body {
color: black;
background-color: white;
font-size: 16px;
text-align:justify;
text-justify:inter-word;
}
.header {
width: 100%;
height: 80px;
display: block;
background-color: #101010;
}
.header_nav {
width: 65%;
height: 100%;
display: block;
margin: 0 auto;
}
.logo {
height: 100%;
display: table;
float: left;
}
.logo h1 {
color: white;
height: 100%;
display: table-cell;
vertical-align: middle;
font-family: "Trebuchet MS";
font-size: 32px;
font-weight: 600;
}
.nav {
float: right;
height: 50%;
line-height: 70px;
}
.nav ul li {
display: inline-block;
vertical-align: middle;
line-height: normal
}
.nav-option {
height: 100%;
display: table;
float: left;
padding: 0px 20px;
display: table-cell;
vertical-align: middle;
height: 100%;
color: white;
font-family: "Trebuchet MS";
font-size: 20px;
font-weight: 50;
}
.nav-option:hover {
text-decoration: underline;
}
.content {
overflow: hidden;
}
.section1 {
background-color: red;
width: 40%;
height: 300px;
margin: 1%;
float: left;
border: inset #101010 6px ;
}
.section2 {
background-color: blue;
width: 40%;
height: 300px;
float: right;
margin: 1%;
border-left: solid #101010 10px;
}
.section2:hover {
transform: scale(1.05);
}
The HTML code :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Histoire de l'Informatique</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="header">
<div class="header_nav">
<div class="logo">
<img src="logo.png">
<h1> HISTOIRE DE L'INFORMATIQUE </h1>
</div>
<div class="nav">
<nav>
<ul>
<li>Données</li>
<li>Algorithmes</li>
<li>Langages</li>
<li>Machines</li>
</ul>
</nav>
</div>
</div>
</<div>
<div class= "content">
<section class="section1">
<h1>Données</h1>
<article>
</article>
</section>
<section class="section2">
<h1>Algorithmes</h1>
<article>
</article>
</section>
</div>
<script src="script.js"></script>
</body>
</html>
Thanks for your help !
Your example seems to work for me provided .container has a width: 100% on it.
But for what you want exactly, I would use the following:
.container {
display: flex;
align-items: center;
justify-content: space-evenly; // google all the different options for this
}
// Get rid of the `float` properties on the sections, you won't need them
Below, is your original code in a snippet, and with that width property it's working for me.
But I highly recommend switching to flex box over floats, as it will give you way more control and better results.
* {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
body {
color: black;
background-color: white;
font-size: 16px;
text-align:justify;
text-justify:inter-word;
}
.header {
width: 100%;
height: 80px;
display: block;
background-color: #101010;
}
.header_nav {
width: 65%;
height: 100%;
display: block;
margin: 0 auto;
}
.logo {
height: 100%;
display: table;
float: left;
}
.logo h1 {
color: white;
height: 100%;
display: table-cell;
vertical-align: middle;
font-family: "Trebuchet MS";
font-size: 32px;
font-weight: 600;
}
.nav {
float: right;
height: 50%;
line-height: 70px;
}
.nav ul li {
display: inline-block;
vertical-align: middle;
line-height: normal
}
.nav-option {
height: 100%;
display: table;
float: left;
padding: 0px 20px;
display: table-cell;
vertical-align: middle;
height: 100%;
color: white;
font-family: "Trebuchet MS";
font-size: 20px;
font-weight: 50;
}
.nav-option:hover {
text-decoration: underline;
}
.content {
width: 100%;
overflow: hidden;
}
.section1 {
background-color: red;
width: 40%;
height: 300px;
margin: 1%;
float: left;
border: inset #101010 6px ;
}
.section2 {
background-color: blue;
width: 40%;
height: 300px;
float: right;
margin: 1%;
border-left: solid #101010 10px;
}
.section2:hover {
transform: scale(1.05);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Histoire de l'Informatique</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="header">
<div class="header_nav">
<div class="logo">
<img src="logo.png">
<h1> HISTOIRE DE L'INFORMATIQUE </h1>
</div>
<div class="nav">
<nav>
<ul>
<li>Données</li>
<li>Algorithmes</li>
<li>Langages</li>
<li>Machines</li>
</ul>
</nav>
</div>
</div>
</div>
<div class= "content">
<section class="section1">
<h1>Données</h1>
<article>
</article>
</section>
<section class="section2">
<h1>Algorithmes</h1>
<article>
</article>
</section>
</div>
<script src="script.js"></script>
</body>
</html>
I need my work done soon, but I don't have access to my bigger monitor. I assume the teacher also has a big monitor where he'll look at my work, so it shouldn't be a problem.
But my site only looks normal on 70% and I'm having a big headache trying to make it work so I have to work on 70%.
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body {
font-family: 'Poppins', sans-serif;
}
header {
display: flex;
width: 50%;
height: 8vh;
margin: auto;
align-items: center;
}
.nav-links,
.search-container {
display: flex;
}
nav {
position: relative;
flex: 1;
}
.nav-links {
justify-content: space-evenly;
max-width: 300px;
list-style: none;
}
.nav-link {
color: #ffffff;
font-size: 18px;
text-decoration: none;
}
.search-container {
flex: 1;
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 0;
}
#justdance {
display: flex;
width: 50%;
margin: auto;
align-items: top;
}
.about {
background-color: #c4c4c4;
display: flex;
width: 50%;
height: 30vh;
margin: auto;
flex-direction: column;
align-items: flex-start;
}
.quote {
text-align: center;
display: block;
border-radius: 10px;
border-style: solid;
box-shadow: rgba(0, 0, 0, 0.42) 0px 2px 2px 0px;
width: 500px;
height: 30px;
margin: 20px auto 0 auto;
}
.description {
margin: 30px auto 0 auto;
text-align: justify;
width: 70%;
font-size: 13px;
}
.sideimage {
position: absolute;
right: 640px;
top: 390px;
}
.polygon {
position: absolute;
right: 960px;
bottom: 260px;
width: 0;
height: 0;
border-top-width: 82px;
border-top-style: solid;
border-top-color: transparent;
border-right-width: 90px;
border-right-style: solid;
border-right-color: #c4c4c4;
transform: rotate(-180deg);
}
.piirkonnad {
background-color: #222222;
display: flex;
width: 50%;
height: 29vh;
margin: auto;
flex-direction: column;
align-items: flex-start;
}
.piirkonnad p {
position: absolute;
left: 554px;
bottom: 270px;
font-family: Roboto;
font-style: italic;
font-weight: 300;
font-size: 20px;
line-height: 23px;
color: #FFFFFF;
}
.copyright p {
position: absolute;
right: 803px;
bottom: 24px;
font-family: Roboto;
font-style: normal;
font-weight: normal;
font-size: 13px;
line-height: 12px;
color: #FFFFFF;
}
.social {
position: absolute;
right: 550px;
bottom: -2px;
}
.fa {
padding: 15px;
font-size: 30px;
width: 50px;
text-align: center;
text-decoration: none;
margin: 5px 2px;
border-radius: 50%;
}
.fa-instagram {
background: #c4c4c4;
color: black;
}
.fa-twitter {
background: #c4c4c4;
color: black;
}
.fa-facebook {
background: #c4c4c4;
color: black;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">
<title>Just Dance</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<style>
body {
background-color: #000000;
}
</style>
<body>
<header>
<nav>
<ul class="nav-links">
<li><a class="nav-link" href="#">Avaleht</a></li>
<li><a class="nav-link" href="#">Meist</a></li>
<li><a class="nav-link" href="#">Login</a></li>
</ul>
<div class="search-container">
<input type="text" placeholder="Otsing" name="search">
</div>
</nav>
</header>
<main>
<img src="header.jpg" alt="Just Dance" id="justdance" ;>
<div class="about">
<div class="quote">“Dance is the hidden language of the soul” - Marta Graham</div>
<div class="description">
<div class="text">
<p>Kunagi pole liiga hilja alustada. Just Dance veebilehelt leiad<br>
tantsukursusi üle Eesti.</p>
<br>
<p>Sulle sobiva kursuse leidmine on imelihtne - vali piirkond või<br>
tantsustiil ning sulle avaneb loetelu kursustest.</p>
<br>
<p>Ka tantsukaaslaste leidmine on imelihtne. Kirjuta sulle sobiva<br>
kursuse kommentaaridesse oma kaaslaseotsingust ning jää<br>
ootama vastust. Ehk leiad juba homme oma unelmate partneri?<br>
Kursuste kommenteerimiseks registreeru "Just Dance" kasutajaks.</p>
</div>
<div class="sideimage">
<img src="dancers.png" alt="Dancers" id="dancer" ;>
</div>
<div class="polygon"></div>
</div>
</main>
<section>
<div class="piirkonnad">
<p>Piirkonnad</p>
</div>
<div class="row1">
<img src="1.jpg" alt="Harjumaa" width="170" height="100">
</div>
</section>
<footer>
<div class="copyright">
<p>Just Dance © Noor Meister Kõik õigused kaitstud</p>
</div>
<div class="social">
</div>
</footer>
</body>
</html>
I've heard about responsive design already, but I can't figure it out. I'm not the greatest at coding and it was hard to achieve what I have so help is appreciated a ton.
Your code has some mistakes on it, you have ; on your img element and your style element should be in the head tag, and the reason why your website is not responsive is because you are using position:absolute, keep your website simple, or if you really want to still use position:absolute, then that div should be contained on another div but set it it to position:relative.
Anyways, I fixed it and now totally responsive, here it is:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Poppins', sans-serif;
padding-top:20px;
}
header{
display:flex;
justify-content:space-evenly;
width: 50%;
margin: auto;
flex-wrap:wrap;
}
.nav-links{
display: flex;
}
.nav-links{
justify-content: space-evenly;
max-width: 300px;
list-style: none;
}
.nav-link{
color: #ffffff;
font-size: 18px;
padding:10px;
text-decoration: none;
}
#justdance {
display: flex;
width: 50%;
margin: auto;
align-items: top;
}
.about {
padding:10px;
background-color: #c4c4c4;
width: 50%;
margin: auto;
}
.search-container{
min-width:30px
}
.quote {
text-align: center;
display: block;
border-radius: 10px;
border-style: solid;
box-shadow: rgba(0, 0, 0, 0.42) 0px 2px 2px 0px;
padding:5px;
margin: 10px auto 0 auto;
}
.description {
margin: 30px auto 0 auto;
width: 70%;
font-size: 13px;
}
.polygon {
height: 0;
border-top-width: 82px;
border-top-style: solid;
border-top-color: transparent;
border-right-width: 90px;
border-right-style: solid;
border-right-color: #c4c4c4;
transform: rotate(-180deg);
}
.piirkonnad {
position:relative;
display:flex;
background-color: #222222;
display: flex;
width: 50%;
padding-top:30px;
height: 29vh;
margin: auto;
justify-content:space-evenly;
}
.piirkonnad p {
text-align:center;
font-family: Roboto;
font-style: italic;
font-weight: 300;
font-size: 20px;
line-height: 23px;
color: #FFFFFF;
}
footer{
margin-top:1em;
}
.copyright p {
text-align:center;
font-family: Roboto;
font-style: normal;
font-weight: normal;
font-size: 13px;
line-height: 12px;
color: #FFFFFF;
}
.social {
display:flex;
justify-content:center;
}
.fa {
padding: 15px;
font-size: 30px;
width: 50px;
text-align: center;
text-decoration: none;
margin: 5px 2px;
border-radius: 50%;
}
.fa-instagram {
background: #c4c4c4;
color: black;
}
.fa-twitter {
background: #c4c4c4;
color: black;
}
.fa-facebook {
background: #c4c4c4;
color: black;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">
<title>Just Dance</title>
<link rel="stylesheet" href="./style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
background-color: #000000;
}
</style>
</head>
<body>
<header>
<nav>
<ul class="nav-links">
<li><a class="nav-link" href="#">Avaleht</a></li>
<li><a class="nav-link" href="#">Meist</a></li>
<li><a class="nav-link" href="#">Login</a></li>
</ul>
</nav>
<div class="search-container">
<input type="text" placeholder="Otsing" name="search">
</div>
</header>
<main>
<img src="header.jpg" alt="Just Dance" id="justdance">
<div class="about">
<div class="quote">“Dance is the hidden language of the soul” - Marta Graham</div>
<div class="description">
<div class="text">
<p>Kunagi pole liiga hilja alustada. Just Dance veebilehelt leiad<br>
tantsukursusi üle Eesti.</p>
<br>
<p>Sulle sobiva kursuse leidmine on imelihtne - vali piirkond või<br>
tantsustiil ning sulle avaneb loetelu kursustest.</p>
<br>
<p>Ka tantsukaaslaste leidmine on imelihtne. Kirjuta sulle sobiva<br>
kursuse kommentaaridesse oma kaaslaseotsingust ning jää<br>
ootama vastust. Ehk leiad juba homme oma unelmate partneri?<br>
Kursuste kommenteerimiseks registreeru "Just Dance" kasutajaks.</p>
</div>
</div>
</div>
<section>
<div class="piirkonnad">
<div class="polygon"></div>
<p>Piirkonnad</p>
<div class="sideimage">
<img src="dancers.png" alt="Dancers" id="dancer">
</div>
</div>
<div class="row1">
<img src="1.jpg" alt="Harjumaa" width="170" height="100">
</div>
</section>
</main>
<footer>
<div class="copyright">
<p>Just Dance © Noor Meister Kõik õigused kaitstud</p>
</div>
<div class="social">
</div>
</footer>
</body>
</html>
For make a website responsive you need to avoid px and use %, vw (viewport width) or vh (viewport height).
After in your css you need to declare #media only screen and (max-width: screenSizepx) and inside make the responsive layout for each screen.
Usually i make this with:
#media only screen and (max-width: 1000)
#media only screen and (max-width: 550px)
#media only screen and (max-width: 400px)
I am having problems debugging my contact form web page. Whenever you inspect the elements or change the height of a browser, the html elements get compressed. I don't want the html elements to compress whenever a user change the height of the browser or inspecting the html elements. Instead, I want a scrollbar that scrolls vertically, but I am having problems figuring out how to do that.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css2?family=Assistant&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/base.css">
<title>Jackson | Contact</title>
</head>
<body>
<nav>
<h1 class="title">Jackson's Guitar</h1>
<ul class="nav-links">
<li>About</li>
<li>Guitars</li>
</ul>
</nav>
<main class="container">
<div class="contact-form">
<h2>Contact Us</h2>
<form action="" id="contact-form">
<div class="first_name">
<label for="first_name">First:</label>
<input type="text" id="first_name" required>
</div>
<div class="last_name">
<label for="last_name">Last:</label>
<input type="text" id="last_name" required>
</div>
<div class="email">
<label for="email">Email: </label>
<input type="email" id="email" required>
</div>
<div class="user_message">
<label for="user_message">Message:</label>
<textarea id="user_message" required></textarea>
</div>
<div class="button">
<input type="button" id="submit" value="Submit">
</div>
</form>
</div>
</main>
<footer>
<p>Diego Salas Polar © 2020</p>
</footer>
</body>
CSS File
css/base.css
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Assistant', sans-serif;
}
/* Creating the sticky footer */
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.container {
flex: 1;
}
/* Designing the navigation's layout*/
nav,
.nav-links {
display: flex;
}
nav {
width: 100%;
align-items: baseline;
}
.nav-links {
list-style: none;
}
.title{
flex-grow: 1;
padding: 1em;
}
/* Designing the .container and form's layout */
.container {
display: flex;
justify-content: center;
height: 100vh;
}
.container .contact-form {
display: flex;
flex-direction: column;
width: 60vw;
max-height: 65vh;
margin-top: 35px;
}
.container h2 {
text-align: center;
}
.contact-form form {
display: flex;
flex-direction: column;
min-height: 50vh;
padding: 0 20px;
justify-content: space-evenly;
}
.contact-form form div {
display: flex;
}
.contact-form form div label {
flex-grow: 1;
}
/* Styling the navigation links */
nav {
background-color: #FF3333;
}
.title {
color: white;
font-size: 25px;
}
.nav-links li a {
margin-right: 10px;
padding: 12px;
border-radius: 2px;
color: white;
text-decoration-line: none;
font-size: 18px;
}
.nav-links li a:hover {
background-color: white;
color: #FF3333;
}
/* Styling the main content of the site*/
.container h2 {
color: white;
}
.contact-form form label {
color: white;
}
.container {
background-color: #999999;
}
.contact-form form {
margin-top: 20px;
background-color: #669999;
border-radius: 12px;
}
.contact-form form input[type='text'],
.contact-form form input[type='email'] {
width: 40vw;
height: 30px;
}
.contact-form form textarea {
width: 40vw;
height: 12vh;
font-size: 16px;
}
.contact-form form input[type='button'] {
width: 10vw;
height: 5vh;
}
.contact-form form div label,
.contact-form form div input {
font-size: 18px;
}
.button {
justify-content: flex-end;
}
/* Styling the button */
#submit{
background-color: #003333;
color: white;
border-radius: 3px;
text-decoration: none;
cursor: pointer;
border: none;
}
#submit:hover {
background-color: white;
color: #003333;
}
/* styling the footer and inserting the footer's layout */
footer {
padding: 20px 0;
text-align: center;
background-color: #FF3333;
color: white;
font-size: 18px;
}
I think you want to position your nav and footer with position:fixed:
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Assistant', sans-serif;
}
/* Creating the sticky footer */
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.container {
padding:100px 0;
flex: 1;
}
/* Designing the navigation's layout*/
nav,
.nav-links {
display: flex;
}
nav {
position:fixed;
width: 100%;
align-items: baseline;
}
.nav-links {
list-style: none;
}
.title{
flex-grow: 1;
padding: 1em;
}
/* Designing the .container and form's layout */
.container {
display: flex;
justify-content: center;
height: 100vh;
}
.container .contact-form {
display: flex;
flex-direction: column;
width: 60vw;
max-height: 65vh;
margin-top: 35px;
}
.container h2 {
text-align: center;
}
.contact-form form {
display: flex;
flex-direction: column;
min-height: 50vh;
padding: 0 20px;
justify-content: space-evenly;
}
.contact-form form div {
display: flex;
}
.contact-form form div label {
flex-grow: 1;
}
/* Styling the navigation links */
nav {
background-color: #FF3333;
}
.title {
color: white;
font-size: 25px;
}
.nav-links li a {
margin-right: 10px;
padding: 12px;
border-radius: 2px;
color: white;
text-decoration-line: none;
font-size: 18px;
}
.nav-links li a:hover {
background-color: white;
color: #FF3333;
}
/* Styling the main content of the site*/
.container h2 {
color: white;
}
.contact-form form label {
color: white;
}
.container {
background-color: #999999;
}
.contact-form form {
margin-top: 20px;
background-color: #669999;
border-radius: 12px;
}
.contact-form form input[type='text'],
.contact-form form input[type='email'] {
width: 40vw;
height: 30px;
}
.contact-form form textarea {
width: 40vw;
height: 12vh;
font-size: 16px;
}
.contact-form form input[type='button'] {
width: 10vw;
height: 5vh;
}
.contact-form form div label,
.contact-form form div input {
font-size: 18px;
}
.button {
justify-content: flex-end;
}
/* Styling the button */
#submit{
background-color: #003333;
color: white;
border-radius: 3px;
text-decoration: none;
cursor: pointer;
border: none;
}
#submit:hover {
background-color: white;
color: #003333;
}
/* styling the footer and inserting the footer's layout */
footer {
position:fixed;
bottom:0;
width:100%;
padding: 20px 0;
text-align: center;
background-color: #FF3333;
color: white;
font-size: 18px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css2?family=Assistant&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/base.css">
<title>Jackson | Contact</title>
</head>
<body>
<nav>
<h1 class="title">Jackson's Guitar</h1>
<ul class="nav-links">
<li>About</li>
<li>Guitars</li>
</ul>
</nav>
<main class="container">
<div class="contact-form">
<h2>Contact Us</h2>
<form action="" id="contact-form">
<div class="first_name">
<label for="first_name">First:</label>
<input type="text" id="first_name" required>
</div>
<div class="last_name">
<label for="last_name">Last:</label>
<input type="text" id="last_name" required>
</div>
<div class="email">
<label for="email">Email: </label>
<input type="email" id="email" required>
</div>
<div class="user_message">
<label for="user_message">Message:</label>
<textarea id="user_message" required></textarea>
</div>
<div class="button">
<input type="button" id="submit" value="Submit">
</div>
</form>
</div>
</main>
<footer>
<p>Diego Salas Polar © 2020</p>
</footer>
</body>
I started using flexbox for my footers and now on all of my pages with forms the background-color is now the default white. Here is an example of one of my pages:
login.php
body {
background-color: #211e1e;
display: flex;
flex-direction: column;
height: 95vh;
}
h1 {
color: #99cc00;
text-align: center;
}
.content {
flex: 1 0 auto;
}
footer {
text-align: center;
font-weight: lighter;
color: #99cc00;
font-size: 10px;
flex-shrink: 0;
}
h3 {
position: absolute;
font-weight: bold;
color: #99cc00;
font-size: 15px;
width: 100%;
top: 91.5%;
}
.button {
background-color: #211e1e;
color: white;
font-size: 24px;
/*padding: 15px 50px;*/
transition-duration: .4s;
border: greenyellow;
width: 250px;
/* width of button */
height: 50px;
/* height of button */
}
.buttonColor:hover {
color: black;
background-color: greenyellow;
}
h1 {
text-align: center;
bottom: 25%;
}
content {
align-items: center;
justify-content: center;
}
.signin {
color: #99cc00;
margin: auto;
font-size: 24px;
}
.loginInput {
font-size: 24px;
}
.loginButton {
background-color: #211e1e;
color: white;
font-size: 24px;
padding: 10px 50px;
transition-duration: .4s;
border: greenyellow;
}
.loginButtonColor:hover {
color: black;
background-color: greenyellow;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="icon" href="../../favicon.ico">
<meta charset="UTF-8">
<title>TapLovers</title>
<link rel="stylesheet" href="../background.css">
<link rel="stylesheet" href="login.css">
</head>
<body>
<div class=content>
<h1><img src="../../36x36-icon.png">apLovers</h1>
<form class="signin">
<input type="text" email="email" placeholder="Email" class="loginInput"><br>
<input type="text" password="password" placeholder="Password" class="loginInput"><br>
<input type="submit" name="submit" id="login" class="loginButton loginButtonColor" value="Login To TapLovers!" /><br><br>
<a href="../register/register.php">
<font color="#99cc00">Create a FREE TapLovers Account!</font>
</a>
</form>
</div>
<footer>
<h3><img src="../../favicon.ico">apLovers</h3><br>© 2018 TapLovers, All Rights Reserved
</footer>
</body>
</html>
Also I was trying to center my forms and my title using flexbox as well and I haven't gotten that working either. I'm not really sure what other details would be useful for this particular problem. If you need any more details just reply below and I'll answer them as they come out.
EDIT: The snippet that compiles on stack overflow shows my background just fine. What's more is if I use ctrl+shift+i on my page then the background works but if I just reload on my page then the background will turn white.
I did not see the issue with background fluctuations. I think it is a delay in the page load. I have added comments to help with the flexbox centering of items.
/*CSS reset of browser agent. Removes the horizontal scroll currently happening in page.*/
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-color: #211e1e;
display: flex;
flex-direction: column;
/* No need to restrict the height.
height: 95vh;*/
}
h1 {
color: #99cc00;
text-align: center;
}
.content {
flex: 1 0 auto;
/*make the content div flex so that the form can take the center alignment from flexbox properties. Add the centering here and avoid the margin: auto property */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
footer {
text-align: center;
font-weight: lighter;
color: #99cc00;
font-size: 10px;
flex-shrink: 0;
}
h3 {
position: absolute;
font-weight: bold;
color: #99cc00;
font-size: 15px;
width: 100%;
top: 91.5%;
}
.button {
background-color: #211e1e;
color: white;
font-size: 24px;
/*padding: 15px 50px;*/
transition-duration: .4s;
border: greenyellow;
width: 250px;
/* width of button */
height: 50px;
/* height of button */
}
.buttonColor:hover {
color: black;
background-color: greenyellow;
}
h1 {
text-align: center;
bottom: 25%;
}
/*Add flexbox style the inputs as blocks and remove <br> from HTML*/
.signin {
color: #99cc00;
font-size: 24px;
display: flex;
flex-direction: column;
}
.signin>* {
margin: 5px 0;
}
.loginInput {
font-size: 24px;
}
.loginButton {
background-color: #211e1e;
color: white;
font-size: 24px;
padding: 10px 50px;
/*Please check your animation ??
transition-duration: .4s;*/
/*add border size and transparency 1px solid*/
border: 1px solid greenyellow;
}
.loginButtonColor:hover {
color: black;
background-color: greenyellow;
}
<div class="content">
<h1><img src="../../36x36-icon.png">apLovers</h1>
<form class="signin">
<input class="loginInput" placeholder="Email" type="text"> <input class="loginInput" placeholder="Password" type="text"> <input class="loginButton loginButtonColor" id="login" name="submit" type="submit" value="Login To TapLovers!"> <font color="#99CC00">Create a FREE TapLovers Account!</font>
</form>
</div>
<footer>
<h3><img src="../../favicon.ico">apLovers</h3>
<p>© 2018 TapLovers, All Rights Reserved</p>
</footer>
How do I align <span id="milliseconds">00</span> to right?
Please see working code below:
#font-face {
font-family: "Digi";
src: url("fonts/ds-digib.ttf");
}
body {
font-family: Arial;
font-size: 80px;
font-weight: bold;
padding: 40px 0;
}
#container {
display: flex;
flex-direction: row;
justify-content: space-around;
}
#splits {
font-size: 40px;
padding: 0px;
font-weight: normal;
}
#clock {
border: 2px solid #000;
border-radius: 20px;
box-sizing: border-box;
height: 250px;
margin: 0 auto;
padding: 18px 0;
width: 245px;
}
#sphere {
border: 2px solid #000;
border-radius: 20px;
box-sizing: border-box;
font-family: "Digi";
font-size: 80px;
height: 210px;
margin: 0 auto;
padding: 35px 0 0 5px;
position: relative;
width: 220px;
}
#digits {
display: flex;
flex-direction: column;
}
#digits-milliseconds {
font-size: 35px;
}
.leash {
background: rgb(204, 84, 87);
border: 2px solid rgb(134, 59, 61);
height: 50px;
margin: 0 auto;
width: 120px;
}
.leash-top {
border-bottom: 0;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.leash-bottom {
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
border-top: 0;
height: 270px;
padding-top: 50px;
}
.hole {
background: #fff;
border: 2px solid rgb(134, 59, 61);
border-radius: 100%;
height: 20px;
margin: 0 auto 50px;
width: 20px;
}
.number {
display: inline-block;
width: 16px;
margin-right: 8px;
}
.btn {
border: 0;
border-radius: 100%;
bottom: 10px;
color: #fff;
cursor: pointer;
height: 50px;
outline: 0;
position: absolute;
width: 50px;
}
.btn.start,
.btn.stop {
left: 10px;
}
.btn.reset,
.btn.split {
right: 10px;
}
.btn.start {
background: #5fca5f;
}
.btn.stop {
background: #f14949;
}
.btn.reset {
background: #908e8e;
}
.btn.split {
background: #0851ab;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Chronometer</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="container">
<div id="splits">
<strong>Splits</strong>
<ol id="split-times">
</ol>
</div>
<div class="watch">
<div class="leash leash-top"></div>
<section id="clock">
<div id="sphere">
<div id="digits">
<div>
<span id="minDec" class="number">0</span>
<span id="minCen" class="number">0</span>
<span>:</span>
<span id="secDec" class="number">0</span>
<span id="secCen" class="number">0</span>
</div>
<div id="digits-milliseconds">
<span id="milliseconds">00</span>
</div>
</div>
<button id="btnLeft" class="btn start">START</button>
<button id="btnRight" class="btn reset">RESET</button>
</div>
</section>
<div class="leash leash-bottom">
<div class="hole"></div>
<div class="hole"></div>
<div class="hole"></div>
</div>
</div>
</div>
<script src="chronometer.js" type="text/javascript"></script>
<script src="main.js" type="text/javascript"></script>
</body>
</html>
#milliseconds{
display: block;
text-align: right;
}
<span> in inline element and it's not supposed to be aligned.
Just align parent div.
I can't see the wider picture, but why not to place span with miliseconds along with other spans? What is the purpose of the stracture you wrote? Is it only about font-size? And why miliseconds are not supposed to be in flex?
Just do this :
#digits-milliseconds {
text-align: right;
}