i have set the top of an image to -200px relative to the div that contain that image. for example:
The problem is that the div "one" is hidding me the image that i put on "imageup". I tried setting up z-index on #imageup with no succeed. Heres is the specific problem:
http://www.ofertasybonos.com/ofertas-automovil
As you see the image coches.png is hidden by another div, how i solve this setting a css property on #imageup or on the coches.png
On #imageup:
Change position: relative to position: absolute.
Change top: -200px to top: 100px.
You win (demo).
Related
I would like to place div's (input form) on a responsive background.
I'm using Bootstrap 3 for the page template. But if I resize the window or use another screen size the elements are on another place. How could I fix this common issue?
Example: http://goo.gl/D7TwIP
Thanks!
Instead of using margin-top and margin-left use top and left properties on a positioned absolute element.
top: 540px;
left: 117px;
position: absolute;
Also make sure the parent element is set to position relative.
position: relative;
I am having a CSS issue; See the attached image.
there have two fixed div.. where i will put my navigation and yellow area is my content area. content area will be scroll if content big..
but now problem i am facing content area position not fit properly. when i make other two div position: fixed then issue coming. please see my code and jsfiddle..
.midarea this div position not properly fit there. if you see jsfiddle then can under properly..
JSFiddle
You need .midarea to be fixed to match the others:
.midarea {
position: fixed;
left:260px;
right: 0;
height: 100%;
overflow: auto;
...
}
With this your float and width are obsolete (but you can have them if you really want).
Also please, please lose every z-index and every float with a position: fixed or position: absolute.
Visualize
position:fixed is absolutely OK.
Just calculate the sum of width of both fixed nav-colums and set a padding-left with this calculated width to the div.midarea. So all divs inside the midarea begin right of the fixed colums.
And a z-index higher of the content is needed. e.g. z-index:999;
I have a weird CSS problem. I have a banner that I need to position at the bottom of every page.
To this end I have set body to position: relative; and my banner to position absolute; bottom: 0px;
The problem is my banner positions differently on different pages such as the following:
http://www.plotsandhouses.com/node/1,
http://www.plotsandhouses.com/node/29,
http://www.plotsandhouses.com/node/30
The 'custom-page_closure_wrapper' div is what I am trying to position at the bottom of the pages. I can do this by setting position: fixed; but I don't really want the div visible at all times - only when the bottom of the page is visible or the user scrolls down to see it.
What am I missing?
To add on to Marc's answer, there is a CSS solution to it called the Sticky Footer.
The reason why your footer doesn't "stick" to the bottom of the page is because the height of the container where the footer is absolutely positioned in is not more than the height of the viewport. Therefore, by forcibly stretching the container to the full height, the technique ensures that the footer always stays at the bottom.
You can try adding the following in your CSS file:
body {height:100%;}
#custom-body-wrapper {height:100%;} /*this is the container of your absolute div*/
and removing the position:relative on your body tag.
I'm trying to accomplish the following layout,
http://www.rae-mx.com/test/css-layout.jpg
and I'm almost there, except for the last green div, which is going lower and lower depending on the content of the content (white) div. If I set a value for the TOP property for the green div, and then I add some more text to the content div, the green div goes lower and lower.
Since the green div is child to the main container div, and the green div is relatively positioned, isn't it supposed to be placed specifically at the position indicated by the TOP value of it? If I'm incorrect...can someone please tell me how can i make it so that the green div is always displayed at the same spot within the container (gray) div, regardless of the height of the content/white div?
I tried to paste the css code here but was having problems with the brower. you can see the test site source/css at http://www.rae-mx.com/test
tia for the help.
I think you're misunderstanding how relative positioning works. If something is marked as position: relative then that does nothing to that element's positioning. However any descendant elements with position: absolute are positioning relative to that element.
So a basic skeleton for what you want is:
#main { position: relative; }
#menu { position: absolute; top: 10; right: 10; }
#content { position: absolute; top: 30; }
#contact { position: absolute; top: 180; right: 10; }
Take a look at Absolute and Relative Positioning. This is called relative+absolute positioning.
If you want something positioned at the same place, use position:absolute instead. Position: relative is used to move the element after it have been placed in the normal flow.
And remember: With position:absolute 0,0 is the upper left corner of the first(closest to the element, when walking from the element and to the root) parent with position:relative or position:absolute
I have a page with a wrapper div which contains a background image and all the content divs.
In this wrapper div I also have a logo div which should be placed at the bottom left corner of the wrapper without interfering with the contents.
I have managed to place the logo in the bottom left corner of the whole page (position: absolute; bottom: 0; left: 0;) The problem is that if you resize the width of the window, the background stays centered while the logo div goes left and sticks to the browser edge (as it should).
How would I go about making it stay to the edge of the wrapper div?
The reason it is not a part of the background is that the client wanted to be able to change the background without editing in the logo.
I have thought about not centering the wrapper, this would solve the problem.
I'm thinking about position: relative, but it doesn't seem to work.
I hope I'm clear enough, here is a link to the layout in case it helps.
http://development.pulsemedia.se/current/kingromeo/layout/
Make your wrapper div's position to be relative.
At the moment, your bandname div is not inside the wrapper. Put it in the #wrapper div, and set the wrapper to a position: relative;
I found my mistake. I had forgot to make the background-div fixed width so when the browser windows expanded, the background-div expanded too. Everything was behaving exactly as it should.
Put the logo div inside the wrapper div, and then set use some combination of these:
position: relative;
bottom: 0px;
float: bottom;
I'm not sure about the float: bottom, but I think you'll need it to prevent interference with the rest of your content.