Newbie - Help with a navigation menu
Hi
I'm relatively new to the whole mobile development area so apologies for this. I'm having a small problem with a sample application I'm just trying to get up and running. In the code below you will see I'm trying to make a navigation menu for the homepage of my application however when its run in the emulator/on any browser window the menu buttons rendered will end up on the side of the page.
What I am ultimately trying to do is to get the 4 buttons centered and made bigger so that each button will take up a quarter of the page each. I would like if there was some space left between each too i.e. that the button will have a margin top and bottom and at either side as a means of separating it form all the other elements.
It seems like a pretty basic question to ask and the code is plain and simple but I'd seriously appreciate all the help, I've been looking everywhere trying to find an answer and when I couldn't I thought Id hit the forums! We all have to start our experiences somewhere! Thanks in advanced for the help!!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Sample Application</title>
<link rel="stylesheet" href="themes/deal.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile.structure-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/
ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<style>
img.fullscreen {
max-height: 100%;
max-width: 100%;
}
</style>
</head>
<body>
<div data-role="page" id="photos">
<div id="header">
<header data-role="header">
<h1> Sample Application</h1>
</div>
<article data-role="content">
<nav data-role="navbar">
<table>
<tr>
</tr>
<tr>
<td><a href="Menu1.html" data-icon="star" data-fullscreen="true" data-position="fixed">Menu1</a></td>
<td><a href="Menu2.html" data-icon="grid" data-fullscreen="true" data-position="fixed">Menu2</a></td>
</tr>
<tr>
</tr>
<tr>
<td><a href="Menu3.html" data-icon="arrow-d" data-fullscreen="true" data-position="fixed">Menu3</a></td>
<td><a href="Menu4.html" data-icon="gear" data-fullscreen="true" data-position="fixed">Meu4</a><td>
</tr>
</table>
</nav>
</article>
</body>
</html>