I want to separate the text styling from my header and body. How can I achieve this? I also want to keep the text in the heading inside my hero/background. I also need to add the appropriate media queries or flex's I assume? I am new to coding so please be weary that I am unfamiliar with all the terminology and coding elements. I am in coding bootcamp. I appreciate your help and tips.
* {
margin:0;
padding: 0;
}
/* Header Start */
#vanta-canvas {
width: 100vw;
height: 50vh;
}
.inner_header {
width: 100%;
height: 100%;
margin: 0 auto;
text-align: center;
position: relative;
top: 75px;
}
.flex {
align-items: center;
display: flex;
flex-direction: column;
justify-content: center;
flex-wrap: nowrap;
align-content: normal;
}
.highlight {
color: blue;
font-family: cursive;
-webkit-font-smoothing: antialiased;
}
body {
color: #fff;
font-family: cursive;
-webkit-font-smoothing: antialiased;
font-size: 25px;
background-color: #b4b4b4;
}
button {
background-color: transparent;
border-radius: 45% 3px;
color: #b4b4b4;
padding: 10px 20px;
text-decoration: none;
display: inline-block;
font-size: 20px;
cursor: pointer;
margin: 0 auto;
text-align: center;
position: relative;
top: 90px;
-webkit-font-smoothing: antialiased;
transition: all 0.3s;
}
button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.3s;
}
button span:after {
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.3s;
}
button:hover, button:focus{
background-color: grey;
color: blue;
}
button:hover span {
padding-right: 25px;
}
button:hover span:after{
opacity: 1;
right: 0;
}
/* Header End */
<!DOCTYPE html>
<html lang="en_US">
<head>
<meta charset="UTF-8" />
<title>Portfolio</title>
<link rel="stylesheet" href="./assets/css/style.css" >
</head>
<body>
<div id="vanta-canvas">
<header>
<h1 class="inner_header" class="flex">
Hello, I'm
<span class="highlight">Brian Mojica.</span>
<br>
I'm a full-stack web develop.
</h1>
<button class="flex" style="vertical-align:middle"><span>
View My Work
</span></button>
</header>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r121/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vanta#latest/dist/vanta.waves.min.js"></script>
<script>
VANTA.WAVES({
el: "#vanta-canvas",
mouseControls: true,
touchControls: true,
gyroControls: false,
minHeight: 100.00,
minWidth: 100.00,
scale: 1.00,
scaleMobile: 1.00,
color: 0x102
})
</script>
</div>
<nav>
Test
</nav>
</body>
</html>
If what you want is a line divider, you can use the <hr> tag.
There are different style attributes you can add, too.
<hr class="dashed">
<hr class="dotted">
<hr class="solid">
<hr class="rounded">
I hope this helps.
Edit:
Sorry, I didn't read your question close enough.
You can add
header {
(css)
}
Just like you have
body {
(css)
}
Related
My link which would go to the home page is on the Egypt coat of arms. But the link is only clickable on the nav bar. How do I fix it? The first block is HTML and the second is CSS.-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
html
css
(HTML)
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="coatofarms"> <img src="coabetter.png" class="coa" width="75px"></div>
<div class="topnav">
News
Contact
About
</div>
<button type="button"class="buttonbook" >BOOK</button>
<div style="padding-left:16px">
<h2></h2>
<p></p>
</div>
</body>
</html>
(CSS)
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
background-image: url("goodyegypt.png")
}
.coatofarms {
margin-top: -16px;
margin-left: 5px;
width: 5%;
}
.topnav {
overflow: hidden;
background-color: #e1bc85;
margin-top: -151px;
}
.topnav a {
float: left;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 20px;
margin-left: 10%;
font-family: Bodoni Mt;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #04AA6D;
color: white;
}
.buttonbook {
background-color: #e9cda4;
border-radius: 50%;
width: 250px;
height: 100px;
border: none;
opacity: 0.7;
font-family: Algerian;
font-size: 30px;
margin-top: 35%;
margin-left: 43%;
align: center;
}
.buttonbook:hover {
background-color: #e1c295;
opacity: 0.7;
}
The use of margin-top as the only layout mechanism is what is causing you problems. In this fiddle I instead absolutely placed your button.buttonbook element.
https://jsfiddle.net/cwzp5dya/2/
.buttonbook {
position: absolute;
top: 55%;
left: 43%;
Highly recommend NOT using margin as your primary layout method.
I want my website to be responsive and adjust to any device. I'm using glitch.com to create this website. For example on mac os, when I set my website to full screen there is a scrolling bar even thought I don't want there to be one. How can I achieve a responsive website? I've tried scaling my website down when on different devices but it wont work. Also, I provided some images and code below (including my website).
Website:
https://runturtle.glitch.me/
Code:
#import url("https://fonts.googleapis.com/css2?family=Rubik&display=swap");
#fname {
margin-bottom: 10px;
}
h1 {
font-weight: bold;
color: #dde6d8;
}
* {
font-family: "Rubik";
user-select: none;
}
form {
margin: auto;
}
::placeholder {
/* Chrome, Firefox, Opera, Safari 10.1+ */
color: #a0a0a0;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Firefox */
input[type="number"] {
-moz-appearance: textfield;
}
h1 {
align-items: center;
}
h3 {
color: #dde6d8;
}
input {
margin: 0 auto;
border: none;
color: black;
background-color: rgb(white);
width: 50%;
height: 15px;
outline: none;
padding: 9px 10px;
border-radius: 4px;
}
button {
color: #183505;
border: none;
cursor: pointer;
padding: 5px 10px;
background-color: #4d7135;
outline: none;
border-radius: 4px;
}
button:hover {
opacity: 0.8;
}
button:active {
cursor: loading;
}
body {
margin: 0;
padding: 0;
background: #1f2f15;
font-family: ubuntu;
color: white;
}
header {
display: flex;
align-items: center;
background: #486b2c;
}
header img {
width: 50px;
background: white;
border-radius: 5px;
margin: 0 20px 0 40px;
}
.dashboard {
width: 150px;
height: 800px;
position: absolute;
left: 10px;
top: 81px;
}
.home {
opacity: 1;
width: 150px;
}
article {
background: #131b0b;
width: 50%;
margin: 20px auto;
border-radius: 10px;
padding: 10px;
}
hr,
article .date {
color: #a0a0a0;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Run Turtle</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<header>
<img
src="https://cdn.glitch.com/1c916b3c-8432-490c-9650-264f03c95b9e%2Frss-icon.png?v=1630185994030"
width="50px"
/>
<h1><strong>Run Turtle</strong></h1>
</header>
<main>
<article class="dashboard">
<h1>Dashboard</h1>
<hr />
<button
onClick="window.location.href='https://runturtle.glitch.me';"
class="home"
>
Home
</button>
<br />
<br />
<button
onClick="window.location.href='register.html';"
class="register"
>
Register
</button>
</article>
<article>
<h1>Welcome to Run Turtle</h1>
<hr />
<p>
Welcome to Run Turtle. Navigate Run Turtle with the dashboared on the
left.
</p>
</article>
</main>
<script src="index.js"></script>
</body>
</html>
Here's an image of when the browser is resized:
You can use the Bootstrap Grid System for a responsive website. The layout is in the form of rows and columns that can be adjusted depending on the device size.
Here's the documentation link.
Personally, I like AMP (Accelerated Mobile Pages.) I myself use it for my site and it works good with page layouts.
AMP has a page on how to set up your HTML document to make a responsive mobile page. Here is the article
I suggest you to follow #media rule. CSS Grid Layout Module will help you to solve the arisen problem. For an example I have put a solution code.
screenshot_1 screenshot_2
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
box-sizing: border-box;
}
header {
display: flex;
align-items: center;
background: #486b2c;
}
header img {
width: 50px;
background: white;
border-radius: 5px;
margin: 0 20px 0 40px;
}
.menu {
float: left;
width: 25%;
text-align: center;
}
.menu article {
background-color: #1f2215;
padding: 8px;
height: 800px;
margin-top: 7px;
display: block;
width: 100%;
color: black;
}
input {
margin: 0 auto;
border: none;
color: black;
width: 50%;
height: 15px;
outline: none;
padding: 9px 10px;
border-radius: 4px;
}
button {
color: #183505;
border: none;
cursor: pointer;
padding: 5px 10px;
background-color: #4d7135;
outline: none;
border-radius: 4px;
}
button:hover {
opacity: 0.8;
}
button:active {
cursor: loading;
}
body {
margin: 0;
padding: 0;
background: #1f2f15;
font-family: ubuntu;
color: white;
}
.main {
float: left;
width: 60%;
padding: 0 20px;
}
h1 {
font-weight: bold;
color: #dde6d8;
}
#media only screen and (max-width: 620px) {
.menu,
.main {
width: 100%;
}
.menu {
height: 200px;
}
.main {
background: #1f2f15;
height: 600px;
}
}
</style>
</head>
<body style="font-family:Verdana;">
<div>
<header>
<img src="https://cdn.glitch.com/1c916b3c-8432-490c-9650-264f03c95b9e%2Frss-icon.png?v=1630185994030"
width="50px" />
<h1><strong>Run Turtle</strong></h1>
</header>
</div>
<div>
<div class="menu">
<article>
<h1>Dashboard</h1>
<hr />
<button>
Home
</button>
<br />
<br />
<button>
Register
</button>
</article>
</div>
<div class="main">
<h1>Welcome to Run Turtle</h1>
<hr />
<p>
Welcome to Run Turtle. Navigate Run Turtle with the dashboared on the
left.
</p>
</div>
</div>
I am working on a personal project and i use scroll-snap in this project
but for some reason the scroll snap sometimes overshoots or lands at an awkward position between 2 parts of the page
#import url('https://fonts.googleapis.com/css2?family=Roboto:wght#100&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Titillium+Web:wght#600&display=swap');
:root {
--bg-color: rgb(33, 32, 41);
--header-color: rgb(255, 170, 55);
--color-white: white;
--color-black: black;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
scroll-behavior: smooth;
}
html{
scroll-snap-type: y mandatory;
}
html, body {
font-family: 'Titillium Web', sans-serif;
background-color: var(--bg-color);
color: var(--color-white);
width: 100%;
}
body div {
scroll-snap-align: start;
}
header {
background: var(--header-color);
position: fixed;
top: 0;
z-index: 10000;
width: 100%;
}
header div {
width: 80%;
margin: 0 auto;
}
header div::after {
content: '';
display: table;
clear: both;
}
header div img {
position: absolute;
float: left;
margin: 0.6em;
}
nav ul {
width: auto;
float: right;
margin: 2em;
}
nav ul li {
display: inline-block;
margin-left: 2em;
font-family: 'Roboto', sans-serif;
}
nav ul li a {
font-size: 1.5em;
color: black;
text-decoration: none;
text-transform: uppercase;
}
nav ul li a:hover {
color: rgb(93, 93, 93);
}
#about {
display: flex;
justify-content: center;
align-items: center;
width: clamp(750px, 80%, 100%);
height: 100vh;
margin: 0 auto;
text-align: center;
font-size: 1.5em;
}
#about p {
display: inline;
color: var(--header-color);
}
#about h1 {
margin-bottom: 1em;
}
#invite {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0 auto;
text-align: center;
font-size: 1.5em;
background-color: var(--header-color);
color: var(--color-black);
}
#invite div {
width: clamp(750px, 80%, 100%);
}
#invite div h1 {
margin-bottom: 2em;
}
#invite div button {
width: 6em;
height: 3em;
background-color: rgba(0, 0, 0, 0);
color: var(--color-black);
font-size: 1em;
font-family: 'Roboto', sans-serif;
text-transform: uppercase;
border: 1px solid black;
transition: 0.2s;
}
#invite button:hover {
margin-top: 0.3em;
}
#invite button a {
color: var(--color-black);
text-decoration: none;
}
#contact {
display: flex;
justify-content: center;
align-items: center;
width: clamp(750px, 80%, 100%);
height: 100vh;
margin: 0 auto;
text-align: center;
font-size: 1.5em;
}
#contact div h1 {
margin-bottom: 1em;
}
<!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">
<title>FoxoBot</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div>
<img src="files/logo.png" alt="Logo" height="72em">
<nav>
<ul>
<li>About</li>
<!--<li>showcase</li>-->
<li>Invite</li>
<li>contact</li>
</ul>
</nav>
</div>
</header>
<div id="about">
<div>
<h1>About</h1>
<p><p>FoxoBot</p> is a Discord bot developed by Lappland and Ralkey.</p>
<br>
<p><p>FoxoBot</p> is a easy to use and a friendly bot for general, fun & administrative commands on Discord</p>
<br>
<p><p>FoxoBot</p> is always in development and we also learn alot along the way</p>
</div>
</div>
<!--<div id="showcase">
-- i dont have anything for showcase yet --
</div>-->
<div id="invite">
<div>
<h1>Invite FoxoBot to your server</h1>
<button>Invite!</button>
</div>
</div>
<div id="contact">
<div>
<h1>Contact us</h1>
<p>you can contact us throught Discord.</p>
<p>our tags are:</p>
<p>Ralkey: blank</p>
<p>Lappland: blank</p>
</div>
</div>
</body>
</html>
(I recommend opening the snippet in full page)
after countless amounts of time searching for a solution I have given up and landed here
I hope atleast one of you is able to help me
It appears your problem is that you're applying scroll-snap-align: start; to every div within body and so when you scroll it is snapping to each div in your page. Whereas you only want to be applying it to its first child of the body or in your case each section of your page.
So all I have done in the example below is changed body div to body > div in your css.
You can see more information on the greater than sign in css here: What does the ">" (greater-than sign) CSS selector mean?
#import url('https://fonts.googleapis.com/css2?family=Roboto:wght#100&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Titillium+Web:wght#600&display=swap');
:root {
--bg-color: rgb(33, 32, 41);
--header-color: rgb(255, 170, 55);
--color-white: white;
--color-black: black;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
scroll-behavior: smooth;
}
html{
scroll-snap-type: y mandatory;
}
html, body {
font-family: 'Titillium Web', sans-serif;
background-color: var(--bg-color);
color: var(--color-white);
width: 100%;
}
body > div {
scroll-snap-align: start;
}
header {
background: var(--header-color);
position: fixed;
top: 0;
z-index: 10000;
width: 100%;
}
header div {
width: 80%;
margin: 0 auto;
}
header div::after {
content: '';
display: table;
clear: both;
}
header div img {
position: absolute;
float: left;
margin: 0.6em;
}
nav ul {
width: auto;
float: right;
margin: 2em;
}
nav ul li {
display: inline-block;
margin-left: 2em;
font-family: 'Roboto', sans-serif;
}
nav ul li a {
font-size: 1.5em;
color: black;
text-decoration: none;
text-transform: uppercase;
}
nav ul li a:hover {
color: rgb(93, 93, 93);
}
#about {
display: flex;
justify-content: center;
align-items: center;
width: clamp(750px, 80%, 100%);
height: 100vh;
margin: 0 auto;
text-align: center;
font-size: 1.5em;
}
#about p {
display: inline;
color: var(--header-color);
}
#about h1 {
margin-bottom: 1em;
}
#invite {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0 auto;
text-align: center;
font-size: 1.5em;
background-color: var(--header-color);
color: var(--color-black);
}
#invite div {
width: clamp(750px, 80%, 100%);
}
#invite div h1 {
margin-bottom: 2em;
}
#invite div button {
width: 6em;
height: 3em;
background-color: rgba(0, 0, 0, 0);
color: var(--color-black);
font-size: 1em;
font-family: 'Roboto', sans-serif;
text-transform: uppercase;
border: 1px solid black;
transition: 0.2s;
}
#invite button:hover {
margin-top: 0.3em;
}
#invite button a {
color: var(--color-black);
text-decoration: none;
}
#contact {
display: flex;
justify-content: center;
align-items: center;
width: clamp(750px, 80%, 100%);
height: 100vh;
margin: 0 auto;
text-align: center;
font-size: 1.5em;
}
#contact div h1 {
margin-bottom: 1em;
}
<!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">
<title>FoxoBot</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div>
<img src="files/logo.png" alt="Logo" height="72em">
<nav>
<ul>
<li>About</li>
<!--<li>showcase</li>-->
<li>Invite</li>
<li>contact</li>
</ul>
</nav>
</div>
</header>
<div id="about">
<div>
<h1>About</h1>
<p><p>FoxoBot</p> is a Discord bot developed by Lappland and Ralkey.</p>
<br>
<p><p>FoxoBot</p> is a easy to use and a friendly bot for general, fun & administrative commands on Discord</p>
<br>
<p><p>FoxoBot</p> is always in development and we also learn alot along the way</p>
</div>
</div>
<!--<div id="showcase">
-- i dont have anything for showcase yet --
</div>-->
<div id="invite">
<div>
<h1>Invite FoxoBot to your server</h1>
<button>Invite!</button>
</div>
</div>
<div id="contact">
<div>
<h1>Contact us</h1>
<p>you can contact us throught Discord.</p>
<p>our tags are:</p>
<p>Ralkey: blank</p>
<p>Lappland: blank</p>
</div>
</div>
</body>
</html>
I am having issues with my styling for a landing page on SharePoint.
SharePoint loves to write over HTML with its own which makes the styling a bit funky.
There are a few table elements that appear with the element selector in the developer tools on the page, but I do not believe those are interfering with my custom HTML. There are two s that appear and I believe is messing with my HTML/CSS. They are both #s4-bodyContainer & #contentRow. The more I look at it it seems that the #s4-bodyContainer is the one it will not fill. I have changed the margin of it to 0, as well as the width to 100% and the content still will not cover the whole width/height of the containing div?
Here is my relevant HTML/CSS:
header {
text-align:center;
background: #104723;
overflow:auto;
}
.flexbox-container {
display:flex;
align-items:center;
background:#f2f2f2;
width: 100%;
}
#s4-bodyContainer {
margin: 0;
width: 100%;
}
#s4-workspace{
overflow: hidden;
margin: 0;
}
footer {
background: #104723;
color: #104723;
height: 85px;
width: 100%;
}
.headhead {
color: white;
}
.flexbox-container > * {
flex:1;
min-width:0;
margin:0;
}
.tst{
position: relative;
}
.troopers {
max-width:100%;
filter: drop-shadow(2px 2px 5px #000);
}
button {
display:block;
margin-top:50px;
}
.black {
font-size:25px;
color: #104723;
font-weight: bold;
}
.logo {
float: right;
margin-top: 5px;
margin-bottom: 5px;
margin-right: 5px;
}
.gold {
font-size: 35px;
color: #b3ab7d;
font-weight: bolder;
margin-top: -15px;
}
.btn-group .button {
background-color: #104723;
border: 1px solid;
color: #b3ab7d;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
margin-top: 10px;
}
.selector {
float: left;
overflow: hidden;
}
.selector .btnselect {
background-color: #104723;
border: 1px solid;
color: #b3ab7d;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
margin-top: 10px;
}
.item-select {
display: none;
position: absolute;
background-color: #e7e7e7;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.item-select a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.item-select a:hover {
background-color: #ddd;
color: black;
}
.selector:hover .item-select {
display: block;
}
#sideNavBox { DISPLAY: none }
#contentBox { margin-left: 0 }
.flexbox-container {
margin-top: 0px;
width: 100%;
}
html, body {margin: 0; height: 100%; overflow: hidden}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<title>Example Landing Page</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<!--<header>
<h1 class="headhead">Active Projects</h1>
</header>-->
<div class="flexbox-container">
<div class="tst">
<img class="troopers" src="https://www.usxjobs.com/wp-content/uploads/2016/05/TROOPERS-2a.png" alt="troopers"/>
</div>
<div>
<h1 class="black">Welcome to the Projects Site</h1>
<h1 class="gold">Insert Sample Text</h1>
<div class="selector">
<a href="" target="_blank"><button class="btnselect">Site 1
<i class="fa fa-caret-down"></i>
</button></a>
<div class="item-select">
Sub 1
Sub 2
Sub 3
</div>
</div>
<div class="selector">
<a href="" target="_blank"><button class="btnselect">Site 2
<i class="fa fa-caret-down"></i>
</button></a>
<div class="item-select">
Sub 1
Sub 2
Sub 3
Sub 4
Sub 5
</div>
</div>
</div>
</div>
<footer>
<img src="" class="logo"/>
</footer>
</body>
</html>
Here is what they look like on page:
If I'm not mistaken, the CSS rules for the #s4-bodyContainer on SharePoint are not inline (from external file: corev15.css). Meaning you should be able to override them if you attach your CSS at the end of the master-page body. If it doesn't work you can resort to the !important tag to give your CSS properties precedence. checkout CSS Specificity.
Using ! important doesn't always fixes the issue. The problem basically with ! important is perhaps your styling library might also be using it. So try checking whether your margin and width property is being applied to that specific section through Google inspector or any other browser inspector. Try checking whether your styling software has made a property called max-width and whether it is being applied. And most of all if a little modification and fidlling with ! important doesn't work. Go for inline css..
That is an issue with space if image is used as original inline-element like an text element. Solution:
Just add
display:block; to .troopers
See example!
(Alternative: set line-height: 0; font-size: 0 to wrapper of image div.tst. That avoid unwhanted space from text effects as well.)
header {
text-align:center;
background: #104723;
overflow:auto;
}
.flexbox-container {
display:flex;
align-items:center;
background:#f2f2f2;
width: 100%;
}
#s4-bodyContainer {
margin: 0;
width: 100%;
}
#s4-workspace{
overflow: hidden;
margin: 0;
}
footer {
background: #104723;
color: #104723;
height: 85px;
width: 100%;
}
.headhead {
color: white;
}
.flexbox-container > * {
flex:1;
min-width:0;
margin:0;
}
.tst{
position: relative;
}
.troopers {
/* ADD ... */
display: block;
max-width:100%;
filter: drop-shadow(2px 2px 5px #000);
}
button {
display:block;
margin-top:50px;
}
.black {
font-size:25px;
color: #104723;
font-weight: bold;
}
.logo {
float: right;
margin-top: 5px;
margin-bottom: 5px;
margin-right: 5px;
}
.gold {
font-size: 35px;
color: #b3ab7d;
font-weight: bolder;
margin-top: -15px;
}
.btn-group .button {
background-color: #104723;
border: 1px solid;
color: #b3ab7d;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
margin-top: 10px;
}
.selector {
float: left;
overflow: hidden;
}
.selector .btnselect {
background-color: #104723;
border: 1px solid;
color: #b3ab7d;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
margin-top: 10px;
}
.item-select {
display: none;
position: absolute;
background-color: #e7e7e7;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.item-select a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.item-select a:hover {
background-color: #ddd;
color: black;
}
.selector:hover .item-select {
display: block;
}
#sideNavBox { DISPLAY: none }
#contentBox { margin-left: 0 }
.flexbox-container {
margin-top: 0px;
width: 100%;
}
html, body {margin: 0; height: 100%; overflow: hidden}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<title>Example Landing Page</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<!--<header>
<h1 class="headhead">Active Projects</h1>
</header>-->
<div class="flexbox-container">
<div class="tst">
<img class="troopers" src="https://www.usxjobs.com/wp-content/uploads/2016/05/TROOPERS-2a.png" alt="troopers"/>
</div>
<div>
<h1 class="black">Welcome to the Projects Site</h1>
<h1 class="gold">Insert Sample Text</h1>
<div class="selector">
<a href="" target="_blank"><button class="btnselect">Site 1
<i class="fa fa-caret-down"></i>
</button></a>
<div class="item-select">
Sub 1
Sub 2
Sub 3
</div>
</div>
<div class="selector">
<a href="" target="_blank"><button class="btnselect">Site 2
<i class="fa fa-caret-down"></i>
</button></a>
<div class="item-select">
Sub 1
Sub 2
Sub 3
Sub 4
Sub 5
</div>
</div>
</div>
</div>
<footer>
<img src="" class="logo"/>
</footer>
</body>
</html>
After a deep swipe of anything on the internet that could remotely helpful to this issue, I finally came across a similar topic on the MSDN :
The solution says to implement this:
.ms-webpartPage-root{
border-spacing:0px!important;
}
And it works!
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>