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
