Sorry for thread-hijacking, but why would you say that floats are complicated?
Right now (as in current browser implementations) floats work really reliably.
(with 1 small IE bug with an easy fix)
inline-block needs to be hacked in multiple browsers
2009/11/12 Michel Belleville <michel.bellevi...@gmail.com>:
> 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
>
>
--
Andrei Eftimie
http://eftimie.com
+40 758 833 281
Punct
http://designpunct.ro
