jQuery Coding issue

Hey guys.
I have recently been having problems utilizing jQuery on my test site.
I took the codes from jQuery.com > Tutorials and I wanted to use a tabbed menu.

So here is the problem:
After I insert the CSS code into my stylesheet, it formats my forum and makes it thin. You also can't scroll or see the categories.

Next, I insert the .js script code and the html formatting code into the index_body template.
After I insert this code, pretty much everything on the forum, except for the navigation bar, disappears.
The jQuery tabbed menu works, but the formatting for my forum is all messed up, and yeah; everything is gone.

I don't know what I am doing wrong, but I don't think I fully understand where I need to insert the codes.

All in all:
-How can I make it so that the CSS code for the jQuery feature doesn't interfere with the formatting of my forum?
-Where Do I insert the html code and the .js code into my templates?

Here is the link to my forum so you guys can see what is going on.
http://testpawn.forumotion.com/forum.htm

Thanks alot,
eco

Hello,

Can you link me to the code that you are using for tabbed menu?
Where exactly you want the menu to be?

ankillien wrote:Hello,

Can you link me to the code that you are using for tabbed menu?
Where exactly you want the menu to be?

Okay, so Jalokim has helped me out, but I'm still in a bit of a tight squeeze.
If you go to: http://testpawn.forumotion.com/index.htm, you can see where I stand at the moment.

The javascript code is:

Code:

<script type="text/javascript" src="http://helppawn.webs.com/tabs.js"></script>


Now, he told me to put this code^ in the overall header template, but it doesn't work when I put it there. It does work, however, when I put it after the html markup code.


html markup code: (Jalokim erased some conflicting classes from this code)
I put this in index_body template at the beginning after the {JAVASCRIPT} part.
I don't think I was supposed to do that, though.

Code:

<a id="logo" title="Go to yensdesign.com!" href="http://www.yensdesign.com"><img src="css/images/logo.jpg" alt="yensdesign.com" /></a>
  <div id="container">
      <ul class="menu">
        <li id="news" class="active">News</li>
        <li id="tutorials">Tutorials</li>
        <li id="links">Links</li>
      </ul>
      <span class="clear"></span>
      <div class="content news">
        <h1>Latest News</h1>
        <ul>
            <li><img src="css/images/bullet.gif" alt="-" /> Boobles: First theme on Themeforest released!</li>
            <li><img src="css/images/bullet.gif" alt="-" /> Cokidoo becomes official</li>
            <li><img src="css/images/bullet.gif" alt="-" /> plusmusica.com private beta invitations</li>
            <li><img src="css/images/bullet.gif" alt="-" /> yensdesign.com 2.0 launched!</li>
        <ul>
      </div>
      <div class="content tutorials">
        <h1>Latest Tutorials</h1>
        <ul>
            <li><img src="css/images/bullet.gif" alt="-" /> Top 10 free fonts for professional design</li>
            <li><img src="css/images/bullet.gif" alt="-" /> Create an amazing music player using mouse gestures &amp; hotkeys</li>
            <li><img src="css/images/bullet.gif" alt="-" /> Boobles: First theme on Themeforest released!</li>
            <li><img src="css/images/bullet.gif" alt="-" /> Creating AJAX websites based on anchor navigation</li>
            <li><img src="css/images/bullet.gif" alt="-" /> Fast Tip: Create your personal blog to promote your self</li>
            <li><img src="css/images/bullet.gif" alt="-" /> How to make a brilliant mysql forum database from scratch</li>
        <ul>
      </div>
      <div class="content links">
        <h1>You may visit</h1>
        <ul>
            <li><img src="css/images/bullet.gif" alt="-" /> <a href="http://www.plusmusica.com">www.plusmusica.com</a> - Online jukebox!</li>
            <li><img src="css/images/bullet.gif" alt="-" /> <a href="http://www.cokidoo.com">www.cokidoo.com</a> - Awesome startup! :)</li>
            <li><img src="css/images/bullet.gif" alt="-" /> <a href="http://www.cokidoo.com">www.pixelartgames.com</a> - Do you want pixel art games? ;)</li>
            <li><img src="css/images/bullet.gif" alt="-" /> <a href="http://www.dmsconsulting.es">www.dmsconsulting.es</a> - Great guys</li>
        <ul>
      </div>
  </div>


I need to know where to insert this^ code.


And finally, the CSS code: (erased conflicting classes)
Which obviously goes into the CSS.

Code:

/******* LOGO *******/
#logo{
  margin-top: 1em;
  display: block;
}
/******* /LOGO  *******/
/******* MENU *******/
#container{
  margin: 7em auto;
  width: 400px;
}
#container ul{
  list-style: none;
  list-style-position: outside;
}
#container ul.menu li{
  float: left;
  margin-right: 5px;
  margin-bottom: -1px;
}
#container ul.menu li{
  font-weight: 700;
  display: block;
  padding: 5px 10px 5px 10px;
  background: #efefef;
  margin-bottom: -1px;
  border: 1px solid #d0ccc9;
  border-width: 1px 1px 1px 1px;
  position: relative;
  color: #898989;
  cursor: pointer;
}
#container ul.menu li.active{
  background: #fff;
  top: 1px;
  border-bottom: 0;
  color: #5f95ef;
}
/******* /MENU *******/
/******* CONTENT *******/
.content{
  margin: 0pt auto;
  background: #efefef;
  background: #fff;
  border: 1px solid #d0ccc9;
  text-align: left;
  padding: 10px;
  padding-bottom: 20px;
  font-size: 11px;
}
.content h1{
  line-height: 1em;
  vertical-align: middle;
  height: 48px;
  padding: 10px 10px 10px 52px;
  font-size: 32px;
}
/******* /CONTENT *******/
/******* NEWS *******/
.content.news h1{
  background: transparent url(images/news.jpg) no-repeat scroll left top;
}
.content.news{
  display: block;
}
/******* /NEWS *******/
/******* TUTORIALS *******/
.content.tutorials h1{
  background: transparent url(images/tuts.jpg) no-repeat scroll left top;
}
.content.tutorials{
  display: none;
}
/******* /TUTORIALS *******/
/******* LINKS *******/
.content.links h1{
  background: transparent url(images/links.jpg) no-repeat scroll left top;
}
.content.links{
  display: none;
}
.content.links a{
  color: #5f95ef;
}
/******* /LINKS *******/


Overall, I want the tabbed menu to be below the announcement bar, but on top of the forum topics. This way, I can display some news in the tabs.

Thank you in advance,
-eco

I see you have put the code at the right place and everything is alright but one thing.

The id "container" is conflicting with the forums CSS. You can fix it by changing the word "container".

I'll give you a new code with new IDs.

HTML code (goes inside index_body after {JAVASCRIPT} part) :

Code:

<a id="logo" title="Go to yensdesign.com!" href="http://www.yensdesign.com"><img src="css/images/logo.jpg" alt="yensdesign.com" /></a>
  <div id="tab-container">
      <ul class="menu">
        <li id="news" class="active">News</li>
        <li id="tutorials">Tutorials</li>
        <li id="links">Links</li>
      </ul>
      <span class="clear"></span>
      <div class="content news">
        <h1>Latest News</h1>
        <ul>
            <li><img src="css/images/bullet.gif" alt="-" /> Boobles: First theme on Themeforest released!</li>
            <li><img src="css/images/bullet.gif" alt="-" /> Cokidoo becomes official</li>
            <li><img src="css/images/bullet.gif" alt="-" /> plusmusica.com private beta invitations</li>
            <li><img src="css/images/bullet.gif" alt="-" /> yensdesign.com 2.0 launched!</li>
        <ul>
      </div>
      <div class="content tutorials">
        <h1>Latest Tutorials</h1>
        <ul>
            <li><img src="css/images/bullet.gif" alt="-" /> Top 10 free fonts for professional design</li>
            <li><img src="css/images/bullet.gif" alt="-" /> Create an amazing music player using mouse gestures &amp; hotkeys</li>
            <li><img src="css/images/bullet.gif" alt="-" /> Boobles: First theme on Themeforest released!</li>
            <li><img src="css/images/bullet.gif" alt="-" /> Creating AJAX websites based on anchor navigation</li>
            <li><img src="css/images/bullet.gif" alt="-" /> Fast Tip: Create your personal blog to promote your self</li>
            <li><img src="css/images/bullet.gif" alt="-" /> How to make a brilliant mysql forum database from scratch</li>
        <ul>
      </div>
      <div class="content links">
        <h1>You may visit</h1>
        <ul>
            <li><img src="css/images/bullet.gif" alt="-" /> <a href="http://www.plusmusica.com">www.plusmusica.com</a> - Online jukebox!</li>
            <li><img src="css/images/bullet.gif" alt="-" /> <a href="http://www.cokidoo.com">www.cokidoo.com</a> - Awesome startup! :)</li>
            <li><img src="css/images/bullet.gif" alt="-" /> <a href="http://www.cokidoo.com">www.pixelartgames.com</a> - Do you want pixel art games? ;)</li>
            <li><img src="css/images/bullet.gif" alt="-" /> <a href="http://www.dmsconsulting.es">www.dmsconsulting.es</a> - Great guys</li>
        <ul>
      </div>
  </div>

Here is the new CSS code (remove the previous code and then add this one) :

Code:

/******* LOGO *******/
#logo{
  margin-top: 1em;
  display: block;
}
/******* /LOGO  *******/
/******* MENU *******/
#tab-container{
  margin: 7em auto;
  width: 400px;
}
#tab-container ul{
  list-style: none;
  list-style-position: outside;
}
#tab-container ul.menu li{
  float: left;
  margin-right: 5px;
  margin-bottom: -1px;
}
#tab-container ul.menu li{
  font-weight: 700;
  display: block;
  padding: 5px 10px 5px 10px;
  background: #efefef;
  margin-bottom: -1px;
  border: 1px solid #d0ccc9;
  border-width: 1px 1px 1px 1px;
  position: relative;
  color: #898989;
  cursor: pointer;
}
#tab-container ul.menu li.active{
  background: #fff;
  top: 1px;
  border-bottom: 0;
  color: #5f95ef;
}
/******* /MENU *******/
/******* CONTENT *******/
.content{
  margin: 0pt auto;
  background: #efefef;
  background: #fff;
  border: 1px solid #d0ccc9;
  text-align: left;
  padding: 10px;
  padding-bottom: 20px;
  font-size: 11px;
}
.content h1{
  line-height: 1em;
  vertical-align: middle;
  height: 48px;
  padding: 10px 10px 10px 52px;
  font-size: 32px;
}
/******* /CONTENT *******/
/******* NEWS *******/
.content.news h1{
  background: transparent url(images/news.jpg) no-repeat scroll left top;
}
.content.news{
  display: block;
}
/******* /NEWS *******/
/******* TUTORIALS *******/
.content.tutorials h1{
  background: transparent url(images/tuts.jpg) no-repeat scroll left top;
}
.content.tutorials{
  display: none;
}
/******* /TUTORIALS *******/
/******* LINKS *******/
.content.links h1{
  background: transparent url(images/links.jpg) no-repeat scroll left top;
}
.content.links{
  display: none;
}
.content.links a{
  color: #5f95ef;
}
/******* /LINKS *******/

Hope this helps

I took your code and it helped me loads, so thanks.

I have one final problem regarding the menu's positioning.
When I took your CSS code, I plugged it in and it ended up looking like this:



Now, I noticed this was a positioning issue, so I assumed I would need to change {position: relative;} to {position: absolute;}

After I did that, the menu ended up positioning correctly, but the buttons were somehow skewered, as shown here:



Again thanks alot for your help, as I am trying to understand what I am doing here

I just visited your forum and noticed that it looks fine to me.

ankillien wrote:I just visited your forum and noticed that it looks fine to me.

Did you click the tabs?
If so, I might be having some browser issues or something =/.
Edit: It works perfectly in FireFox, but I was using IE.
IE isn't working well.