Space between 2 menu items

[gletofire]

Hi all,

How do I add space between 2 menu items in the CSSMenu - vertical stylesheet, without adding space between all the menu items?

My site:

http://www.ajbmusic.nl/adbede.html

My code:

Code: Select all

/* Vertical menu for the CMS CSS Menu Module */
/* by Alexander Endresen */


/* The wrapper determines the width of the menu elements */
#menuwrapper { 
   width: 100%; 
}


/* Unless you know what you do, do not touch this */ 
#primary-nav, #primary-nav ul { 
   list-style: none; 
   margin: 0px; 
   padding: 0px; 
   width: 100%; 
   margin-left: -1px;
}
#primary-nav ul { 
   position: absolute; 
   top: 0; 
   left: 100%; 
   display: none; 
}
#primary-nav li { 
   margin-bottom: -1px; 
   position: relative; 
}


/* Styling the basic apperance of the menu elements */
#primary-nav a { 
/*border: 1px solid #FFFFFF;*/
   display: block; 
   margin: 0px; 
   padding: 10px 10px; 
   color: #FFFFFF;
   text-decoration: none; 
   background: transparent; 
   min-height:1em; /* Fixes IE7 whitespace bug*/ 
font-family: Bremen Bd BT;
}

#primary-nav li, #primary-nav li.menuparent { 
   background-color: #000000; 
background-image: url(images/knopleeg.jpg);
   min-height:1em; /* Fixes IE7 bug*/
}


/* Styling the basic apperance of the active page elements (shows what page in the menu is being displayed) */
#primary-nav li.menuactive a{color:#ff0000;}
#primary-nav li.menuactive { 
   background-color: #000000; 
}

/* Styling the basic apperance of the menuparents - here styled the same on hover (fixes IE bug) */
#primary-nav li.menuparent, 
#primary-nav li.menuparent:hover
#primary-nav li.menuparenth { 
   background-image: url(images/knopleeg.jpg); 
}


/* Styling the apperance of menu items on hover */
#primary-nav li:hover, 
#primary-nav li.menuh, 
#primary-nav li.menuparenth, 
#primary-nav li.menuactiveh { 
    background-image: url(images/knopover.jpg) 
}


/* The magic - set to work for up to a 3 level menu, but can be increased unlimited */
#primary-nav ul, 
#primary-nav li:hover ul, 
#primary-nav li:hover ul ul, 
#primary-nav li.menuparenth ul, 
#primary-nav li.menuparenth ul ul { 
   display: none; 
}
#primary-nav li:hover ul, 
#primary-nav ul li:hover ul, 
#primary-nav ul ul li:hover ul, 
#primary-nav li.menuparenth ul, 
#primary-nav ul li.menuparenth ul, 
#primary-nav ul ul li.menuparenth ul { 
   display: block; 
}


/* IE Hack, will cause the css to not validate */

#primary-nav li, #primary-nav li.menuparenth { _float: left; _height: 1%; }
#primary-nav li a { _height: 1%; }


/* section header */
#primary-nav li.sectionheader {
   border-left: 1px solid #006699;
   border-top: 1px solid #006699; 
   font-size: 130%;
   font-weight: bold;
   padding: 1.5em 0 0.8em 0.5em;
   background-color: #fff;
   margin: 0;
   width: 100%;
}


/* separator */
#primary-nav li hr.separator {
   display:block;
   height: 0.5em;
   color: #abb0b6;
   background-color: #abb0b6;
   width: 100%;
   border:0;
   margin:0;
   padding:0;   
   border-top: 1px solid #006699;
   border-right: 1px solid #006699;
}

[Nullig]

You could add a separator between them and style it how you like.

Nullig

[gletofire]

When I add a separator, it behaves like half a button.

http://www.ajbmusic.nl/ADB/

Why is that

[Nullig]

You could try changing the CSSMenu template.

Find:

Code: Select all

{elseif $node->type == 'separator'}
        <li style="list-style-type: none;"> <hr class="separator" />

and change it to:

Code: Select all

{elseif $node->type == 'separator'}
        <li style="height: 0.5em; border-top: 1px solid #006699; border-right: 1px solid #006699; background: #000;">

Nullig

[gletofire]

I made the change, but still no luck

menu template:

Code: Select all

{* CSS classes used in this template:
#menuwrapper - The id for the <div> that the menu is wrapped in. Sets the width, background etc. for the menu.
#primary-nav - The id for the <ul>
.menuparent - The class for each <li> that has children.
.menuactive - The class for each <li> that is active or is a parent (on any level) of a child that is active. *}
{if $count > 0}
<div id="menuwrapper">
<ul id="primary-nav">
{foreach from=$nodelist item=node}
{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="menuactive menuparent"><a class="menuactive menuparent" 
{elseif $node->current == true}
	<li class="menuactive"><a class="menuactive" 
{elseif $node->haschildren == true}
	<li class="menuparent"><a class="menuparent" 
{elseif $node->type == 'sectionheader'}
        <li class="sectionheader"><span> {$node->menutext} </span>
{elseif $node->type == 'separator'}
        <li style="height: 0.5em; border-top: 1px solid #006699; border-right: 1px solid #006699; background: #000;">
{else}
	<li><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}

[Dr.CSS]

You don't have to put anything in the menu manager template you just need to change the CSS...

You have double of most of the CSS attached to the template, the default and the one you changed and renamed, take the default out then yours should work...

[gletofire]

I removed the stylesheets I do not use, and it changed the menu for the better. It removed some artifacts, but I still don't have a proper separator. 

deleted stylesheets:


remaining stylesheets:


menu template:

Code: Select all

{* CSS classes used in this template:
.active - The active page in the horizontal menu (first level).
.bullet_sectionheader - To style section header
hr.separator - To style the ruler for the separator *}
{if $count > 0}
<ul>
{foreach from=$nodelist item=node}
{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->current == true or $node->parent == true}
<li id="special"><a href="{$node->url}"{if $node->target ne ""} target="{$node->target}"{/if}><span>{$node->menutext}</span></a>
{elseif $node->type == 'sectionheader'}
<li><a href="{$node->url}"><span>{$node->menutext}</span></a>
{elseif $node->type == 'separator'}
<li style="list-style-type: none;"><hr class="separator" />
{else}
<li><a href="{$node->url}"{if $node->target ne ""} target="{$node->target}"{/if}><span>{$node->menutext}</span></a>{/if}
{/foreach}

{repeat string="</li></ul>" times=$node->depth-2}</li>
</ul>
{/if}

[Dr.CSS]

I'm sorry you misunderstood, I meant for you to unattach them not delete...

OK if you look in the 'Accessibility and cross-browser tools' you will see a call for hr and it is the first call/stylesheet so it takes president over the later call, removing this made the menu have a space...

.accessibility, hr {
  position: absolute;
  top: -999em;
  left: -999em;
}

[gletofire]

When I remove the hr, everything looks fine in the windows internet explorer browser, but strange things happen in mozzila firefox. Do I need to solve these? And how do I do that?

[Dr.CSS]

I forgot I also went to #primary-nav li hr.separator and took out the border-top and border-right calls and increased the height from 0.5 to 1.5...

/* separator */
#primary-nav li hr.separator {
  display:block;
  height: 1.5em;
  color: #abb0b6;
  background-color: #abb0b6;
  width: 100%;
  border:0;
  margin:0;
  padding:0;
  background-image: none;
}

[Nullig]

After playing around with the styling and getting nowhere, I'm beginning to think you'd be better off with 2 separate menu calls.
Have the first one call the first block of menu items, leave a space and then call the second block of menu items.

Nullig

[gletofire]

Everything looks fine in firefox right now, but IE puts a button behind the separator

Anyone have an idea why it does that?

[Dr.CSS]

IE sees the HR separator as 1.5em with padding from the li  and the list as 2em, so you might want to make it 2em height and add px to 0 in the margin and padding calls...

You may also want to validate it...
http://validator.w3.org/check?verbose=1 ... l%2FADB%2F

[gletofire]

I changed height 1.5em to 2.0em but it didn't work...

I don't know what I'm doing but I added margin-top: -7px and margin-bottom: -6px; to the hr separator and it looks better in both browsers, but I don't know what other problems lay ahead of me.