SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Jun 2011
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    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?

    jQTouch &mdash; jQuery plugin for mobile web development

    Edit this Fiddle - jsFiddle - Online Editor for the Web (JavaScript, MooTools, jQuery, Prototype, YUI, Glow and Dojo, HTML, CSS)

    Code:
    <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("http://twitter.com/status/user_timeline/AJEnglish.json?count=20&include_entities=true&amp;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>

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,687
    Mentioned
    100 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by kobojunkie View Post
    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'>.
    The normal way to do that is to use CSS to set the li elements to display inline.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Member
    Join Date
    Jun 2011
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I did add that to the code if you look at what I have there. But it seems that is not enough in this case. And I would appreciate any suggestions on how to solve this please.

    Here is a link to a picture of the problem

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

    On the bottom far right of the image, you can see my horizontal list elements all clumped in the corner.

  4. #4
    SitePoint Member
    Join Date
    Jun 2011
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is a part of the CSS being used. I am not certain why it did not show up above.

    #toolbarbottom ul li
    {
    display:inline;
    float: left;
    list-style-type: none;
    padding: 3px 5px;
    }


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •