Ok, this is really annoying and I can't understand why this is even happening.
I may have screwed some stuff up when trying to get the CSS Sticky footer to work.
I had one going on, but it seemed at the body wasn't liquid so I thought I'd try this one:
http://ryanfait.com/sticky-footer/
But the results ended up like this:
http://www.serverbart.com/film/
The blue box is supposed to resemble a gallery, so nevermind the color :p
I guess you'll understand what I'm trying to do, and I'm open for input about redesigning the div structure! I'm trying to get really good at different layouts and this one has been bugging me a bit.
You are not following Ryan Fait's example. For starters, the push goes inside wrapper.
It's because you have this:
<div id="mainWrapper">
<div id="content"></div>
<div id="push"></div>
<div id="footer"></div>
</div>
It took me forever to figure out what i was doing wrong the first time i created a sticky footer as well and it has to be like this
<div id="mainWrapper">
<div id="content"></div>
<div id="push"></div>
</div>
<div id="footer">
</div>
You have to explicitly have 2 divs as your outermost divs, not just one main wrapper.
The height for the push and the footer must be the same. The push must go inside the wrapper.
Related
Im trying to make my sidebar content follow the scrolling but stop at the footer. Currently, any content i place goes too far and overlaps the footer.
<div class="row row-no-padding">
<div class="col-lg-8">
Content is here.
</div>
<div class="col-lg-4">
Sidebar content would be here. I want all content here to follow my scrolling
but stop if if i go too far(stop at the footer).
</div>
</div>
Please help me with this. I know this is a minimalist example but i've tried so many combinations at this point that i dont know what the hell to write.
I've tried position:fixed but it makes the content overlap the footer. position:sticky doesnt do anything, or im not using it properly.
Sorry guys I made new one for this because it couldn't be done like I previously explained.
I want image to go over previous div and so it stays always at the same exact spot.
It's an border image for portfolio div what I'm trying to align here correctly, so that it makes peek kind of effect over previous div.
<div id="previous">some content</div>
<div id="portfolio">
<div class="some-other-content">Whole lot of html</div>
</div>
Link to my jsfiddle
Use in your CSS
"position:absolut" to set a fix position in your Window.
see more options here:
http://www.css4you.de/position.html
I have 3 vertically aligned div (header, content, footer)
<div id="container">
<div id="header"> </div>
<div id="content"> </div>
<div id="footer"> </div>
</div>
Like this:
Just like in this example: http://jsfiddle.net/jS6pa/2/
(Example from here: http://peterned.home.xs4all.nl/examples/csslayout1.html)
As you can see in the jsfiddle example, I'm unable to complete all the requirements. The footer div doesnt collapse the content when I resize the window. If I make some tweeks I can achieve this but then the overflow:scroll doestn work and the scrollbar is not displayed
Here is another way I tried to solve this ( with no succes :S ) : http://jsfiddle.net/rv4XS/31/
I dont know if one way or another is the best approach to solve this. Just check the first or the second jsfiddle to see which one is the best
How can I achieve a full height content in a scenario where the header has dynamic content and at the same time, show a scrollbar when the content is overflow?
Thanks in advance for any help.
Ok I finally achieve this, using javascript.
The idea is simple. The height of the header has to be setted, no matter what.
For this I dont know why (maybe because this div was called in ajax) but the jquery .height() method didnt worked for me, but using the clientHeight method worked for me well.
var header = document.getElementById('headerDiv');
if(header)
{
$('contentDiv').css('top', header.clientHeight);
}
I created a testcase here http://testcases.site44.com/ in IE-7 dropdowns are not coming over banner image. in firefox and chrome it's fine.
Please help to find the issue.
IE has a different approach in understanding z-index.
Besides the very irritating approach of HTML in the mentioned link, you should do the following:
if you have 2 divs, and in the first one there is something that should go over content in the second one, than you need to set z-index on both of them, and a higher value for the one that has the content that goes over the other.
example:
<div id="wrapper">
<ul id="flyout">
//
</ul>
</div>
<div id="content">
//
</div>
CSS:
#wrapper {position:relative;z-index:2;}
#flyout {position:relative;z-index:3;}
#content {position:relative;z-index:1;}
IE now understands that the content in the first div should go over the content in the second div.
Try to put yours element id="footer" with a higher z-index than id="main"
Remove
z-index:1 from div id="banner" do this changes for ie-7 only
in-fact only z-index:1is affecting for ie-7
(When loading) For some reason the content of my page shifts down really far while the background is stationary and then jumps back up to the appropriate placement. Anyone know why or how to fix this issue? I would really appreciate some help. Thanks!
Sounds to me like your background isn't really a background, but rather a layer with an image in it that you've stacked behind your content.
I generally find this to be a pain because if for some reason the z-index of the items get's confused (and it sounds like this is what's happening here), weird things will happen when the page loads.
I personally recommend you set the background image on the same block that all your content goes on. Consider the following
<div id="content">
<div class="header"> </div>
<div class="navigation"> <!-- Menu goes here --> </div>
<div class="main"> <!-- Main content goes here --> </div>
</div>
#content { background: transparent url("Images/mybackground.png"); }
This will set the background on the page element that also houses your content. Assuming I've identified the problem corrently, this should solve your problem.
HTH