here is the layout
http://timsegreto.com/cssmock/mock.html
i need the background image to scroll concordant with the text block in the right column.
ive tried many different ways with no success.
any ideas would greatly appreciated.
not sure if its possible or what t research to make it work.
thanks!
It seems to me that you have fixed positioning on the wrong element. Try making #framecontent position fixed and remove it from #maincontent.
EDIT It's 'quirks' mode that's causing you IE issues. Get rid of the:
<!--Force IE6 into quirks mode with this comment tag-->
from the beginning of your html. I'm sure this is supposed to be solving other cross-browser issues but it's ruining fixed positioning.
Have you adding an extra div and setting the background image on that instead of on the body? You could absolutely position this extra div in the body with top: 0 - it would scroll with the page then...
not sure if thats what you're looking for exactly...
Related
First off, let me say its been about 6 months since I have made a website, so I am very rusty! Normally I could probably figure this out myself...
I have a header div that stretches 100% width and a drop shadow, below that I have a wrapper div with a neg z-index to allow for the top div's shadow. Everything seemed ok until I tried to add an image gallery in a div that is located inside of the wrapper div, the images won't pop up. I know this is because the positioning relative and z-index but I can't for the life of me figure out how to fix this.
I am sure this is something so simple and stupid but any help would be appreciated!
I temporarily threw it on my hosting so you can see the code:
http://graves-properties.com
Thanks,
Dan
Instead of a negative z-index on the wrapper put a higher z-index on the header , e.g., 9999. That will allow the drop-shadow to show and should resolve the image gallery issue.
Given this little fiddle: http://jsfiddle.net/5Sw3h/8/
I have a navigation panel to the left, a content panel to the center and to give a little space on the right a panel there as well. These are placed using "display: table, display: table-cell" semantics.
I am currently experiencing that putting content in the left panel it seems to push the content in the content panel down by some, mostly for the image in there. However it seems to pus the content down a little in general.
I have tried things as setting padding to 0 on quite a few elements (as I first thought it was that), then I have tried vertical alignment on the content box, some relative positioning defining "top". But nothing has really helped...
I know I must have overlooked some obvious thing, just can't find it.
Can anyone help me find what I am missing?
Where you have display: table-cell, add vertical-align: top.
The initial value of vertical-align is baseline, which is causing the misalignment.
thirtydot already provided a great answer. However, you will face a new problem in Safari and Opera so you better be sure you have set the width to all table-cell elements. Another issue is the display table/table-cell support in IE 6/7 where you can use a HTC script written by Tanalin here http://tanalin.com/en/projects/display-table-htc/.
I need a div placed at the top and center of the page to appear over top of the scrolling content below it, and stay in place at the user scrolls.
However, due to freakishly annoying bug I can not reproduce in jsFiddle (or I'd ask for help with that instead) I can't use position:fixed and I need it to work without JavaScript.
How else can I do it?
I think I understand what you mean and I've made a little example, it's pretty self explanatory but just say if you don't understand anything, sure you will.
And if I've misunderstood, I apologise... jsFiddle 1
EDIT With Real Fix
Since I read the question wrong and a fixed position couldn't be used, I have now altered the code slightly to the following jsFiddle 2
Basically you're placing a transparent fixed div to fill the entire width of the page, and then placing your absolute position div inside that, creating the same effect but hopefully getting round the bug you've come across.
I have no idea what I'm doing wrong, but for some reason, I'm experiencing a bug with my markup that is causing my body element and my html element to not take up the entire viewport in the browser.
I can't get to the bottom of this. It first reared its head when I tried to add a 10px purple border to the top and bottom of my body.
If you inspect the page in Firebug, you you can see that there's a huge chunk of the page that is not highlighted when you hover on the html element or the body element. And the border that I applied at the bottom is hanging up very far on the page.
Does anyone know why this is? Could it have to do with my using HTML5?
Here's the page in question:
http://electricorangecreative.com/test/index.html
And here are my style sheets:
http://electricorangecreative.com/test/reset.css
http://electricorangecreative.com/test/style.css
Use a sticky footer technique.
I've had a look at the current test page and it looks like the only outstanding issue is the vertical scrollbar still appearing without need to. Easiest fix for this is to simply remove any margin or padding you have on elements you've set to height:100%. The culprit I identified is div#wrapper. Take off the padding there and the issue is resolved (in FF at least - not tested on other browsers). Since the padding is added to the height you end up with an element that stretches over 100% vertically. Use margins on children instead of padding - should be fine!
I am trying to just create a basic layout, but i am having trouble to get it to auto-adjust the height.
Something is wrong with the DIV-container since it's not adding the padding correctly to the top and bottom elements. It should be the size of the highest block, right now its the menu block.
Any ideas?
Website
in the container that holds your divs (the one whose height is not adjusting), use a css clear fix. Your container div will adjust once you use this method.
Add overflow: hidden; to the CSS for that particular <div>.
Inspect your HTML by using Google Chrome or Firefox with the firebug addon. Is so easy to see where and where not there is correct padding, margins etc... Additional ye see all css for a selected element as well...
Btw. When you are using padding, are you sure the rows above and below are cleared ?
Tried using margins instead?