elmohack Posted May 26, 2012 Share Posted May 26, 2012 Hi, im not sure how to do this so i need some advice , im trying to get contents scroll over a navigation bar ill try to show an illustration image attached. I was trying to use position fixed at the header but that doesnt help since it stays there the effect im trying to get is the body scrolling over the header , in other words making the div below another div scroll on top of that div when you scroll down. Please look at attached image. Link to comment Share on other sites More sharing options...
TheGallery Posted May 26, 2012 Share Posted May 26, 2012 Use the z-index property Link to comment Share on other sites More sharing options...
elmohack Posted May 26, 2012 Author Share Posted May 26, 2012 I tried that.. can you please give more direct instructions z index on header or body i tried on either still dont work even with negative or positive. Link to comment Share on other sites More sharing options...
TheGallery Posted May 26, 2012 Share Posted May 26, 2012 Which one do you want on top of the other? Link to comment Share on other sites More sharing options...
dsonesuk Posted May 26, 2012 Share Posted May 26, 2012 z-index: will only work when position: is used on the same element, therefore the position: fixed header would similar to #header {position: fixed; z:index:0;} and the content area would be #content {position:relative; z-index: 10;} which will stack the content container at a level above header level so it will scroll over the to of the header. Link to comment Share on other sites More sharing options...
elmohack Posted May 27, 2012 Author Share Posted May 27, 2012 Hi, i want the content to go over the header when you scroll down so the content page goes up . @ dsonesuk i tried that stll not difference apparently.. its like the usual stuff.. Ill paste my cs code here so you can verify. #header{width:100%;background:#000000;height:460px;background:url(../images/header.jpg);no-repeat;min-width:1000px;position: fixed; z-index:0;} #content {position:relative; z-index: 10;width:100%;padding-top:40px;background:#000000;height:auto;background:url(../images/wbg.jpg);min-width:1000px;} there are other divs within the content box so im sure it would work still but still not working so :s// Link to comment Share on other sites More sharing options...
elmohack Posted May 27, 2012 Author Share Posted May 27, 2012 (edited) Update @ dsenosuk I did as you said apparently i clicked the wrong html so there was no result but i tested again now and apparently the header is missing when i use the code u gave. and it only display the content div. Edited May 27, 2012 by elmohack Link to comment Share on other sites More sharing options...
elmohack Posted May 27, 2012 Author Share Posted May 27, 2012 Update . I used position top o on the header.. but .. at the bottom of the page i have a back to top b utton.. now that doesnt work.. the button uses jquery to scroll when on click the button goes to div that is specified in this case. the div is # header .. but now it doesnt mvoe it just remains at that position anyway to fix this? Link to comment Share on other sites More sharing options...
dsonesuk Posted May 27, 2012 Share Posted May 27, 2012 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><style type="text/css">body {margin: 10px;}#header{/*width:100%;*/background:#000000;height:460px;background:url(../images/header.jpg);no-repeat;min-width:1000px;position: fixed; z-index:0;top:0;left: 10px;right:10px;}#content {position:relative; z-index: 10;/*width:100%; not required */margin-top:460px;background:#000000;/*height:auto; not required */background:url(../images/wbg.jpg);min-width:1000px;}</style></head><body><div id="header"> Header</div><div id="content"> <p>Ut labore et dolore magna aliqua. Ut enim ad minim veniam, excepteur sint occaecat ut aliquip ex ea commodo consequat. Duis aute irure dolor consectetur adipisicing elit, mollit anim id est laborum. Ullamco laboris nisi eu fugiat nulla pariatur. Sed do eiusmod tempor incididunt in reprehenderit in voluptate velit esse cillum dolore.</p> <p>Excepteur sint occaecat cupidatat non proident, ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, sunt in culpa. Ut aliquip ex ea commodo consequat.</p> <p>Eu fugiat nulla pariatur. In reprehenderit in voluptate ut labore et dolore magna aliqua. Cupidatat non proident, ullamco laboris nisi quis nostrud exercitation.</p> <p>Sed do eiusmod tempor incididunt ut aliquip ex ea commodo consequat. Sunt in culpa lorem ipsum dolor sit amet, cupidatat non proident. Velit esse cillum dolore duis aute irure dolor ullamco laboris nisi. In reprehenderit in voluptate lorem ipsum dolor sit amet. Velit esse cillum dolore ut labore et dolore magna aliqua.</p> <p>Excepteur sint occaecat duis aute irure dolor qui officia deserunt. Cupidatat non proident, ullamco laboris nisi quis nostrud exercitation. Sed do eiusmod tempor incididunt velit esse cillum dolore ut labore et dolore magna aliqua. Cupidatat non proident, lorem ipsum dolor sit amet, in reprehenderit in voluptate. Ut enim ad minim veniam, sed do eiusmod tempor incididunt excepteur sint occaecat.</p><p>Ut labore et dolore magna aliqua. Ut enim ad minim veniam, excepteur sint occaecat ut aliquip ex ea commodo consequat. Duis aute irure dolor consectetur adipisicing elit, mollit anim id est laborum. Ullamco laboris nisi eu fugiat nulla pariatur. Sed do eiusmod tempor incididunt in reprehenderit in voluptate velit esse cillum dolore.</p> <p>Excepteur sint occaecat cupidatat non proident, ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, sunt in culpa. Ut aliquip ex ea commodo consequat.</p> <p>Eu fugiat nulla pariatur. In reprehenderit in voluptate ut labore et dolore magna aliqua. Cupidatat non proident, ullamco laboris nisi quis nostrud exercitation.</p> <p>Sed do eiusmod tempor incididunt ut aliquip ex ea commodo consequat. Sunt in culpa lorem ipsum dolor sit amet, cupidatat non proident. Velit esse cillum dolore duis aute irure dolor ullamco laboris nisi. In reprehenderit in voluptate lorem ipsum dolor sit amet. Velit esse cillum dolore ut labore et dolore magna aliqua.</p> <p>Excepteur sint occaecat duis aute irure dolor qui officia deserunt. Cupidatat non proident, ullamco laboris nisi quis nostrud exercitation. Sed do eiusmod tempor incididunt velit esse cillum dolore ut labore et dolore magna aliqua. Cupidatat non proident, lorem ipsum dolor sit amet, in reprehenderit in voluptate. Ut enim ad minim veniam, sed do eiusmod tempor incididunt excepteur sint occaecat.</p><p>Ut labore et dolore magna aliqua. Ut enim ad minim veniam, excepteur sint occaecat ut aliquip ex ea commodo consequat. Duis aute irure dolor consectetur adipisicing elit, mollit anim id est laborum. Ullamco laboris nisi eu fugiat nulla pariatur. Sed do eiusmod tempor incididunt in reprehenderit in voluptate velit esse cillum dolore.</p> <p>Excepteur sint occaecat cupidatat non proident, ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, sunt in culpa. Ut aliquip ex ea commodo consequat.</p> <p>Eu fugiat nulla pariatur. In reprehenderit in voluptate ut labore et dolore magna aliqua. Cupidatat non proident, ullamco laboris nisi quis nostrud exercitation.</p> <p>Sed do eiusmod tempor incididunt ut aliquip ex ea commodo consequat. Sunt in culpa lorem ipsum dolor sit amet, cupidatat non proident. Velit esse cillum dolore duis aute irure dolor ullamco laboris nisi. In reprehenderit in voluptate lorem ipsum dolor sit amet. Velit esse cillum dolore ut labore et dolore magna aliqua.</p> <p>Excepteur sint occaecat duis aute irure dolor qui officia deserunt. Cupidatat non proident, ullamco laboris nisi quis nostrud exercitation. Sed do eiusmod tempor incididunt velit esse cillum dolore ut labore et dolore magna aliqua. Cupidatat non proident, lorem ipsum dolor sit amet, in reprehenderit in voluptate. Ut enim ad minim veniam, sed do eiusmod tempor incididunt excepteur sint occaecat.</p></div></body></html> Link to comment Share on other sites More sharing options...
elmohack Posted May 27, 2012 Author Share Posted May 27, 2012 yes in the previous post i commented that i manage to make it work , but my question still remains ... at the bottom of the page i have created a button and when you click it it goes to the top (back to top button) its a href # header so it scrolls up to header.. when i have z index and postion relative etc on the content box and header ... the back to top button doesnt work. it just doesnt respond.. but when i take away the codes you provided it works. Link to comment Share on other sites More sharing options...
dsonesuk Posted May 27, 2012 Share Posted May 27, 2012 Sorry, i thought you was still having trouble getting it to work. Because you are using position: fixed; it does not scroll out of view so using a link to take to this element top edge is not going to work because its top edge will always be at the top of the browser window. to get the top of page to work i would use another element to link to to achieve the same result. <div id="top"> </div><div id="header"> Header</div> #top {position:absolute; left: -99999em; top:0;} <a href="#top">Top of page</a> Link to comment Share on other sites More sharing options...
elmohack Posted May 28, 2012 Author Share Posted May 28, 2012 Well done young sir a genius and a scholar ! Thank you i guess i still have alot to learn on how things work but hey its exiting ! Link to comment Share on other sites More sharing options...
dsonesuk Posted May 28, 2012 Share Posted May 28, 2012 I can't see a problem with IE8, IE7 problem is described here http://www.quirksmode.org/bugreports/archives/2007/03/ie7_positionfixed_and_margin_top_bug.html, the best way to get over this problem is to insert a outer div around #content (note: this has no styling at all), and use i7 condition to place #content in the correct position to match other better browsers. <div id="top"> </div><div id="header"> Header</div><div id="crappy_IE7_fix"><div id="content"> <p>Ut labore et dolore magna aliqua. Ut enim ad minim veniam, excepteur sint occaecat ut aliquip ex ea commodo consequat. Duis aute irure dolor consectetur adipisicing elit, mollit anim id est laborum. Ullamco laboris nisi eu fugiat nulla pariatur. Sed do eiusmod tempor incididunt in reprehenderit in voluptate velit esse cillum dolore.</p> </div></div><a href="#top">Top of page</a> <!--[if IE 7]><style type="text/css">#content {margin-top:450px;</style><![endif]--> Link to comment Share on other sites More sharing options...
elmohack Posted May 28, 2012 Author Share Posted May 28, 2012 Nevermind but you solved my problem anyway kudos to you sir ! Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now