javascript - Issue with sticky footer not horizontally scrolling, and main content bunching up when window size collapsed -
marked fixed!!!
i fixed myself main_container issue adjusting width of , nav 1280px instead of 1024.
i fixed footer scrolling adding jquery/javascript wrote (below). fault didn't realise weren't able link .js file running locally without downloading file , placing in directory. so, added code head instead , linked javascript library google...
testing out layouts new site , having issues sticky footer not horizontally scrolling when collapse browser window size. position fixed, wish be. also, .main_container bunches when resize browser window too, , i'd fixed center page width.
hope can help.
html:
<head> <title>mix in box</title> <!-- normalize clean , standardize browser default styles --> <link rel="stylesheet" type="text/css" href="./_css/normalize.css"> <!-- custom css --> <link rel="stylesheet" type="text/css" href="./_css/styles.css"> <!-- modernizr allows html5 elements work in older browsers --> <script src"./_js/modernizr.js"></script> <script src"./_js/scroll.js"></script> </head> <body> <div class="nav_container"> <header class="navbar"> <nav> <ul> <li><a href="">home</a></li> <li><a href="">services</a></li> <li><a href="">store</a></li> <li id="logo"><a href=""><p>logo</p></a></li> <li><a href="">blog</a></li> <li><a href="">about</a></li> <li><a href="">contact</a></li> </ul> </nav> </header><!-- end navbar --> </div> <!-- end nav_container --> <div class="main_container"> <div class="content"> <p>lorem ipsum dummy text of printing , typesetting industry. lorem ipsum has been industry's standard dummy text ever since 1500s, when unknown printer took galley of type , scrambled make type specimen book. has survived not 5 centuries, leap electronic typesetting, remaining unchanged. popularised in 1960s release of letraset sheets containing lorem ipsum passages, , more desktop publishing software aldus pagemaker including versions of lorem ipsum.<br /><br /> lorem ipsum dummy text of printing , typesetting industry. lorem ipsum has been industry's standard dummy text ever since 1500s, when unknown printer took galley of type , scrambled make type specimen book. has survived not 5 centuries, leap electronic typesetting, remaining unchanged. popularised in 1960s release of letraset sheets containing lorem ipsum passages, , more desktop publishing software aldus pagemaker including versions of lorem ipsum.<br /><br /> lorem ipsum dummy text of printing , typesetting industry. lorem ipsum has been industry's standard dummy text ever since 1500s, when unknown printer took galley of type , scrambled make type specimen book. has survived not 5 centuries, leap electronic typesetting, remaining unchanged. popularised in 1960s release of letraset sheets containing lorem ipsum passages, , more desktop publishing software aldus pagemaker including versions of lorem ipsum.<br /><br /> lorem ipsum dummy text of printing , typesetting industry. lorem ipsum has been industry's standard dummy text ever since 1500s, when unknown printer took galley of type , scrambled make type specimen book. has survived not 5 centuries, leap electronic typesetting, remaining unchanged. popularised in 1960s release of letraset sheets containing lorem ipsum passages, , more desktop publishing software aldus pagemaker including versions of lorem ipsum.<br /><br /> lorem ipsum dummy text of printing , typesetting industry. lorem ipsum has been industry's standard dummy text ever since 1500s, when unknown printer took galley of type , scrambled make type specimen book. has survived not 5 centuries, leap electronic typesetting, remaining unchanged. popularised in 1960s release of letraset sheets containing lorem ipsum passages, , more desktop publishing software aldus pagemaker including versions of lorem ipsum.<br /><br /> lorem ipsum dummy text of printing , typesetting industry. lorem ipsum has been industry's standard dummy text ever since 1500s, when unknown printer took galley of type , scrambled make type specimen book. has survived not 5 centuries, leap electronic typesetting, remaining unchanged. popularised in 1960s release of letraset sheets containing lorem ipsum passages, , more desktop publishing software aldus pagemaker including versions of lorem ipsum.<br /><br /> lorem ipsum dummy text of printing , typesetting industry. lorem ipsum has been industry's standard dummy text ever since 1500s, when unknown printer took galley of type , scrambled make type specimen book. has survived not 5 centuries, leap electronic typesetting, remaining unchanged. popularised in 1960s release of letraset sheets containing lorem ipsum passages, , more desktop publishing software aldus pagemaker including versions of lorem ipsum. </p> </div> </div> <!-- end main container --> <div class="hidden"><p></p></div> <!-- blank space after content --> <footer id="main_footer"> <div id="footer" class="container"> <div> <form class="form_footer"> <h4>sign our newsletter here → <input type="email" placeholder="your@e-mail.com" onfocus="this.placeholder = ''" onblur="this.placeholder = 'your@e-mail.com'" /></h4> <input type="submit"> <!-- end newsletter sign-up --> <br /> <h4>my account → <input type="login" placeholder="your@e-mail.com" onfocus="this.placeholder = ''" onblur="this.placeholder = 'your@e-mail.com'" /> <input type="password" placeholder="password" onfocus="this.placeholder = ''" onblur="this.placeholder = 'password'" /></h4> <input type="submit" value="login"> <input type="submit" value="register"> <a href="" style="font-size: 11px; color: #b2b2b2;"><u>forgot login details?</u></a> <!-- end login --> </form> <div class="social"> <a href="">home</a> <a href="">services</a> <a href="">store</a> <a class="social_pic" href=""><img src="./_images/social/fb.png"></a> <a class="social_pic" href=""><img src="./_images/social//twitter.png"></a> <a class="social_pic" href=""><img src="./_images/social//instagram.png"></a> <a class="social_pic" href=""><img src="./_images/social//linkedin.png"></a> <a class="social_pic" href=""><img src="./_images/social//email.png"></a> <a href="">blog</a> <a href="">about</a> <a href="">contact</a> </div> </div> <div class="copyright"> <p>copyright © <script>document.write(new date().getfullyear());</script> mix in box. rights reserved.</p> </div> </div> <!-- end footer container --> </footer> <!-- end footer --> </body> css:
html, body { min-width: 100%; } body { -webkit-font-smoothing: antialiased; text-rendering: optimizelegibility; margin-top: 30px; margin-bottom: 20px; background: url('../_images/background/wood 4.jpg') top no-repeat; background-attachment: fixed; background-size: 1440px 960px; } /* -- header -- */ header nav { background-color: white; text-align: center; } header nav ul { margin: 0; padding: 0; list-style: none; display: block; line-height: 141px; } header nav ul li { display: inline-block; padding: 0px 10px; } header nav ul li { text-transform: uppercase; text-decoration: none; font-weight: bold; color: black; } header nav ul li#logo { display: block; width: 292px; height: 141px; background: url('../_images/logo/logo.png') center center no-repeat; } header nav ul li#logo p { opacity: 0; } /* -- navigation container -- */ .nav_container { width: 1024px; margin: 0 auto; padding: 10px 24px; background-color: white; -webkit-box-shadow: 0px 0px 19px 0px rgba(0,0,0,1); -moz-box-shadow: 0px 0px 19px 0px rgba(0,0,0,1); box-shadow: 0px 0px 19px 0px rgba(0,0,0,1); } /* -- main container -- */ .main_container { color: black; width: 1024px; margin: 20px auto; padding: 10px 24px; background-color: white; -webkit-box-shadow: 0px 0px 19px 0px rgba(0,0,0,1); -moz-box-shadow: 0px 0px 19px 0px rgba(0,0,0,1); box-shadow: 0px 0px 19px 0px rgba(0,0,0,1); } /* -- footer -- */ #footer { background-color: white; -webkit-box-shadow: 0px 0px 19px 0px rgba(0,0,0,1); -moz-box-shadow: 0px 0px 19px 0px rgba(0,0,0,1); box-shadow: 0px 0px 19px 0px rgba(0,0,0,1); position: fixed; left: 0px; bottom: 0px; width: 100%; } .copyright { color: black; opacity: 0.2; padding-bottom: 2px; margin-top: 0px; margin-bottom: -8px; width: 1440px; } footer#main_footer div.container { text-align: center; margin-top: 40px; } .form_footer { display: block; margin-bottom: -12px; } div.social img { width: 40px; margin-top: 12px; } .social, { text-transform: uppercase; text-decoration: none; list-style: none; padding: 0px 10px; font-weight: bold; color: black; width: 1440px; } .social_pic { padding: 0px; position: relative; top: 12px; } h4 { display: inline-block; margin-top: 10px; margin-bottom: 0px; } /* -- blank spacing @ bottom of main container -- */ div.hidden{ height: 170px; width: 100px; } /* -- form styling -- */ form { margin-top: 10px; margin-bottom: 0px; width: 1440px; } /* -- center placeholder form text -- */ input { text-align: center; } ::-webkit-input-placeholder { text-align: center; } :-moz-placeholder { text-align: center; } /* force elements self clear children: http://css-tricks.com/snippets/css/clear-fix/ */ .clearfix:after { visibility: hidden; display: block; content: ""; clear: both; height: 0; } * html .group { zoom: 1; } /* ie6 */ *:first-child+html .group { zoom: 1; } /* ie7 */ i read in jsfiddle of possibly using javascript allow sticky footer scroll horizontally, couldn't work...
javascript:
$(document).ready(function(){ console.log("scrolling"); $(window).scroll(function(){ $('#footer').css('left', 0 - $(this).scrollleft()); }); }); ok, in advance help, need i'm newbie learning stuff. thank you!
if understand question correctly, have 2 problems:
.main_containerdoesn't scale down , stay centered resize browser.- the content of
#footerdoesn't center , stays @ original position , width resize browser, causing horizontal scrolling.
the problem lies in of things you've done create layout. if going create this, this:
html
<div class="container"> <header class="header"> <h1>header</h1> <p>nav , stuff here too.</p> </header> <main class="main"> <p>main content here.</h3> </main> </div> <footer class="footer"> <div class="container"> <p>footer stuff down here.</p> </div> </footer> css
body { background: #333; padding: 20px; } .container { max-width: 800px; margin-right: auto; margin-left: auto; } .header, .main, .footer { background: white; padding: 40px; } .main { margin-top: 20px; margin-bottom: 150px; } .footer { position: fixed; width: 100%; bottom: 0; left: 0; box-shadow: 0 0 40px rgba( 0, 0, 0, .1 ); } unless i'm missing something, that's layout , function you're going for. here's jsfiddle live example: http://jsfiddle.net/galengidman/x17wtj52/
Comments
Post a Comment