[SOLVED] justify CSS menu

For discussion and questions related to CMS Specific templates and stylesheets (CSS), and themes. or layout issues. This is not a place for generic "I don't know CSS issues"
User avatar
frankmanl
Power Poster
Power Poster
Posts: 425
Joined: Sat Jul 12, 2008 3:50 am

[SOLVED] justify CSS menu

Post by frankmanl »

see http://tof.frankma.nl/cmsms/index.php

I want the top menu to occupy the full width of the navigation bar.

Code: Select all

ul#primary-nav {
(...)
  width: 100%;
/*    display: -webkit-box; */
  -webkit-box-orient: horizontal;
  -webkit-box-pack: justify;
  display: -moz-box;
  -moz-box-orient: horizontal;
  -moz-box-pack: justify;
  display: -ms-box;
  -ms-box-orient: horizontal;
  -ms-box-pack: justify;
  display: box;
  box-orient: horizontal;
  box-pack: justify;
}
and

Code: Select all

ul#primary-nav li {
(...)
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -ms-box-flex: 1;
    box-flex: 1;
}
In Firefox it works like a charm, in Chrome, Safari, Opera and IE10 the menu is displayed, but not justified to full width.
When I also activate display: -webkit-box; Opera works fine too, but in Chrome and Safari the menu completely disappears.

How can I solve this?
And is there a way not only for IE10 but preferrably also for IE9 and IE8?

Frank
Last edited by frankmanl on Thu May 23, 2013 4:00 am, edited 3 times in total.
User avatar
Dr.CSS
Moderator
Moderator
Posts: 12711
Joined: Thu Mar 09, 2006 5:32 am

Re: justify CSS menu

Post by Dr.CSS »

At first I couldn't figure out what you meant as I have never used those calls before...

I would use padding on left/right to do that instead...
User avatar
frankmanl
Power Poster
Power Poster
Posts: 425
Joined: Sat Jul 12, 2008 3:50 am

Re: justify CSS menu

Post by frankmanl »

Problem with padding is that if a menu item is added or left out, or changed, the css would have to be adjusted every time.
User avatar
Dr.CSS
Moderator
Moderator
Posts: 12711
Joined: Thu Mar 09, 2006 5:32 am

Re: justify CSS menu

Post by Dr.CSS »

Yes it would have to be changed but it's not like they can more the one more link in the space you have and you are trying to use unstable CSS that isn't truly set for all browsers as you are finding out...
User avatar
frankmanl
Power Poster
Power Poster
Posts: 425
Joined: Sat Jul 12, 2008 3:50 am

Re: justify CSS menu

Post by frankmanl »

OK Doctor, I found this code here: http://www.w3schools.com/cssref/css3_pr_box-pack.asp (and some other places) - I now see that W3schools indeed says it's not universally supported ...
So, there would be no other way than padding to fill the whole width of the navbar?
User avatar
velden
Dev Team Member
Dev Team Member
Posts: 3497
Joined: Mon Nov 28, 2011 9:29 am

Re: justify CSS menu

Post by velden »

User avatar
frankmanl
Power Poster
Power Poster
Posts: 425
Joined: Sat Jul 12, 2008 3:50 am

Re: [SOLVED] justify CSS menu

Post by frankmanl »

Thanks for your suggestions.
The solution Velden pointed at did not work out either.
I solved it (sub optimally) by padding the menu items, as Dr. CSS said.
The menu is not competely justified, at the right end there is a small space left over.

Frank
User avatar
Dr.CSS
Moderator
Moderator
Posts: 12711
Joined: Thu Mar 09, 2006 5:32 am

Re: [SOLVED] justify CSS menu

Post by Dr.CSS »

If you use the menu template below you can target the the last item with li.last a in css to increase it just enough to cover that last bit...

{if $count > 0}
<div id="menuwrapper">
<ul id="primary-nav">
{* begin calguy *}
{foreach from=$nodelist item=node name='menu'}
{assign var='last' value=''}
{if $smarty.foreach.menu.last}
{assign var='last' value='last '}
{/if}
{* end calguy *}
{if $node->depth > $node->prevdepth}

{repeat string="<ul>" times=$node->depth-$node->prevdepth}
{elseif $node->depth < $node->prevdepth}

{repeat string="</li></ul>" times=$node->prevdepth-$node->depth}
</li>
{elseif $node->index > 0}</li>
{/if}
{if $node->parent == true or ($node->current == true and $node->haschildren == true)}
<li class="{$last}menuactive menuparent"><a class="menuactive menuparent"
{elseif $node->current == true}
<li class="{$last}menuactive"><a class="menuactive"
{elseif $node->haschildren == true}
<li class="{$last}menuparent"><a class="menuparent"
{elseif $node->type == 'sectionheader'}
<li class="{$last}sectionheader"><span> {$node->menutext} </span>
{elseif $node->type == 'separator'}
<li style="list-style-type: none;"> <hr class="separator" />
{elseif empty($last)}
{* not the last menu item, but not a separator, header, parent, or active either *}
<li><a
{else}
{* last menu item *}
<li class="{$last}"><a
{/if}
{if $node->type != 'sectionheader' and $node->type != 'separator'}
href="{$node->url}" {if $node->accesskey != ''}accesskey="{$node->accesskey}" {/if}{if $node->tabindex != ''}tabindex="{$node->tabindex}" {/if}{if $node->titleattribute != ''}title="{$node->titleattribute}"{/if}{if $node->target ne ""} target="{$node->target}"{/if}><dfn>{$node->hierarchy}: </dfn>{$node->menutext}</a>
{elseif $node->type == 'sectionheader'}
><dfn>{$node->hierarchy}: </dfn>{$node->menutext}</a>
{/if}

{/foreach}

{repeat string="</li></ul>" times=$node->depth-1} </li>
</ul>
<div class="clearb"></div>
</div>
{/if}
applejack
Power Poster
Power Poster
Posts: 1014
Joined: Fri Mar 30, 2007 2:28 am

Re: [SOLVED] justify CSS menu

Post by applejack »

Use display:inline-block; on the list elements and text-align:justify on the container.
User avatar
frankmanl
Power Poster
Power Poster
Posts: 425
Joined: Sat Jul 12, 2008 3:50 am

Re: [SOLVED] justify CSS menu

Post by frankmanl »

Thanks, Dr. CSS, this looks promising. It works when the last menu item has no children. As soon as there are children, the class last is added to the last child.
But I'll have a further look at it.

@Applejack: doesn't work for me ...
applejack
Power Poster
Power Poster
Posts: 1014
Joined: Fri Mar 30, 2007 2:28 am

Re: [SOLVED] justify CSS menu

Post by applejack »

Did you remove the float as well?
User avatar
velden
Dev Team Member
Dev Team Member
Posts: 3497
Joined: Mon Nov 28, 2011 9:29 am

Re: [SOLVED] justify CSS menu

Post by velden »

With Jquery its easy to select the last element of the main menu bar:
$('ul#primary-nav> li:last').addClass('last-item')
User avatar
frankmanl
Power Poster
Power Poster
Posts: 425
Joined: Sat Jul 12, 2008 3:50 am

Re: [SOLVED] justify CSS menu

Post by frankmanl »

@applejack
When removing the float the menu is wrecked: last item does not fit in anymore and is displayed under the home button.
Adding display:inline-block; distorts the display of children.
Have a look at http://tof.frankma.nl/cmsms/index.php
(I'll leave that there for 24 hours.)

Thanks for all your replies. I will also try velden's jQuery suggestion some day, but as far as I'm concerned this topic is closed: the site is accepted by the client and I will not worry about this one anymore.
Justifying the horizontal menu seems to be a hard job, for which there's no real (css) solution yet ...

Frank
applejack
Power Poster
Power Poster
Posts: 1014
Joined: Fri Mar 30, 2007 2:28 am

Re: [CLOSED] justify CSS menu

Post by applejack »

You only remove the float for the top menu not the drop down.
User avatar
frankmanl
Power Poster
Power Poster
Posts: 425
Joined: Sat Jul 12, 2008 3:50 am

Re: [CLOSED] justify CSS menu

Post by frankmanl »

OK, I added float:left; to the li tag and now I'm back to having a couple of pixels left to the far right end of the menu - just as when I started ...
Post Reply

Return to “Layout and Design (CSS & HTML)”