I want to show some dialog (absolute positioned div), and I want to show it above semitransparent 100% div, so everything on background will be dimmed.
I have managed it by
<div class='transpBox'></div>
.transparentBox
{
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-color: #white;
opacity: 0.9;
z-index: 499;
}
This is all right, but when dialog height is more than browser height and you scroll down, you see that transparent div is not in full screen.
What is proper way to make such thing?
Instead of position: absolute, use position: fixed. (Use it with your dialog div too.)
absolute positions based on the page, fixed positions based on the window.
maybe you should try jquery modal dialogs. Rather than creating your own process in doing it. DOing so will give you the semitransparent background and a dialog foreground.
Related
On the bottom of the image below, the background-color doesn't reach all the way. I've tried setting it to 100vh and 100% but the outcomes are the same where it only covers up to a 100 view height, and anything scrolled pass down the 100vh. isnt covered by my background color. How can i fix this?
&__container {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba($color: #13182c, $alpha: 0.7);
height: 100vh;
position: absolute;
left: 0;
top: 0;
z-index: 1;
}
You should post your full code.
But your posted image looks like that page is scrolled down a bit (the nav items behind the overlay are cut off). You are using position: absolute, which moves along with the next higher relatively positioned element, or - if there is none - with the body. This would explain the problem. Body is scrolled , overlay moves along, but is only as high as the window, but since the body is higher, there's some space below the overlay...
To fix that, try to use position: fixed instead of position: absolute. In that case the overlay position will relate to the viewport itself (i.e. the window).
You can try position: relative, once you want full cover. Also you can can set background-size = cover. Just tweak width.
I have this layout:
Code here: http://m6000225.ferozo.com/test/
I need the blue and brown image to lay below the main content div, and both be aligned regardless of the window width, both centered horizontally.
I implemented a css tip I read on this site, which is having a div with absolute position and left: 50% and an img inside with relative position and left: -50%.
It works fine, except for the fact that it pushes the page width to the right, as you can see in the screenshot, the scrollbar can be seen.
3rd party lib solutions like jQuery are welcome, but I'd prefer plain CSS.
PS: I also need something similar below the footer, but I guess using the same solution with a negative bottom value should work, right?
PS2: Extending the blue-brown strip to both borders of the window is no problem as I already used another div with absolute position and background-repeat: repeat-x.
The scroll bar is appearing because of the left: 50%; on the class .header-image. You should drop that altogether. Since that tag has a width set, when you push it over 50% it falls outside the window forcing the scroll bar to appear.
After you drop the left call, you should then set the width of that div to the width of the window, not a specific value in pixels. Use Width: 100%. So, that tag should look like:
.header-image {
height: 245px;
position: absolute;
top: 40px;
width: 100%;
z-index: -1;
}
After that, you'll need to re-center the image contained within the div. To do that, instead of using positions (which rely on set boundaries), give the element auto margins. Use :
.header-image img {
display: block;
margin-left: auto;
margin-right: auto;
}
That will recenter the image. Please let me know if this is what you were looking for!
Per Paulie_D's suggestion:
.header-image {
position:absolute;
z-index: -1;
top: 40px;
width: 100%;
height: 245px;
background-image: url('header.png');
background-position: center;
background-repeat: no-repeat;
}
That did it.
Please see this UI sketch image, I have this div in sidebar (black box) on a certain site and as I scroll down or scroll up, I don't want it to hide...I want it to move itself down as I scroll down and move itself up as I scroll back up so that it never hides out. Can you recommend me some jQuery that can get this done? or something else. Please help, thanks.
Don't use jQuery for this please; it's pure CSS.
#MyDiv
{
position: fixed;
top: 10px;
left: 10px;
}
Adjust the exact position to your liking by adjusting top and left. Maybe you want it centered vertically like in the image (if the sketch is accurate in that aspect), in which case you have to deal with all the fun tricks necessary for vertical centering; hopefully in your case something like this would work:
#MyDiv
{
position: fixed;
top: 50%; /* This places the _top_ of the div in the middle of the page. */
left: 10px;
height: 500px;
margin-top: -250px; /* This moves the div upward by half of its height,
thus aligning the middle of the div with the middle
of the page. */
}
I want to positioning a div element (popup) on the center of the screen via CSS. No problem with this.
The problem comes when i scroll the browser and then i click on the element that displays the popup, but this one will be displayed on the top of the page, instead of centering it on the rendered area (scrolled)
The popup must remain stocked to the page and let scrolling over it.
Does anyone know how to do it?
Thanks in advance
This is achievable in JavaScript. You should have the link that brings up the div element do this (jQuery):
var divTop = 75 + $(window).scrollTop(); // places the popup 75px from the top
$('.popup_inner').css({'top':divTop, 'display':block});
Position: fixed is also an option, but I don't believe it is supported by IE6, if that matters to you.
I believe what you want is position:fixed instead of position:absolute.
Taken from jqModal:
.popup{
position: fixed;
top: 17%;
left: 50%;
margin-left: -300px;
width: 600px;
background-color: #eeeeee;
color: #333333;
padding: 12px;
}
Heyo, I'm using a 2000px width image as a background for a 960px width webpage. I am trying to make it so it doesn't show a horizontal scrollbar when a part of the image is to the right of what's visible, but what I'm trying to do is not working for me.
Two IDs are involved. One is 'bg' which has the background image as its background and is positioned where I want it, while the other is 'bg_holder' which contains only 'bg' and which I tried to use to neatly cover the visible web page area and hide its overflow so the part of the background image that is jutting out wouldn't cause a scrollbar. But this does not appear work, as a scrollbar is created when there is a part of the image to the right of the visible web page (but not when it's to the left).
Is there anything wrong with this CSS snippet? Could something outside of this snippet be the source of the problem? Is there another approach I can take?
#bg_holder {
position: absolute;
overflow: hidden;
min-width: 960px;
top: 0px;
left: 0px;
right: 0px;
height: 100%;
}
#bg {
background: url(../img/bg.jpg);
position: absolute;
height: 1050px;
width: 2000px;
margin-left: -1366px;
left: 50%;
z-index: -1;
}
To answer your question, by positioning #bg absolutely, you take it out of the document flow / out of it's parent element, so the overflow:hidden has no effect.
As an additional comment, you can position the background image exactly where you want (x, y) when you put it directly in #bg_holder, there doesn't seem to be any need to put the background in a separate div. As far as I can tell at least, but I haven't seen the rest of your code and don't know what you want to achieve exactly.