How to display List elements horizontally(using CSS probably) in a JQT

Kobojunkie · Jun 29, 2011

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>

<link rel="stylesheet" href="clock.css" type="text/css" media="screen" charset="utf-8" />

<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-color

urple;}

</style>
<script type="text/javascript">
$(document).ready(function () {
var ulhtml = "<ul>";
$.getJSON("

http://twitter.com/status/user_timeline/AJEnglish.json?count=20&include_entities=true&callback=?",

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>

Kobojunkie · Jun 29, 2011

Here is a link to the image of the page. If you look down to the far bottom right of the image, you will see the list elements, in blue, all bunched up in that corner, instead of spreading out over the div.

http://i55.tinypic.com/23h1stk.jpg

Kobojunkie · Jun 29, 2011

Better image

http://i56.tinypic.com/2ivcg7q.jpg

vacunita · Jun 30, 2011

Without knowing what the jqtouch CSS is applying its hard to say. My guess would be that its floating the elements , in which case adding a clearing element or setting the overflow of the parent div to something should resolve it.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.

http://behindtheweb.blogspot.com/

Kobojunkie · Jun 30, 2011

I added the suggestions but code does not seem to have changed much, or do I have this wrong somehow?

<div id="toolbarbottom" class="toolbar" style="position: fixed; clear:both; overflow:visible; bottom: 0px; left: 0px;
width: 100%;">
<ul>
<li style="display:inline; float: left; list-style-type: none;" id="active"><a id="current" href="#add" class="button">News</a></li>
<li style="display:inline; float: left; list-style-type: none;" ><a href="#Updates" class="button">Updates</a> </li>
<li style="display:inline; float: left; list-style-type: none;" ><a href="#Contact" class="button">Contact Us</a></li>
<li style="display:inline; float: left; list-style-type: none;" ><a href="#Website" class="button">Website</a> </li>
<li style="display:inline; float: left; list-style-type: none;" ><a href="#Refresh" id="#Refresh" class="button">Refresh</a> </li>
</ul>

</div>

vacunita · Jun 30, 2011

try overflow:hidden or auto instead.

And the clearing element needs to be an actual element inside the div.

try:

Code:

<div>
<ul>...
</ul>
<p style="clear:both;"></p>

If this still doesn't work, we'd need to see a live version, or at the very least the CSS from the toolbar class, and anything else that may be applying to it.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.

http://behindtheweb.blogspot.com/

Kobojunkie · Jun 30, 2011

I copy and pasted all of the JQTouch CSS and mine on there

http://jsfiddle.net/kjb85/1/

vacunita · Jul 1, 2011

Lots of things going on there. Its hard to say what's really affecting the wrapper. It looks like either your <li> elements or your <ul> element are positioned absolutely as well, which takes them out of the normal flow. This means they no longer affect their parent in any way.

Here's an example If I set the list to be absolutely positioned the wrapper won't wrap no matter what I do. If I remove the positing from the inner elements the absolutely positioned wrapper wraps. I would suggest you don't abuse the absolute positioning like that. Almost everything is positioned absolutely. And you should never need to do that except in very specific circumstances.

As a simpler example this should work.

HTML:

<div class="wrapper">
<p>Some text here</p>
<ul><li>Item 1</li><li>Item 1</li><li>Item 1</li><li>Item 1</li></ul>
</div>

CSS:

.wrapper{
background-color:#464646;
border:1px solid red;
overflow:hidden;
}

.wrapper ul{
list-style-type:none;
}

.wrapper ul li{

float:left;
width:120px;
height:30px;
line-height:30px;
border:1px outset #686868;
}

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.

http://behindtheweb.blogspot.com/

Kobojunkie · Jul 4, 2011

thanks, that did it. I changed the default CSS setting for the buttons and it worked. Thanks

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

How to display List elements horizontally(using CSS probably) in a JQT

Kobojunkie

Programmer

Kobojunkie

Programmer

Kobojunkie

Programmer

vacunita

Programmer

Kobojunkie

Programmer

vacunita

Programmer

Kobojunkie

Programmer

vacunita

Programmer

Kobojunkie

Programmer

Similar threads

Part and Inventory Search

Sponsor