Basically I want to have a title and then behind it a square thats offset. I've tried to do this by positioning absolute my square and then putting behind the title but when I resize the page it goes off position.
I'm trying to achive the shape behind the title in the image example.
What I tried:
.shape {
position: absolute;
width: auto;
height: 30px;
min-height: 30px;
min-width: 30px;
border-radius: 10px;
background-color: rgb(25, 94, 76);
top: 43vh;
left: 28vw;
z-index: -1;
}
.center {
position: absolute;
left: 50%; /*Half width*/
top: 50%; /*Half height*/ translateY(-50%);
-webkit-transform: translateX(-50%)
translateY(-50%);
padding: 20px;
font-size: 1rem;
}
<div class="center">
Resize the page to see the shape go off center
</div>
<div class="shape"></div>
Here is a codepen: https://codepen.io/PhoenixBeatsYT/pen/XWjZLgB
Move the shape inside your text div then adjust to to the top and left.
Minor adjustments are probably necessary for perfect alignment.
.shape {
position: absolute;
width: auto;
height: 30px;
min-height: 30px;
min-width: 30px;
border-radius: 10px;
background-color: rgb(25, 94, 76);
z-index: -1;
top: 0;
left: 0;
}
.center {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
padding: 20px;
font-size: 1rem;
}
<div class="center">
Resize the page to see the shape go off center
<div class="shape"></div>
</div>
Related
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>
I'm trying to put two lines (horizontal and vertical one) on top of an image via CSS.
here my code:
div {
width: 640px;
position: relative;
}
.verticalLine {
display: block;
position: absolute;
background-color: blue;
width: 3px;
top: 0px;
bottom: 0px;
left: 50%;
height: 480px;
}
.horizontalLine {
position: absolute;
width: 3px;
top: 0px;
bottom: 0;
left: 50%;
background-color: blue;
transform: rotate(90deg);
}
<div>
<span class="verticalLine"></span>
<span class="horizontalLine"></span>
<img src="http://placehold.it/640x480">
</div>
Unfortunately my result is:
How can I solve this?
thanks
You should add a height to the horizontal line equal to the image width, and then position it in the center with top:50% translateY(-50%).
And also you should add translateX(-50%) to both of them to make them stay in the exact center of the image.
See below
div {
width: 640px;
position: relative;
}
.verticalLine {
display: block;
position: absolute;
background-color: blue;
width: 3px;
top: 0px;
bottom: 0px;
left: 50%;
height: 480px;
transform: translateX(-50%)
}
.horizontalLine {
position: absolute;
width: 3px;
top: 50%;
bottom: 0;
left: 50%;
background-color: blue;
transform: translate(-50%, -50%) rotate(90deg);
height:640px;
}
<div>
<span class="verticalLine"></span>
<span class="horizontalLine"></span>
<img src="http://placehold.it/640x480">
</div>
I am trying to scale a div, but keep the inside element at the same position and the same size. To do that, I use transform: scale(value) on wrapper and transform: scale(1/value) on the inside div.
The problem is, that the inside div shifts when I change scale. That only happens if width/height of wrapper is odd or not whole. It does not happen for even widths/height of the wrapper.
My goal is to have many child elements of wrapper that scale alongside wrapper, but only one that does not.
Take a look at this example to see problem in action (hover to scale).
Example with no issue, inner element stay fixed on scale (height and width of container are even):
https://jsfiddle.net/o16rau6u/5/
.wrapper {
width: 200px;
height: 200px;
background-color: blue;
position: relative;
}
.bg {
width: 20px;
height: 20px;
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
margin-top: -10px;
margin-left: -10px;
background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/f/f9/Wiktionary_small.svg/350px-Wiktionary_small.svg.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}
.wrapper:hover {
transform: scale(2);
}
.wrapper:hover .bg {
transform: scale(0.5);
}
<div id="wrapper" class="wrapper">
<div id="bg" class="bg"></div>
</div>
Example with issue, the inner element move a little on scale (height and width of container are odd):
https://jsfiddle.net/o16rau6u/6/
.wrapper {
width: 201px;
height: 201px;
background-color: blue;
position: relative;
}
.bg {
width: 20px;
height: 20px;
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
margin-top: -10px;
margin-left: -10px;
background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/f/f9/Wiktionary_small.svg/350px-Wiktionary_small.svg.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}
.wrapper:hover {
transform: scale(2);
}
.wrapper:hover .bg {
transform: scale(0.5);
}
<div id="wrapper" class="wrapper">
<div id="bg" class="bg"></div>
</div>
How can I fix this issue and avoid my elements to move on scale whataver the size of container is ?
PS : The example used above is a very simplified example to show the issue and it's not the needed output or the code used. So we are not looking for another way to achieve the same behavior above as it's pretty easy to be done.
At the start I thought this is related to the calculation done by the browser and some rounding but it's seems to be bug. I have done a lot of test and whataver the value of the scale I use it always fail on odd value.
Here is a simple example with only scaleX
body:after {
content: "";
position: absolute;
z-index: 999;
top: 0;
bottom: -200%;
width: 2px;
right: 50%;
margin-right: -1px;
background: rgba(0, 0, 0, 0.5);
}
.box {
width: 200px;
height: 100px;
margin: 50px auto;
background: blue;
position: relative;
}
.inner {
height: 20px;
width: 20px;
background: red;
position: absolute;
top: 50%;
left: 50%;
margin-left: -10px;
text-align: center;
color: #fff;
margin-top: -10px;
}
<div class="box">
<div class="inner">A</div>
</div>
<div class="box" style="transform:scaleX(2)">
<div class="inner" style="transform:scaleX(0.5)">A</div>
</div>
<div class="box" style="width:201px;transform:scaleX(2)">
<div class="inner" style="transform:scaleX(0.5)">A</div>
</div>
As you can see below, the browser seems to add an extra pixel to inner div, but if you look more closely the inner div has a correct size but it's being translated by 1px to the right. So the hover block of Dev Tools is positioned correctly but not element itself! So it seems that the browser correctly calculated the position but did a wrong painting.
The same issue appear if we simply apply scale on the container. So it's not because the scale of inner element:
body:after {
content: "";
position: absolute;
z-index: 999;
top: 0;
bottom: -200%;
width: 2px;
right: 50%;
margin-right: -1px;
background: rgba(0, 0, 0, 0.5);
}
.box {
width: 200px;
height: 100px;
margin: 50px auto;
background: blue;
position: relative;
}
.inner {
height: 20px;
width: 20px;
background: red;
position: absolute;
top: 50%;
left: 50%;
margin-left: -10px;
text-align: center;
color: #fff;
margin-top: -10px;
}
<div class="box" style="transform:scaleX(2)">
<div class="inner">A</div>
</div>
<div class="box" style="width:201px;transform:scaleX(2)">
<div class="inner">A</div>
</div>
Even if we use floating value with scale where we can say there is some rouding and complex calculation, we have correct output with even values and issue with odd values:
Example with scale(1.25) & scale(1/1.25):
body:after {
content: "";
position: absolute;
z-index: 999;
top: 0;
bottom: -200%;
width: 2px;
right: 50%;
margin-right: -1px;
background: rgba(0, 0, 0, 0.5);
}
.box {
width: 200px;
height: 100px;
margin: 50px auto;
background: blue;
position: relative;
}
.inner {
height: 20px;
width: 20px;
background: red;
position: absolute;
top: 50%;
left: 50%;
margin-left: -10px;
text-align: center;
color: #fff;
margin-top: -10px;
}
<div class="box">
<div class="inner">A</div>
</div>
<div class="box" style="transform:scaleX(1.25)">
<div class="inner" style="transform:scaleX(0.8)">A</div>
</div>
<div class="box" style="width:201px;transform:scaleX(1.25)">
<div class="inner" style="transform:scaleX(0.8)">A</div>
</div>
Example with scale(1.33) & scale(1/1.33):
body:after {
content: "";
position: absolute;
z-index: 999;
top: 0;
bottom: -200%;
width: 2px;
right: 50%;
margin-right: -1px;
background: rgba(0, 0, 0, 0.5);
}
.box {
width: 200px;
height: 100px;
margin: 50px auto;
background: blue;
position: relative;
}
.inner {
height: 20px;
width: 20px;
background: red;
position: absolute;
top: 50%;
left: 50%;
margin-left: -10px;
text-align: center;
color: #fff;
margin-top: -10px;
}
<div class="box">
<div class="inner">A</div>
</div>
<div class="box" style="transform:scaleX(1.33)">
<div class="inner" style="transform:scaleX(calc(1 / 1.33))">A</div>
</div>
<div class="box" style="width:201px;transform:scaleX(1.33)">
<div class="inner" style="transform:scaleX(calc(1 / 1.33))">A</div>
</div>
Just don't put one of these divs into another, instead put both of them into the third div like this:
.wrapper {
width: 201px;
height: 201px;
position: relative;
}
.div-1 {
width: 100%;
height: 100%;
background-color: blue;
}
.div-1:hover {
transform: scale(2);
}
.div-2 {
width: 20px;
height: 20px;
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
margin-top: -10px;
margin-left: -10px;
background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/f/f9/Wiktionary_small.svg/350px-Wiktionary_small.svg.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}
<div class="wrapper">
<div class="div-1"></div>
<div class="div-2"></div>
</div>
This way you just wont be needed to scale the inner div back to it's original height and width.
Browsers are notoriously bad at calculating stuff. There was a time when web developer math stated that (in some browsers) 33.33% times 3 was larger than 100% (but that was 14 years ago). Things have gotten much better since then, but don't rely on it. Doing resize tricks like this is not the way to go.
It seems to me that you want to resize the wrapper, while keeping the background size the same. To do so, you are using a complex transform trick, which (unprefixed) excludes 17% of all internet users. That is improper browser support and another reason not to do this.
This effect can be easily achieved with 99.99% browser support, working on all sizes.
.wrapper {
width: 402px;
height: 402px;
background-color: blue;
position: relative;
}
.bg {
width: 20px;
height: 20px;
display: block;
position: absolute;
top: 201px;
left: 201px;
margin-top: -10px;
margin-left: -10px;
background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/f/f9/Wiktionary_small.svg/350px-Wiktionary_small.svg.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}
.wrapper:hover {
width: 4020px;
height: 4020px;
}
<div id="wrapper" class="wrapper">
<div id="bg" class="bg"></div>
</div>
If you want it to be responsive (you do!), this should do the trick:
* {padding: 0; margin: 0;}
html, body {height: 100%;}
.wrapper {
width: 50vw;
background-color: blue;
position: relative;
padding-bottom: 50%;
}
.bg {
width: 20px;
height: 20px;
display: block;
position: absolute;
top: 25vw;
left: 25vw;
margin-top: -10px;
margin-left: -10px;
background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/f/f9/Wiktionary_small.svg/350px-Wiktionary_small.svg.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}
.wrapper:hover {
width: 500vw;
padding-bottom: 500%;
}
<div id="wrapper" class="wrapper">
<div id="bg" class="bg"></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 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;
}