Also, you'd better not use floating positioning (easier on the very short
term, a lot more complicated in mid-long term).
Michel Belleville
2009/11/12 Andrei Eftimie <k3liu...@gmail.com>
> This is a CSS issue, not really related to jQuery.
>
> Do something like this in your CSS file:
>
> /* Forcing the ul to take not of its floated children. */
> #tabs ul { display: inline-block; overflow: hidden; }
> #tabs ul { display: block; }
>
> /* Floating the children */
> #tabs li { float: left; }
>
>
> 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>
> >
> >
>
>
>
> --
> Andrei Eftimie
> http://eftimie.com
> +40 758 833 281
>
> Punct
> http://designpunct.ro
>
