My DIV 1 is causing overlap with the CANVAS causing not draggable and not clickable the object inside of it.
How can I "hide" the area of DIV 1?
EDIT:
Here we are some code:
.DIV1 {
align-items: flex-end;
justify-content: flex-end;
flex-direction: row;
display: flex;
}
.PARENT of DIV1 {
position: absolute;
bottom: 0;
right: 0;
width: 100%;
}
.CANVAS {
width: 100%;
height: 100%;
}
.PARENT of everything {
width: 100%;
height: 100%;
justify-content: center;
display: flex;
}
You could always use pointer-events to get the desired results.
.DIV1 {
pointer-events: none;
}
.DIV1 .child-that-need-pointer-events {
pointer-events: all;
}
Related
I'm trying to create a menu inside CSS, and this is how my HTML skeleton looks like:
<body>
<div class="menu-container">
<ul class="menu-list">
<li class="menu-item">Item1</li>
<li class="menu-item">Item2</li>
<li class="menu-item">Item3</li>
</ul>
</div>
</body>
This is the part of CSS I'm focusing on:
.menu-container {
background-color: #e5e5e5;
width: 100%;
height: 4rem;
position: fixed;
bottom: 0;
display: flex;
align-items: center;
}
.menu-list {
margin: 0 auto;
}
.menu-item {
display: inline-block;
}
.menu-item:not(:last-child) {
margin-right: 5vw;
}
.menu-item:hover {
background-color: red;
}
Basically, what I'm trying to achieve is setting the background color of each element to red, on element hover (<li>). The problem is, the background color seems not to fill the whole height of its parent (the menu-container), although this is what I actually want to do.
I tried setting the menu-item padding to 100%, but it just fills the whole screen. It isn't relative to menu-container's height.
To be more precise, this is how it looks like:
But I want the red background's height all over the div, like this:
What can I do, in order to achieve that? Thank you.
So, Instead of giving a fixed height to parent div. I adjust this using by adding padding from the top and bottom to each lielement.
Made some changes on CSS Have a look the snippet below:
.menu-container {
background-color: #e5e5e5;
width: 100%;
position: fixed;
bottom: 0;
display: flex;
align-items: center;
}
.menu-list {
margin: 0 auto;
}
.menu-item {
display: inline-block;
padding: 1.25rem 0;
}
.menu-item:not(:last-child) {
margin-right: 5vw;
}
.menu-item:hover {
background-color: red;
}
<body>
<div class="menu-container">
<ul class="menu-list">
<li class="menu-item">Item1</li>
<li class="menu-item">Item2</li>
<li class="menu-item">Item3</li>
</ul>
</div>
</body>
Just add height:100% to both menu-list and menu-item. In case you want the item to be centered instead of sticking to the top you can use a display: flex and align-items: center, justify-content:center
.menu-container {
background-color: blue;
width: 100%;
height: 4rem;
position: fixed;
bottom: 0;
display: flex;
align-items: center;
justify-content:center;
}
.menu-list {
height: 100%;
background-color:yellow;
display:flex;
align-items: center;
justify-content:center;
}
.menu-item {
display: flex;
align-items:center;
justify-content:center;
height:100%;
background-color:green;
}
.menu-item:not(:last-child) {
margin-right: 5vw;
}
.menu-item:hover {
background-color: red;
}
You can make your CSS like this,
Giving the height to 100% will take 100% height of the parent element.
I am trying to fix your css, please check my solution -
.menu-container {
background-color: #e5e5e5;
width: 100%;
height: 4rem;
position: fixed;
bottom: 0;
display: flex;
align-items: center;
}
/* at first you inline the whole ul */
.menu-list {
margin: 0 auto;
display: flex;
list-style: none;
}
/* then center the options & set full height */
.menu-item {
display: flex;
align-items: center;
height: 4rem;
cursor: pointer;
padding: 0 1rem;
}
.menu-item:not(:last-child) {
margin-right: 5vw;
}
.menu-item:hover {
background-color: red;
}
Solution 2
.menu-container {
background-color: #e5e5e5;
width: 100%;
position: fixed;
bottom: 0;
display: flex;
align-items: center;
}
/* set full height */
.menu-list {
margin: 0 auto;
height: 100%;
}
/* set full height also */
.menu-item {
display: inline-block;
padding: 1.25rem 0;
height: 100%;
}
.menu-item:not(:last-child) {
margin-right: 5vw;
}
.menu-item:hover {
background-color: red;
}
how to make the footer down below and vertical?
I want it for the mobile version to make the footer down below.
I tried many solutions but it didn't work very well.
the output
as you see it become like this, I don't know if it's from the footer or the content itself?
/* mobile styles */
.footer {
height: auto;
border: 1px solid red;
}
.footer .footer-content {
height: auto;
flex-direction: column;
}
.footer .footer-content .footer-section {
height: auto;
}
/* desktop styles */
.footer {
height: 200px;
width: 100%;
}
.footer .footer-bottom {
height: 20px;
width: 100%;
text-align: center;
bottom: 0px;
left: 0px;
padding-top: 20px;
}
.footer .footer-content {
height: 180px;
display: flex;
}
.footer .footer-content .footer-section {
flex: 1;
}
Try this:
.footer {
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
If you are using bootstrap simply use col classes
Centering a flex item is easy. However I like to shift it upwards a bit so that the the relation between the upper and lower space is e. g. 1/2. Easy too when using fillers. But is there a way to do this whithout fillers?
HTML:
<div id="filler-top"></div>
<div id="the-item">
</div>
<div id="filler-bottom"></div>
CSS:
#the-item {
width: 80vw;
height: 30vh;
border: 2px solid lightblue;
}
body {
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
}
#filler-top {
width: 100%;
flex: 1;
}
#filler-bottom {
width: 100%;
flex: 2;
}
https://jsfiddle.net/Sempervivum/b2wotc8e/3/
Applying margin-top and margin-bottom doesn't work as a percentage is relative to the width.
instead of adding 2 elements to the markup, you can use :before and :after pseudo-elements:
#the-item {
width: 80vw;
height: 30vh;
border: 2px solid lightblue;
}
body {
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
}
body:before {
content: "";
width: 100%;
flex: 1;
}
body:after {
content: "";
width: 100%;
flex: 2;
}
<div id="the-item"></div>
Another option is to simply use a mixture of position:relative, top and transform:
#the-item {
width: 80vw;
height: 30vh;
border: 2px solid lightblue;
position: relative;
top: 33.333%;
transform: translateY(-33.333%);
}
body {
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
}
<div id="the-item"></div>
How do I place this input element in the bottom of his div parent and center it?
If you're looking to use just CSS for this one you could use position: absolute; on the input and position: relative; on the parent.
.parent {
position: relative;
}
input {
bottom: 0;
position: absolute;
width: 100%;
}
Alternatively you could use flexbox along the lines of:
.parent {
display: flex;
flex-direction: column;
justify-content: flex-end;
}
parent{
position: relative;
}
child {
position: absolute;
bottom: 0;
}
I'm trying to make a 2 1 2 flexbox layout as seen in my previous question; Flexbox/Float - 2 1 2 Layout.
The layout in the answer works, but it's making the children become flex as well and I'm trying to fix this.
I'd like the text to be underneath the pictures instead of next to it but can't seem to make this work.
.mustReadImage img {
width: 334px;
height: 222px;
display: block;
}/*Image*/
.mustReadN {
flex: 0 0 50%;
display: flex;
width: 334px;
}/*li*/
.mustReadN:nth-child(3) {
flex: 0 0 100%;
}/*Big li*/
.mustReadN:nth-child(3) img {
width: 670px;
height: 680px;
}/*Big Li Image*/
.mustReadGroup {
display: flex;
height: 670px;
list-style-type: none;
flex-direction: column;
flex-wrap: wrap;
margin: 0;
padding: 0;
width: 74%;
margin-left: auto;
margin-right: auto;
}/*Ul*/
The li's have children as well.
edit 1; It has to become something like this.
This fiddle from #NenadVracar had the answer!
body,
html,
ul {
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
}
ul {
display: flex;
height: 100vh;
list-style-type: none;
flex-direction: column;
flex-wrap: wrap;
}
li {
flex: 0 0 50%;
border: 1px solid black;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
li:nth-child(3) {
flex: 0 0 100%;
}
p {
margin: 0;
}
flex-direction: column; fixed it for me.