I’ve been testing integrating the sticky footer technique on top of a full-page custom Google Map.
Sticky Footer and Google Map API
I used this sticky footer example for my model.
Even though the height of the header/footer is 50px, I’m placing the content in the #header
I’ve tried placing content in the main #wrap #header
I’ve moved the map controls to the bottom right so they don’t run into the nav or search field when shrinking the viewport.
I didn’t have a chance to test below IE7, Safari or Opera, but so far everything else seemed to work.
Before I go any further I’m wondering if I’m not seeing a critical mistake that won’t precipitate until I’ve started filling out the content a bit more. Any suggestions would be welcomed
PaulOB
June 18, 2011, 4:39pm
2
Hi,
You can’t really do that because everything is overflowing and will just overlap and the sticky footer won’t work either.
The code needs to be like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Sticky Footer and Google Map API</title>
<style type="text/css">
html, body {
height: 100%;
min-width:700px;
}
html, body, div, p {
margin:0;
padding:0;
}
#header {
background:transparent;
position:relative;
z-index:2;
width:950px;
margin:0 auto;
text-align:left;
border-top:50px solid #fff;
}
#wrap {
margin:0 auto;
min-height:100%;
margin-top:-50px;
width:100%;
width:950px;
clear:both;
}
* html #wrap {
height:100%;
}
#mapwrap {
width:100%;
height:100%;
top:0;
left:0;
position:absolute;
position:fixed;
z-index:1;
}
#map {
width:100%;
height:100%;
top:0;
left:0;
position:absolute;
z-index:1;
}
#footer {
position:relative;
z-index:2;
height:50px;
clear:both;
width:950px;
margin:0 auto;
}
/*Opera Fix*/
body:before {
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/* - negate effect of float*/
}
#wrap:after { /* thank you Erik J - instead of using display table for ie8*/
clear:both;
display:block;
height:1%;
content:" ";
}
.topSearch {
width:300px;
float:right;
}
.navOuter {
margin:18px 0 0;
padding:0;
list-style:none;
clear:both;
position:relative;
z-index:2;
}
.navOuter li, .navOuter a, .navOuter span, .navOuter b {
float:left;
}
#content {
width:600px;
padding:18px 0 0;
clear:both;
position:relative;
z-index:2;
}
#content p {
margin:0 0 18px;
}
</style>
</head>
<body>
<div id="wrap">
<div id="header">
<div class="topLogo"><img src="http://www.heybeebe.com/dev/images/temp-blue-120x50.jpg" alt="Placeholder" width="120" height="50" /> </div>
<div class="topSearch">
<form action="" method="get">
<input name="query" type="text" value="" />
<input name="submit" type="submit" value="?" />
</form>
</div>
</div>
<ul class="navOuter">
<li><a href="#" title="Home">Home</a> <b> / </b></li>
<li><a href="#" title="Projects">Projects</a> <b> / </b></li>
<li><span class="currentPage">Map</span></li>
</ul>
<div id="content">
<p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse luctus lobortis tristique. Mauris lacinia faucibus mi in vehicula. In ornare elit non orci porttitor semper. In sodales augue et nunc cursus sit amet congue magna hendrerit. Aenean sollicitudin risus sed nulla hendrerit auctor?</p>
</div>
</div>
<!-- #wrap -->
<div id="footer">
<p>Contact info</p>
</div>
<div id="mapwrap">
<div id="map"></div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type='text/javascript' src='http://maps.google.com/maps?file=api&v=2&sensor=false&key=ABQIAAAAEAOHEMj9CW_vU6fSfu1hlhT9nCEqcSqnpC8TWVDmUOXIKUBL2BQ1lgxaYQsKXxcbs_SSEMJYPzOUfg'></script>
<script type="text/javascript">
$(document).ready(function(){
// Initialize map and overlay
var map;
var geoXml;
map = new GMap2(document.getElementById("map"));
geoXml = new GGeoXml("http://maps.google.ca/maps/ms?authuser=0&vps=5&jsv=348a&hl=en&ie=UTF8&msa=0&output=nl&msid=205010316259299785866.0004a5f5144f07c5e0cb3");
// Set and position controls
var mapTypeControl = new GMapTypeControl();
var mapLarge3DControl = new GLargeMapControl3D();
var mapTypeControlPos = new GControlPosition(G_ANCHOR_BOTTOM_RIGHT, new GSize(100,30));
var mapLarge3DControlPos = new GControlPosition(G_ANCHOR_BOTTOM_RIGHT, new GSize(10,100));
map.addControl(mapTypeControl, mapTypeControlPos);
map.addControl(mapLarge3DControl, mapLarge3DControlPos);
map.removeMapType(G_HYBRID_MAP);
// Set center and overlay
map.setCenter(new GLatLng(49.292889,-122.019653), 7);
map.addOverlay(geoXml);
});
</script>
</body>
</html>
However, I’m having a hard time trying to see the text on that map background so are you sure this is a viable layout?
I’ll be giving the text the proper amount of contrast later on once I get the layout nailed down.
Thanks for the help, Paul!
PaulOB
June 18, 2011, 4:59pm
4
I’ve just made some changes to my other post to correct something so grab the code again.
The map needs to be position:fixed or it will scroll away with the document (won’t work in ie6 though).
If I’m only going to have 1-2 small paragraphs would I still need to worry about this? Or is it for scalability in the event the content would get that long?
PaulOB
June 18, 2011, 9:56pm
6
If the user has a small window the same effect would happen so use position fixed and it won’t move (Ie6 just gets the normal absolute position which will scroll the map away should content cause a scroll).
Gotcha, thanks for the tip!
