I am trying to create a popup card, but the card isn't getting vertically aligned. I've used the position: absolute; for positioning but the card is showing down at the bottom.
CSS(SASS)
.popup {
height: 100vw;
width: 100%;
position: fixed;
top: 0;
left: 0;
background-color: rgba($color-black, 0.8);
z-index: 3000;
&__content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 75%;
height: 50%;
background-color: $color-white;
box-shadow: 0 2rem 4rem rgba($color-black, 0.2);
border-radius: 3px;
display: table;
overflow: hidden;
}
Popup is not fully implemented, I was checking where the element would show up.
This code is showing a white box down at the bottom instead of middle. Where I was hoping it to be.
HTML
<div class="popup">
<div class="popup__content">
</div>
</div>
The popup class is direct child of body just so it isn't influenced by any other classes. Anyone see where I might screwed up.
try this:
.popup {
height: 100vw;
width: 100%;
position: fixed;
top: 0;
left: 0;
background-color: rgba($color-black, 0.8);
z-index: 3000;
display:flex;
justify-content:center;
align-items:center;
&__content {
transform: translate(-50%, -50%);
width: 75%;
height: 50%;
background-color: $color-white;
box-shadow: 0 2rem 4rem rgba($color-black, 0.2);
border-radius: 3px;
display: table;
overflow: hidden;
}
Try using display: flex with justify-content, align-items rather than position: fixed.
It will be a constructive choice for a comfortable future in the future.
Please refer to the following URL through Google Translator. This site is well detailed.
https://heropy.blog/2018/11/24/css-flexible-box/
MDN: https://developer.mozilla.org/ko/docs/Web/CSS/flex
Use position: fixed; also for the child container (&__content). position: absolute; relates to he next higher ancestor with position: relative, so that night not be appropriate in every situation.
.popup {
height: 100%;
width: 100%;
position: fixed;
top: 0;
left: 0;
background-color: red;
z-index: 3000;
}
.popup__content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100px;
height: 100px;
background-color: white;
box-shadow: 0 2rem 4rem green;
border-radius: 3px;
}
<div class="popup">
<div class="popup__content">
</div>
</div>
Related
I want the elements inside .bannerinner class to be in the exact middle alignment of the .banner class but it doesn't really work that way. I'm open to any advices, any help would be greatly appreciated, thanks from now.
I have this .banner class "absolute" to my "relative" background
.banner {
background-color: rgba(209, 29, 155, 0.212);
padding: 8px 15px;
overflow: hidden;
height: 10vh;
width: 150vh;
max-height: 10vh;
min-height: 10vh;
position: absolute;
bottom: 9vh;
}
and also inside this .banner class there is a .bannerinner class
.bannerinner {
padding: 0;
margin: 0;
left: 2vh;
position: absolute;
bottom: 50%;
vertical-align: middle;
}
Set .innerbanner to left:50% and top:50%. This puts the upper left corner of .innerbanner to the center of .banner.
Then transform .innerbanner back to -50% of its own width and height. This sets the center of .innerbanner exactly to the center of .banner.
See code example:
div {
box-sizing: border-box;
}
.background {
position: relative;
width: 80%;
height: 400px;
padding: 0.5em;
margin: 0 auto;
background-color: #bbb;
}
.banner {
position: absolute;
width: 80%;
height: 200px;
padding: 8px 15px;
left: 10%;
bottom: 2vh;
overflow: hidden;
background-color: rgba(209, 29, 155, 0.212);
}
.bannerinner {
position: absolute;
left: 50%;
top: 50%;
width: 200px;
transform: translate(-50%, -50%);
text-align: center;
background-color: #fff;
border: 1px solid #000;
}
<div class="background">
<p>Background: relative</p>
<div class="banner">
<p>Banner: absolute </p>
<div class="bannerinner">
<p>Inner Banner: absolute</p>
</div>
</div>
</div>
I have a div with a triangle as a pseudo element on top, and an image inside of this div, as you can see in this fiddle. I am trying to make the image contained within the bounds of the parent with the pseudo element, so that the image extends all the way through the triangle.
However, I am not sure how to do this. I have tried a few ways, including skewing the container etc but have not managed to create an elegant, responsive solution.
Please give me your suggestions if possible.
Edit: I am trying to make the image look like the following:
e.g. the ring is quite large and simply gets cut off by the containing element.
.bg {
background: black;
color: white;
position: relative;
filter: drop-shadow(0 0 3vh rgba(30, 14, 43, 1));
height: 20vh;
width: 100vw;
margin: 30vh 0;
}
.bg::before {
content: "";
position: absolute;
bottom: 100%;
left: 0;
right: 0;
display: block;
border-bottom: 18vh solid black;
border-right: 12vw solid transparent;
border-left: 88vw solid transparent;
}
.ring {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.container {
height: 100%;
width: 100%;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow: hidden;
}
<div class='bg'>
<div class='container'>
<img src='http://pngimg.com/uploads/jewelry/jewelry_PNG6788.png' class='ring'>
</div>
</div>
You may try to have the shape as one element and consider some rotation transform and overflow:hidden :
go full page for better result
body {
margin: 0;
}
.bg {
color: white;
position: relative;
height: 90vh;
overflow: hidden;
text-align: right;
}
.container {
position: absolute;
filter: drop-shadow(0 0 3vh rgba(30, 14, 43, 1));
height: 160%;
transform: rotate(-20deg);
top: 42%;
left: -2%;
right: -4%;
background: #000;
overflow: hidden;
}
img {
position: absolute;
top: 15%;
left: 61%;
transform: translate(-50%, -50%) rotate(20deg);
]
<div class='bg'>
<div class="container">
<img src='http://pngimg.com/uploads/jewelry/jewelry_PNG6788.png' class='ring'>
</div>
</div>
So i've got a modal div (set with z-index) that I'm trying to center vertically. The thing is I use it for not only one content but several ones, so the height is not fix. And while having a general "fix" (I'll explain in just after) of -150px in the margin-top generally works for short content, when having a lot of content, the div will start at mid-page and finish at the end (which is not what I want at all). Here is my code :
.modal
{
padding: 10px;
border: 1px black solid;
width: 80%;
position: absolute;
background: white;
left: 50%;
top: 50%;
margin-top: -150px;
margin-left: -40%;
z-index: 1000;
border-radius: 5px;
max-height: 80%;
overflow: scroll;
}
So here you can see the "fix". It works kind of well when the content is short :
It's pretty ugly when the content is big :
Does anyone have an idea of how to fix that ?
Thank you in advance
You could use this. Top 50% position the div on the 50% of the container y translate -50% is referred to his height and no the container:
.modal {
padding: 10px;
border: 1px black solid;
width: 80%;
position: absolute;
background: white;
left: 50%;
margin-left: -40%;
z-index: 1000;
border-radius: 5px;
max-height: 80%;
overflow: scroll;
top: 50%;
transform: translateY(-50%);
-o-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
}
FIDDLE
Add the following css to center the div. note that this only works on position:absolute elements.
top: 0;
bottom:0;
margin-top: auto;
margin-bottom: auto;
So your css will become:
.modal
{
padding: 10px;
border: 1px black solid;
width: 80%;
position: absolute;
background: white;
left: 50%;
top: 0;
bottom:0;
margin-top: auto;
margin-bottom: auto;
margin-left: -40%;
z-index: 1000;
border-radius: 5px;
max-height: 80%;
overflow: scroll;
}
.modal{
padding: 10px;
border: 1px black solid;
width: 80%;
background: white;
z-index: 1000;
border-radius: 5px;
max-height: 80%;
overflow: scroll;
position: absolute;
left:0;
top:0;
right:0;
bottom:0;
margin: auto;
}
I'm trying to create a "button" with 2 sections (each is 50% of the height of the div) separated by an horizontal bar. Each of the sections has centered text. The size of the button is going to be manipulated using javascript, and I'm trying to avoid also using javascript to position the elements inside the "button".
What I have so far is http://jsfiddle.net/u5u7d31p/2/, but i'm having a problem centering the horizontal bar. If I change the position of the separator to relative, the bar is centered, but then it changes the position of the bottom part of the text. I can also change the margin to a static value (margin: 0 63px;) to center it, but I would like to avoid it if there is an easier solution that doesn't require javascript.
.img_overlay .separator{
position: absolute;
top: -1px;
left: 0;
height: 3px;
width: 70px;
margin: 0 auto;
background: #444;
}
Any ideas? Thanks.
All codes are ok. Just put this css below to .img_overlay .separator class.
Full code is below:
.img_overlay .separator {
position: absolute;
top: -1px;
left: 0;
height: 3px;
width: 70px;
margin: 0 auto;
background: #444;
right: 0;
}
view my demo on jsfiddle
.img{
float: left;
background-repeat:no-repeat;
background-size:100% 100%;
border-radius: 4px;
width: 200px;
height: 51px;
background: red;
overflow: hidden;
}
.img_overlay{
width: 100%;
height: 100%;
background: #222;
color: #ddd;
position: relative;
opacity: 0.8;
}
.img_overlay>div{
display: block;
width: 100%;
height: 50%;
text-align: center;
position: relative;
}
.img_overlay .middle{
position: relative;
top: 50%;
transform: translateY(-50%);
}
.img_overlay .separator{
height: 3px;
width: 70px;
margin: 0 auto;
background: #444;
}
<div class="img">
<div class="img_overlay">
<div class="img_show_details">
<div class="middle">details</div>
</div>
<div class="img_open">
<div class="separator"></div>
<div class="middle">open</div>
</div>
</div>
</div>
All I did was taking off :
.img_overlay .separator{
position: absolute;
top: -1px;
left: 0;
}
This following fix works okay in firefox and chrome but mess in IE.
I fixed height in div, top in middle and top in separator
.img_overlay>div {
display: block;
width: 100%;
height: 40%;
text-align: center;
position: relative;
}
.img_overlay .middle {
position: relative;
top: 60%;
transform: translateY(-50%);
}
.img_overlay .separator {
position: relative;
top: 5px;
left: 0;
height: 3px;
width: 70px;
margin: 0 auto;
background: #444;
}
here's the demo in jsfiddle.
I have a relatively div positioned on top of a fixed position div and I would like to vertically align this first div. Is there a way to do this? This is my current markup:
<div class="overlay">
<div id="dialogInvoice">
content
</div>
</div>
The CSS:
.overlay {
height: 100%;
width: 100%;
top: 0;
left: 0;
background-color: rgba(0,0,0,0.5);
position: fixed;
z-index: 10;
}
#dialogInvoice {
width: 390px;
height: 722px;
margin: 0 auto;
padding-top: 28px;
border-radius: 4px;
background: #ffffff;
position: relative;
}
Any suggestions on this? I did try the line-height method but this is apparently only working when using mere text.
If your element does not have a fixed width or height then you can't use the other solutions without using javascript to calculate the values.
Here is an alternative.
#dialogInvoice {
width: 390px;
height: 722px;
padding-top: 28px;
border-radius: 4px;
background: #ffffff;
position: absolute;
left:50%;
top:50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
what you need to add to your css of #dialogInvoice is
top: 50%;
and change the margin to
margin: 361px auto;
(361 is 722 / 2)
it will first push your container half way down the page and then push it back up the required value, which is exactly half of its height (361px)
here is a jsfiddle for better understanding.
This CSS may do what you require:
.overlay {
height: 100%;
width: 100%;
top: 0;
left: 0;
background-color: rgba(0,0,0,0.5);
position: fixed;
z-index: 10;
}
#dialogInvoice {
margin: 0 auto;
padding-top: 28px;
border-radius: 4px;
background: #ffffff;
position: absolute;
top: 100px;
bottom:100px;
left:100px;
right:100px;
}