In reply to: Align left

#40668

Ok, I’ve managed to find a tabbed browsing template which works with divs instead of <ul>‘s

Divs are not automatically formatted in the theme’s css, so it works.

In reply to: Align left

#40667

Here is the cde I want to add to the member-header.php file:

<style type="text/css" media="screen">

.menu-tabs { padding: 0; clear: both; }

.menu-tabs li { display: inline; }

.menu-tabs li a { background: #ccf; padding: 10px; float:left; border-right: 1px solid #ccf; border-bottom: none; text-decoration: none; color: #000; font-weight: bold;}

.menu-tabs li.active a { background: #eef; }

.content-tabs { float: left; clear: both; border: 1px solid #ccf; border-top: none; border-left: none; background: #eef; padding: 10px 20px 20px; width: 400px; }

</style>

<script src="http://www.martinbeaulne.com/kinocontact/wp-content/themes/graphene/buddypress/members/single/tab/jquery.js" type="text/javascript" charset="utf-8"></script>

<script src="http://www.martinbeaulne.com/kinocontact/wp-content/themes/graphene/buddypress/members/single/tab/jquery.tabify.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">

// <![CDATA[



$(document).ready(function () {

$('#menu-tabs').tabify();

$('#menu-tabs2').tabify();

});



// ]]>

</script>

AND

<ul id="menu-tabs" class="menu-tabs">



<li class="active"><a href="#description">Limerick One</a></li>

<li><a href="#usage">Limerick Two</a></li>

<li><a href="#download">Limerick Three</a></li>

</ul>

</div>

<div id="description" class="content-tabs">

<h2>Limerick One</h2>

<p>

The limerick packs laughs anatomical<br />

In space that is quite economical,<br />



But the good ones I've seen<br />

So seldom are clean,<br />

And the clean ones so seldom are comical.

</p>

</div>

<div id="usage" class="content-tabs">

<h2>Limerick Two</h2>

<p>



Let my viciousness be emptied,<br />

Desire and lust banished,<br />

Charity and patience,<br />

Humility and obedience,<br />

And all the virtues increased.

</p>

</div>



<div id="download" class="content-tabs">

<h2>Limerick Three</h2>

Hickere, Dickere Dock,<br />

A Mouse ran up the Clock,<br />

The Clock Struck One,<br />

The Mouse fell down,<br />



And Hickere Dickere Dock.

</div>

There is, somehow, a css formatting my <ul> incorrectly in the graphene theme.

I am editing manually the member-header.php file.

Here is the link to the page: http://martinbeaulne.com/kinocontact/members/admin/

As you can see, the tabbed browsing is aligned right, and the first tab is the rightest, the last tab is the leftest… which is strange.