I am trying to create a gray transparent background screen, on top of my original html page.
What I have done so far is to append a div (with jquery) to the body tag with this css style:
.spesificPropertiesDiv {
position: absolute;
display: block;
top: 0px;
width: 100%;
height: 100%;
background-color: black;
opacity: 0.5;
z-index: 6000;
text-align: center;
}
as I mentioned before I am appending a div with this class to the body.
Every works fine when I append it on large screen (24 inch) but when I am appending it on 16 inch display the gray screen div's height is 100 px less than the body's height.
One more thing that I need to mention is that on large screen the page is fit on the screen where on the smaller screen a scroll-bar appears to make the page lower side of the page visible.
Why dose this happen? How can I fix it?
Thanks!
I have changed it to:
.spesificPropertiesDiv{
display: block;
position: fixed;
top: 0; bottom: 0; left: 0; right: 0;
width: 100%;
height: 100%;
background-color: black;
opacity: 0.5;
z-index: 6000;
text-align: center;
}
and it works!!!!
Thank you all for the help
Could you try:
.spesificPropertiesDiv {
position: fixed; *position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
}
Additionally, is there any padding on this div? Is it a direct child of the <body> tag?:
<body>
<div class="spesificPropertiesDiv"></div>
</body>
Related
I declared a global width. But I want one specific element to go over that limit but it doesn't seem to work. It is a text with a background image. I just want the background image to go over that limit but when I widen the element, the text goes over the width aswell.
I tried to manually extend the width of the element by width:150% but the texts goes over the limit aswell
html, body {
font-size: 1em;
background: transparent;
display: block;
width: 1222px;
margin: 0 auto;
}.wrapperbody {
background-image:url("background.jpg");
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
width: 100%;
margin-top: 10%;
}
<div class="wrapperbody">
<div>
<h1>test</h1>
</div>
</div>
I tried to expand the background image of a text but the whole text gets expanded.
One should never compose the page that way, the width should be declared to sections instead. That is the reason you cannot set the background proper way and you will get more troubles later on.
Anyhow, if you still choose to keep such layout, than you gotta do some tricks as following:
html,
body {
font-size: 1em;
background: transparent;
display: block;
width: 200px;
margin: 0 auto;
}
.wrapperbody {
margin-top: 10%;
position: relative;
}
.wrapperbody > * {
position: relative;
z-index: 1;
}
.wrapperbody::before {
position: absolute;
z-index: 0;
content: '';
display: block;
top: 0;
left: calc((100vw - 200px) / -2);
right: calc((100vw - 200px) / -2);
bottom: 0;
background: none red;
}
<div class="wrapperbody">
<div>
<h1>test</h1>
</div>
</div>
Also on this JSFiddle
Once again, please consider changing the layout.
I have the following setup:
HTML
<div>
<img src="https://placehold.it/300x300" />
</div>
CSS
div
{
position: absolute;
top: 0;
right: 0;
height: 100%;
}
img
{
height: 100%;
}
When I load the page it renders correctly. However, if I adjust the height of the browser, the left side of the image remains in place while the image expands outside (or shrinks inside) of the viewport.
If I refresh the page then it immediately redraws correctly. The issue appears to be present in all browsers.
I found the following question but not sure if the issue is quite the same. The non-JS solutions didn't work; I didn't attempt any of the JS suggestions.
Does anyone why this might be happening and know of a fix (using CSS) to make the div/image redraw when I resize the browser?
Its because the browser doesnt redraw the div as it does not know it suppose to be 100% wide.
Try this setup:
div
{
position: absolute;
top: 0;
right: 0;
height: 100%;
width:100%;
}
img
{
height: 100%;
position: absolute;
top: 0;
right: 0;
}
Check out this fiddle: https://jsfiddle.net/ash06229/z55827t9/
div
{
position: absolute;
top: 0;
left: 0;
height: 100vh;
width: 100%;
}
img
{
max-height: 100%;
max-width: 100%;
}
I am trying to center an image of a phone vertically. The code I have to far works but if I decrease the window height the phone image will overlap the header. What I want to do is center the phone image vertically between the bottom of the header and the bottom of the window and stay there no matter how tall the window is (but not overlap the header).
Link to jsfiddle: jsfiddle.net/#&togetherjs=zAMDokl6RG.
Having lots of issues with this. Could someone give me some pointers on how to do this please? Thanks :
css:
* {
margin: 0;
padding: 0;
/* To keep our header correct */
}
#header {
background: #e9e6e6;
/* Here set your colour */
height: 55px;
width: 100%;
top: 0;
left: 0;
position: absolute;
/* box-shadow: 0px 2px 2px #888888;*/
}
.innerdiv {
position: absolute;
bottom: 0;
right: 0;
padding: 0px 0px;
z-index: -2;
}
.dllogodiv {
position: absolute;
top: 0;
right: 0;
padding: 5px 5px;
}
.centeredImage {
text-align: center;
display: block;
}
.centeredImage img {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
<div id="header">My header</div>
</div>
<div class="innerdiv">
<img class="imageCorner" src="http://s4.postimg.org/tyfx93u8p/logo.png">
</div>
<p class="centeredImage">
<img src="http://s4.postimg.org/p12cnzs9l/slide1.png">
</p>
heres a fiddle I put together
the idea is to have a top/middle/bottom. There is a css calc property you can use to calculate something, like height. Assuming you know what the height of your image is (lets say 200px), you can do:
top: calc(50% - 100px);
this will make the top of your image 50% from the top, minus half the size of the image, so that the middle of the image is 50% from the top.
of course, you have to set the middle section to position relative or absolute, and make the image position absolute inside.
This is just one quick way, there are other ways. Then again, usually you want to center something within a div, not the whole page.
I'm trying to display 2 divs side by side in css.
The first div has a variable width (in fonction of the image it contains).
The second one has to take all the remaining width.
The second div contains 3 sections: "top", "middle" and "bottom" whose added height is 100%.
Both divs have a 100% height.
I successfully placed the divs side by side thanks to this question and everything works great when the body has fixed dimensions.
But since I will embed this page in an iframe, I want the divs to occupy all the available space. I would like to avoid setting the body dimensions with javascript...
I decided to add this code to the body:
body {
margin: 0;
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
}
This does the trick on Chrome and Safari: the image has a 100% height which defines its width and the second div stretches until it occupies all the available space. (The caption is displayed over the image)
But when I use Firefox, the first pane is larger than expected (see the red rectangle).
I created a fiddle with the code: http://jsfiddle.net/0w0s6z5n/1/
I can't understand why the behavior is different and what I did wrong on this page. Can someone explain to me why the behavior is different and point me in the right direction to succeed in displaying everything like it currently is on Chrome/Safari.
Thanks in advance for your help.
add
width: 100%;
height: 100%;
to body (yeah, its that simple)!! :)
Problem : container always takes dimension of parent elements, so you have to declare them if you intend to use them in %
css :
body {
margin: 0;
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
background-color: orange;
width: 100%; /* added */
height: 100%; /* added */
}
Fiddle here
I am not sure this is exactly what you wanted, but from what i understood you need to have the first div with a variable width and the rest should fall in place.
I edited your code: Fiddle here
CSS :
body {
margin: 0;
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
background-color: orange;
}
.container {
width: 100%;
height: 100%;
background-color: pink;
}
.first {
position: relative;
float: left;
height: 100%;
background-color: red;
}
.second {
height: 100%;
background-color: yellow;
}
.media {
height: 100%;
}
.caption {
position: absolute;
width: 100%;
height: 15%;
right: 0;
bottom: 0;
left: 0;
background-color: grey;
}
.top {
height: 40%;
background-color: blue;
}
.middle {
height: 30%;
background-color: purple;
}
.bottom {
height: 30%;
background-color: green;
}
With this if you change the width of .media , the rest of them fall in place and also works with firefox (Tested).
I'm working on a lightbox. I need it to be dynamically sized based on its content. But I also need it to be centered in the screen. I'm trying something like this:
HTML:
<div class="lightbox-background">
<div class="lightbox">
LIGHTBOX CONTENT
</div>
</div>
CSS:
.lightbox-background {
background-color: rgba(0,0,0,0.9);
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 50;
}
.lightbox {
background-color: white;
width: 780px;
z-index: 100;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
height: auto !important;
max-height: 90%;
}
I couldn't make it work. I'd like to avoid using JS, if possible. How can I do it?
You could work with vertical-align: middle as well as the :before selector on the parent container. Check out my fiddle:
http://jsfiddle.net/GA5K3/2/
The best way that I know to center vertically with CSS is to absolute position top 50% then set a top margin negitave half height of element.
Since you don't know the height you'll have to use JS.
Maybe someone has a better technique.