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!

  • Congratulations TouchToneTommy on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

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

Status
Not open for further replies.

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-color:purple;}

</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>
 
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.

 
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.
 
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>
 
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.
 
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.
 
thanks, that did it. I changed the default CSS setting for the buttons and it worked. Thanks
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top