Topic: Advice putting links on both sides of navigation bar

Basicly want the punbb nav links as they are on the left side of the navigation bar and then I want to put some extra links on the right hand side of the nav bar.

Just about to give it a go, asking what you think is the best way because it`s going to involve editing functions.php I think, sourcecode isn`t my strong pont.

Re: Advice putting links on both sides of navigation bar

Getting knowere with this.. any suggestions?

Re: Advice putting links on both sides of navigation bar

I`ve given up trying to do it with lists and am attempting to do it with divs instead but it`s getting messy..

I really want this so if anyone has a solution I`m willing to paypal some cash over to you for it.

Re: Advice putting links on both sides of navigation bar

Which links to you want moved?

Re: Advice putting links on both sides of navigation bar

I want al the links to stay where they are but I want to add some extra links on the right hand side of the navigation bar in the header.

Re: Advice putting links on both sides of navigation bar

Put them infront of the other links and do a float:right on them.

Re: Advice putting links on both sides of navigation bar

Now we`re getting somewhere smile I actually tried that before but put the links below and it didn`t work, putting them above sort of works though.

Just one problem now, the links float to the right but those I specify to be on the right appear ontop of each other. Here`s my markup:

    $links[] = '<li class="navextra"><a href="index.php">Extra1</a>';
    $links[] = '<li class="navextra"><a href="index.php">Extra2</a>';
    $links[] = '<li id="navindex"><a href="index.php">'.$lang_common['Index'].'</a>';
    $links[] = '<li id="navuserlist"><a href="userlist.php">'.$lang_common['User list'].'</a>';
.navextra {
    float: right;
}

Tried this to seperate the links but didn`t work

.navextra {
    float: right;
    display: inline;
    margin-right: 12px
}

Re: Advice putting links on both sides of navigation bar

Try closing the li wink

Re: Advice putting links on both sides of navigation bar

punbb automagicaly closes it a few lines down in functions.php

10

Re: Advice putting links on both sides of navigation bar

u can add some padding for the links so they dont over stack each other.

My stuff or my style might sux, but atleast I'm willing to help when I can.
Don't be stupid and help ! We are the stupid one's !!!

11 (edited by oneless 2007-11-04 00:36)

Re: Advice putting links on both sides of navigation bar

normaly yeah but it doesn`t work on this float for reasons I wish I knew.

EDIT:
I have a feeling it`s not possible to acheive this with one list. Again I could be wrong but for the life of me I can`t figure it out.

Re: Advice putting links on both sides of navigation bar

Have you tried clearing them?

13 (edited by oneless 2007-11-04 15:35)

Re: Advice putting links on both sides of navigation bar

Yep and no luck.

Re: Advice putting links on both sides of navigation bar

Anyone? I`m stuck sad

Re: Advice putting links on both sides of navigation bar

Here`s an image of the two links ontop of each other on the right..

http://img152.imageshack.us/img152/7440/clipboard04am9.gif

Re: Advice putting links on both sides of navigation bar

Can you show the CSS you have for those currently?

Re: Advice putting links on both sides of navigation bar

Sure

.navextra {
    float: right;
    display: inline;
    margin-right: 12px;
    padding-right: 10px;
    clear: both;
}

I tried using a div to clear then aswell

18

Re: Advice putting links on both sides of navigation bar

A quick fix which should work is to give the floated items a width.  Try 8em to start with and then jugle it.

If you don't want to bother working around css problems the other very simple solution is to put both links in the same list item.

Re: Advice putting links on both sides of navigation bar

I can usually figure stuff out eventually but this had me stumped. It`s all very quick and easy when you know how!

Your simple solution of putting both links in the same list item half works, only way to space them is with multiple   and if each link isn`t in it`s own li then I might aswell remove the list altogether and use divs instead. Luckily setting the width for each link worked so I can stay with the more semantic list. smile

The final result then:
http://img29.picoodle.com/img/img29/5/11/5/f_punbblifloam_a096421.gif

functions.php

    // Index and Userlist should always be displayed
    $links[] = '<li class="navextra1"><a href="index.php">Link 1</a>';
    $links[] = '<li class="navextra2"><a href="index.php">Link 2</a>';
    $links[] = '<li class="navextra3"><a href="index.php">Link 3</a>';
    $links[] = '<li id="navindex"><a href="index.php">'.$lang_common['Index'].'</a>';
    $links[] = '<li id="navuserlist"><a href="userlist.php">'.$lang_common['User list'].'</a>';

CSS

.navextra1 {
    float: right;
    width: 24px;
    white-space: nowrap;
}

.navextra2 {
    float: right;
    width: 74px;
}

.navextra3 {
    float: right;
    width: 124px;
}

The width and white-space attributes on the first link are only necessary to control the space between the link and edge of the board.

Thanks to everyone who helped and I did say I`d paypal some cash for a solution, so how much do I owe who?

20

Re: Advice putting links on both sides of navigation bar

The only problem with using pixels for the width settings is that if the text is risized the links will eventually collide. Would have been better to use em's.

With regard to putting the links in the same list item, the answer to spacing was to set a right/left margin on the <a>

Re: Advice putting links on both sides of navigation bar

Yeah I`ll change to em`s later, thanks for the reminder though.

Just one last note, you can`t use the additional menu items option because the they will appear above the floated right links in the source which pushes them out of line.
I`ve just hard coded the extra link I wanted into functions.php, there might be a way to have them apear below the floated links but I`ve not bothered looking.

Re: Advice putting links on both sides of navigation bar

I hate IE it`s a pain in the arse

http://img35.picoodle.com/img/img35/5/11/5/f_hateiem_dcb5b0a.gif

Paul you know your stuff, why isn`t there a self destruct button for all instances of ie 6?? er I mean, any ideas why this happens? I`m using em and it displays ok in FF and Opera..

#link1{
    float: right;
    width: 2.2em;
    white-space: nowrap;
}

#link2{
    float: right;
    width: 6.8em;
}

#link3{
    float: right;
    width: 11.6em;
}

23 (edited by oneless 2007-11-07 21:36)

Re: Advice putting links on both sides of navigation bar

Looks the same in IE7 too. Grr.

EDIT:
Aha, this works for IE

#link1 {
    float: right;
    width: 2.2em;
    white-space: nowrap;
}

#link2{
    float: right;
}

#link3{
    float: right;
}

Now just to figure out how to hide the width attributes from IE.

EDIT:
I think the child selector command will work.