Kobojunkie
Programmer
- May 28, 2008
- 16
I have a <'div'> element, containing a <'ul'> with four <'li'> elements. What I need to do is set the <'li'> to display in horizontal orientation, and within the <'div'>. When I apply the JTouch class="toolbar" to my <'div'>, what I see happening however is the the <'li'> elements do not even appear within the perimeter of the <'ul'> and both the <'ul'> and <'li'> seem to move outside of the parent <'div'>. How can I fix this situation please?
<html>
<head>
<style type="text/css" media="screen">
@import "../../jqtouch/jqtouch.css";
</style>
<style type="text/css" media="screen">
@import "../../themes/apple/theme.css";
</style>
<script src="../../jqtouch/jquery-1.4.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../../jqtouch/jqtouch.js" type="application/x-javascript" charset="utf-8"></script>
<!--
Tweet consumption in progress:
-->
<link rel="stylesheet" href="clock.css" type="text/css" media="screen" charset="utf-8" />
<!--
Initialization:
-->
<script type="text/javascript" charset="utf-8">
$.jQTouch({
icon: 'icon.png',
startupScreen: 'img/startup.png'
});
</script>
<style type="text/css">
.toolbar2
{
background: green;
height: 30;
}
#toolbarbottom ul li{float:left; padding:3px 5px;}
#toolbarbottom ul {list-style-type:none;background-color:Green;background-colorurple;}
</style>
<script type="text/javascript">
$(document).ready(function () {
var ulhtml = "<ul>";
$.getJSON(" function (data) {
$.each(data, function (i, item) {
ulhtml += "<li class='arrow'>" + item.text + "</li>";
});
ulhtml += "</ul>";
$("#tweets").html(ulhtml);
});
});
</script>
</head>
<body>
<div id="jqt">
<div id="home">
<div id="toolbartop" class="toolbar">
<h2>
Tweet </h2>
<a href="#add" class="button"> +</a>
</div>
<h2>
Most Recent Tweet</h2>
<div id="tweets">
</div>
<div id="toolbarbottom" class="toolbar" style="position: fixed; bottom: 0px; left: 0px;
width: 100%;">
<div style="background-color:Black;">
<ul >
<li id="active"><a id="current" href="#add" class="button">News</a></li>
<li><a href="#add" class="button">Updates</a> </li>
<li><a href="#add" class="button">Contact Us</a></li>
<li><a href="#add" class="button">Website</a> </li>
</ul>
</div>
</div>
<div class="info">
This is a demo for jQTouch.
</div>
</div>
<div id="info">
<div class="toolbar">
<h1>
About</h1>
<a href="#add" class="cancel">Cancel</a>
</div>
<div class="info">
This is a demo for jQTouch.
</div>
</div>
</div>
</body>
</html>
<html>
<head>
<style type="text/css" media="screen">
@import "../../jqtouch/jqtouch.css";
</style>
<style type="text/css" media="screen">
@import "../../themes/apple/theme.css";
</style>
<script src="../../jqtouch/jquery-1.4.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../../jqtouch/jqtouch.js" type="application/x-javascript" charset="utf-8"></script>
<!--
Tweet consumption in progress:
-->
<link rel="stylesheet" href="clock.css" type="text/css" media="screen" charset="utf-8" />
<!--
Initialization:
-->
<script type="text/javascript" charset="utf-8">
$.jQTouch({
icon: 'icon.png',
startupScreen: 'img/startup.png'
});
</script>
<style type="text/css">
.toolbar2
{
background: green;
height: 30;
}
#toolbarbottom ul li{float:left; padding:3px 5px;}
#toolbarbottom ul {list-style-type:none;background-color:Green;background-colorurple;}
</style>
<script type="text/javascript">
$(document).ready(function () {
var ulhtml = "<ul>";
$.getJSON(" function (data) {
$.each(data, function (i, item) {
ulhtml += "<li class='arrow'>" + item.text + "</li>";
});
ulhtml += "</ul>";
$("#tweets").html(ulhtml);
});
});
</script>
</head>
<body>
<div id="jqt">
<div id="home">
<div id="toolbartop" class="toolbar">
<h2>
Tweet </h2>
<a href="#add" class="button"> +</a>
</div>
<h2>
Most Recent Tweet</h2>
<div id="tweets">
</div>
<div id="toolbarbottom" class="toolbar" style="position: fixed; bottom: 0px; left: 0px;
width: 100%;">
<div style="background-color:Black;">
<ul >
<li id="active"><a id="current" href="#add" class="button">News</a></li>
<li><a href="#add" class="button">Updates</a> </li>
<li><a href="#add" class="button">Contact Us</a></li>
<li><a href="#add" class="button">Website</a> </li>
</ul>
</div>
</div>
<div class="info">
This is a demo for jQTouch.
</div>
</div>
<div id="info">
<div class="toolbar">
<h1>
About</h1>
<a href="#add" class="cancel">Cancel</a>
</div>
<div class="info">
This is a demo for jQTouch.
</div>
</div>
</div>
</body>
</html>