I do not understand why the border around body is not rendering. I believe it has to do with the child div, #pages, having absolute positioning because when I remove #pages the border reappears. How do I fix this?
html {
width: 100%;
}
body {
background-color: green;
background-size: 10%;
width: 100%;
margin: 0;
border-style: solid;
}
#pages {
width: 90%;
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
<div id="pages">
REPORT FRAUD<br>
TRACK
</div>
The border does not disappear. It's there but you have no content in the body so it doesn't have what to 'wrap' inside the border. So it appears only like a 'border-top' but in fact is a 4 sided border without any space inside it's borders :)
I say that body has no content because the only element inside it has postion:absolute so the #page doesn't occupy any content.
THere are a few ways to fix this. You can add a height to body of 100vh ( 100% viewport height ). And you will have no problems.
body {
background-color: green;
width: 100%;
margin: 0;
border-style: solid;
box-sizing:border-box;
height:100vh;
}
#pages {
width: 100%;
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
<div id="pages">
REPORT FRAUD<br>
TRACK
</div>
try to add 100% to html and body tag
html, body { height: 100%}
html {
width: 100%;
height: 100%;
}
body {
height: 100%;
background-color: green;
background-size: 10%;
width: 100%;
margin: 0;
border-style: solid;
}
#pages {
width: 90%;
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
<div id="pages">
REPORT FRAUD<br>
TRACK
</div>
Related
I have created a video background for my website but I am trying to make it cover the entire page.
My HTML:
<header>
<video loop muted autoplay playsinline poster="">
<source src="https://www.gordonmac.com/wp-content/uploads/storm-1.mp4" type="video/mp4">
<source src="http://freshsauce.test/video/FS Website-FINAL-PRORES.mov" type="video/mov">
</video>
<div class="banner">
<div class="banner-text">
Header Text Here
</div>
</div>
</header>
<p>yoooooo</p>
<p>yoooooo</p>
<p>yoooooo</p>
<p>yoooooo</p>
<p>yoooooo</p>
<p>yoooooo</p>
My CSS:
body{
margin:0;
}
header {
position: relative;
height: 100vh;
min-height: 100%;
width: 100%;
background-size: cover !important;
-webkit-background-size: cover !important;
text-align: center;
overflow: hidden;
z-index:-99;
}
video {
position: absolute;
top: 50%;
left: 50%;
z-index: -100;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
As you can see the <p>yoooooo</p> have a white background. The codepen is https://codepen.io/mrsalami/pen/wjmgze
Use css rule position:fixed; instead of position:absolute; for video tag
video {
position: fixed;
top: 50%;
left: 50%;
z-index: -100;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
I had a play with your CSS and added a few things. I normally remove all margin/padding from all elements at the top of my CSS file.
I then changed your video position from relative to absolute, meaning that nothing will affect it.
I also removed the !important tags. I would recommend trying to avoid these at all costs, unless absolutely necessary. Even then, avoid them at all costs.
* {
padding: 0px;
margin: 0;
}
body{
margin:0;
}
header {
position: absolute;
height: 100vh;
min-height: 100%;
width: 100%;
background-size: cover;
-webkit-background-size: cover;
text-align: center;
overflow: hidden;
z-index:-99;
}
video {
position: absolute;
top: 50%;
left: 50%;
z-index: -100;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
header:before {
content: '';
display: inline-block;
vertical-align: middle;
height: 100%;
}
header .banner {
display: inline-block;
vertical-align: center;
margin: 0 auto;
width: 85%;
padding-bottom: 30px;
text-align: center;
font:24px 'opensans-bold', sans-serif;
font-weight: bold;
}
header .banner-text {
color: #f5f5f5;
width: 100%;
}
You can do some thing like this. give position:fixed to video. it cover and set top, right, bottom, left to 0
https://codepen.io/arpanpatel/pen/rvdjGR
video {
position: fixed;
top: 0;
left: 0;
right:0;
bottom:0;
z-index: -100;
width: 100%;
}
I'm trying to center a heading both vertically and horizontally inside a div that is rotated 45deg (transform:rotate(45deg);).
Because the div is rotated - I rotate the heading the opposite direction (transform:rotate(-45deg);) and then apply regular centering techniques which doesn't work. What is the solution for this?
#wrap {
position: relative;
transform: rotate(45deg);
top: 150px;
background-color: blue;
height: 300px;
width: 300px;
margin:0 auto;
}
h1 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transform: rotate(-45deg);
}
<html>
<body>
<div id="wrap"><h1>some centered text</h1></div>
</body>
</html>
In your h1 element you defined this style
h1 {
...
transform: translate(-50%, -50%);
transform: rotate(-45deg);
}
you're overriding the first transform property with the rotate() and doing so you're losing the centering effect obtained by the negative translate(): you should chain instead the two transformation like so
h1 {
position: absolute;
top: 50%;
left: 50%;
margin: 0;
transform: translate(-50%, -50%) rotate(-45deg);
}
You should also remove the default margin applied on the h1 element (edit the demo and see what happens without margin: 0;)
Example: http://codepen.io/anon/pen/jWjxeW?editors=1100
You should write one transform function right after another
I made a small change in your css, also added text-align: center;
transform: rotate(-45deg) translate(0, -100%);
#wrap {
position: relative;
transform: rotate(45deg);
top: 150px;
background-color: blue;
height: 300px;
width: 300px;
margin:0 auto;
}
h1 {
position: absolute;
top: 50%;
left: 50%;
transform: rotate(-45deg) translate(0, -100%);
text-align: center;
}
<html>
<body>
<div id="wrap"><h1>some centered text</h1></div>
</body>
</html>
use this transform: translate(-50%, -50%) rotate(-45deg);
#wrap {
position: relative;
transform: rotate(45deg);
top: 150px;
background-color: blue;
height: 300px;
width: 300px;
margin:0 auto;
}
h1 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(-45deg);
}
<html>
<body>
<div id="wrap"><h1>some centered text</h1></div>
</body>
</html>
You can achieve this by encapsulating your h1 in another div
#wrap {
position: relative;
transform: rotate(45deg);
top: 150px;
background-color: blue;
height: 300px;
width: 300px;
margin: 0 auto;
}
#text {
position: absolute;
height: 300px;
width: 300px;
transform: translate(-50%, -50%);
transform: rotate(-45deg);
background-color: red;
}
h1 {
text-align: center;
line-height: 300px;
margin: 0; /* H1 has default margin, read more: https://www.w3.org/TR/html-markup/h1.html *
}
<html>
<body>
<div id="wrap">
<div id="text">
<h1>some centered text</h1>
</div>
</div>
</body>
</html>
If you're happy to fix the height/width of your h1 elements, something like this will do it:
h1 {
position: absolute;
top: 50%;
left: 50%;
transform: rotate(-45deg);
height: 120px;
line-height: 40px;
width: 150px;
margin-top: -60px;
text-align: center;
margin-left: -75px;
}
Fiddle here
I have two separate labels I want to appear as one.
the CSS looks like this
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
background-color: #e0b76d;
}
.label-main-first {
position: absolute;
width: 10%;
height: 10%;
top: 50%;
left: 40%;
transform: translate(-40%, -50%);
border: 5px solid green;
border-right: none;
}
/*#a27f40*/
.label-main-second{
position: absolute;
width: 10%;
height: 10%;
top: 50%;
left: 60%;
transform: translate(-60%, -50%);
border: 5px solid yellow;
border-left: none;
}
This creates a gap between the two labels.
Both labels has a width a 10%.
The first label is pushed 40% from the left, while the other label is pushed 60% from the right.
The difference is 20% which is the total width of both labels.
Why am I getting the gap between them?
The left value is the percentage of the wrapper (body in this case).
The percentage in translate is the percentage of its own width.
The second label starts at the middle, so it does not require X value for translate. transform: translate(0%, -50%);
The first label need to translate 100% of its width to the left. transform: translate(-100%, -50%);
The below code helps to align all in the center in properly.
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
background-color: #e0b76d;
}
.label-main-first {
position: absolute;
width: 10%;
height: 10%;
top: 50%;
left: 50%;
transform: translate(-100%, -50%);
border: 5px solid green;
border-right: none;
}
/*#a27f40*/
.label-main-second{
position: absolute;
width: 10%;
height: 10%;
top: 50%;
left: 50%;
transform: translate(0%, -50%);
border: 5px solid yellow;
border-left: none;
}
<label for="input-main" class="label-main-first"></label>
<label for="input-main" class="label-main-second"></label>
I am not sure over the goals that you have by using these style, but will suggest more one solution a bit simpler, https://jsfiddle.net/unb3n8s1/1/
hope it will work for your purposes also.
<div class="wrapper"><label for="input-main" class="label-main-first"></label>
<label for="input-main" class="label-main-second"></label></div>
you can change width, height and also set position absolute for wrapper, instead of each label.
Here is Variant with percents: https://jsfiddle.net/unb3n8s1/2/
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
background-color: #e0b76d;
}
.wrapper {
width: 20%;
height: 10%;
position: absolute;
top: 45%;
left: 40%;
}
label {
display: block;
box-sizing: border-box;
float: left;
width: 50%;
height: 100%;
}
.label-main-first {
border: 5px solid green;
border-right: none;
}
/*#a27f40*/
.label-main-second{
border: 5px solid yellow;
border-left: none;
}
i think it's simply because the first label has left value of 40% and width of 10%
so the second label should have left value of 50% instead of 60%
Here is my code:
div {
position: absolute;
top: 50%;
left: 50%;
text-align: center;
margin: 0;
padding: 0;
}
<div>This sentence should be displayed in the center of the whole screen
</div>
I tried margin and padding to make the div in the center of the whole screen. (horizonly and vertically). However, neither margin nor padding can center the element.
Then I tried left: 50% and top:50%, it changes the position of the element, but not as expected. The left margin of <div> is located to left:50%, while I want the center of <div> to be located to left:50%..
Does anyone have ideas about this?
use - transform: translate
div {
position: absolute;
top: 50%;
left: 50%;
text-align: center;
margin: 0;
padding: 0;
background: #ccc;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
<div>This sentence should be displayed in the center of the whole screen</div>
div {
position: absolute;
top: 50%;
left: 50%;
text-align: center;
margin: 0;
padding: 0;
transform: translate(-50%, -50%);
}
Try like this: Demo
html, body {
height: 100%;
}
body {
display: table;
margin: 0 auto;
}
div {
height: 100%;
display: table-cell;
vertical-align: middle;
}
Try this fiddle.
div {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
width: 200px;
height: 50px;
}
This should help you.
You need to use the transform:translate css.
div {
position: fixed;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
Fiddle here
Here you go. Keep position as relative and text-align it to center, if you don't want to use translate.
div {
position: relative;
text-align:center;
}
here is the fiddle
Try this:
div {
position: relative;
text-align:center;
top:50%;
}
Its Simple and Responsive try this
div {
margin: auto;
width:50%;
}
Working Fiddle Here
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;
}