Hi all. I'm trying to build a photography site here http://www.briandunlea.com/index_old.html
When the page is resized too small it's possible for the images to move independent of the "floating" navigation bar. The site will be horizontal scrolling. I just can't get the images and nav to lock together. I hope I'm making sense, it's hard to explain.
Thanks in advance,
Brian.
Hi briandunlea, I think I see
Hi briandunlea,
I think I see what's happening.
Just not really sure what you want to do when the page is small.
You could look into media queries to make changes when the page is small.
Thanks Tony. I want to lock
Thanks Tony. I want to lock the nav and images so when a page gets smaller the images can't move about freely. The nav is locked good. But the images can be moved out of line with the nav. I don't need the images to change size. I know there's a fix but I'm not experienced enough to think of it. Haven't done any CSS for about 5 years
Ok what you need to do is
Ok what you need to do is restrict the height and hide the overflow.
You will need to do that down through the dom tree.
html, body{ height:100%; } #pageWrap{ height:100%; overflow:hidden; } @media screen and (min-height: 600px) { #imageContent{ box-sizing: border-box; height: 490px; /* default for non calc support */ height: calc(100% - 110px); /* 110 is the approx height of the header */ } }
Hope that helps