I am trying to centre a DIV (form) based on the presently viewable browser space, and one that takes into account how far up or down a page I have scrolled. I would like the form centred as and when I press a button. My attempt is below. The problem with my attempt is that if I have scrolled down a page far enough for instance, the form is not entered, but is centred if I scroll all the way up the page again.
If I have scrolled down the page, and want the form to appear, the first image shows what i get.
If I am at the top of the page, then the form is properly centred.
PS:- No jQuery solutions please
CSS for div #docForm
#docForm {
font-family: sans-serif;
border: 1px solid #ccc;
width: 600px;
padding: 10px;
height: 425px;
transform: translate3d(-50%, -50%, 0);
z-index: 10000;
position: absolute;
background-color: white;
top: 50%;
bottom: 0;
left: 50%;
right: 0;
border-radius: 10px;
box-shadow: 3px 3px 3px #b8b8b8;
color: #484848;
}
#docForm {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
or if you want to use flex, create a div with class formContainer, put your form inside of it and then:
.formContainer {
position: fixed;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
Since you have a fixed width and height, you can do this by setting the left and top to the center of the screen, then offsetting the container by half of it's width and height:
#docForm {
width: 600px;
height: 425px;
border: 1px solid #ccc;
padding: 10px;
position: fixed;
top: 50%;
left: 50%;
margin-left: -311px /* -(width + padding*2 + border_width*2) / 2) */
margin-top: -223px /* -(height + padding*2 + border_width*2) / 2) */
}
All settings not relevant to the solution omitted in this answer, however note that you must not set right or bottom, or you will get unintended results.
In contrast to using flexbox or translate, this will be compatible with browsers that don't support CSS Level 3.
Related
I have this CSS, where I want the footer div displayed after all content on the page. At this moment it doesnt show on the page, when I have the height of the page set to "auto", but if I set a height of any sorts or min-height it shows up till that height as it should. Can I do this, or do I have to set a manual height on each page? The CSS looks like this:
body
{
position: absolute;
top: 0;
left: 0;
right: 0;
height: auto;
background-image: url("background.jpg");
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
/* Dette er css til vores footer div boks */
div.footer
{
position: absolute;
bottom: 0;
height: 250px;
left: 0;
right: 0;
padding: 1%;
background-color: rgb(255, 255, 255);
color: rgb(0, 0, 0);
line-height: 200%;
border: 1px solid black;
}
I have tried using flexbox, containers and grids, but it only seems to work, if I insert a manual height of the body.
Try this example:
.my-contnet element has min-height of 100% to take the full height of the page.
This way the footer is always displayed at the bottom of the page regardless of the amount of content on the page.
The content will fill the remaining space above the footer.
html,
body {
height: 100%;
margin: 0;
}
.my-contnet {
min-height: 100%;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
}
What about this?
div.header {
position: relative;
display: flex;
justify-content: center;
align-items: normal;
}
video.header {
position: relative;
width: 100%;
filter: brightness(60%);
left: 50%;
top: 50%;
transform: translate(-50%,0%);
}
div.headline {
position: absolute;
left: 50%;
border-radius: 50px;
transform: translate(-50%,150%);
}
h1.headline {
font-size: 500%;
text-align: center;
-webkit-text-stroke-width: 2px;
-webkit-text-stroke-color: black;
}
div.about {
position: relative;
background-color: rgba(255, 255, 255, 0.9);
border: solid black 2px;
border-radius: 40px;
padding: 2%;
display: flex;
align-items: flex-start;
margin-bottom: 280px;
}
table.text {
width: 60%;
padding-bottom: 1%;
}
table.img {
padding-top: 5%;
}
div.footer {
position:fixed;
}
The absolute positioning of your elements was causing the footer visibility problems.
Also, if you don't want the footer to be displayed at all times, just replace the fixed position in my example with relative - the footer will only be showing once your visitors scroll down to it. If you do that, however, be sure to remove the margin-bottom: 280px; rule from div.about selector.
Please note that these were just some quick fixes - I have not considered whether your site will look good (enough) on various resolutions (mobile, tablets, 4:3, etc).
You might want to look up some boilerplates, for example, the ones Bootstrap offers.
For me, this code works great.
Please pay attention to the link I sent you in the comments.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style type="text/css">
html, body {
/* IE 10-11 didn't like using min-height */
height: 100%;
}
body {
display: flex;
flex-direction: column;
}
.content {
flex: 1 0 auto; /* Prevent Chrome, Opera, and Safari from letting these items shrink to smaller than their content's default minimum size. */
padding: 20px;
background-color: lightblue;
}
.footer {
flex-shrink: 0; /* Prevent Chrome, Opera, and Safari from letting these items shrink to smaller than their content's default minimum size. */
padding: 20px;
background-color: blue;
}
</style>
</head>
<body>
<div class="content">
<h1>Sticky Footer with Flexbox</h1>
</div>
<footer class="footer">
Footer
</footer>
</body>
</html>
I have a design. In this design, one is overlapping on another image. I have created some code to try as given in the design. but it's not working for me. Click here to find the design
Below is some line of code of components. that is tried by me
<div className="container">
<Image className="container-img1" src={img1}/>
<Image className="container-img2" src={img2}/>
</div>
below is a style in scss
.container{
text-align: center;
.container-img1{
position: inherit;
left: 0;
top: 0;
height: auto;
border-radius: 50%;
border: 3px solid grey;
margin-right: -5rem;
}
.container-img1{
position: inherit;
left: 0;
top: 0;
height: auto;
border-radius: 50%;
border: 3px solid grey;
margin-left: -5rem;
}
}
Click Here to check what I have designed. but it's not looking as given in design.
How can I style the same as given in Design? And should be responsive also.
To achieve the demo image you can eliminate the border with transparency for the img2 that has higher stack order in DOM.
.container-img1 {
position: inherit;
left: 0;
top: 0;
height: 7rem;
border-radius: 50%;
border: 3px solid grey;
/* Reduce the margin so that the border aligns properly */
margin-right: -1.1rem;
}
.container-img2 {
position: inherit;
left: 0;
top: 0;
height: 7rem;
border-radius: 50%;
border: 3px solid grey;
/* Reduce the margin so that the border aligns properly */
margin-left: -1.1rem;
/* make it transparent */
border-left-color: transparent;
}
To make it responsive, the image width seems very small but you need to adjust the width & margin according to the device size using media query.
I just want to have a loading animation with grayed-out background upon clicking TestLoading button. But I can't get it right. The loading gif is slightly in the left side but I want it in the center. Also grayed-out background is not working.
Here's my css:
.divLoader {
margin: 0px;
padding: 0px;
position: fixed;
right: 0px;
top: 0px;
width: 100%;
height: 100%;
background-color: rgb(67, 71, 75);
z-index: 30001;
opacity: 0.8;
}
.divLoaderContent {
position: absolute;
color: White;
top: 50%;
left: 40%;
}
In my view, I have this:
<!--LOADER -->
<div id="divProcessing" class="divLoader">
<p class="divLoaderContent"><img src="~/Content/image/blocks.gif"></p>
</div>
and
$('#btnRoster1').click(function(e) {
$("#divProcessing").show();
});
Here is revised version of css:
.divLoader{
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(67, 71, 75, 0.8);
z-index: 30001;
}
.divLoaderContent{
position: absolute;
color: White;
top: 50%;
left: 0;
right: 0;
margin: auto;
transform: translateY(-50%);
}
And don't use p tag for img container. Use div instead
To animate .show() use
$('#btnRoster1').click(function(e) {
$("#divProcessing").show(800);
});
where 800 is 0.8 sec.
To align the gif you can use flex and get rid of absolute positioning:
.divLoaderContent {
color: White;
display: flex;
justify-content: center;
}
Moving elements (especially img tags) with top/left based on percentages can get messy because it depends on the img size. I recommend using flex with this approach. The justify-content will center the children horizontally and align-items will center vertically when display is flex
.divLoader {
margin: 0px;
padding: 0px;
position: fixed;
right: 0px;
top: 0px;
width: 100%;
height: 100%;
background-color: rgb(67, 71, 75);
z-index: 30001;
opacity: 0.8;
display: none;
justify-content: center;
align-items: center;
}
Then have your js just modify display in css to flex when you want it to show, then display: none when you want it to hide;
$('#btnRoster1').click(function(e) {
$("#divProcessing").css('display', 'flex');
});
Fiddle below (has a timeout after 3 seconds to simulate something loading) I took out the unnecessary <p> tag as well.
https://jsfiddle.net/Garrito/vh2ttmu9/35/
I need to make a lightbox for pictures on this portfolio website. I have everything hooked up so the image goes to the original size when being clicked on, like a simple lightbox. But the problem I'm having is that the background behind the modal only goes down to the bottom of the viewport instead of going all the way to the bottom of the page. Let me know if theres any additional information I can provide.
Lightbox Problem
#overlay {
background: rgba(0,0,0,0.8);
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
display: none;
text-align: center;
}
#overlay img {
border-radius: 4px solid white;
margin-top: 10%;
}
#overlay p {
color: white;
}
Change position to fixed like this:
#overlay {
background: rgba(0,0,0,0.8);
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
display: none;
text-align: center;
}
Is there a more clean approach? How do I position the progress bar to be on the very bottom of the introjs-tooltip? Here is my CSS, and what I desire should look like this.
.introjs-progress {
width: 112%;
opacity: 1;
margin: 0;
bottom: -65px;
position: relative;
left: -25px;
}
Right now, my progress bar is stock layout, it's under the steps intro text and above the steps buttons. This is what it looks like: notice the bar is above steps
Wishing you good health, wealth and wisdom in 2017 - happy new year from me to you! GLHF
Use absolute positioning on progress element and add a little extra bottom padding to it's parent tooltip for aesthetics.
.introjs-tooltip {
padding: 10px 10px 14px 10px;
}
.introjs-tooltipbuttons, .introjs-tooltiptext {
text-align: center;
}
.introjs-progress {
overflow: hidden;
position: absolute;
height: 5px;
bottom: 0;
left: 0;
width: 100%;
/* margin: 10px 0 5px 0; */
/* border-radius: 4px; */
background-color: #ecf0f1;
}