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
Related
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.
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.
I have a piece of CSS code that arranges the bottom div at bottom 0 and position fixed. This works perfectly but when I am resizing the window the bottom div is hiding the above ones (middle and top).
Here is the code:
.topFull{
width:100%;
height: 90px;
background:#1b3f61;
position: fixed;
top: 0px;
left: 0px;
}
.middle{
width:100%;
min-width:850px;
max-width:1000px;
height: auto;
margin-top: 120px;
position: absolute;
margin-left: -50px;
}
.bottomFull{
width: 100%;
background:#1b3f61;
height: 180px;
position: fixed;
left: 0;
bottom: 0;
}
Your .bottomFull tag is fixed and 180px height. So if you have a smaller screen, it will always been positioned over the other content.
You could do something like:
#media only screen and (max-width:500px){
.bottomFull{height:80px;}
}
I think I solved it. Instead of messing around with bottomFull properties I change middle div a little bit and add
padding-bottom: 120px
now even my bottomFull div is always at bottom of window I can scroll and view middle div's contents.
I have to display two divs (in and out) so that they are positioned one on the left, the other on the right.
Using this css code they fit perfectly great on full screen, but I would like to be able to put them into a parent div, that will be the container
#in{
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: 50%;
overflow: auto;
font-size: 12px;
box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}
#out{
position: fixed;
top: 0;
right: 0;
left: 50%;
bottom: 0;
overflow: auto;
padding: 10px;
padding-left: 20px;
color: #444;
font-family:Georgia, Palatino, 'Palatino Linotype', Times, 'Times New Roman', serif;
font-size: 16px;
line-height: 1.5em
}
Can anyone help me modify this code for that matter ?
Thank you
When using position: fixed; it fixes the element to the screen. You cannot position it relative to a element with CSS, in fact if you think about what position: fixed does you would never want to position it relative to a element and thought of it sounds impossible to me. A fixed positioned element is is taken out of the flow so that it is relative to the viewport you cannot just put it back in the flow somewhere.
I'm not sure if this is exactly what you're looking for, but essentially kmmathis is right. http://jsfiddle.net/R8bUQ/
The markup:
<div>
<div>
</div>
</div>
and the CSS:
div {
height: 800px;
width: 300px;
background: #f0f;
margin-top: 80px;
margin-left: 180px;
position: relative;
}
div div {
height: 20px;
width: 100%;
background: #0f0;
position: absolute;
margin: 0;
top: 0;
left: 0;
}
and the JS:
$parent = $('div').eq(0);
$elem = $parent.find('div');
$(window).scroll(function(){
$elem.css('top', $(window).scrollTop());
}).trigger('scroll');
Basically, you set the child to be positioned relative to its parent, and as you scroll, the amount that the window has scrolled sets the top of the element. It's fixed positioning, but is positioned relative to its parent. It's not 100%, but it might give you a basic idea of how to accomplish what you want.
When using position:fixed; you are positioning the elements relative to the browser window.
To use your own parent container, you'll need to set #in and #out to use position:absolute; and then wrap them in a container, let's say #wrap, that has position:relative; set on it.
Edit: here's a fiddle: http://jsfiddle.net/ktAAa/
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%);
}