[SOLVED] Tab Position Righ

Maska · #1 Oct 12th, 2007, 10:47

I have a slideshow tab content script on my page at http://www.jocurigratuit.ro/ on the left-top on the page and like you will see, the "Tabs" buttons are displayed on the top of the slideshow content.
My wish is to change the position of tabs to right side and vertically displayed too like in this picture:

Don`t worry about the size of the tabs..i will fix it after...I just need this position.
My Code i use is:

Code: Select all

<div id="pettabs" class="indentmenu">
<ul>
<li><a href="#" rel="dog1" class="selected">Tab 1</a></li>
<li><a href="#" rel="dog2">Tab 2</a></li>
<li><a href="#" rel="dog3">Tab 3</a></li>
<li><a href="#" rel="dog4">Tab 4</a></li>
<li><a href="#" rel="dog5">Tab 5</a></li>
</ul>
<br style="clear: left" />
</div>

<div style="border:1px solid red; width:290px; height: 192px; margin-left: 0px; margin-bottom:1em">

<div id="dog1" class="tabcontent">
<a href="http://www.jocurigratuit.ro/jocuri/427/Mascot-Kombat.html"><img src="http://www.jocurigratuit.ro/1m.gif" border="0"></a>

</div>

<div id="dog2" class="tabcontent">
<a href="http://www.jocurigratuit.ro/jocuri/436/Combo-Card-Cazino.html"><img src="http://www.jocurigratuit.ro/3m.gif" border="0"></a>
</div>

<div id="dog3" class="tabcontent">
<a href="http://www.jocurigratuit.ro/jocuri/412/Fifa-2007.html"><img src="http://www.jocurigratuit.ro/4m.gif" border="0"></a>
</div>

<div id="dog4" class="tabcontent">
<a href="http://www.jocurigratuit.ro/jocuri/252/Sherwood-MMORPG.html"><img src="http://www.jocurigratuit.ro/5m.gif" border="0"></a>
</div>

<div id="dog5" class="tabcontent">
<a href="http://www.jocurigratuit.ro/jocuri/292/FFX-Racing.html"><img src="http://www.jocurigratuit.ro/2m.gif" border="0"></a>
</div>
</div>


<script type="text/javascript">

var mypets=new ddtabcontent("pettabs")
mypets.setpersist(false)
mypets.setselectedClassTarget("link")
mypets.init(5000)

</script>

My CSS code:

Code: Select all

.indentmenu{
font: bold 13px Arial;
width: 100%; /*leave this value as is in most cases*/
}

.indentmenu ul{
margin: 0;
padding: 0;
float: left;
/* width: 80%; width of menu*/
border-top: 1px solid red; /*red border*/
background: black url(indentbg.gif) center center repeat-x;
}

.indentmenu ul li{
display: inline;
}

.indentmenu ul li a{
float: left;
color: white; /*text color*/
padding: 5px 11px;
text-decoration: none;
border-right: 1px solid red; /*red divider between menu items*/
}

.indentmenu ul li a:visited{
color: white;
}

.indentmenu ul li a.selected{
color: white !important;
padding-top: 6px; /*shift text down 1px*/
padding-bottom: 4px;
background: black url(indentbg2.gif) center center repeat-x;
}


.tabcontentstyle{ /*style of tab content oontainer*/
border: 1px solid red;
width: 290px;
margin-bottom: 1em;
padding: 0px;
}

.tabcontent{
display:none;
}

@media print {
.tabcontent {
display:block !important;
}
}

Also, the position is different on IE and Mozilla and i want to fix that too...
Maybe it is not a big deal but i will be profoundly tahnkful anyone help me!

P.S. The full script are here

Maska · #2 Oct 12th, 2007, 16:09

What`s wrong with my post? Nobody answer me yet?

VanessaJW · #3 Oct 12th, 2007, 16:21

Nothing's wrong with your post Maska - you only asked the question a few hours ago! Some questions get answered quickly, others can take a day or two, just depends who's around and who knows the answer! Hang tight, I'm sure you'll get an answer to your question soon

Maska · #4 Oct 12th, 2007, 16:33

Quote:

Originally Posted by VanessaJW

Nothing's wrong with your post Maska...

It was a joke...

Anyway, on the first page CSS Forum , my post it`s only one with no replies, except yours and mine

...All of them are posted today...
And my friend Rakuli wich allawys get me the right answer, appears to be offline...

Well..i will wait

Thanks Vanessa...

nashultz07 · #5 Oct 13th, 2007, 00:06

Assuming you already know how to vertically align the tabs. All I see is maybe setting the id "pettabs" to float right of the slideshow by adding the code

Code: Select all

float: right;

in the css where you have the id "pettabs."

Hope this helps,
nashultz07

Lchad · #6 Oct 13th, 2007, 00:16

And delete the display:inline here:

Code: Select all

.indentmenu ul li{
display: inline;


}

Maska · #7 Oct 13th, 2007, 07:49

Quote:

Originally Posted by nashultz07

Assuming you already know how to vertically align the tabs...

I really don`t know how to vertically align the tabs....This is was my question in this theard...
Anyway thanks for your replay but

still don`t help me.
I make the changes you suggest me but still don`t work like i wish...
Maybe this link will help you (or other) to...help me

There is some documentation of the full script on the bottom of the page and i think this title ca solve my problem but i don`t know how must be used: "Dynamically selecting a tab anywhere on your page" on the bottom of the page.
My chose is the last Demo #3 like you see...
All the best!

Maska · #8 Oct 13th, 2007, 07:52

Quote:

Originally Posted by Lchad

And delete the display:inline here:

Code: Select all

.indentmenu ul li{
display: inline;


}

This is was my first try to make the changes but nothing change on the apperance...
Thanks for your replay Lchad.
Maybe this link will help you (or other) to...help me

There is some documentation of the full script, on the bottom of the page and i think this title ca solve my problem but i don`t know how must be used: "Dynamically selecting a tab anywhere on your page" on the bottom of the page.
My chose is the last Demo #3 like you see...
All the best!

Rakuli · #9 Oct 13th, 2007, 08:16

Hi maska, lol . I don't think I get everything right.

I think you might to be able to do something like

HTML: Select all

<style type="text/css">

#pettabs
{
    width: 85px;
    float: right;
    padding: 0px;
}
#pettabs ul li
{
    display: block;
    margin: 0px;
    width: 100%;
    padding: 0px;
    height: 50px;
}
</style>

<div id="pettabs" class="indentmenu">
<ul>
<li><a href="#" rel="dog1" class="selected">1</a></li>
<li><a href="#" rel="dog2">2</a></li>
<li><a href="#" rel="dog3">3</a></li>
<li><a href="#" rel="dog4">4</a></li>

<li><a href="#" rel="dog5">5</a></li>
</ul>
<br style="clear: left">
</div>

<div style="border:1px solid red; width:290px; height: 192px; margin-left: 0px; margin-bottom:1em; float: right;">

I'm not sure if that would work but after looking at the script on Dynamic Drive I think it should.

Cheers

Maska · #10 Oct 13th, 2007, 14:55

Quote:

Originally Posted by Rakuli

Hi maska, lol . I don't think I get everything right.

I think you might to be able to do something like...

It really works but i need to fix some few details about the positions tabs.
Thanks a lot Rakuli

Best Regards!

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
thumbnails position	mars	Flash & Multimedia Forum	0	Apr 21st, 2008 16:41
[SOLVED] IE 7 background-position problem	catalystmediastudios	Web Page Design	5	Nov 15th, 2007 20:26
How to position a table	trayc	Web Page Design	4	Sep 14th, 2007 08:34
Nav position	timmytots	Web Page Design	0	Jun 9th, 2007 15:44
Help with position	tunafishy	Web Page Design	1	Jul 26th, 2005 03:14

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
[SOLVED] Tab Position Righ