Looking for two things, for the NINGBAR

Hello Creators. I am looking to put my navigation tabs into my ningbar. I sort of understand kind of what I need to do, by previous codes that I'm trying to learn from. However, I can't figure it out via trial and error.

If you would like to view my site, http://addictapic.com and note the top bar/ning bar (yellow)

I want my nav tabs at the bottom of the yellow bar (on the bar, but last thing) centered and not interrupting what's currently there. (I do understand I'd have to make the ning bar wider.)

Can anyone help me do this?
Thanks everyone! Take Care!
Damien.

Tags: bar, nav, navigation tabs in ningbar, tabs, top

Favorite

0 members favorited this

▶ Reply to This

Replies to This Discussion

Permalink Reply by George H. Compton IV on November 20, 2012 at 3:55pm

You just have too many tabs for that but you found the code at the bottom of your NC custom code box. A lot of those tabs could go into sub tabs which will make it look all whole lot better. You have a great day Scott

Permalink Reply by Damien Hannah on November 20, 2012 at 3:00pm

WHAT!! I was right!! WTF!!

HA HA, that made my day!

▶ Reply

Permalink Reply by Damien Hannah on November 20, 2012 at 2:07pm

This ends up underneath of my ningbar. Doesn't go on top...

▶ Reply

Permalink Reply by Damien Hannah on November 20, 2012 at 2:36pm

I sent you my code box again to your email George.

▶ Reply

Permalink Reply by Ron Fritzemeier on November 20, 2012 at 2:43pm

I might note that this is one of the reasons it's almost always best to avoid using !important in your styles where possible.

CSS "cascades" which means that styles overwrite previous styles.

if you have style.css and style1.css like this:

/*style.css*/
#widget { background: #000000}

/*style1.css*/
#widget { background: #ffffff}

So if you have in your head:

And your body:

This style for widget cascades down - first it checks style.css, okay make it black. next it checks style1.css - okay, make it white. Then it checks the <style> tag in your head - okay make it red. Then last it checks the inline style and makes #widget green. This is the normal order of how styles go. Your "Advanced CSS" styles in Ning go AFTER their default styles. (think of style.css as ning's styles, and style1.css as your "Advanced CSS" styles.

The problem with using !important is that it makes the browser ignore the rest of the styles that should overwrite it later but don't. This can make for some annoying debugging, especially if you aren't familiar with firebug/etc.

!important is not a sledge hammer to be thrown at your CSS because something isn't working properly. If you are setting a style and it's not taking, chances are you aren't being specific enough in your selector, i.e. ning is using div#xg_body div#xg_navigation.navigation-content and you are trying to override their style with #xg_navigation.

If you just throw up your hands and put in the !important instead of making your selector more specific or figuring out why the style isn't cascading as you believe it should, it makes for much harder modifications down the road after you've forgotten all about the little !important 500 lines back in your CSS that's ruining everything you're now trying to do.

▶ Reply

Permalink Reply by Damien Hannah on November 20, 2012 at 3:07pm

I'm so new to CSS. lol. This is excellent information though, I had no idea really. Thank you for this post!

▶ Reply

Permalink Reply by Damien Hannah on November 20, 2012 at 3:07pm

Ok, it's all done, perfect. my problem, that stupid swirly line. It has just GOT to go!!!

I'll post a new thread on it.

▶ Reply

Permalink Reply by George H. Compton IV on November 20, 2012 at 3:27pm

go look back at the post here I gave you a code to remove the swirly line

▶ Reply

Permalink Reply by Armani Rouse on November 20, 2012 at 3:27pm

looking good bro, one suggestion though...I would make the default color of the tabs bllck and leave the text of the yellow to match your network...right now they remind of me a "tonal" polo shirt, its like a white polo horse on a white polo shirt lol cant appreciate the little man riding the horse! lol but just a suggestion, otherwise it looks great...even with the "swirly" line :-)

▶ Reply

Permalink Reply by Damien Hannah on November 20, 2012 at 3:32pm

I absolutely agree! :) Thank you Armani, the tab color codes are on my stylesheet, I'm opening Dreamweaver right now to edit, I'll post here when it's done so that you may see it finished completely. :)

Glad you like it, I know I do!! (So will my members, now that navigation is flawless anywhere you are in my network!)

▶ Reply

Permalink Reply by Damien Hannah on November 20, 2012 at 4:14pm

Have a look! :)

▶ Reply

Permalink Reply by Damien Hannah on November 20, 2012 at 3:51pm

George, do you have a quick code I can throw into my stylesheet, to make the background of the tabs black? Not behind the tabs, but inside each tab. I want to keep the nav text yellow, and black tabs, with yellow border. (yellow border is there already)