I have a modal that I'm centering via this code
.modal {
max-height: 85%;
min-width: 600px;
overflow: auto;
z-index: 10001;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Whenever overflow is triggered (via overflow: auto;) The text in internet explorer blurs. It seems to be a conflict with the css for the transform, but I haven't been able to figure out a winning combination. I've tried some suggestions from other issues (using transform3d and adding translate-z). And adding filter: blur(0). So far no luck.
Related
I’ve been trying emulate (in Webflow) this nifty 'fluid text hover' from the following codepen: https://codepen.io/robin-dela/pen/KKPYoBq
As you can see, there is a fair amount of HTML, CSS (SCSS) and JS (Babel), but I believe the pertinent code snippet to be the following:
<style>
body {
position: fixed;
height: 100%;
overflow: hidden;
}
canvas {
position: absolute;
width: 100%;
height: 100vh;
top: 0;
left: 0;
}
.mask {
position: absolute;
z-index: 2;
background: white;
height: 100vh;
width: 100vw;
mix-blend-mode: screen;
/* THE mix-blend-mode ABOVE DISPLAYS IN RED */
}
svg {
width: 90%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
When I publish my site, the 'CREATIVE' text displays, but without the interactive fluid element. I’m almost certain it’s something to do with the mix-blend-mode, as that is the only code showing up in red. I’ve seen similar questions asked on here, and have tried all the methods offered (changing the body background to white, as opposed to transparent; adding the code as a code block rather than the Inside tag, but nothing has as yet made it work. I’d really appreciate any help.
My Webflow site read-only can be found here:
https://preview.webflow.com/preview/hen-ry?utm_medium=preview_link&utm_source=designer&utm_content=hen-ry&preview=f7f278a8af346d820c843647397c8d76&pageId=6238983c269c21e6d0507afe&workflow=preview
You're probably missing the js file. If you click the little settings button at the top of the JS section, you will see a file called https://robindelaporte.fr/codepen/bundle.js, if you have not loaded this then it won't work.
I was struggling a lot with getting my images to fit inside their parent element. In order to ask a better StackOverflow question, I decided to makde a codepen, but when I did that, the issue was solved? it's still not solved when I run a local server though. Can anyone explain this?
Outer div:
.img-holder{
opacity: .5;
left: 50%;
transform: translateX(-50%);
pointer-events: none;
position: relative;
max-width: 80vw;
display: block;
max-height: 80vh;
}
inside image:
img {
left: 50%;
transform: translateX(-50%);
position: relative;
max-height: 80vh;
}
http://codepen.io/evejweinberg/pen/vgRNWR
My intention is to center a header <div>, but i'm not able to do it.
header {
height: 54px;
margin:0px auto;
width: 1150px;
background: #13171B;
position: fixed;
left: 0;
top: 0;
z-index: 990;
margin-bottom:10px;
}
Please help me.
margin: 0 auto can center elements in static or relative position only. Since your div is in fixed position you may try with
header {
position: fixed;
height: 54px;
width: 1150px;
...
left: 50%;
margin-left: -575px; /* 1150px/2 */
top: 0;
}
if you don't know in advance the width, a better solution involves css3 transformations, e.g.
header {
position: fixed;
height: 54px;
...
left: 50%;
transform: translateX(-50%);
top: 0;
}
My go to solution for centering is thus;
.parent {
position: relative;
}
.toCenter {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
This positions the .toCenter element vertically and horizontally centered to it's .parent.
If you needed to position only horizontally, each 'translate(-50%-50%)' in the element's style would become 'translateX(-50%)'. Similarly, if vertical alignment was required, you could use 'translateY(-50%)' instead.
The important thing here is that there is a limit to browser support. Essentially everything except IE will work fine, with anything from IE9 backwards causing issues. There are poly fills and hacks to get things to work however, and they're usually neater than having to create additionally classes or style sheets just for one piece of functionality.
It's because of the fixed position. Add/change the properties below:
left: 50%;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
transform: translateX(-50%);
I'm trying to have a popup that auto sizes to fit content based on screen resolution, while also remaining in the dead center of the screen both horizontally & vertically.
This is where I'm at so far:
.reveal-modal {
background: none no-repeat scroll 0 0 #eee;
border-radius: 5px;
width: 50%;
height: 50%;
left: 25%;
top: 25%;
padding: 2%;
position: absolute;
visibility: hidden;
z-index: 101;
}
.reveal-child {
display: block;
position: relative;
width: 100%;
height: 100%;
}
The effect is close, but still doesn't work in certain resolutions. In some places the container is too large while others it is too small. I'd ideally like the container to be only as big as the content requires.
The demo can be viewed on 104.131.228.107 and clicking the Register button
I dont understand you, but if u want something like this site you linked, than watch here how to do popup.
u can use jQuery for that.
$('.button').click(function(){
$(".content").animate({opacity:"0.3"},500,function(){
$(".popup").fadeIn();
});
});
$(".popup").click(function(){
$(".popup").fadeOut(function(){
$(".content").animate({opacity:"1"},500);
});
});
This may be what you're looking for?
I made a fiddle where I made the width static so there is no unnecessary whitespace in the modal.
This one scales to the 50% width and height just as you had it and stops at the minimum for your content using the "min-width" and "min-height" properties.
If you want to create different styles for different screen resolutions use media queries
Hope it helped
#myModal {
position: absolute;
width: 50%;
height: 50%;
min-width:500px;
min-height:230px;
left: 50%;
top:50%;
border-radius: 5px;
background-color: #fff;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
I am looking to vertically center a <div> in the viewport (browser window) without resorting to Javascript (pure HTML and CSS only). I have several constraints:
The div must be centered vertically in the viewport. Methods I have seen only support centering inside another <div>, which is not what I want.
The height of the div is not known.
Other constraints:
The div must be aligned to the right.
The div has a constant width.
The div must support padding.
Other elements will be placed on the web page. The div acts as a menu.
The div must support a background colour/image.
This gets me close to what I want, but not exactly:
#nav {
position: fixed;
right: 0;
top: 50%;
}
However, the top of the nav is in the middle, not the middle of the nav.
Is there some technique which allows me to center my div with these constraints?
What's that? Taking 8 years to get the answer to a problem is too much?
Well, better late than never!
You got really close to the solution. I'd do it with transform: translate():
#nav {
position: fixed;
right: 0;
top: 50%;
transform: translateY(-50%);
}
According to Can I use?, it is supported by everything except for IE8- and Opera Mini (which, to be honest, is a pretty good support).
I'd recommend you overkill it a bit and just add all of the vendor prefixes (just to make sure!):
#nav {
position: fixed;
right: 0;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
Here's a snippet to show it to you in action:
#nav {
right: 0;
top: 50%;
position: fixed;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
background-color: #ccc;
padding: 20px;
}
<div id="nav">
ABC<br/>
DEFGH<br/>
IJKLMNO<br/>
PQRS<br/>
TUVWXYZ
</div>
Hopefully it's still relevant to you! (who am I kidding, it's been 8 years)
you can use this as one of the solution.
<style>
#containter {
height: 100vh; //vh - viewport height
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
#content {}
</style>
<div id="containter">
<div id="content">
any text<br>
any height<br>
any content, for example generated from DB<br>
everything is vertically centered
</div>
</div>
If the item is set to position: fixed or position: absolute:
top: 50%; left: 50%; transform: translate(-50%, -50%)
If the item is set to position: relative, use:
margin-top: 50%; margin-left: 50%; transform: translate(-50%, -50%)
(More info at the source.)
Example:
Run the snippet and then resize this page (or rotate device). The box stays centered in the "snippet viewport".
.myContainer {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 5px solid RebeccaPurple;
}
.myThing {
width: 100px;
height: 100px;
background-color: CornflowerBlue;
}
<div class="myContainer">
<div class="myThing myContents">
</div>
</div>
The easiest way is not to use a div - use a table with one row and one cell. Vertical alignment is woefully unsupported in CSS and you will find yourself coding up the wall and across the ceiling to accomplish it.
I understand the semantic argument against what I have just proposed - I am a proponent of semantic markup in most cases. However I also believe in using the right tool for the right job. I believe it is best to sacrifice a little purity in this case for a simple solution that will work.