This question already has answers here:
How can I vertically center a div element for all browsers using CSS?
(48 answers)
Closed 6 years ago.
I am trying to centre a DIV which contains a form. I have managed to grey out the back ground and would like to centre the form within the window. Below is what I have done so far, but I do not know how to progress it further to get the result that I need.
I am able to 'auto margin' horizontally, but I am not able to do this vertically (please see image). If you stretch the browser window further vertically, the form stretches to occupy all of the vertically space.
#idOfForm{
margin: auto;
z-index: 10000;
position: absolute;
background-color: white;
top: 0;
bottom: 0;
left: 0;
right: 0;
padding: 10px;
width: 500px;
min-height: 250px;
border: 1px solid #ccc;
border-radius: 10px;
box-shadow: 3px 3px 3px #b8b8b8;
font-family: sans-serif;
color: #484848;
}
This is how you can center elements easily:
Suppose you have the following:
<div class="aaa">
fsdfsd
</div>
Use the following css:
.aaa {
transform: translate3d(-50%, -50%, 0);
position: absolute;
top: 50%;
left: 50%;
}
Here is jsfiddle: https://jsfiddle.net/ffnvjz4q/
This is the code you need:
#idOfForm{
transform: translate3d(-50%, -50%, 0);
z-index: 10000;
position: absolute;
background-color: white;
top: 50%;
bottom: 0;
left: 50%;
right: 0;
padding: 10px;
width: 500px;
min-height: 250px;
border: 1px solid #ccc;
border-radius: 10px;
box-shadow: 3px 3px 3px #b8b8b8;
font-family: sans-serif;
color: #484848;
}
What browsers does your 'app' must support ? The easiest way to achieve this is using CSS flexbox but it is not fully support yet
http://caniuse.com/#search=flexbox
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
.parent {
display: flex;
height: 300px; /* Or whatever */
}
.child {
width: 100px; /* Or whatever */
height: 100px; /* Or whatever */
margin: auto; /* Magic! */
}
<div class="modal">
<div class="modal-body">
<!-----put your form code here --->
</div>
</div>
.modal {
position: fixed;
top: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.4);
z-index: 2;
}
.modal-body {
position: relative;
max-width: 500px;
width: 100%;
margin: 50px auto 20px;
background-color: #fff;
min-height: 50px;
}
You could try
.element {
position: relative;
top: 50%;
transform: translateY(-50%);
}
Source: http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/
Related
I am trying to make my own alert for my stream and for that I need to get the text from streamlabs (i think getElementById will work) and then I have to fade the text (or the entire HTML tag) from left to right.
I can make the text fade away by using CSS but I can t make it like this image.
What should I do?
you can use this, If need more help tell me.
.image-border{
position: fixed;
width: 100vw;
height: 50vh;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
background-color: gray;
display: block;
}
.image-text-center{
display: flex;
justify-content: center;
align-items: center;
color: white;
width: 100%;
height: 100%;
font-size: 25px;
}
.image-text-center::after{
content:'';
position: absolute;
display: block;
left: 0;
top: 0;
bottom: 0;
margin: auto;
width: 0;
height: 25px; /* size of font-size text parent */
background-color: gray;
transition: all 2500ms linear;
box-shadow: 8px 0 15px 10px gray;
}
.image-border:hover .image-text-center::after{
width: 100%;
box-shadow: 0 0 0 0 gray;
}
<div class="image-border" >
<div class="image-text-center">HELLO WORLD!!</div>
</div>
I appreciate if my answer helps you ,accept and vote up it;
I would like to add a tooltip inside a split screen. I have try many combination like this one, but all of them failed. My tooltip is always hidden behind the second "screen"
Here is my code so far
<!DOCTYPE html>
<style>
a-leftcolumn {
width: 8%;
background: #EFF0F1;
overflow-y: auto;
overflow-x: scroll;
position: absolute;
top: 0px;
left: 2px;
bottom: 0px;
padding-left: 3px;
font-size: 10px;
}
a-main {
width: 90%;
overflow: auto;
position: absolute;
top: 0px;
left: 9%;
bottom: 0px;
}
/* tooltip https://stackoverflow.com/questions/39146047/display-tooltip-when-container-overflow-is-hidden*/
.has-tooltip {
/*position: relative;*/
display: inline;
}
.tooltip-wrapper {
position: absolute;
visibility: hidden;
}
.has-tooltip:hover .tooltip-wrapper {
visibility: visible;
opacity: 0.7;
/*top: 30px;*/
/*left: 50%;*/
/*margin-left: -76px;*/
/* z-index: 999; defined above with value of 5 */
}
.tooltip {
display: block;
position: relative;
top: 2em;
right: 30%;
width: 140px;
height: 96px;
/*margin-left: -76px;*/
color: #FFFFFF;
background: #000000;
line-height: 96px;
text-align: center;
border-radius: 8px;
box-shadow: 4px 3px 10px #800000;
}
.tooltip:after {
content: '';
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -8px;
width: 0;
height: 0;
border-bottom: 8px solid #000000;
border-right: 8px solid transparent;
border-left: 8px solid transparent;
}
/* end tooltip */
</style>
<body>
<a-leftcolumn>
<a class="has-tooltip" href="#">Hover me for Tooltip
<span class="tooltip-wrapper"><span class="tooltip">Tooltip</span></span></a>
</a-leftcolumn>
<a-main>
Some text
</body>
</html>
If you need to have scrolling inside the left column, your best bet is to find a way to have the tooltip exist outside the the element - not as a child, but as a sibling.
<body>
<tooltip></tooltip>
<left-column></left-column>
<right-column></right-column>
</body>
Change a-leftcolumn overflow to visible; The tooltip is hidden because of the overflow rules you set. Overflow generally hides stuff inside of the element unless you set it to visible, which is also the default btw so you can probably remove this rule entirely.
<!DOCTYPE html>
<style>
a-leftcolumn {
width: 8%;
background: #EFF0F1;
overflow: visible; /* Change overflow to VISIBLE */
position: absolute;
top: 0px;
left: 2px;
bottom: 0px;
padding-left: 3px;
font-size: 10px;
}
a-main {
width: 90%;
overflow: auto;
position: absolute;
top: 0px;
left: 9%;
bottom: 0px;
}
/* tooltip https://stackoverflow.com/questions/39146047/display-tooltip-when-container-overflow-is-hidden*/
.has-tooltip {
/*position: relative;*/
display: inline;
}
.tooltip-wrapper {
position: absolute;
visibility: hidden;
}
.has-tooltip:hover .tooltip-wrapper {
visibility: visible;
opacity: 0.7;
/*top: 30px;*/
/*left: 50%;*/
/*margin-left: -76px;*/
/* z-index: 999; defined above with value of 5 */
}
.tooltip {
display: block;
position: relative;
top: 2em;
right: 30%;
width: 140px;
height: 96px;
/*margin-left: -76px;*/
color: #FFFFFF;
background: #000000;
line-height: 96px;
text-align: center;
border-radius: 8px;
box-shadow: 4px 3px 10px #800000;
}
.tooltip:after {
content: '';
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -8px;
width: 0;
height: 0;
border-bottom: 8px solid #000000;
border-right: 8px solid transparent;
border-left: 8px solid transparent;
}
/* end tooltip */
</style>
<body>
<a-leftcolumn>
<a class="has-tooltip" href="#">Hover me for Tooltip
<span class="tooltip-wrapper"><span class="tooltip">Tooltip</span></span></a>
</a-leftcolumn>
<a-main>
Some text
</body>
</html>
I've been following the design of the Material developed by Google and they have a new bottom navigation bar with a shape I would love to know if it's possible to archive on the Web.
Thanks in advance for sharing your knowledge.
Custom shape bottom navigation
You will need to use some tricks to make this happen, however you should really look to post your attempt to see how your attempt can be amended.
Here I have used a :before and :after pseudo element to create the curves on the bottom element, and a border colour of red to create the shape.
You can just use the :hover elements as standard, I just used it for effect :)
html {
height: 100%;
margin: 0;
padding: 0;
background: red;
position: relative;
}
.bottom {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 120px;
transition: all 0.4s;
background: white;
}
.circle {
position: absolute;
top: -50px;
transition: all 0.4s;
left: 50%;
transform: translate(-50%, -50%);
height: 50px;
width: 50px;
background: transparent;
border: 5px solid red;
border-radius: 50%;
}
body:hover .bottom:before,
body:hover .bottom:after {
bottom: 100%;
}
.bottom:before,
.bottom:after {
content: "";
transition: all 0.4s;
position: absolute;
bottom: calc(100% - 20px);
width: calc(50% - 30px);
height: 20px;
background: white;
}
.bottom:before {
border-radius: 0 20px 0 0;
left: 0;
}
.bottom:after {
border-radius: 20px 0 0 0;
right: 0;
}
body:hover .circle {
top: 0;
background: white;
}
body:hover .bottom {
height: 100px;
}
body:hover .circle:hover {
background: gold;
cursor: pointer;
}
<div class="bottom">
<div class="circle"></div>
</div>
Trying to figure out how to create a gap in a CSS left border around an image via CSS or JavaScript/jQuery.
I've found several answers how to do this with a gap on the top or bottom border, but couldn't figure out how to apply this to a left border.
Here (https://ibb.co/cGS0vk) is an image of what I try to achieve.
Here is my HTML so far:
<div class="frame">
<img class="quote" src="quote.jpg">
<h2>Heading<h2>
<p>Lorem ipsum<p>
</div>
And here is the CSS:
.frame {
Border-top: 10px sloid grey;
Border-right: 10px sloid grey;
Border-bottom: 10px sloid grey;
}
.quotes {
position: relative;
right: 100px;
}
You can do it by using pseudo elements like :before and :after.
.box {
position: relative;
overflow: hidden;
width: 100px;
height: 50px;
border: solid #000;
border-width: 5px 5px 5px 0;
}
.box:before,
.box:after {
content: '';
position: absolute;
background: #000;
height: 30%;
width: 5px;
top: 0;
left: 0;
}
.box:after {
top: auto;
bottom: 0;
}
<div class="box"></div>
Best idea I can come up with using minimal amount of requirements:
Use the ::before/::after pseudo elements to place a background-color-matching element over top of an existing border. This essentially "slices" part of your border away.
HTML:
<div class="wrap">
<div class="box"></div>
</div>
CSS:
.wrap { position: relative; width: 300px; height: 300px; background-color: #fff; }
.box { position: absolute; margin: auto; top: 0; bottom: 0; left: 0; right: 0; width: 200px; height: 200px; border: 10px solid #8af; }
.box::before { content: ''; position: absolute; width: 10px; height: 100px; margin: auto; left: -10px; top: 0; bottom: 0; background-color: #fff; }
JSFiddle: https://jsfiddle.net/gam9s0mz/
Edit As noted, this method wouldn't work well with a background image. But only with solid background color matching.
I have apply opacity using 'rgba' on parent div and i don't want to inherit this effect on child div.. How can i restrict rgba style from child element...
i have posted images as well for better assistance.
'http://imgur.com/a/YxipO' = (actual image of my code)
'http://imgur.com/a/7ltDa' = (what i want to do using css or js)
.banner-inner {
background-color: rgba(255,255,255,0.2);
padding: 3%;}
.logo-circle {
width: 15%;
border: 7px solid #fff;
border-radius: 50%;
padding: 16px;}
You can use a box shadow, like this
.content {
height: 200px;
width: 300px;
position: relative;
background: url(http://lorempizza.com/500/350/);
background-size: cover;
}
.logo-circle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 100px;
height: 100px;
border: 7px solid #fff;
border-radius: 50%;
box-shadow: 0 0 0 1000px rgba(255,255,255,0.5);
/* background: rgba(0,0,0,0.5); uncomment if you want a semi transparent
opacity inside circle
*/
}
<div class="content">
<div class="logo-circle"></div>
</div>
You may consider following example approach:
.content {
height: 200px;
width: 200px;
position: relative;
}
.banner-inner {
background-color: rgba(0, 0, 0, 0.2);
padding: 3%;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.logo-circle {
width: 1em;
border: 7px solid #fff;
border-radius: 50%;
padding: 1em;
z-index: 2;
height: 1em;
position: absolute;
top: 50%;
margin-top: -1.5em;
left: 50%;
margin-left: -1.5em;
}
<div class="content">
<div class="banner-inner"></div>
<div class="logo-circle"></div>
</div>
For background in circle use RGBA
.logo-circle {
background: rgba(0, 0, 0, 0.2);
width: 15%;
border: 7px solid #fff;
border-radius: 50%;
padding: 16px;
}
You could use the same picture (as seen in the background) as background in .logo-circle. And set the position of the image like this: background-position: center;
or:
Use a wrapper div for .logo-circle with the same size of the image and set overflow: hidden;. For .logo-circle set a very big shadow, like box-shadow: 0 0 0 1000px rgba(255, 255, 255, 0.2);