[opgelost] css menu Topic is solved

[iStevo]

Ik probeer al een paar weken een menu toe te passen binnen cmsms.
Gewoon simpel beginnen met basis css maar ik heb een probleem en ik zie de oplossing niet direct.

Ik weet niet hoe ik die <li>dots moet wegwerken (zie screenshot)

1) menu-sjabloon

Code: Select all

{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->parent == true or ($node->current == true and $node->haschildren == true)}
<li class="menuactive menuparent"><a class="menuactive menuparent" href="{$node->url}"><span>{$node->menutext}</span></a>

{elseif $node->haschildren == true and $node->type != 'sectionheader' and $node->type != 'separator'}
<li class="parent"><a class="parent" href="{$node->url}"><span>{$node->menutext}</span></a>

{elseif $node->current == true}
<li class="inmenu_active"><span>{$node->menutext}</span>

{elseif $node->type == 'sectionheader'}
<li class="sectionheader"><span>{$node->menutext}</span>

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

{else}
<li><a href="{$node->url}"><span>{$node->menutext}</span></a>

{/if}

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

2) menu-stylesheet

Code: Select all

#menu {
        margin-top: -20px;
        width: 35%;
        float: right;
}
.inmenu {
	list-style: none;
	margin: 0;
	padding: 0;

}
.inmenu li {
        font-family: Verdana, Arial, Comic Sans Ms, sans-serif;
        font-size: 12px;
	margin: 0;
	padding: 0;
}
.inmenu a {
	border-bottom: 1px solid #393939;
	color: #000;
	display: block;
	margin: 0;
	padding: 8px 12px;
	text-decoration: none;
	font-weight:normal;
}
.inmenu a:hover {
	background: #2580a2 url('/uploads/images/hover.gif') left center no-repeat;
	color: #fff;
	padding-bottom: 8px;
}

[velden]

ik denk dat je ipv 'list-style : none;' moet nemen 'list-style-type:none;'

[iStevo]

Ik heb nergens een 'list-style : none;'
Of zie ik het verkeerd?

[velden]

Ik heb nergens een 'list-style : none;'
Of zie ik het verkeerd?

Code: Select all

.inmenu {
   list-style: none;
   margin: 0;
   padding: 0;

}

[iStevo]

thx velden, ik zag het even niet nadat ik gans de namiddag in de code was gedoken.
Ik heb deze aangepast, maar dit geeft geen oplossing.

[timdebuurman]

als je

.inmenu

veranderd in

.inmenu ul

is het denk ik opgelost

[velden]

Die laatste tip gaat ook niet helpen.

'.inmenu ul' zou alleen gelden voor de 'ul' die ná de met 'inmenu' geclassificeerde 'li' komen. In de praktijk zijn dat enkel de eventuele sub-menu's.

Er zijn dus een paar mogelijkheden.

Aanpassen menu template en een class of id geven aan je hoofdmenu ul

Code: Select all

{if $count > 0}
<ul class="mainmenu">
{foreach from=$nodelist item=node}

En daarna in je css:

Code: Select all

ul.mainmenu { list-style-type : none;}

2e optie is om je menu in een div te zetten, die div een id of class mee te geven (bijvoorbeeld <div class="menu-wrapper">) en dan in je css:

Code: Select all

div.menu-wrapper ul {list-style-type : none;}

Tim zette me in de juiste richting.

[iStevo]

2e optie is om je menu in een div te zetten, die div een id of class mee te geven (bijvoorbeeld <div class="menu-wrapper">) en dan in je css:

Dank je velden en Tim, dit heeft het gedaan

Code: Select all

.inmenu ul {
        list-style-type : none;
}