Ok, so I created a wireframe to elaborate on the situation: https://wireframe.cc/cQsG8D
Basically I have a page (in HAML if that makes any difference) ... in which there is a scrollable viewport whose height is set to 360px currently.
And there is a text message box underneath it ... I've tried everything to get that text message box go down to the bottom of the page, including doing the same things that twitter bootstrap does in their example: getbootstrap.com/examples/sticky-footer-navbar/
I want to be able to get rid of the height requirement of the viewport, if that's possible and to get the text message box stay at the bottom of the page.
Any advice, please? I've been noodling on this pretty much the whole day yesterday, and now, I'm crazy sick of it ...
Try absolute positioning for the footer.
.bottom-footer {
position: absolute;
bottom: 0;
}
If you wanted it to be sticky, replace position: absolute with position: fixed
Add below properties to your textbox
DEMO HERE
#txtBottom
{
position:fixed;
bottom:0px;
}
Related
I'm designing a portfolio website for a friend, using the KOKEN CMS. The supplied theme is nice but needs some changes. It places all portfolio pictures in a scrollable horizontal band of divs, preceded by a div with intro text. However the theme doesn't allow to have the intro text stay in place, and the following divs scrolling.
Please take a look at http://www.shakkei.com/klanten/hansmaes/projecten/m-r-houthalen/
So the text block
"TWEE APPARTEMENTEN
aard: nieuwbouw
plaats: Houthalen
ontwerp: 2005
realisatie: 2015"
needs to stay fixed, the pictures should scroll.
Can i have some advice on how to alter the CSS (z-index?,...) to manage this?
Many thanks!
you can take the div called "wrap" and add "positio:fix" to it and play around to get it the right top and left values; also you need to choose the highest z-index in order to overlap everything. i tried it on google chrome inspect element and these values seems to be fine "position:fixed;top:100px;left:0px;z-index:9999999999"
Used to this css
#lane.cell > .wrap{
position: fixed;
top: 102px;
z-index: 2;
left: 0;
width: 135px;
}
I'm new to stackoverflow and so I apologize in advance for rehashing any issues already addressed here (I'm sure they are, just not sure how the apply to my specific situation).
Anyway here is the site I'm working on - www.betsyandalex2013.com. I would like to have all of the elements fixed in place. I've been playing around with it using Firebug but when I use position: fixed; on say #wrap I can't scroll over to see the rest of the content. Alternately, when I fix the position of #header, the links disappear. Again, I would ideally like to fix all the elements in place and be able to scroll across (and up/down) to see any content when the browser is resized.
I am not sure what you said. But setting:
#header {
position: fixed;
top: 0;
}
It will work: The header will be out of the natural flux of your page and it will be at top of the screen even when you scroll down/up.
PS: To see the effect put content to #wrap element.
I've been trying recently to make my footer attach to the bottom of the page and make my middle content stretch, so that the footer will be placed correctly, no matter what resolution the website is viewed in.
It's been a while since i was last editing on this website, and i've forgotten most of the things i did to keep the layout maxed, and now i noticed another ERROR :(
My content now wont stretch, so if i place some text in my content area, it will go behind the footer and stretch to the bottom, without the bg image..
Could some of you tell me what is causing this problem? :(
There are some things you could do to improve that. I see your footer is position: relative; Don't really understand why... I think it should be position: absolute; and bottom: 0px; so it should fix to the bottom. Having your footer position: fixed; is not a good idea.
The content of your website should have a bottom padding equal to the height of your footer, and that will give you enough room for the footer and won't let any content get below the footer.
Let me know if you understood what I tried to explain and good luck with your project!
I'm trying to set up a page so that the navigation bar has a background that extends horizontally past the edges of the window, but the actual content of the page remains within a 960px wide container.
Here's a link to what I've got so far, it looks the way I want it to but there's a problem.
http://jsfiddle.net/pFDDV/3/
The problem is that the page will still scroll horizontally to the end of the over extended div, on the right side. It DOESN'T have this problem going left, only right (which I assume is due to the way elements deal with negative margins/positioning). I thought I might be able to just get away with:
body {
width: 100%;
overflow-x: hidden;
}
Which hides the bottom scroll bar, but you can still scroll right with the arrow key, and if you resize the page smaller than the 960px of actual content, you don't get a horizontal scrollbar like you should.
Is there any way I can make the page ignore the width of just that one div?
I'm 99.9% sure I saw this work somewhere, but I can't remember where, and research on the top/left, bottom/right rules of negative margin/positioning leads me to believe this just might not work. Any ideas?
Also: I know I could probably do this with a repeating background image, but I'm trying to avoid using images.
You can use position:absolute & write like this:
#mWrapper {
background: none repeat scroll 0 0 red;
height: 30px;
left: 0;
position: absolute;
right: 0;
}
check this http://jsfiddle.net/sandeep/pFDDV/5/
Are you expecting like this
http://jsfiddle.net/pFDDV/6/
I know this has been asked here countless amount of times, I've looked around trying to implement the given solutions.
#footer
{
min-width: 900px;
text-align: center;
position: absolute;
}
Its the very last div on the page. I'm testing it out here blog.0arrays.com (a default theme for tumblr), but the footer just won't stick to the bottom. It appears in the middle of the page. I can provide the full code if anyone wants to look at it, as it's too long to paste here.
Thanks in advance.
EDIT:
I don't really care if its sticky or not (i.e right at the bottom), I just don't want it to appear in the middle of my text, as you can see on the site.
EDIT 2:
I've posted the full code here (via pastie), arrrr.... I bet the answer is really simple, this is doing my head in. For some reason, your suggestions are not working.
No one...?
In addition to the other attributes you've set for #footer, you should also add bottom:0 to set it's position to be the bottom of the page.
EDIT: You will also need position:fixed instead of absolute
If you don't care about keeping the footer at the bottom you just have to remove position: absolute; from #posts.
If you want to make the footer stick to the bottom of page, use fixed position.
#footer {
position: fixed;
bottom: 0px;
}
I just need to use
`display: table-row;'