Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

Template Questions /

Moderators: martimiz, Sean, Ed, biapar, Willr, Ingo, swaiba

how to remove last menu Border


Go to End
Reply


7 Posts   7143 Views

Avatar
Prakash

Community Member, 1 Post

13 June 2009 at 2:21am

how to remove last menu border of Control Menu(1)
i have use this code of .ss file
<div id="Navigation">
<ul>
<% control Menu(1) %>
<li><a href="$Link" title="Go to the $Title.XML page" class="$LinkingMode"><span>$MenuTitle.XML</span></a></li>
<% end_control %>
</ul>
</div>
and use this css
#Navigation {
width: 651px;
margin: 0 auto;
padding: 0px;
overflow: hidden;
}
#Navigation ul {
float: right;
/* margin-right: 10px;
*/ }
#Navigation ul li {
list-style: none;
margin: 0 0px;
float: left;
line-height: 11px;
display: block;
}
#Navigation ul li a {
float: left;
text-decoration: none;
display: block;
font-size: 11px;
padding: 0;
color: #333333;
text-transform:uppercase;
padding:5px 0px;
font-weight:normal;
}
#Navigation ul li a span {
text-align: center;
float: left;
/* padding-right: 10px;
*/ padding:0px 5px 0px 5px;
border-right:1px solid #EBAB01

}
#Navigation ul li a:hover {
color: #CCCCCC;
cursor: pointer;
}
#Navigation ul li a:hover span {
cursor: pointer;
color: #CCCCCC;
}

#Navigation ul li a.current,
#Navigation ul li a.section,
#Navigation ul li a.section:hover,
#Navigation ul li a.current:hover {
color: #B8081C;
}
#Navigation ul li a.current span,
#Navigation ul li a.section span,
#Navigation ul li a.section:hover span,
#Navigation ul li a.current:hover span {
color: #B8081C;
}
its works prefectly but there are some small problem of border of last menu can i remove this border throw css or other option if yes so how to remove this

Attached Files
Avatar
Willr

Forum Moderator, 5521 Posts

15 June 2009 at 6:27pm

You can use the variable $Last when iterating over a list

<% if Last %>class="lastElement"<% end_if %>

Then you can use the lastElement class to style it without a border etc.

Avatar
Howard

Community Member, 215 Posts

16 June 2009 at 10:21pm

Even easier you can just include class="$FirstLast" which will give the first item the class 'first' and the last 'last' :)

Avatar
pinkp

Community Member, 179 Posts

2 September 2009 at 11:07pm

Could someone help me achieve this please, as I can't get it to work....

Here's my .ss code:

<div id="navcontainer">  
 <ul><% control Menu(1) %>
          <li class="$LinkingMode" class="$FirstLast"><a href="$Link" title="{$Title}">$MenuTitle</a></li>
        <% end_control %></ul> </div>

Here's my CSS

div#navcontainer {
	font-size: 14px;
	text-decoration: none;
	background-color: #FFFFFF;
	padding-top: 5px;
	padding-left: 20px;
	border-right-width: thin;
	border-left-width: thin;
	border-right-style: solid;
	border-left-style: solid;
	border-right-color: #666666;
	border-left-color: #666666;
}
#navcontainer ul 
{
	/* cancels gap caused by top padding in Opera 7.54 */
width: 100%;
	line-height: 14px;
	margin: 0px;
	font-family: Georgia, "Times New Roman", Times, serif;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 20px;
	padding-left: 0px;
}
#navcontainer ul li
{
	display: inline;
}
#navcontainer ul li a, a:visited
{
	text-decoration: none;
	font-weight: bold;
	color: #333333;
	border-right-width: thin;
	border-right-style: dotted;
	border-right-color: #003399;
	padding-top: 0px;
	padding-right: 15px;
	padding-bottom: 0px;
	padding-left: 15px;
	font-family: Georgia, "Times New Roman", Times, serif;
}
#navcontainter li.Last a
{
border-right: none;
}
#navcontainer ul li a:hover, a:active
{
	color: #003499;
	text-decoration: none;
	font-weight: bold;
	border-bottom-style: none;
}

What am i doing wrong??

Also I want to change the style of the active menu link...
Can someone please show me what to include? Thanks! :)

Avatar
dhensby

Community Member, 247 Posts

3 September 2009 at 2:42am

#navcontainter li.Last a 
{ 
border-right: none; 
} 

needs to be:

#navcontainer ul li.Last a 
{ 
border-right: none; 
} 

The problem that you have is that #navcontainer ul li a is over-riding the #navcontainer li.Last a - adding the ul will fix it.

Hope that helps.

Avatar
pinkp

Community Member, 179 Posts

3 September 2009 at 3:45am

:) Thanks Pigeon, but it didn't actually work... I'm sure your right though! I think there may be issues else where (maybe), I've just started converting this site to SS and I having a few problems with little details like this. I might just start from scratch.

> Can't remove my last border on my menu

> I have a "Home" link even though I don't have a page called home and the page with the Page Type "Home Page" is not becoming my home page! ugh.

> Also can't get the .current CSS to work in the menu either...

I'll keep trying.

Avatar
dhensby

Community Member, 247 Posts

3 September 2009 at 4:32am

Ok, if that hasn't sorted it use something like Opera Dragonfly or (god forbid) FireBug to see where the CSS property is being over written.