Wordpress Themes - WP Forum at BFA - Replacing Category Menu with your own.

Hi all!

First of all, I want to say that I started building my site probably week, maybe 2 ago as a completly noob. I didn't know anything about html or css, didn't know what wordpress is, how to get domain and get your site hosted... well I didn't know anything at all.

And I still don't know. Even though I have managed to make a simple site which will do, I think it could use something more special. soo... I decided that I want custom menubar in place where the Category menu is right now.

But I have 2 problems (first is related to theme, second is not so much):

Problem 1) What should I do to replace Category menu with mine? With help of web, i did this:
http://img824.imageshack.us/img824/5588/menubark.jpg

To make it I used -
picture:
http://img408.imageshack.us/img408/6445/globalnavbg.png
html:

HTML Code:

<html>



<head>

<title>Z-FielDZ' menubar</title>

<link rel="stylesheet" href="style.css" type="text/css" />

</head>



<body>

<div id="globalheader">

<ul id="globalnav">

        

        <li id="gn-dz"><a href="http://zfieldz.com">Store</a></li>

        <li id="gn-moviez"><a href="http://zfieldz.com/category/moviez/">MovieZ</a></li>

        <li id="gn-playstation"><a href="http://zfieldz.com/category/gamez-2/playstation3/">PlayStation 3</a></li>

        <li id="gn-xbox"><a href="http://zfieldz.com/category/gamez-2/xbox360/">xBoX 360</a></li>

        <li id="gn-forumz"><a href="http://zfieldz.com/forum/">ForumZ</a></li>



</ul>

</div><!--/globalheader-->



</body>

</html>

css:

Code:

/* GLOBALHEADER */

#globalheader { width: 952px; height: 38px; margin: 18px auto; position: relative; z-index: 9998; }

#globalheader #globalnav { margin: 0; padding: 0; }

#globalheader #globalnav li { display: inline; }

#globalheader #globalnav li a { float: left; width: 190px; height: 0; padding-top: 38px; overflow: hidden; }

#globalheader #globalnav li a,

#globalheader #globalsearch { background-image: url(globalnavbg.png); _background-image: url(http://images.apple.com/global/nav/images/globalnavbg.gif); background-repeat: no-repeat; }



/* BUTTONS */

#globalheader #globalnav li#gn-dz a { background-position: 0 0; }

#globalheader #globalnav li#gn-moviez a { background-position: -191px 0; }

#globalheader #globalnav li#gn-playstation a { background-position: -382px 0; }

#globalheader #globalnav li#gn-xbox a { background-position: -572px 0; }

#globalheader #globalnav li#gn-forumz a { background-position: -762px 0; }





/* OVER STATES */

#globalheader #globalnav li#gn-dz a:hover { background-position: 0 -38px; }

#globalheader #globalnav li#gn-moviez a:hover { background-position: -191px -38px; }

#globalheader #globalnav li#gn-playstation a:hover { background-position: -382px -38px; }

#globalheader #globalnav li#gn-xbox a:hover { background-position: -572px -38px; }

#globalheader #globalnav li#gn-forumz a:hover { background-position: -762px -38px; }





* PRESSED STATES */

#globalheader #globalnav li#gn-dz a:active { background-position: 0 -76px; }

#globalheader #globalnav li#gn-moviez a:active { background-position: -191px -76px; }

#globalheader #globalnav li#gn-playstation a:active { background-position: -382px -76px; }

#globalheader #globalnav li#gn-xbox a:active { background-position: -572px -76px; }

#globalheader #globalnav li#gn-forumz a:active { background-position: -762px -76px; }





/* ON STATES */

#globalheader.dz #globalnav li#gn-dz a:hover { background-position: 0 0; cursor: default; }

#globalheader.moviez #globalnav li#gn-moviez a { background-position: -191px -114px !important; }

#globalheader.playstation #globalnav li#gn-playstation a { background-position: -382px -114px !important; }

#globalheader.xbox #globalnav li#gn-xbox a { background-position: -572px -114px !important; }

#globalheader.forumz #globalnav li#gn-forumz a { background-position: -762px -114px !important; }

Should I add css to style.css and html somewhere into bfa_new_wp3_menus.php?
Also, right now it's Category Menu, but as we know, Forum isn't category, but I added it too in hope it can be done somehow.

In the attachment I have included .zip file with image, html and css files inside so you could easily launch it and get better idea how it looks.
Also I have included Photoshop file of the image, so if someone wants to use similar bar on their site you can take it and easily change names of tabs in photoshop file.

Problem 2) Actually I want my menubar to look like this:
http://img183.imageshack.us/img183/4...obalnavbg3.png

In the code pasted above, all tabs are declared as 190px each. So if I want to make some tabs with different width, I need to change the code, but since as I said, I'm total noob in it and just adding more lines with idea "button a is xxx", "button b is yyy" didn't work, I don't know what to do.

In first version it is:
{ background-position: 0 0; }
{ background-position: -191px 0; }
{ background-position: -382px 0; }
{ background-position: -572px 0; }
{ background-position: -762px 0; }

In final version it should be:
{ background-position: 0 0; }
{ background-position: -101px 0; }
{ background-position: -301px 0; }
{ background-position: -500px 0; }
{ background-position: -700px 0; }
{ background-position: -952px 0; }

So the buttons should be: 101px, 199px, 200px, 200px, 100px, 152px (last one is not clickable)
(don't ask me why some buttons miss or have extra pixel... I suck at photoshop too :D )

Since the second problem isn't so related to theme itself, I'm not really asking anyone to help with it, only if some good person has extra time :D

And here is my site that I have built in 1 week. www.zfieldz.com

Thank you in advance,
A.L.