I have a div that appears when the user hovers over one of the "squares", however when the user scrolls to access the squares furthest away from the bottom, the div that's appearing now looks to be in another position.
I know it appears in the same spot each time, but I'd like to have a fixed position on screen, even when the user scrolls.
JSFiddle: https://jsfiddle.net/6j1nhxy4/
Here's a snippet:
body {
}
.squarehover {
visibility: hidden;
position: absolute;
left: 130%;
top: -0%;
background-color: white;
height: 200px;
width: 200px;
z-index: 999999999999999999999999999999;
-webkit-box-shadow: 0px 4px 13px 3px rgba(0,0,0,0.18);
-moz-box-shadow: 0px 4px 13px 3px rgba(0,0,0,0.18);
box-shadow: 0px 4px 13px 3px rgba(0,0,0,0.18);
}
.hovercontainer {
position: absolute;
left: 50px;
overflow: overlay;
top: -164px;
height: 300px;
/* opacity: 0; */
/* visibility: hidden; */
background-color: none;
z-index: 2;
/* margin-bottom: 100px; */
width: 500px;
}
.squarecontainer {
position: absolute;
display: flex;
width: 100%;
flex-wrap: column-reverse;
flex-direction: column-reverse;
height: 95%;
overflow-y: scroll;
overflow-x: hidden;
z-index: 99999;
margin-left: auto;
margin-right: auto;
}
.square {
transition: 0.3s ease-in-out;
width: 1px;
height: 1px;
/* position: relative; */
/* top: -36%; */
/* margin-bottom: 20px; */
/* float: left; */
/* left: 30.35%; */
color: grey;
background-color: grey;
/* text-align: center; */
/* cursor: pointer; */
/* overflow: auto; */
-webkit-box-shadow: 8px 0px 5.3px -8px black, -8px 0px 5.3px -8px black;
-moz-box-shadow: 8px 0px 05.3px -8px black, -8px 0px 05.3px -8px black;
box-shadow: 8px 0px 5.3px -8px black, -8px 0px 5.3px -8px black;
/* z-index: 99999999; */
/* display: flex; */
/* justify-content: flex-end; */
/* flex-direction: column; */
max-height: auto;
/* overflow-y: scroll; */
/* flex: 1 1 300px; */
/* flex: 1; */
margin-bottom: 20px;
top: 0px;
padding: 0.9em;
margin-right: auto;
margin-left: auto;
/* border: 1px dashed green; */
}
.square:hover .squarehover {
visibility: visible;
z-index: 999999999999999999999999999999;
position: absolute;
margin-left: 50px;
margin-bottom: 50px;
left: 5%;
background-color: none;
}
.squarewrapper {
position: relative;
top: 0;
bottom: 0;
left:0;
display: inline-flex;
width: 50px;
flex-direction: row;
flex-wrap: wrap-reverse; /* ADJUSTED */
height: 650px;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="styles/testingcss.css?v=1.0">
</head>
<body>
<div class="squarecontainer" id="squarecontainer">
<div class="square">
<div class="optionhover"></div>
<div class="squarehover">
</div>
</div>
<div class="square">
<div class="optionhover"></div>
<div class="squarehover">
</div>
<
</div>
<div class="square">
<div class="optionhover"></div>
<div class="squarehover">
</div>
</div>
<div class="square">
<div class="optionhover"></div>
<div class="squarehover">
</div>
<
</div>
<div class="square">
<div class="optionhover"></div>
<div class="squarehover">
</div>
</div>
<div class="square">
<div class="optionhover"></div>
<div class="squarehover">
</div>
<
</div>
<div class="square">
<div class="optionhover"></div>
<div class="squarehover">
</div>
</div>
<div class="square">
<div class="optionhover"></div>
<div class="squarehover">
</div>
<
</div>
<div class="square">
<div class="optionhover"></div>
<div class="squarehover">
</div>
</div>
<div class="square">
<div class="optionhover"></div>
<div class="squarehover">
</div>
<
</div>
<div class="square">
<div class="optionhover"></div>
<div class="squarehover">
</div>
</div>
<div class="square">
<div class="optionhover"></div>
<div class="squarehover">
</div>
<
</div>
<div class="square">
<div class="optionhover"></div>
<div class="squarehover">
</div>
</div>
<div class="square">
<div class="optionhover"></div>
<div class="squarehover">
</div>
<
</div>
<div class="square">
<div class="optionhover"></div>
<div class="squarehover">
</div>
</div>
<div class="square">
<div class="optionhover"></div>
<div class="squarehover">
</div>
<
</div>
<div class="square">
<div class="optionhover"></div>
<div class="squarehover">
</div>
</div>
<div class="square">
<div class="optionhover"></div>
<div class="squarehover">
</div>
<
</div>
<div class="square">
<div class="optionhover"></div>
<div class="squarehover">
</div>
</div>
<div class="square">
<div class="optionhover"></div>
<div class="squarehover">
</div>
<
</div>
</div>
</body>
</html>
Welcome to StackOverflow (I can tell you're new). Welcome to the land of Coding Nerds, lel, anyways back to your question:
So, Your code is a little bit confusing for me >.< I'm gonna rewrite it a bit.
If you're like me, you probably don't care what has actually been done. So I'll give you the working code first, then tell you the reason afterwards.
(These two are the same thing)
Firstly, here's the JSFiddle: https://jsfiddle.net/xfh2Ldov/
Secondly, here's the code:
body {
margin: 0;
}
.squarehover {
display: none;
position: fixed;
top: 5vh;
left: 5vw;
background-color: white;
height: 200px;
width: 200px;
z-index: 999999999999999999999999999999;
-webkit-box-shadow: 0px 4px 13px 3px rgba(0, 0, 0, 0.18);
-moz-box-shadow: 0px 4px 13px 3px rgba(0, 0, 0, 0.18);
box-shadow: 0px 4px 13px 3px rgba(0, 0, 0, 0.18);
}
.squarecontainer {
width: 100vw;
height: 95vh;
margin: 0 auto;
}
.square {
width: 28px;
height: 28px;
background-color: grey;
-webkit-box-shadow: 8px 0px 5.3px -8px black, -8px 0px 5.3px -8px black;
-moz-box-shadow: 8px 0px 05.3px -8px black, -8px 0px 05.3px -8px black;
box-shadow: 8px 0px 5.3px -8px black, -8px 0px 5.3px -8px black;
top: 0px;
margin: 10px auto;
}
.square:hover ~ .squarehover {
display: block;
}
<div class="squarecontainer">
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="squarehover"></div>
</div>
So basically, I just added position: fixed and simplified your code from "this works but I kinda just put a bunch of letters together and turned it into a large chunk of code" to "this works and I carefully positioned each letter to a really small chunk of code"
Looking at the code you had, you can simply see that it was just code pulled out from your actual coode. So... you may have to add in some bits to make it work how you want it to work
Explanation:
So...
position: fixed allows the div (or any other element) to stay fixed on the webpage even if you scroll. Good Example: https://www.w3schools.com/howto/howto_css_fixed_sidebar.asp
position: absolute allows the div to... well, since you used position: absolute in your code, I can just assume you know what it does.
position: sticky is position fixed and position absolute's baby. It acts like absolute until its about to leave the page view and then gets stuck at the bottom/top. Good Example: https://www.w3schools.com/howto/howto_js_sticky_header.asp
Related
Here is a simplified of my code structure:
.parent{
max-width:1100px;
width:calc(100% - 4rem);
display:flex;
overflow-x:scroll;
padding:10px 0px;
}
.child{
display: flex;
flex-direction: column;
background-color: white;
padding: 10px;
font-size: 1.6rem;
border-radius: 6px;
box-shadow: rgba(0, 0, 0, 0.08) 0px 3px 15px 0px;
margin-left: 8px;
margin-top: 0px;
height: 250px;
width: 100%;
min-width: 285px;
max-width: 285px;
}
<div class="parent">
<div class="child">test</div>
<div class="child">test</div>
<div class="child">test</div>
<div class="child">test</div>
<div class="child">test</div>
<div class="child">test</div>
<div class="child">test</div>
<div class="child">test</div>
</div>
As you can see, child elements are all located horizontally next to each other. I need to remove overflow-x:scroll; and put them under each other. So, for a normal screen size, it would be 4 boxes next to each other and the next must go in the new line.
How can I do that?
Can you try this :
.parent{display:flex;} is the one who make all childs located horizontally next to each other
.parent{
max-width:1100px;
padding:10px 0px;
}
.child{
display: flex;
flex-direction: column;
background-color: white;
padding: 10px;
font-size: 1.6rem;
border-radius: 6px;
box-shadow: rgba(0, 0, 0, 0.08) 0px 3px 15px 0px;
margin-left: 8px;
margin-top: 0px;
height: 250px;
width: 100%;
min-width: 285px;
}
<div class="parent">
<div class="child">test</div>
<div class="child">test</div>
<div class="child">test</div>
<div class="child">test</div>
<div class="child">test</div>
<div class="child">test</div>
<div class="child">test</div>
<div class="child">test</div>
</div>
I want the max width of the "circlecontainer" to be 300px.
but when the browser exceeds 1200px in width, I want my 4 child divs (with max width 300px) to stay centered in the browser.
They are currently positioned on the left side.
Here is my html and css.
any tips would be appreciated :)
.getstartedcirclescontainer {
height: 650px;
width: 100%;
display: flex;
text-align: center;
background-image: linear-gradient(#3329ff, white);
}
.circlecontainer {
height: 100%;
width: 24.9%;
padding-top: 175px;
background-color: rgba(0, 0, 0, 0.1);
max-width: 300px;
}
.circle1 {
height: 170px;
width: 170px;
border-radius: 50%;
background-image: linear-gradient(#8680ff, #5a52ff);
margin: 0 auto;
border-style: solid;
border-width: 2px;
border-color: #fff;
box-shadow: 0 10px 20px 0 rgba(0, 0, 0, .66);
}
<div class="getstartedcirclescontainer">
<div class="circlecontainer">
<div class="circle1">
</div>
</div>
<div class="circlecontainer">
<div class="circle1">
</div>
</div>
<div class="circlecontainer">
<div class="circle1">
</div>
</div>
<div class="circlecontainer">
<div class="circle1">
</div>
</div>
</div>
Just replace text-align: center; with justify-content: center; for .getstartedcirclescontainer.
HTML:
<div class="getstartedcirclescontainer">
<div class="circlecontainer">
<div class="circle1">
</div>
</div>
<div class="circlecontainer">
<div class="circle1">
</div>
</div>
<div class="circlecontainer">
<div class="circle1">
</div>
</div>
<div class="circlecontainer">
<div class="circle1">
</div>
</div>
</div>
CSS:
.getstartedcirclescontainer {
height: 650px;
width: 100%;
display: flex;
justify-content: center;
background-image: linear-gradient(#3329ff, white);
}
.circlecontainer {
height: 100%;
width: 24.9%;
padding-top: 175px;
background-color: rgba(0, 0, 0, 0.1);
max-width: 300px;
}
.circle1 {
height: 170px;
width: 170px;
border-radius: 50%;
background-image: linear-gradient(#8680ff, #5a52ff);
margin: 0 auto;
border-style: solid;
border-width: 2px;
border-color: #fff;
box-shadow: 0 10px 20px 0 rgba(0,0,0,.66);
}
Hello I'm pretty new to this & I'm trying to figure out how to scale and clip these images to fit into each grid square without having a border...
I also don't know if this is an effective way to set up my images. I'd like to have a different image for each square, but how it's set up now I'd have to make a new .box .inner# for each one. If there is a better way to structure this that'd be really helpful.
.grid {
margin: 0 auto;
width: 240vw;
max-width: 200vh;
height: 240vw;
max-height: 200vh;
font-size: 2rem;
}
.row {
display: flex;
}
.box {
background: red;
margin: 5px;
color: white;
font-weight: bold;
flex: 1 0 auto;
position: relative;
}
.box:after {
content: "";
float: left;
display: block;
padding-top: 100%;
}
.box .inner1 {
background-image: url("https://c1.staticflickr.com/2/1763/29556413048_164120ccb5_b.jpg");
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
display: flex;
align-items: center;
justify-content: center;
text-shadow: 0px 0px 8px rgb(36, 36, 36), 0px 0px 20px rgba(0, 0, 0, 0.9);
}
.box .inner2 {
background-image: url("https://c1.staticflickr.com/1/922/43509246041_043aff0334_h.jpg");
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
display: flex;
align-items: center;
justify-content: center;
text-shadow: 0px 0px 8px rgb(36, 36, 36), 0px 0px 20px rgba(0, 0, 0, 0.9);
}
<div class="grid">
<div class="row">
<div class="box">
<div class="inner1">1</div>
</div>
<div class="box">
<div class="inner1">2</div>
</div>
<div class="box">
<div class="inner1">3</div>
</div>
<div class="box">
<div class="inner1">4</div>
</div>
</div>
<div class="row">
<div class="box">
<div class="inner2">5</div>
</div>
<div class="box">
<div class="inner2">6</div>
</div>
<div class="box">
<div class="inner2">7</div>
</div>
<div class="box">
<div class="inner2">8</div>
</div>
</div>
</div>
You might do it like this:
.grid {
margin: 0 auto;
width: 240vw;
max-width: 200vh;
height: 240vw;
max-height: 200vh;
font-size: 2rem;
}
.row {
display: flex;
}
.box {
background: red;
margin: 5px;
color: white;
font-weight: bold;
flex: 1 0 auto;
position: relative;
}
.box:after {
content: "";
float: left;
display: block;
padding-top: 100%;
}
.box > div {
background-size:cover;
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
display: flex;
align-items: center;
justify-content: center;
text-shadow: 0px 0px 8px rgb(36, 36, 36), 0px 0px 20px rgba(0, 0, 0, 0.9);
}
.inner1 {
background-image: url("https://c1.staticflickr.com/2/1763/29556413048_164120ccb5_b.jpg");
}
.inner2 {
background-image: url("https://c1.staticflickr.com/1/922/43509246041_043aff0334_h.jpg");
}
.inner3 {
background-image: url("https://picsum.photos/200/200?3");
}
.inner4 {
background-image: url("https://picsum.photos/200/200?4");
}
.inner5 {
background-image: url("https://picsum.photos/200/300?5");
}
.inner6 {
background-image: url("https://picsum.photos/200/300?6");
}
.inner7 {
background-image: url("https://picsum.photos/200/200?7");
}
.inner8 {
background-image: url("https://picsum.photos/200/300?8");
}
<div class="grid">
<div class="row">
<div class="box">
<div class="inner1">1</div>
</div>
<div class="box">
<div class="inner2">2</div>
</div>
<div class="box">
<div class="inner3">3</div>
</div>
<div class="box">
<div class="inner4">4</div>
</div>
</div>
<div class="row">
<div class="box">
<div class="inner5">5</div>
</div>
<div class="box">
<div class="inner6">6</div>
</div>
<div class="box">
<div class="inner7">7</div>
</div>
<div class="box">
<div class="inner8">8</div>
</div>
</div>
</div>
I am not fully sure if this will fix your problem but maybe take off the margin in your .box class in your css file.
not enough reputation yet so click this link
Instead of having your margin at 5px change it to 0px and see if that helps.
As for the different images you just need to create a new class for each image an link a new image to that class, go back and link it up like you have with the two previous.
I want my popup-container-div to have the width of its content, that are inline-block-divs.
The popup-container itself is centered vertically and horizontally with position:fixed, top:50%, left:50% and transform:translate(-50%,-50%).
As you can see in the snippet, the popup doesn't take the full page-width.
Instead it looks like it's using just 50% of the page-width.
But I don't want the inline-block-divs displayed on the next line, when there's enough space the popup-div could take.
When I add a width with an high value to the child-div, like 800px, then the popup will adjust it's own width to the child's width.
Is there a possibility to have the popup centered and to take the width of it's content, without having to set fixed width-values?
.popup
{
position: fixed;
top: 50%;
left: 50%;
padding: 20px;
background-color: #D5DFE1;
box-shadow: 5px 5px 10px 0px black;
transform:translate(-50%,-50%);
}
.a
{
display: inline-block;
width: 100px;
height: 30px;
background-color: #487681;
}
<div class="popup">
<div class="a"></div>
<div class="a"></div>
<div class="a"></div>
<div class="a"></div>
<div class="a"></div>
<div class="a"></div>
<div class="a"></div>
</div>
Thank you in Advance.
You can use flexbox for this, check snippet below
.modal {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.popup {
padding: 20px;
background-color: #D5DFE1;
box-shadow: 5px 5px 10px 0px black;
}
.a {
display: inline-block;
width: 100px;
height: 30px;
background-color: #487681;
}
<div class="modal">
<div class="popup">
<div class="a"></div>
<div class="a"></div>
<div class="a"></div>
<div class="a"></div>
<div class="a"></div>
<div class="a"></div>
<div class="a"></div>
</div>
</div>
How can I horizontally and vertically center all the contents of a jumbotron in bootstrap 3? I have just started learning it.
The following is my code:
HTML
<div class="site-wrapper">
<div class="jumbotron">
<h1>Header</h1>
<p id="subHeader"><small>sub header</small></p>
<div class="container">
<div class="row">
<div class="col-sm-5 col-sm-offset-2">
</div>
<div class="col-sm-3 lefty">
</div>
</div>
<div class="row">
<div class="col-sm-4 col-sm-offset-4">
</div>
</div>
</div>
</div>
</div>
CSS
html, body {
height: 100%;
background-color: #333;
}
.site-wrapper {
width: 100%;
height: 100%;
min-height: 100%;
-webkit-box-shadow: inset 0 0 100px rgba(0,0,0,.5);
box-shadow: inset 0 0 100px rgba(0,0,0,.5);
border-top: 5px solid #5A332B;
}
.jumbotron {
background-color: #ccbb99 !important;
/*background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.9));*/
height: 100%;
margin-bottom: 0;
}
.lefty {
margin: 0;
}
You can use transform: translateY to vertical align the content like this..
.centerme {
position: relative;
top: 50%;
transform: translateY(-50%);
}
http://www.bootply.com/MlRejPA7m2
Use text-center to horizontal align
use the CSS code to achieve this:
.jumbotron{disply:flex;
align-content:center;
justify-items:center;
align-items:center;
}