HTML5 / CSS3页脚不匹配/出现在头部问题与英特尔XDK [英] HTML5/CSS3 footers not aligned/appearing over headers-issue with Intel XDK
问题描述
我目前正在使用从intel xdk / app设计器中拖放来创建应用程序。该应用程序的想法是为用户创建基本教程，并使用地理定位工具。我创建的应用程序大多是通过使用应用程序从英特尔网站初学者教程。该教程很好地用于做基本操作，如在页面之间添加图像和导航。然而，当我添加了地理位置，程序，这是温顺和冻结在最好的时间，删除了几页。我已经将代码复制到word，当我复制代码回来尝试和恢复页面，应用程序已经开始显示页眉顶部的页脚。头部和令人讨厌的，甚至仍然在底部的脚部本身都被压缩到屏幕的一侧，并且不是如它们应该均匀地分布。到目前为止，我使用的代码如下。
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>
任何帮助将不胜感激，似乎这个英特尔XDK /使用HTML5的前进方式。是否可以修复此问题，而不必删除所有受影响的页眉和页脚，或者不必重做所有导航链接？
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?
我已经搜索过这个，
推荐答案
显示位置面板（ id =page_7），您有第二个navbar< DIV> < DIV> ，那么它应该能正常工作，不知道如何发生，但不应该在那里。
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.
这篇关于HTML5 / CSS3页脚不匹配/出现在头部问题与英特尔XDK的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
