I want my div to show on top of everything I put 100% width and height and it show above a lot of control except some have css z-index and other things. I tried to set the div z-index to a big number but this did not work.
{
width: 100%;
height: 100%;
top: 5px;
left: 0px;
background-color: #FFFFFF !important;
padding: 10px;
overflow: hidden;
visibility: visible;
display: block;
z-index: 500 !important;
position: relative;
}
Since you want to cover the whole screen, I recommend this:
#overlayDiv {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index:99;
}
Note, you don't have to set the display and visibility properties. Also, don't set padding or margin on this element! If you want it to have a padding, set a margin on its child/children.
Also, make sure that the DIV in question is a direct child of the BODY element.
In order to pull an html element out of the natural flow of how the elements are layed out on the screen you need to use position: absolute. This will allow the element to become a layer above the other elements (assuming that the z-index value is greater than all other's).
Right now your element seems to have position: relative.
Probably the issue is related to position:relative. Set it to absolute instead, and if you need to offset the element, use margin instead of top/left.
.centered {
position: fixed;
top: 50%;
left: 50%;
/* bring your own prefixes */
transform: translate(-50%, -50%);
}
Related
Dont know what to call it but I want a border that doesnt follow the divs height:100%; but is centered between top and bottom of the parent div.
What is the best solution? creating another div that contains the border? or is there any options in css that I dont know off?
heres a codepen to my current footer with the divs im using:
http://codepen.io/Volcan3/pen/yVoNZB
You could use pseudo classes to mimic a border that doesn't cover "100%"...
http://codepen.io/anon/pen/yVoORm
.footer-item::after {
content: '';
display: block;
height: 80px;
width: 1px;
background-color: red;
position: absolute;
right: 0;
top: 50%;
margin-top: -40px;
}
and then don't forget to make the parent item relative and a block:
.footer-item {
display:block;
height: 100%;
position: relative;
}
I want to center the slider controls which you can find here
I tried various ways like right:0; left:0; margin-left:auto; margin-right:auto and two more.
But somehow I am not able to make it center in responsive manner so that in any view port, It always remain center.
So Is there a way to achieve it?
This will centre the Your controls without needing to use width but will only really work for modern browsers:
.anythingSlider-minimalist-round .anythingControls {
position: absolute;
z-index: 100;
opacity: 0.90;
filter: alpha(opacity=90);
left: 50%;
bottom: 2%;
transform: translateX(-50%);
}
This method will work for older browsers but you will need a fixed width:
.anythingSlider-minimalist-round .anythingControls {
position: relative;
z-index: 100;
opacity: 0.90;
filter: alpha(opacity=90);
bottom: 5%;
width: 190px;
margin: 0px auto;
}
There are a few other methods to centring a div on a page it might be worth while looking at some other methods here: How to horizontally center a <div> in another <div>?
It looks like they are just being hidden when dropped into mobile. You can reshow them by putting this in your media query for small (mobile) screens.
.anythingSlider-minimalist-round .anythingControls{
display: block !important;
margin: 0 auto;
text-align: center;
width: 186px;
position: relative;
top: -40px;
right: 0;
float: none;
left: 0;
bottom: 0;
}
Put the slider controls in a div that has width:100% and its contents set to text-align:center. Position the div absolute, at bottom:20px (adjust this to set the desired offset from the bottom). Finally, the container that contains the slider controls div needs to be set to position:relative.
div.slider-controls {
width:100%;
text-align:center;
position: absolute;
left: 0px;
bottom: 20px; <----- adjust this until you
} like the offset from the
bottom of the slider
div.slider-container {
position: absolute;
}
I don;t know what your layout looks like, but in the above example, it is assumed that div.slider-controls is a child element of div.slider-container.
#border-search {
position: relative;
top: 50% !important;
left: 25% !important;
width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
display: none;
}
#border-search.center img {
position: absolute; top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 30%;
height: auto;
}
How do i get it to stay centered. ive tried many different things, but they dont work. the display none needs to stay since I need it to show hide the image. What else do i need to add to get thi to work? I want it to stay centered horizontally only
here is js fiddle
http://jsfiddle.net/matsuiny2004/zffvcvkk/
You can try to center your current #border-search inner img element with the following change in your CSS, relatively positioning your image with automatic (and equal) left- and right-margins, and making it centered.
#border-search {
margin: 0 auto;
position: relative;
}
#border-search img {
display: block;
margin: 0 auto;
position: relative;
}
The display: block; statement is needed for your image to be considered a block element so it can be affected by the margin attributes.
Check the demo JS Fiddle to validate what I just said. :)
This is the website I am modifying: sb460training.org
Here is the code snippet:
#apdiv1 {
position: absolute;
width: 2815px;
height: 276px;
z-index: 1;
top: 1px;
left: 0px;
background-color: #000;
}
#apdiv2 {
position: absolute;
width: 3150px;
height: 115px;
z-index: 2;
left: 0px;
top: 230px;
}
#apdiv3 {
position: absolute;
width: 221px;
height: 411px;
z-index: 3;
left: 0px;
top: 259px;
background-color: #FFF;
}
#apdiv4{
position: absolute;
width: 2853px;
height: 115px;
z-index: 4;
left: 219px;
top: 401px;
}
Do you know what the width dimensions should be so I can get rid of the annoyingly extra space that shows up to the right of the web page?
Thanks
Like the other answers, I agree that your CSS should change the fixed widths to 100%.
However, in your HTML you have img elements with explicit widths, to substitute background colours. For example, in the "apDiv2" DIV element, you have an in-line image containing white, "SB460_Pic/Secondary title2.jpg". This image is set to 2128px wide, causing the page to extend horizontally.
I would recommend removing the images that are being used to pad the right of each DIV, and instead set background colours in CSS.
UPDATE
Quick and dirty example:
http://pastebin.com/4PmZN1r4
change all your container widths to 100%.
give your html a width:100%; margin:0;
give your body a fixed width:1200px or so.
set your body with a margin: 0 auto if you want it centered.
I've heard the same similar issue.
all you need to do is try working with margin set to 0 and auto.
in most cases, try eliminating the use of 'position absolute' and work more with margin, padding and position relative.
For past several hours I try to figure out why only one of absolute positioned divs with image backgroung appears. Here is my css code for absolute positioned div
.nastip {
position: absolute;
width: 64px;
height: 20px;
background-image: url(https://s3.amazonaws.com/assets.heroku.com/addons.heroku.com/catalogs/287/small.png);
right: -36px;
bottom: 2px;
}
Here is the whole code http://jsfiddle.net/6uAvq/
I need to display both images in absolute positioned divs.
I use chrome browser. Thank you for any advice.
You have a semicolumn in your css prior to .aakcia rule which terminates any more styles appearing after that.
; /*Remove this*/
.aakcia {
position: absolute;
width: 64px;
height: 20px;
background-image: url(https://s3.amazonaws.com/assets.heroku.com/addons.heroku.com/catalogs/287/small.png);
right: -36px;
bottom: 20px;
}
;
Fiddle