Background color not changing from white - html

For some reason the background color refuses to change from white. I am trying to get it to change from white to black under the header, but it refuses to change. Putting "background-color:" in the body SCSS doesn't seem to change it.
I am not sure if there is something in my SCSS that is simply over riding the background color without me realizing?
Any help is greatly appreciated
SCSS:
*{
margin: 0;
padding: 0;
text-decoration: none;
list-style: none;
background-color: '#010101';
}
#wrapperHeader {
width: 100vw;
height: 210px; /* height of the background image? */
background:url(images/header.png);
}
div#wrapperHeader div#header {
width: 100vw;
height:100px;
margin:0 auto;
}
div#wrapperHeader div#header img {
width: 100vw ; /* the width of the logo image */
height: 210px ; /* the height of the logo image */
margin:0 auto;
}
header {
color: white;
background-color: dimgrey ;
clear: left;
text-align: center;
}
.toggle_menu{
position: fixed;
padding: 17px 20px 15px 15px;
margin-top: 210px;
color: white;
cursor: pointer;
background-color: #000;
z-index: 1000000;
font-size: 2em;
opacity: 0;
}
.sidebar_menu{
position: fixed;
width: 100vh;
max-width: 250px;
margin-left: 0px;
overflow: hidden;
height: 100vh;
max-height: 100vh;
background-color: rgba(17, 17, 17, 0.9);
opacity: 0,9;
transition: all 0.3s ease-in-out;
}
.fa-times{
right: 10px;
top: 10px;
opacity: 0.7;
cursor: pointer;
position: absolute;
color: red;
transition: all 0.3s ease-in-out;
}
.fa-times:hover{
opacity: 1 ;
}
.boxed_item {
font-family: 'Open Sans';
font-weight: 200;
padding: 10px 20px;
display: inline-block;
border: solid 2px white;
box-sizing: border-box;
font-size: 22px;
color: white;
text-align: center;
margin-top: 70px;
}
.logo_bold{
font-weight: 800;
}
.logo_title{
color: white;
font-family: 'Open Sans';
font-weight: 200;
font-size: 12px;
text-align: center;
padding: 5px 0px;
}
.nav_selection{
margin: 0, 0;
display: block;
width: 200;
margin-top: 100px;
margin-left: 5px;
}
.nav_item{
font-weight: 200;
font-family: 'Open Sans';
color: white;
padding: 15px 0;
font-size: 20px;
color: #D8D8D8;
border-bottom: solid 2px #D8D8D8;
transition: all 0.3s ease-in-out;
}
.hide_menu{
margin-left: -250px;
}
.opacity_one{
opacity: 1;
}
.disabled {
pointer-events:none; //This makes it not clickable
opacity:0.6;
font-weight: 200;
font-family: 'Open Sans';
color: white;
padding: 15px 0;
font-size: 20px;
color: #D8D8D8;
border-bottom: solid 2px #D8D8D8;
transition: all 0.3s ease-in-out;
}

At three place you have give the background color code in three different style.
Please follow anyone format.
Never give the color in the quotation mark. You have given it in *{ background-color: '#010101'; } remember that. It should be *{ background-color: #010101; }.
You have given background-color: dimgrey ; so each time the color name is not working you have gave the color code for that.
This is header part for which you have to make change. for dimgrey the color code is: #696969 so your code will be:
header {
color: white;
background-color: #696969; // check this line.
clear: left;
text-align: center;
}
It will make the change in the header parts background color. you have to check only that part.
It may be possible that other style will be override the background of header. In that case you have to put the !important in the code like this:
header {
color: white;
background-color: #696969 !important; // check this line.
clear: left;
text-align: center;
}
Let me know if it help you.

Change background-color: '#010101'; this to
background-color: '#010101!important';

Related

Writing two paragraphs, these are spaced apart! IDK why

Writing two paragraphs, these are spaced apart. My paragraphs are very far and I don't understand why.
I tried to unlink css files, between the two paragraphs there was an empty line: missing in the code.
My page:
<div class="sharp">
<p class="title">Chi sono?</p><p class="content">Seguimi su Twitter!</p>
</div>
All my CSS:
*{
margin: 0;
height: 100%;
}
.title{
color: #2d3436;
text-align: center;
text-shadow: 3px 2px #b2bec3;
font-size: 50px;
font-weight: bold;
}
.content{
color: #2d3436;
text-align: center;
text-shadow: 2px 1px #b2bec3;
font-size: 25px;
font-weight: lighter;
}
hr {
width: 95%;
height: 2px;
margin-left: auto;
margin-right: auto;
background-color:#666;
border: 0 none;
margin-top: 20px;
margin-bottom:20px;
}
.space{
height: 100px;
}
.dark{
margin: auto;
padding: 20px;
background: #000;
color: #fff;
width: 85%;
height: 80px;
}
.sharp{
margin: auto;
padding: 20px;
background: #fff;
border-radius: 25px;
border: 1px solid #dfe4ea;
width: 85%;
box-shadow: 5px 10px 8px #888888;
}
body{
width: 100%;
background-image: linear-gradient(45deg,#ced6e0,#ced6e0);
background-repeat: no-repeat;
background-size: 4000px 4000px;
}
.img-container{
background-image: url(../data/images/hero.png);
height: 70%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
z-index:1;
}
.inner-container{
text-align: center;
width: 100%;
color: #fff;
position: absolute;
height: auto;
margin-top: 200px;
}
h1{
font-size: 7em;
font-family: "Shadows into Light", Sans Serif;
}
h2{
margin-top: -17px;
font-family: "Source Sans Pro", Sans Serif;
font-size: 1.7em;
text-align: center;
font-weight:400;
}
a{
margin-top: 20px;
font-size: 1.3em;
font-family: "Source Sans Pro", Sans Serif;
}
.btn{
display: inline-block;
width: 200px;
font-weight: bold;
padding: 10px;
color: #fff;
border: 4px solid #fff;
text-align: center;
outline: none;
text-decoration: none;
transition: background-color 0.2s ease-out, color 0.2s ease-out;
}
.btn:hover,.btn:active{
background-color: #fff;
color: #000;
transition: background-color 0.3s ease-in, color 0.3s ease-in;
}
#media only screen and (max-width: 920px){
.inner-container{
margin-top: 100 px;
}
}
#media only screen and (max-width: 540px){
.inner-container{
margin-top: 150px;
}
h1{
font-size: 5em;
}
h2{
font-size: 1.4em;
}
The two paragraphs are too far apart. I hope someone can help me...[How the page looks.][1]
By writing *{height: 100%} in your css, you are telling it to make every element (aka *) take up 100% of the available height. In doing so, your first paragraph is taking up all the height it can, pushing the second one all the way down.
If the only element you want to ensure has a 100% height is the white background, consider styling it individually.
The
*{
height: 100%;
}
part of your CSS file is telling every element on the page to be the same height as the window, so the second element is pushed down. If you remove that line from the CSS file the problem will go away.
Problem solved by giving
height: 10%;
to the paragraphs.

Element after other Element higher on page?

I can't get an element to go where I want it to. I am only having this problem because of the way I did my header. I applied position: absolute. You can see an example here: http://jacobgasser.com and you can find all the code on there, or you can read down a little farther and I put it there.
I want the text in the top left of the page to be on the white part of the page
Here is the index.html
<body onload="loadUp();">
<div class="menu">
<a href="https://github.com/jacobgasser" target="_blank"><div
class="menuItem">Projects</div></a>
</div>
<div class="titleBG">
<h1 class="title" onmouseover="coolThing();"onmouseout="notCoolThing();">Jacob Gasser</h1>
</div>
<div class="article">
<div class="articleHead">Who am I?</div>
</div>
<script src="scripts/main.js"></script>
</body>
Here is main.css
body {
margin:0;
padding:0;
}
.title {
color: white;
text-align: center;
font-size: 1000%;
opacity: 0;
-webkit-transition: 0.2s;
}
a {
text-decoration: none;
color: inherit;
}
.article {
font-family: "Arial";
display: inline-block;
padding: 5px 10px 5px 10px;
margin: 5px 10px 5px 10px;
text-align: center;
position: relative;
}
.articleHead {
display: inline-block;
padding: 5px 10px 5px 10px;
margin: 5px 10px 5px 10px;
}
.menu {
display: block;
color: white;
float: right;
margin-right: 10px;
margin-top: 5px;
opacity: 0;
}
.menuItem {
font-size: 400%;
display: block;
padding-left: 20px;
padding-right: 20px;
-webkit-transition: 0.2s;
border-radius: 5px;
}
.menuItem:hover {
background-color: white;
color: black;
cursor: pointer;
-webkit-transition: 0.2s;
}
.titleBG {
background-color: #23272A;
display: block;
width: 100%;
z-index: -1;
position: fixed;
top: 0;
}
::selection {
color: #23272A;
background-color: white;
}
::-moz-selection {
color: #23272A;
background-color: white;
}
#font-face {
font-family: lemon;
src: url("fonts/LemonMilk.otf");
}
#font-face {
font-family: cavs;
src: url("fonts/CaviarDreams.ttf");
}
A simple solution to this issue is to remove the position: fixed; top: 0; and adjust the margin-top and margin-bottom of the page. Just change the CSS for .titleBG and .title to be the following:
.titleBG {
background-color: #23272A;
display: block;
width: 100%;
z-index: -1;
}
.title {
color: white;
text-align: center;
font-size: 1000%;
opacity: 0;
-webkit-transition: 0.2s;
margin: 0 /* You can add a margin-left or margin-right if you want, or even margin-bottom, just keep the margin-top at 0*/;
}
This will give you the following result:

How to put two button in the same line using only html and css?

How do I properly align two buttons side by side with some space between them using css and html only?
Here is my html and css. The two buttons are not aligned properly.
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
body {
background-color: #0c0129;
background-image: url(coding.jpg);
background-position: center;
background-size: cover;
background-blend-mode: soft-light;
}
.heading {
width: 600px;
height: 300px;
margin: auto;
position: absolute;
top: 0px;
bottom: 0px;
right: 0px;
left: 0px;
outline: none;
}
.title1 {
display: block;
text-align: center;
color: white;
font-size: 50pt;
font-family: fantasy;
}
.title2 {
display: block;
margin-top: 16px;
text-align: center;
color: white;
font-size: 15pt;
font-family: sans-serif;
}
.register {
margin: 50px auto;
display: block;
width: 180px;
height: 50px;
border: 3px solid white;
background-color: rgba(255, 255, 255, 0);
color: white;
font-family: sans-serif;
font-weight: bold;
border-radius: 5px;
float: left;
transition: background-color 1000ms, color 1000ms;
}
.register:hover {
background-color: rgba(255, 255, 255, 1);
color: #222;
cursor: pointer;
transition: background-color 1000ms, color 1000ms;
}
.login {
margin: 20px auto;
display: block;
width: 180px;
height: 50px;
border: 3px solid white;
background-color: rgba(255, 255, 255, 0);
color: white;
font-family: sans-serif;
font-weight: bold;
border-radius: 5px;
float: right;
transition: background-color 1000ms, color 1000ms;
}
.login:hover {
background-color: rgba(255, 255, 255, 1);
color: #222;
cursor: pointer;
transition: background-color 1000ms, color 1000ms;
}
ul {
list-style: none;
}
<div class="heading">
<span class="title1">Banerjee Solutions</span>
<span class="title2">Your one stop shop for everything tech.</span>
<ul>
<li><button class="register">REGISTER NOW</button></li>
<li><button class="login">LOG IN</button></li>
</ul>
</div>
What do I need to modify to get the my desired result?
Here is my solution using flex
ul {
list-style: none;
display: flex;
align-items: center;
justify-content: center;
}
li {
margin: auto;
}
In your css classes you have more margin in your register class (using by the first button) than in your login class (using by your second button). They must have the same margin so they appears in line.
For instance put the login class the same as the register class, just like this:
.login {
margin: 50px auto;
display: block;
width: 180px;
height: 50px;
border: 3px solid white;
background-color: rgba(255, 255, 255, 0);
color: white;
font-family: sans-serif;
font-weight: bold;
border-radius: 5px;
float: right;
transition: background-color 1000ms, color 1000ms;
}
The li's of your list are block level elements - so to get the buttons to be on the same row - simply have the li's display: inline. Also the margins for each button were different - so making those the same allows them to be in line with each other. Each button is floated - one to the left and one to the right so each is positioned to the side of the container.
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
body {
background-color: #0c0129;
background-image: url(coding.jpg);
background-position: center;
background-size: cover;
background-blend-mode: soft-light;
}
.heading {
width: 600px;
height: 300px;
margin: auto;
position: absolute;
top: 0px;
bottom: 0px;
right: 0px;
left: 0px;
outline: none;
}
.title1 {
display: block;
text-align: center;
color: white;
font-size: 50pt;
font-family: fantasy;
}
.title2 {
display: block;
margin-top: 16px;
text-align: center;
color: white;
font-size: 15pt;
font-family: sans-serif;
}
.register {
margin: 20px auto;
display: block;
width: 180px;
height: 50px;
border: 3px solid white;
background-color: rgba(255, 255, 255, 0);
color: white;
font-family: sans-serif;
font-weight: bold;
border-radius: 5px;
float: left;
transition: background-color 1000ms, color 1000ms;
}
.register:hover {
background-color: rgba(255, 255, 255, 1);
color: #222;
cursor: pointer;
transition: background-color 1000ms, color 1000ms;
}
.login {
margin: 20px auto;
display: block;
width: 180px;
height: 50px;
border: 3px solid white;
background-color: rgba(255, 255, 255, 0);
color: white;
font-family: sans-serif;
font-weight: bold;
border-radius: 5px;
float: right;
transition: background-color 1000ms, color 1000ms;
}
.login:hover {
background-color: rgba(255, 255, 255, 1);
color: #222;
cursor: pointer;
transition: background-color 1000ms, color 1000ms;
}
ul {
list-style: none;
}
ul li {display: inline}
<div class="heading">
<span class="title1">Banerjee Solutions</span>
<span class="title2">Your one stop shop for everything tech.</span>
<ul>
<li><button class="register">REGISTER NOW</button></li>
<li><button class="login">LOG IN</button></li>
</ul>
</div>
Check the following code
Changed Element structure.
removed float property , and added display: inline-block in login and register class
added btn-container class
.btn-container{
margin-top: 30px;
text-align: center;
}
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
body {
background-color: #0c0129;
background-image: url(coding.jpg);
background-position: center;
background-size: cover;
background-blend-mode: soft-light;
}
.heading {
width: 600px;
height: 300px;
margin: auto;
position: absolute;
top: 0px;
bottom: 0px;
right: 0px;
left: 0px;
outline: none;
}
.title1 {
display: block;
text-align: center;
color: white;
font-size: 50pt;
font-family: fantasy;
}
.title2 {
display: block;
margin-top: 16px;
text-align: center;
color: white;
font-size: 15pt;
font-family: sans-serif;
}
.register {
margin-right: 20px;
display: block;
width: 180px;
height: 50px;
border: 3px solid white;
background-color: rgba(255, 255, 255, 0);
color: white;
font-family: sans-serif;
font-weight: bold;
border-radius: 5px;
transition: background-color 1000ms, color 1000ms;
display: inline-block;
outline: none;
}
.register:hover {
background-color: rgba(255, 255, 255, 1);
color: #222;
cursor: pointer;
transition: background-color 1000ms, color 1000ms;
}
.login {
width: 180px;
height: 50px;
border: 3px solid white;
background-color: rgba(255, 255, 255, 0);
color: white;
font-family: sans-serif;
font-weight: bold;
border-radius: 5px;
transition: background-color 1000ms, color 1000ms;
display: inline-block;
outline: none;
}
.login:hover {
background-color: rgba(255, 255, 255, 1);
color: #222;
cursor: pointer;
transition: background-color 1000ms, color 1000ms;
}
<div class="heading">
<span class="title1">Banerjee Solutions</span>
<span class="title2">Your one stop shop for everything tech.</span>
<div class="btn-container">
<button class="register">REGISTER NOW</button>
<button class="login">LOG IN</button>
</div>
</div>
Here is an updated and working fiddle: https://jsfiddle.net/Ly06krt3/25/
To summarize, you will want to float the LI's left, and give them both a width of 50% which will make them go side-by-side.
You then want add auto to the horizontal margins to align the buttons to the center of the LI's. So something like this: margin: 50px auto.

CSS hover styling on just the border of an object?

I'm having an issue customizing the CSS of some button widgets that came with a WordPress theme I'm running. I grabbed a quick screen capture video of what's happening because it's hard to describe.
Video Link: https://drive.google.com/open?id=1mYvOtAjz-0QnJYV3_nGYXnFoRpsRdVo_
The CSS I have applied on the buttons:
.lc_button {
height: 100px !important;
width: 200px !important;
font-size: 18px !important;
border: 1px solid #dd3333 !important;
text-align: center;
background-color: white;
border-radius: 5%;
}
.lc_button:hover {
background-color: white;
border: 4px solid #dd3333 !important;
color: #151515 !important;
}
.lc_button a:hover {
color: #151515 !important;
}
Any idea what I have to do to get the inside to stay visible no matter where the cusror is at inside the button?
Thanks
I've tried to solve your problem. I am successful. You can use this code of mine.
HTML
<div class="lc_button">
Watch video
</div>
CSS
.lc_button a {
display: block;
width: 200px;
height: 100px;
line-height: 100px;
font-size: 18px;
font-weight: 700;
color: #000000;
border-radius: 5%;
box-sizing: border-box;
transition: 0.3s;
background-color: white;
text-decoration: none;
text-transform: uppercase;
text-align: center;
position: relative;
}
.lc_button a:before {
display: block;
position: absolute;
border-radius: 5%;
left: 0;
top: 0;
content: "";
width: 200px;
height: 100px;
box-sizing: border-box;
border: 1px solid red;
transition: 0.3s;
}
.lc_button a:hover:before {
border: 4px solid red;
}
.lc_button a:hover {
color: #151515 !important;
background-color: #ffffff;
}
.lc_button a {
display: block;
width: 200px;
height: 100px;
line-height: 100px;
font-size: 18px;
font-weight: 700;
color: #000000;
border-radius: 5%;
box-sizing: border-box;
transition: 0.3s;
background-color: white;
text-decoration: none;
text-transform: uppercase;
text-align: center;
position: relative;
}
.lc_button a:before {
display: block;
position: absolute;
border-radius: 5%;
left: 0;
top: 0;
content: "";
width: 200px;
height: 100px;
box-sizing: border-box;
border: 1px solid red;
transition: 0.3s;
}
.lc_button a:hover:before {
border: 4px solid red;
}
.lc_button a:hover {
color: #151515 !important;
background-color: #ffffff;
}
<div class="lc_button">
Watch video
</div>
The .css you've provided seems fully functional, and customizable. (aka, not broken, works fine).
The whole .css and the .html might shed some light on things without any "major alterations".
.lc_button {
height: 100px !important;
width: 200px !important;
font-size: 18px !important;
border: 1px solid #dd3333 !important;
text-align: center;
background-color: white;
border-radius: 5%;
}
.lc_button:hover {
background-color: white;
border: 4px solid #0000ff !important;
color: #00ff00 !important;
}
.lc_button a:hover {
color: #151515 !important;
}
<body>
<button class="lc_button">Test</button>
</body>
I've shared the code snippet..I think this will help you to solve the problem...
*, *:after, *:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body{
font-family: 'PT Sans', sans-serif;
display: table;
width: 100%;
background: #f54785;
}
.container{
display: table-cell;
vertical-align: middle;
text-align: center;
height: 100vh;
}
button{
display: inline-block;
position: relative;
background: none;
border: none;
color: #fff;
font-size: 18px;
cursor: pointer;
margin: 20px 30px;
background: rgba(0,0,0,0.09);
}
span{
display: block;
padding: 25px 80px;
}
button::before, button::after{
content:"";
width: 0;
height: 2px;
position: absolute;
transition: all 0.2s linear;
background: #fff;
}
span::before, span::after{
content:"";
width:2px;
height:0;
position: absolute;
transition: all 0.2s linear;
background: #fff;
}
button:hover::before, button:hover::after{
width: 100%;
}
button:hover span::before, button:hover span::after{
height: 100%;
}
.btn-1::after{
left:0;
bottom: 0;
transition-duration: 0.4s;
}
.btn-1 span::after{
right:0;
top: 0;
transition-duration: 0.4s;
}
.btn-1::before{
right: 0;
top: 0;
transition-duration: 0.4s;
}
.btn-1 span::before{
left: 0;
bottom: 0;
transition-duration: 0.4s;
}
<div class="container">
<button class="btn-1"><span>Hover Me</span></button>
</div>
This will help you to solve the problem...
button {
height: 100px !important;
width: 200px !important;
font-size: 18px !important;
border: 1px solid #dd3333 !important;
text-align: center;
background-color: white;
border-radius: 5%;
}
button:hover {
background-color: white;
border: 4px solid #dd3333 !important;
color: #151515 !important;
}
button a:hover {
color: #151515 !important;
}
<div class="container">
<button class="lc_button"><span>Hover Me</span></button>
</div>

Page Transition How To

I am trying to create a full page transition using #Keyframes and CSS3 only without JavaScript.
Now I am stuck with my codes. Wondering if it is possible when I click on the link it will create a full page transition that moves from bottom to upward like this: http://burtonfeelgoodsnowboard.com/test/
Here's my HTML:
<div class="moveTop">
<h1>Page</h1>
<nav>
Page Up
</div>
and here's the CSS:
/*! HTML5 Boilerplate v4.3.0 | MIT License | http://h5bp.com/ */
html,
button,
input,
select,
textarea {
color: #222;
}
html {
font-size: 1em;
line-height: 1.4;
}
::-moz-selection {
background: #b3d4fc;
text-shadow: none;
}
::selection {
background: #b3d4fc;
text-shadow: none;
}
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;
}
audio,
canvas,
img,
video {
vertical-align: middle;
}
fieldset {
border: 0;
margin: 0;
padding: 0;
}
textarea {
resize: vertical;
}
body{
font: 16px/1.5 'Lato', Arial, sans-serif;
background: #3498db;
color: #ffffff;
}
h1{
font-size: 50px;
font-weight: 300;
text-align: center;
}
span{
color: #2980b9;
font-weight: bold;
}
h2{
font-size: 35px;
text-align: left;
margin-left: -20px;
}
nav{
width: 28.09%;
margin: 0 auto;
display: block;
}
nav a {
font-size: 19px;
display: inline-block;
text-align: center;
font-family: 'Lato', sans-serif;
color: #2980b9;
font-weight: 400;
padding: 5px 15px;
text-transform: uppercase;
border-radius: 2px;
letter-spacing: 1px;
text-decoration: none;
margin-right: 10px;
border: 2px solid #ecf0f1;
border-radius: none;
}
nav a.active,nav a:hover {
background: #ecf0f1;
color: #3498db;
}
}
.moveTop{
-webkit-animation: moveToTop .6s ease both;
animation: moveToTop .6s ease both;
}
#keyframes moveFromTop {
from { -webkit-transform: translateY(-100%); transform: translateY(-100%); }
}
My JSFIDDLE: https://jsfiddle.net/6z5LsL6r/
Anyone who can show me the OUTPUT VIA JSFIDDLE?
Thank in advance guys!
You can use :target selector to work around: https://jsfiddle.net/6z5LsL6r/3/