I am currently creating an app using drag and drop from the intel xdk/app designer. The idea of the app is to create basic tutorials for the user and also to use the geolocation tool. I have created the app mostly by using the app beginner tutorials from the intel website. the tutorials worked well for doing the basics such as adding images and navigation between pages. However, when I added the geolocation, the program, which is temperamental and freezing at the best of times, deleted a couple of pages. I had copied the code into word and when I copied the code back to try and restore the pages, the app has started to display the footers on top of the headers. The headers and annoyingly, even the footers themselves which are still at the bottom, are all compressed over to one side of the screen and not evenly distributed as they should be. The code I am working with so far is below.
<!DOCTYPE html>
<html>p
<!--HTML5 doctype-->
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta http-equiv="Pragma" content="no-cache">
<script type="text/javascript" charset="utf-8" src="intelxdk.js"></script>
<script type="text/javascript" language="javascript">
var isIntel=window.intel&&window.intel.xdk
// This event handler is fired once the intel libraries are ready
function onDeviceReady() {
//hide splash screen now that our app is ready to run
intel.xdk.device.hideSplashScreen();
setTimeout(function () {
$.ui.launch();
}, 50);
}
//initial event handler to detect when intel is ready to roll
document.addEventListener("intel.xdk.device.ready", onDeviceReady, false);
</script>
<script src="js/appframework.ui.min.js"></script>
<script>
if(isIntel)
$.ui.autoLaunch = false;
$.ui.useOSThemes = true; //Change this to false to force a device theme
$.ui.blockPageScroll();
$(document).ready(function () {
if ($.ui.useOSThemes && (!$.os.ios||$.os.ios7))
$("#afui").removeClass("ios");
});
</script>
<link href="css/icons.css" rel="stylesheet" type="text/css">
<link href="css/af.ui.css" rel="stylesheet" type="text/css">
<script>
function get_location() {
navigator.geolocation.getCurrentPosition(show_map);
}
function show_map(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
document.write("latitude :" + latitude + "<br>");
document.write("longitude :" + longitude + "<br>");
}
</script>
</head>
<body>
<div id="afui" class="ios">
<div id="header" class="header"></div>
<div id="content" style="">
<div class="panel" title="Main" data-nav="nav_0" id="main" selected="selected"
style="" data-appbuilder-object="page" data-header="header_0" data-footer="default_footer">
<div class="container" style="width: 100%; height: 100%; position: relative;" data-appbuilder-object="container">
<img src="images/intel.jpg" style="width: 100%; height: auto;" alt="Title" data-appbuilder-object="image"
class="" title="Main Screen">
<div class="text_item" data-appbuilder-object="text" style="text-align: center;">Welcome to the Tutorials App.
<br>Please select an option.</div>
</div>
</div>
<div class="panel" title="About" data-nav="nav_0" id="page_1" data-appbuilder-object="page"
style="width: 100%; height: 100%;" data-header="header_0" data-footer="default_footer">
<div class="container" style="width: 100%; height: 100%;" data-appbuilder-object="container">
<img src="images/intel.jpg" style="width: auto; height: 40%; display: block; margin-left: auto; margin-right: auto;"
alt="Title" data-appbuilder-object="image" class="" title="About">
<div class="text_item" data-appbuilder-object="text" style="text-align: center;">The about screen
<br>about
</div>
</div>
</div>
<div class="panel" title="Tutorials" data-nav="nav_0" id="page_2" data-appbuilder-object="page"
style="" data-header="header_0" data-footer="default_footer">
<ul class="list" data-appbuilder-object="list" style="">
<li><a href="#page_3">HTML Tutorial</a>
</li>
<li><a href="#page_4">CSS Tutorial</a>
</li>
<li><a href="#page_5">Geolocation</a>
</li>
</ul>
</div>
<div class="panel" title="HTML Tutorial" data-nav="nav_0" id="page_3" data-appbuilder-object="page"
style="" data-header="header_0" data-footer="footer_1">
<div class="container" style="width: 100%; height: 100%; position: relative;" data-appbuilder-object="container">
<img src="images/intel.jpg" style="width: 100%; margin-top: 100px;" alt="Title"
data-appbuilder-object="image" class="" title="intel">
<div class="text_item" data-appbuilder-object="text" style="text-align: center;">Use HTML like this.
<iframe width="100%" src="//www.youtube.com/embed/9gTw2EDkaDQ" frameborder="0"
allowfullscreen=""></iframe>
</div>
</div>
</div>
<div class="panel" title="CSS Tutorial" data-nav="nav_0" id="page_4" data-appbuilder-object="page"
style="width: 100%;" data-header="header_0" data-footer="footer_2">
<div class="container" style="width: 100%; height: 100%; position: relative;" data-appbuilder-object="container">
<img src="images/intel.jpg" style="width: 100%; margin-top: 100px;" alt="Title"
data-appbuilder-object="image" class="" title="intel1">
<div class="text_item" data-appbuilder-object="text" style="text-align: center;">Use CSS like this</div>
</div>
</div>
<div class="panel" title="Geolocation" data-nav="nav_0" id="page_5" data-appbuilder-object="page"
style="width: 100%;" data-header="header_0" data-footer="footer_3">
<div class="container" style="width: 100%; height: 100%;" data-appbuilder-object="container">
<img src="images/intel.jpg" style="width: 100%; margin-top: 100px;" alt="Title"
data-appbuilder-object="image" class="" title="intel2">
<div class="text_item" data-appbuilder-object="text" style="text-align: center;">Find Geolocation here</div>
<a class="button" href="#page_7" style="width: 100%;" data-appbuilder-object="button"
data-transition="slide" id="button_8" onclick="get_location();">Geolocation</a>
</div>
</div>
<div class="panel" title="Display Location" data-nav="nav_0" id="page_7" data-appbuilder-object="page"
style="" data-footer="default_footer" data-header="header_0"></div>
<div id="navbar" class="footer">
<footer><a href="#main" class="icon home" style="">Home</a><a href="#page_1"
class="icon info" style="">About</a><a href="#page_2" class="icon star"
style="">Tutorials</a><a href="#page_7" class="icon key" style="">Resources</a>
</footer>
</div>
</div>
<div id="navbar" class="footer">
<footer><a href="#main" class="icon home" style="">Home</a><a href="#page_1" class="icon info"
style="">About</a><a href="#page_2" class="icon star" style="">Tutorials</a>
<a
href="#page_7" class="icon key" style="">Resources</a>
</footer>
</div>
<header id="header_0" data-appbuilder-object="header">
<h1 class="apptitle"> Tutorials App</h1>
</header>
<nav id="nav_0" data-appbuilder-object="nav">
<h1>Side Menu</h1>
</nav>
<footer id="footer_1" data-appbuilder-object="footer"><a href="#page_1" class="icon left">Previous</a><a href="#main" class="icon home">Home</a>
<a href="#page_4" class="icon right">Next</a>
</footer>
<footer id="footer_2" data-appbuilder-object="footer"><a href="#page_3" class="icon left">Previous</a><a href="#main" class="icon home">Home</a>
<a href="#page_5" class="icon right">Next</a>
</footer>
<footer id="footer_3" data-appbuilder-object="footer"><a href="#page_4" class="icon left">Previous</a><a href="#main" class="icon home">Home</a>
<a href="#page_7" class="icon right">Next</a>
</footer>
<footer id="default_footer" data-appbuilder-object="footer"><a href="#main" class="icon home">Home</a><a href="#page_1" class="icon info">About</a>
<a href="#page_2" class="icon star">Tutorials</a><a href="#page_7" class="icon key">Resources</a>
</footer>
</body>
</div>
</html>
Any help would be appreciated, it doesn't seem that this Intel XDK/App Developer is a straight forward way of using HTML5. Is it possible to fix this without having delete all of the affected headers and footers or without having to redo all of the navigation links?
I have searched for this and so far no plausible answers have come up.
Inside you "Display Location" panel (id="page_7"), you have a second "navbar" <DIV>, remove that <DIV>, then it should work correctly, not sure how this happened, but it should not be there.
来源：https://stackoverflow.com/questions/25171972/html5-css3-footers-not-aligned-appearing-over-headers-issue-with-intel-xdk