Thu, 2015-01-15 00:34
Hello guys,
I am creating a website that supports bike roads in São Paulo. www.temgentenaciclovia.com
I wanted the header image to stay put on top of the site, always aligned with the background image, but for some reason, the image is a little bit to the left of what it should be.
Besides that, it all gets really messy when I try to browse the website from my cellphone.
Could someone please give it a look? I'm sure there's an easy fix to that.
thanks in advance for the attention!
ps: I'm not a native speaker, please don't mind my english.
Thu, 2015-01-15 00:38
#1
Index.html: <html> <head>
Index.html:
<html> <head> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> </head> <body> <div class="header-cont"><div class="header"></div></div> <script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-57876610-1', 'auto'); ga('send', 'pageview'); </script> <link rel="stylesheet" href="mystyles.css"/> <script type="text/javascript" src="/instafeed.min.js"></script> <div id="fb-root"></div> <div class="content"> <center><div class="rolo"> <div id="temgentenaciclovia"></div> <div id="ciclovia"></div> </div></center></div> <div class="fb-like" data-href="http://www.temgentenaciclovia.com" data-layout="button_count" data-action="like" data-show-faces="true" data-share="false"></div> <div class="miri">Feito por <a href="htt://www.mauromandil.com" target="blank"> Mauro Mandil</a> e <a href="http://www.rodrigoportoad.com" target="blank"> Rodrigo Porto</a></div> <script type="text/javascript"> var temgentenacicloviafeed = new Instafeed({ get: 'tagged', target: 'temgentenaciclovia', tagName: 'ciclovia', clientId: '3e804cd40008412580a95921c2c55594', template: '<a href="{{link}}" target="blank"><img src="{{image}}"//></a><div class="legendinha">@{{model.user.username}} <img src="likes.png"> {{likes}} </div><br>', limit: '60', links: 'true', resolution: 'low_resolution' }); // run the feed temgentenacicloviafeed.run(); $(window).scroll(function(){ if($(window).scrollTop() + $(window).height() > $(document).height() - 100) { temgentenacicloviafeed.next(); } }); </script> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&appId=1585831204971950&version=v2.0"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script> </body> </html>
Css:
@font-face { font-family: myFirstFont; src: url(big_john.otf); } @font-face { font-family: mySecondFont; src: url(slim_john.otf); } body { font-family: myFirstFont; color: #000000; background:url(fundo.png); background-position:center; background-attachment:fixed; background-repeat: no-repeat; background-size:auto; } .header-cont{ width:100%; position:fixed; top:0px; } .header{ width:800px; height:245px; margin:0px auto; z-index:1; background:url(header.png); } .content{ width:800px; margin: 0px auto; } a { color: #000000; } .legendinha { background: url(tentainsta.png); height:17px; padding-top:2px; margin-bottom:19px; font-family: mySecondFont; color:#ffffff; font-size:11px; } .rolo { max-width:306px; z-index:1; margin-top:231px; } .fb-like { position:fixed; width:50px; top:6%; left:3%; z-index:1000; } .miri { position:fixed; top:2%; left:3%; font-size:30%; z-index:1000; }