CSS positioning problem, CSS expert needed
I am building a test site but can't figure out 2 problems I am having with it; it's killing me! (This site needs to be viewed on a non IE browser as I haven't added image support for opacity yet, so it won't make much sense)
http://www.projekarkitek.com/test/
1) I have added box-shadow with 'inset' to the BODY to give it an inner glow effect around the edge of the screen but the bottom shadow just sticks to the browser viewport and not the BODY so 开发者_JS百科if the browser viewport scroll bars kick in then the bottom shadow sticks to where the browser viewport originally was and not to the BODY leaving a big visible gap. I would have expected this if I had attached the box-shadow to the HTML as that's the viewport but the BODY should be the whole document. ARGHH!
box-shadow: 0 0 200px #cbc8cb inset;
2) My footer text (rss etc) is positioned to the bottom of the body but when the browser window is reduced in height and width the footer text carrys on overlapping the main content in the middle. I realise that's because the middle elements are positioned absolutely and therefore out the document flow but I can't figure out a way around that, I need the footer to respect the middle content and scroll bars to kick in when the viewport is short so the footer text stays at the bottom. Any ideas?
Just for the record, the middle boxes are positioned absolutely to the main wrapper which has a small width to keep them to the left while the wrapper stays central so there is no clash on a small screen when the blog list on the far right comes up close. If I had them all in a wrapper with a 940px width then the blog list on the right overlaps the boxes too easily.
1) put height: 100%
on your html
selector, so body can occupy the 100% of that.
2) you can also put a min-height
on your body so the footer stays down.
2) I might get stoned for saying this, but... Use a table with 100% height. Seriously. Sometimes it is not practical to use CSS for layout because it has no concept of relationships between elements. Use a table to guarantee content doesn't get out of place in edge conditions, and use CSS to control the appearance.
精彩评论