As I add more content lower on the page, I see that my side bar and main page is not fixed on the page. Basically, I need the side bar to stay where it is as well as the rest of the page (background picture) no matter how much content there is. Hope that's clear enough.
Also, I feel like my code has a lot of useless things added to it. If someone doesn't mind letting me know what that is without changing the way the page looks like that'd be great.
html {
height: 100%;
}
body {
margin: 0;
width: 100%;
height: 100%;
background-image: url(images/background2.jpg);
background-size: contain;
background-repeat: no-repeat;
background-size: 100% 100%;
}
#backgroundCover {
width: 100%;
height: 100%;
background-color: black;
opacity: 0.35;
}
#sideBar {
width: 50px;
height: 100%;
position: absolute;
top: 0;
background-color: black;
opacity: 0.7;
}
#navigationToggle {
width: 30px;
height: 30px;
margin: 20px 0 60px 10px;
background-image: url(png/512/navicon-round-white.png);
background-size: contain;
}
#topmenuicon {
width: 30px;
height: 30px;
margin: 160px 0 60px 10px;
background-image: url(png/512/ios7-home-white-outline.png);
background-size: contain;
}
#topmenuicon:hover {
cursor: pointer;
background-color: white;
background-image: url(png/512/ios7-home-outline.png);
transition: 0.2s ease-out;
border-radius: 3px;
}
#menuicon1 {
margin: 60px 0 0 10px;
width: 30px;
height: 30px;
background-image: url(png/512/ios7-person-white-outline.png);
background-size: contain;
}
#menuicon1:hover {
cursor: pointer;
background-color: white;
background-image: url(png/512/ios7-person-outline.png);
transition: 0.2s ease-out;
border-radius: 3px;
}
#menuicon2 {
margin: 60px 0 0 10px;
width: 30px;
height: 30px;
background-image: url(png/512/ios7-people-white-outline.png);
background-size: contain;
}
#menuicon2:hover {
cursor: pointer;
background-color: white;
background-image: url(png/512/ios7-people-outline.png);
transition: 0.2s ease-out;
border-radius: 3px;
}
#menuicon3 {
margin: 60px 0 0 10px;
width: 30px;
height: 30px;
background-image: url(png/512/ios7-world-white-outline.png);
background-size: contain;
}
#menuicon3:hover {
cursor: pointer;
background-color: white;
background-image: url(png/512/ios7-world-outline.png);
transition: 0.2s ease-out;
border-radius: 3px;
}
#menuicon4 {
margin: 60px 0 0 10px;
width: 30px;
height: 30px;
background-image: url(png/512/ios7-gear-white-outline.png);
background-size: contain;
}
#menuicon4:hover {
cursor: pointer;
background-color: white;
background-image: url(png/512/ios7-gear-outline.png);
transition: 0.2s ease-out;
border-radius: 3px;
}
<!doctype html>
<html>
<head>
<title>Noam's Website</title>
<link type="text/css" rel="stylesheet" href="style.css" />
</head>
<body>
<div id="backgroundCover"></div>
<div id="sideBar">
<div id="navigationToggle"></div>
<div id="topmenuicon"></div>
<div id="menuicon1"></div>
<div id="menuicon2"></div>
<div id="menuicon3"></div>
<div id="menuicon4"></div>
</div>
</body>
</html>
Add position:fixed; to #sideBar to fix the sidebar.
Concerning non-moving background, add background-attachment: fixed; to the body-rule
addition/edit after comment:
And add margin-left: 50px to body to prevent its content or background being hidden under the fixed sidebar.
Related
I have created a div container and within the container, there is a div box. Inside the box, I have a button that is supposed to be centered at the bottom of the box.
I have searched around and before anyone does the "duplicate post" I have tried everything that they've said. Such as, adding a "display: block;" into my code etc and still it's not centering the button into the middle. I have been messing around with whatever I can think of to try and centering the button but nothing is working.
.container {
max-width: 80%;
margin: auto;
overflow: hidden;
background-color: #fff000;
}
.box-1 {
background-image: url();
background-position: center;
background-size: cover;
background-repeat: no-repeat;
border: solid #000 1px;
margin: 10px;
padding: 10px;
width: 30%;
height: 260px;
transition: transform .5s;
overflow: hidden;
position: relative;
}
#mainButton {
position: absolute;
bottom: 0;
padding: 7px 5px;
margin: 0 auto;
width: 40%;
margin-bottom: 15px !important;
display: block;
overflow: hidden;
color: #fff;
background-color: #000;
border: 2px solid #fff;
font-family: inherit;
opacity: 0;
transition: .5s;
}
.box-1:hover #mainButton {
opacity: 1;
color: #fff;
background-color: #000;
border: 2px solid #fff;
font-family: inherit;
cursor: pointer;
}
<div class="container">
<div class="box-1">
<button type="button" id="mainButton"> Go To Website </button>
</div>
</div>
These three values set properly on your mainButton CSS should solve your issue:
width: 40%;
left:50%;
margin-left:-20%;
Its key to note what the calculation is here. The left property is centering the item at 50% of the page, and the negative margin-left is offsetting the items position in accordance with its width. Since its width is 40% the negative margin has to be half of this, ie 20%. With this in mind you can adjust the width and the offset if your design changes, better yet using css variables and calc() mean that you could set the width only and the margin would calculate itself.
As an example:
left:50%;
--buttonWidth: 40%;
width: var(--buttonWidth);
margin-left:calc( var(--buttonWidth) / -2);
.container{
max-width: 80%;
margin: auto;
overflow: hidden;
background-color: #fff000;
}
.box-1{
background-image: url();
background-position: center;
background-size: cover;
background-repeat: no-repeat;
border: solid #000 1px;
margin: 10px;
padding: 10px;
width: 30%;
height: 260px;
transition: transform .5s;
overflow: hidden;
position: relative;
}
#mainButton{
position: absolute;
bottom: 0;
padding: 7px 5px;
width: 40%;
left:50%;
margin-left:-20%;
margin-bottom: 15px !important;
display: block;
overflow: hidden;
color: #fff;
background-color: #000;
border: 2px solid #fff;
font-family: inherit;
opacity: 0;
transition: .5s;
}
.box-1:hover #mainButton{
opacity: 1;
color: #fff;
background-color: #000;
border: 2px solid #fff;
font-family: inherit;
cursor: pointer;
}
<div class="container">
<div class="box-1">
<a href="http://www.google.co.uk">
<button type="button" id="mainButton"> Go To Website</button>
</a>
</div>
</div>
Try with this code, i think this will help u in fixing the issue.
.container {
max-width: 80%;
margin: auto;
overflow: hidden;
background-color: #fff000;
}
.box-1 {
background-image: url();
background-position: center;
background-size: cover;
background-repeat: no-repeat;
border: solid #000 1px;
margin: 10px;
padding: 10px;
width: 30%;
height: 260px;
transition: transform .5s;
overflow: hidden;
position: relative;
}
#mainButton {
position: absolute;
padding: 5px;
width: 60%;
margin-bottom: 15px !important;
display: block;
overflow: hidden;
color: #fff;
background-color: #000;
border: 2px solid #fff;
font-family: inherit;
opacity: 0;
transition: .5s;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.box-1:hover #mainButton {
opacity: 1;
color: #fff;
background-color: #000;
border: 2px solid #fff;
font-family: inherit;
cursor: pointer;
}
Just add "left: 0; right: 0;" in #mainButton
.container {
max-width: 80%;
margin: auto;
overflow: hidden;
background-color: #fff000;
}
.box-1 {
background-image: url();
background-position: center;
background-size: cover;
background-repeat: no-repeat;
border: solid #000 1px;
margin: 10px;
padding: 10px;
width: 30%;
height: 260px;
transition: transform .5s;
overflow: hidden;
position: relative;
}
#mainButton {
position: absolute;
bottom: 0;
padding: 7px 5px;
margin: 0 auto;
width: 40%;
margin-bottom: 15px !important;
display: block;
overflow: hidden;
color: #fff;
background-color: #000;
border: 2px solid #fff;
font-family: inherit;
opacity: 0;
transition: .5s;
left:0px;
right:0px;
}
.box-1:hover #mainButton {
opacity: 1;
color: #fff;
background-color: #000;
border: 2px solid #fff;
font-family: inherit;
cursor: pointer;
}
<div class="container">
<div class="box-1">
<button type="button" id="mainButton"> Go To Website </button>
</div>
</div>
It's because your button's parent is a link tag. Your button is not a direct child of the flexbox
Ihave an issue with the backdrop-filter property, because the filter i added in my backdrop-filter do nothing and i don't understand why.
Here is my code :
.army_selection
{
margin: 20px;
margin-left: 10px;
margin-right: 10px;
min-width: 300px;
max-width: 300px;
height: 400px;
background-size: cover;
background-position: center;
transition: 0.1s;
}
.army_selection:hover :nth-child(1)
{
opacity: 1;
-webkit-backdrop-filter: brightness(25%);
transition: 0.1s;
}
<div id="army1" class="army_selection">
<div class="army_selection_bloc">
<p class="army_text">Ultramarines</p>
</div>
</div>
That property is experimental and has limited support.
MDN reference
To use in Chrome v.47 you need to Enable Experimental Web Platform Features.
Consider carefully the limited support; it is possible to achieve the same effect without this specific property. An example workaround.
I think you are trying to accomplish something like this?
Here's a workaround, maybe it's not what you are looking for, hope it helps
.army_selection {
margin: 20px;
margin-left: 10px;
margin-right: 10px;
min-width: 300px;
max-width: 300px;
height: 400px;
background-color: rgba(0,0,0,0);
background-size: cover;
background-position: center;
transition: background-color .2s;
}
.army_selection:hover {
background-color: rgb(0, 0, 0, 0.25);
}
<div id="army1" class="army_selection">
<div class="army_selection_bloc">
<p class="army_text">Ultramarines</p>
</div>
</div>
.army_selection {
margin: 20px;
margin-left: 10px;
margin-right: 10px;
min-width: 300px;
max-width: 300px;
height: 400px;
opacity:-2;
background-color: rgba(0,0,0,0);
background-size: cover;
background-position: center;
transition: background-color .5s;
}
.army_selection:hover {
background-color: rgb(0, 0, 0.8, 0.25);
}
<div id="army1" class="amySelection">
<div class="army_selection_bloc">
<p class="army_text">Ultramarines</p>
</div>
</div>
.armySelection {
margin: 20px;
margin-left: 10px;
margin-right: 10px;
min-width: 300px;
max-width: 300px;
height: 400px;
background-color: rgba(0,0,0,0);
background-size: cover;
background-position: center;
transition: background-color .2s;
}
.armySelection:hover {
background-color: rgb(0, 0, 0, 0.25);
}
I found a solution but it's maybe be not the cleanest one
HTML part :
<div class="army_selection_bloc">
<div id="army1" class="army_selection"></div>
<div class="army_text_bloc">
<p class="army_text">Space marines</p>
</div>
</div>
Css part :
.army_selection_bloc
{
margin: 20px;
margin-left: 10px;
margin-right: 10px;
min-width: 300px;
max-width: 300px;
height: 400px;
}
.army_selection
{
z-index: 2;
position: relative;
top: 0px;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
transition: 0.1s;
}
.army_selection_bloc:hover .army_selection
{
box-shadow: 7px 7px 60px black;
filter: brightness(25%);
transition: 0.1s;
}
.army_selection_bloc:hover .army_text_bloc
{
opacity: 1;
transition: 0.2s;
}
.army_text_bloc
{
z-index: 3;
position: relative;
top: -400px;
width: 300px;
height: 400px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
opacity: 0;
transition: 0.2s;
}
I have a simple page in which I want particle js animation at the background and have a button and few anchors for user to click. However, when I add particle js to a particular div, which is parent, I am not able to click the button or the anchors. I did try changing the z-index of them to higher number(z-index:2000), that didn't help either.
This is the code:
https://plnkr.co/edit/JMYVXu6I3G7kdKUWN7tc?p=preview
/* Styles go here */
body{
color:white;
}
#home {
color:white;
padding-bottom: 2em;
min-height: 100vh;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
background-image: url("http://www.melbourne.vic.gov.au/SiteCollectionImages/1200-buildings-898x381.jpg");
/* fallback */
background-image: linear-gradient(to bottom, rgba(0, 67, 105, 0.5) 0%, rgba(0, 67, 105, 0.5) 100%), url("http://www.melbourne.vic.gov.au/SiteCollectionImages/1200-buildings-898x381.jpg"g);
}
.home-icon {
width: 2em;
height: 2em;
text-align: center;
margin: 0.5em;
font-size: 2em;
color: #f5f5f5;
border: 2px solid #f5f5f5;
border-radius: 50%;
padding: 0.5em;
transition: all .5s ease;
z-index:1040
}
.home-icon:hover {
border: 2px solid #00B9DA;
color: #00B9DA;
}
.particles-js-canvas-el {
top: -200px;
position: relative;
height: 200px;
}
This should resolve your issue:
HTML:
<!-- particles.js container -->
<div id="particles-js">
<div class="test">AAA</div>
</div>
CSS:
canvas {
index: 0;
display: block;
vertical-align: bottom;
}
.test {
index: 50;
top: 100px;
position: absolute;
}
#particles-js {
position: absolute;
width: 100%;
height: 100%;
background-color: #b61924;
background-image: url("");
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
}}
Using http://jsfiddle.net/4UNuB/5/ as an example, the image has been set as background
.box1 {
border: #999 2px solid;
width: 180px;
height: 250px;
background-image: url(http://smilesoftware.com/assets/images/uploads/products/icon_pdfpenipad_140x140.png);
background-position: center;
background-repeat: no-repeat;
}
But, if I can't use a background image, and instead have an img src within the div itself like this
<div class="box1">
<img src="http://placehold.it/180x250">
</div>
The mask no longer covers the image, instead sitting below it.
See this fiddle http://jsfiddle.net/4UNuB/6/
But the mask is still being applied to the same place as before, so why does it move, and how to stop it moving?
Add Position Absolute and relative css for boxes.
Check The Fiddle here
.box1 {
border: #999 2px solid;
width: 180px;
height: 250px;
/*background-image: url(http://smilesoftware.com/assets/images/uploads/products/icon_pdfpenipad_140x140.png);*/
background-position: center;
background-repeat: no-repeat;
position: relative;
}
.black-box {
text-align: center;
font-size: 16px;
color: #fff;
background-color: rgba(00,00,00,0.8);
width: 100%;
height: 100%;
opacity: 1.0;
transition: all 0.5s ease-in-out;
position: absolute;
top: 0;
}
You can put both in the same anchor and use positioning + z-index:
.box1 {
border: #999 2px solid;
width: 180px;
height: 250px;
/*background-image: url(http://smilesoftware.com/assets/images/uploads/products/icon_pdfpenipad_140x140.png);
background-position: center;
background-repeat: no-repeat;*/
}
img {
position: absolute;
z-index: 0;
}
.black-box {
position: relative;
z-index: 1;
text-align: center;
font-size: 16px;
color: #fff;
background-color: rgba(00,00,00,0.8);
width: 100%;
height: 100%;
opacity: 1.0;
transition: all 0.5s ease-in-out;
}
.black-box:hover {
opacity: 0.0;
transition: all 0.5s ease-in-out;
}
h2 {
padding-top: 110px;
margin: 0px;
}
<div class="box1">
<a href="http://placehold.it">
<img src="http://placehold.it/180x250">
<div class="black-box">
<h2>View Details</h2>
</div>
</a>
</div>
Also, I had to remove the h2's margin.
I have a div with a background image, what I would like to do, is when I hover over it, the hidden part of background-image to display like in the example below:
My jsfiddle example:
div.test {
background: url(http://media2.intoday.in/indiatoday/images/Photo_gallery/emraan_012315020812.jpg);
background-size: cover;
width: 70px;
height: 70px;
background-position: center;
border-radius: 100%;
display: inline-block;
transition: all 1s;
position: absolute;
top: 100px;
}
.test:hover{
transform: scale(1.2);
}
body {
text-align: center;
}
<div class="test">
</div>
As you can see, in my example the image is just getting larger, instead I want to display another 20px of the image (without compromising border-radius).
Example with one html element:
div.test {
background: url(http://media2.intoday.in/indiatoday/images/Photo_gallery/emraan_012315020812.jpg) no-repeat 50% 50%;
background-size: 140px;
width: 70px;
height: 70px;
background-position: center;
border-radius: 100%;
display: inline-block;
transition: all 1s;
position: absolute;
top: 100px;
transform-origin: center center;
}
.test:hover{
width: 90px;
height: 90px;
margin-left: -10px;
margin-top: -10px;
}
body {
text-align: center;
}
<div class="test">
</div>
Example with clip-path and shape-inside:
div.test {
background: url(http://media2.intoday.in/indiatoday/images/Photo_gallery/emraan_012315020812.jpg) no-repeat 50% 50%;
background-size: cover;
shape-inside: circle(30% at 50% 50%);
clip-path: circle(30% at 50% 50%);
-webkit-clip-path: circle(30% at 50% 50%);
width: 70px;
height: 70px;
background-position: center;
display: inline-block;
transition: all 1s;
position: absolute;
top: 100px;
transform-origin: center center;
}
.test:hover{
shape-inside: circle(50% at 50% 50%);
clip-path: circle(50% at 50% 50%);
-webkit-clip-path: circle(50% at 50% 50%);
}
body {
text-align: center;
}
<div class="test">
</div>
you might oversize a bit the background image
(background-size:auto 90px;) and add some padding and reset position on hover (.test:hover{padding:10px; margin:-10px;})
those rules are suppose to be understood by most of actual browsers if not all.
div.test {
background: url(http://media2.intoday.in/indiatoday/images/Photo_gallery/emraan_012315020812.jpg);
background-size:auto 90px;
width: 70px;
height: 70px;
background-position: center;
border-radius: 100%;
display: inline-block;
transition: all 1s;
position: absolute;
top: 100px;
}
.test:hover{
padding:10px;
margin:-10px;;
}
body {
text-align: center;
}
<div class="test">
</div>
another possibility is to use an inset shadow
div.test {
background: url(http://media2.intoday.in/indiatoday/images/Photo_gallery/emraan_012315020812.jpg);
background-size: auto 90px;
width: 90px;
height: 90px;
/* hide buggy ff render */
background-clip: content-box;
padding: 1px;
/* end fix ff */
background-position: center;
border-radius: 100%;
display: inline-block;
transition: all 1s;
position: absolute;
top: 90px;
box-shadow: inset 0 0 0 10px white;
}
.test:hover {
box-shadow: inset 0 0 0 0px white;
}
body {
text-align: center;
}
<div class="test">
</div>
There is also : padding, box-sizing and background-clip
div.test {
background: url(http://media2.intoday.in/indiatoday/images/Photo_gallery/emraan_012315020812.jpg) ;
background-size: auto 90px;
width: 90px;
height: 90px;
padding: 10px;
background-clip:content-box;
box-sizing:border-box;
background-position: center;
border-radius: 100%;
display: inline-block;
transition: all 1s;
position: absolute;
top: 90px;
}
.test:hover {
padding:0px;
}
/* show transparency */
html {
min-height:100%;
text-align: center;
background:linear-gradient(45deg, gray, yellow,purple,lime,pink,turquoise, gray, yellow,purple,lime,pink,turquoise);
}
<div class="test"></div>
You are missing to remove border-radius property on the hover event:
div.test {
background: url(http://media2.intoday.in/indiatoday/images/Photo_gallery/emraan_012315020812.jpg);
background-size: cover;
width: 70px;
height: 70px;
background-position: center;
border-radius: 100%;
display: inline-block;
transition: all 1s;
position: absolute;
top: 100px;
}
.test:hover{
transform: scale(1.2);
border-radius: 0px;
}
body {
text-align: center;
}
<div class="test">
</div>