SMF- menu space

[luc1d]

This is what it looks like.




this is how i want it.




it is possible to make space between the different tabs?


HOW??? 

[MrPhil]

You're asking how to "full justify" a menu across a given width (say, 100%), rather than a fixed number of blanks between tabs? That would be a nice effect. I'm guessing that it would have to be done in CSS -- perhaps giving each <div> or <li> (one per tab) "auto" left and right margins? I'll have to think about this one over the weekend, unless someone else wants to chime in with the answer. Since a menu bar width could vary during a session when a browser is resized, you would want to use CSS or (at worst) Javascript to do this (set left and right margins to a calculated number of pixels). If there's a way to know the width of the text parts (varies by language and font), you might specify a proportional % width for each tab, but it would probably look better with the same amount of space between each entry.

[IchBin™]

You could always just add a percentage width to each item in menu in CSS. Assuming you didn't add any more items in the future, otherwise you have to adjust your percentage. Not a big deal IMO. Using the web developer tool in chrome it looks like that works on the default curve theme. Just assign a width percentage to the li selector of the menu.

[Arantor]

Which won't be consistent for all users because of the different number of menu items for different users

[IchBin™]

For the handful of people who have more than the regular user you can either not care about it, or do a conditional in the header to change it.

[Arantor]

I didn't even mean that.

Guests vs Regular Members is a bigger difference than anything else, depending on permissions (there's always guaranteed to be 1 tab difference there, profile+messages+logout vs login+register, but the memberlist might also be turned off for guests)

[IchBin™]

Well my point was rather, if the desired effect is to have it the same for all different groups (If they're really worried about that), then do a conditional and call it done.

if(guest)
    .menu li {width: 12%}
if(regular_user)
    .menu li {width: 10%}

[SoLoGHoST]

You can do the following:

with the CSS Rule:
.dropmenu, .dropmenu ul

Add the following:

Koodi [Valitse] Laajenna

width: 100%; display: table;

With the following CSS Rule:  .dropmenu li

Remove float: left;

Add the following:

Koodi [Valitse] Laajenna

display: table-cell; width: 1%;

Note we just define a width here so that it has something to use, display: table-cell will automatically give it a proper width.  If you want, we could not include the width at all, but it is better to give it something for the width.

Add in the following CSS Rule and definition so that the submenu items will be floated left again:

Koodi [Valitse] Laajenna


.dropmenu li ul li {
    float: left;
}


Note, this will effect all ul elements that have a class of "dropmenu", if you only want it to effect the main menu, than use #menu_nav instead of .dropmenu.