CODEWITHSUNDEEP
cssyui
jimg
jimg

Reputation: 484

How do I make YUI-tabs right aligned?

For the following example:

http://developer.yahoo.com/yui/examples/tabview/frommarkup_clean.html

I would like to make the tabs right aligned and still retain the current order.

I'm certain its something simple - just too close to it to see the solution.

Upvotes: 0

Views: 1905

Answers (4)

Mohika
Mohika

Reputation: 1

HTML Code:

<div id="demo" class="yui-navset">
<div class ="tabs-nav" >
    <ul class="yui-nav" >
        <li><a href="#tab1"><em>Tab One Label</em></a></li>
        <li class="selected"><a href="#tab2"><em>Tab Two Label</a></li>
        <li><a href="#tab3"><em>Tab Three Label</em></a></li>
    </ul>  
</div>          
    <div class="yui-content">
        <div id="tab1"><p>Tab One Content</p></div>
        <div id="tab2"><p>Tab Two Content</p></div>
        <div id="tab3"><p>Tab Three Content</p></div>
    </div>
</div>

CSS:

div.tabs-nav {height: 45px;} /* important to set div's height so your tabs navigation does not fall in to the tabs content */
ul.yui-nav { float: right;}
ul.yui-nav li { float: left;}

Upvotes: 0

MK_Dev
MK_Dev

Reputation: 3333

What da5id and Kevin Le said.

In the CSS file, add this line: ul.yui-nav { text-align:right; }

It's the same solution.

Upvotes: 0

Kevin Le - Khnle
Kevin Le - Khnle

Reputation: 10857

Off the top my head, how about:


<div id="demo" class="yui-navset">
    <ul class="yui-nav" style="text-align:right;">
        <li><a href="#tab1"><em>Tab One Label</em></a></li>
        <li class="selected"><a href="#tab2"><em>Tab Two Label</a></li>
        <li><a href="#tab3"><em>Tab Three Label</em></a></li>
    </ul>            
    <div class="yui-content">
        <div id="tab1"><p>Tab One Content</p></div>
        <div id="tab2"><p>Tab Two Content</p></div>
        <div id="tab3"><p>Tab Three Content</p></div>
    </div>
</div>

Upvotes: 1

da5id
da5id

Reputation: 9136

Have you tried applying "text-align: right;" to the container div :

<div id="demo" class="yui-navset">

?

Upvotes: 0

Related Questions