A bit of a newbie question, but I've had this problem for a while now and i need it fixed. Hopefully one of you guys can help.
I have a textbox near the bottom of my page. It's position is fixed, however, whenever I resize the browser window, it moves with the bottom of the page. I've tried it with absolute and rlative positioning too, but still, same problem. Ive been reading up on CSS positioning, and assumed I understood it, until this little problem.
I have a header bar at the top of my page which is position: fixed, and that doesn't move, so I'm wondering what the difference is?
Illustrations of the problem are here:
The bottom image is the normal view, and the top is the textbox moving ahen the window is shrunk.
http://imgur.com/a/cdZsV
My textbox is named "typetextbox" and the header banner is "cfbanner"
The CSS is:
#cfbanner{
position: fixed;
top: 0px;
left: -130px;
z-index:-20
}
#typetextbox{
left: 130px;
bottom: 50px;
position: fixed;
width: 850px;
Im sure this is easily fixable. A little help would be very appreciated!
The behavior of your typetextbox seems right, since you specify the box to be fixed and the distance to the bottom to be 50px.
W3Schools.com writes:
An element with fixed position is positioned relative to the browser window.
See here.
So if you shrink your browser window, the text box will stick to the bottom of your window, hence, as you wrote:
it moves with the bottom of the page
If you want the box to stick at the given position, remove the "bottom" attribute and specify the "top" attribute, just as you did it with "#cfbanner".
Related
Anyone tell me that how to fix all elements with css, means whatever we do with the browser's height and width then elements should not move? or elements should not move relative to the browser' height and width and page should also be scroll able?
Applying position: absolute to an element will cause it remain fixed relative to the document. That is, it will scroll with the document.
Applying position: fixed will cause it to remain fixed relative to your browser window. That is, if you scroll the document it will not move.
With each of these position values, you can specify some combination of top, right, bottom and left to specify their position. For example, the following style will fix an element very close to the top right of the browser window (it will not scroll with the document):
.topright {
position: fixed;
top: 5px;
right: 5px;
}
I noticed a behavior that drives me crazy.
I have two divs, that have both similar css:
.one, .two {
position: fixed;
bottom: 6%
}
One div is for navigation, and other is for content, that has max 300px height. The problem is, that if the user resizes the browser window to really small one, the scrollbar is not shown.
I tried to change position to absolute, but then the ajaxify plugin breaks the position if new page is loaded. I couldn't find other ideas, how to position those divs at fixed position at bottom.
p.s. I pasted a sample test on http://pastebin.com/Bp1490dj
the background-green div is at the bottom with position:absolute;
from what I know a position:fixed; and or position:absolute; will never make a scroll. (please correct me if I'm wrong) so a way to go arround this is to set a min-height to body
body {
min-height:200px;
}
have a look at the fiddle http://jsfiddle.net/u2ZWa/
also, there is a fix with a scroll now. But you have to know the fixed elements will never be scrollable because they're fixed
Scrollbars are not compatible with a fixed positioning.
I have been working at this for the past day and a half. So any help will be greatly appreciated.
The general layout has a top bar and a side bar which are position fixed. I want the content container to fill the rest of the page without a scroll bar unless it is necessary due to content. I am not sure if it is possible to do purely in CSS or if I will need to modify my html structure as well. I have posted a fiddle below to show the most simple example possible.
http://jsfiddle.net/wU2Hd/
Again, any help or pushes in the right direction will be greatly appreciated, this has been throwing me for a loop.
It's not impossible. Check out this JSFiddle I forked from yours.
I did not need to change the HTML structure, but there were some important changes made to the CSS.
First I removed the height: 100%; from html, body. This was forcing the scroll bar to appear.
Then I removed the height and width declarations from .content, and gave #shell-content absolute positioning:
#shell-content {
background: #FFFFFF;
position:absolute;
left: 100px;
top: 86px;
bottom: 0px;
right: 0px;
overflow-y: auto;
}
The left and top are values based on the explicit height you gave to your header and the explicit width you gave to your menu. The overflow-y: auto tells it to only show the scroll bar if the content out-grows its available space, but not otherwise.
The JSFiddle has some crazy-long lorem ipsum text to show the effect. If you change it to less text, the scrollbar will disappear entirely.
The problem is that you are setting
#shell-content{
height:100%
}
body{
height:100%
}
Which means the body fills to fit the window, and then the shell-content expands to fill that space (the EXACT size of its direct parent), but is displaced by shell-top-wrapper, so it overflows. You should either decide on a relative height for the shell top wrapper, or change the height of the shell-content dynamically (using javascript).
Here is a take off of your fiddle: http://jsfiddle.net/eeMz4/. You'll see that with the large image in the content area, it scrolls. If you take the image OUT and replace it with text or something smaller than the available space, the scrollbar goes away.
The trick was adding overflow:auto to #shell-content.
Cheers!
Cynthia
I made a few small changes: http://jsfiddle.net/wU2Hd/5/
- remove the height from content
- remove the height from content-shell
- set the body background to white
- set the sidebar background to grey
This will not actually stretch up the content, but it will appear like it does. Scrollbar will appear automaticly when the content becomes bigger then the viewport.
I have read the manual of CSS background-attachment and never get the true idea. However, today I learn a lesson as follows:
.#city-images-div {
background: url(../img/100.jpg) no-repeat fixed 0px 0px;
position: absolute;
top: 2px;
left: 2px;
width: 557px;
height: 374px;
cursor: pointer;
border: none;
}
<div id="city-images-div"></div>
The above code will not help me display the background image 100.jpg.
If I change the background-attachment from fix to scroll then the picture can be display.
The dimension of the image is of 557x374.
I don't know why the background-attachment plays such a role here.
Q1> What is the practical usage of background-attachment
Q2> Why the image doesn't show up if the value is fixed and displays correctly if the value is scroll.
thank you
// update //
this is a typo and fix should be fixed.
There's a few practical uses of it, but I can't think of any at the moment.
As for why it's not working for you, it should be fixed, not fix.
I think that say you had a gradient background image (repeat-x and stuff) to make the page look nice.
If background-attachment is "fixed", then the gradient will scroll with that page, else, it stays at the top
Have you tried using "fixed" instead of "fix"?
As for the practical usage of the background css properties, obviously the most important one is to add a background for an element (as the name suggests), without using an img tag. You can also use the background property to assist in creating custom classes for buttons, navigation elements, etc.
Probably because the value i snot fix but rather fixed.
I believe the problem is that the your Absolute Positioned box is being set some distance away from the top left corner of your screen, far away enough such that the image doesn't show in the box at all. See if this demo will help: http://jsfiddle.net/9LLwX/2/
Try dragging the box around. Notice that the position of the background never changes, even when the div containing it is moved. Backgrounds with background-attachment: fixed are positioned relative to the viewport.
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.