• Locked
1 reply [Last post]
Thu, 2015-01-15 00:34
tony_gordo
tony_gordo's picture
Offline
newbie
Brasil
Last seen: 4 years 38 weeks ago
Brasil
Timezone: GMT-2
Joined: 2015-01-15
Posts: 2
Points: 3

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.

Top
Tags:
Thu, 2015-01-15 00:38
#1
tony_gordo
tony_gordo's picture
Offline
newbie
Brasil
Last seen: 4 years 38 weeks ago
Brasil
Timezone: GMT-2
Joined: 2015-01-15
Posts: 2
Points: 3

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;
}

Top
  • Locked