This is a css question rather than jQuery, though the answer goes as follow :
1. you're using an ul with li inside 2. ul work as block elements containing li which are block elements too 3. block elements pile up on top of one another unless told otherwise What you need is made them act as inline, the best way (a bit harder in the short term, a lot easier in the long term) is to use inline-block positioning, and hack IE (remember, no matter what you do in css, you'll probably have to hack IE). This may help : http://homepage.ntlworld.com/spartanicus/ie_block_level_element_inline-block_hack.htm Michel Belleville 2009/11/12 AdyLim <lim...@gmail.com> > Hi there, > > I'm just starting to learn jquery and trying to implement tabs onto my > aspx page...The problem is that the tabs are showing up one on top of > another....how do i get the tabs to line up in a row? I'm using > jquery 1.2.6...all the js's (ui.core.js, ui.tabs.js) are included in > my masterpage. > > any help is appreciated! > thanks! > > my code follows: > > ASPX: > > <%@ Page Title="" Language="C#" MasterPageFile="~/Master.Master" > AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" > Inherits="ctc3.test.WebForm1" %> > <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server"> > </asp:Content> > <asp:Content ID="Content2" ContentPlaceHolderID="phEmailGoalsheet" > runat="server"> > </asp:Content> > <asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder1" > runat="server"> > > > <script type="text/javascript"> > $(function() { > $("#tabs").tabs(); > }); > </script> > > > <div id="tabs" class="ui-tabs-nav"> > > > <ul> > <li><a href="#tabs-1">Nunc tincidunt</a></li> > <li><a href="#tabs-2">Proin dolor</a></li> > <li><a href="#tabs-3">Aenean lacinia</a></li> > </ul> > <div id="tabs-1"> > > <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo > a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. > Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. > Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. > Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam > sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. > Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci > tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p> > </div> > <div id="tabs-2"> > <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio > metus > gravida ante, ut pharetra massa metus id nunc. Duis scelerisque > molestie turpis. Sed fringilla, massa eget luctus malesuada, metus > eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet > fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. > Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. > Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra > nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas > feugiat, tellus pellentesque pretium posuere, felis lorem euismod > felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et > purus.</p> > </div> > <div id="tabs-3"> > <p>Mauris eleifend est et turpis. Duis id erat. Suspendisse > potenti. > Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, > eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent > taciti sociosqu ad litora torquent per conubia nostra, per inceptos > himenaeos. Fusce sodales. Quisque eu urna vel enim commodo > pellentesque. Praesent eu risus hendrerit ligula tempus pretium. > Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p> > <p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra > at, > semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra > justo vitae neque. Praesent blandit adipiscing velit. Suspendisse > potenti. Donec mattis, pede vel pharetra blandit, magna ligula > faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. > Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi > lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean > vehicula velit eu tellus interdum rutrum. Maecenas commodo. > Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus > hendrerit hendrerit.</p> > </div> > </div> > > <!-- End demo --> > > </asp:Content> > >
