Menu Spacer (Separator) Joomla 1.5 ?

[jamesodmitchell]

How do I add a menu serarator in Joomla 1.5 - I am NOT in legacy mode BUT set Spacer under legacy parameters but obviously did not work.

Thanks
James

[midimarcus]

I've the same problem with horizontal menu's spacer.

The right way should be to use a horizontal-formatted list and putting a border on the left side of a or li tag and a corresponding padding.
The problem here are the first and last list items, that need some different ID or class enabling developer to remove the border at the beginning and at the end of the list.
Anyone knows how to do this?

[jjgy]

The typical approach to this problem is the use of the :first-child psuedoclass. Applied to your template, this handy tool automatically applies the attributes given to it to the element only if it is the first child of the parent block level element. I haven't tried this with joomla before, but if I understand the menus properly, it'd look something like this.

Code: Select all

#navigation ul li {
	background-image: url(../images/spacer.png);
	background-repeat: no-repeat;
	background-position: left;
	display: inline !important; 
	margin: 0;
	padding-left: 5px;
	padding-right: 5px;
}

#navigation ul li:first-child {
	background-image: none;
}

I'm not much of a joomla! dev, so I'm not sure if the built in spacer function you guys mentioned handles this, but situations like this is where the :first-child psuedoclass really shines. Also, I just made up the IDs in that code example. I'm not sure what joomla outputs for menus, so you'll want to replace that if you use this code. Hope this helped

[midimarcus]

The typical approach to this problem is the use of the :first-child psuedoclass.
[...]

Yes,you're right, but as far I know :first-child psuedoclass is not supported by Internet Explorer 6 and previous versions.
Am I right?

I'm not much of a joomla! dev, so I'm not sure if the built in spacer function you guys mentioned handles this, but situations like this is where the :first-child psuedoclass really shines. Also, I just made up the IDs in that code example. I'm not sure what joomla outputs for menus, so you'll want to replace that if you use this code. Hope this helped

Using Joomla! 1.5 menu output is strictly made of lists, so you have full control of them with CSS. Perhaps I have to investigate more for list and list items override from template, to be able to add custom classes and ids. Anyone knows more about this?

[jjgy]

Ah, you're right about the IE 6 support. Enough people have made the jump to IE that for a small fix to your menus it shouldn't be a big deal, but obviously anything that would leave a big scar on your site by the failure of proper style application of anything under :first-child should be avoided.

Perhaps this would be a good time for a javascript style hack? Or perhaps a modification of the menu module to output an id on the first <li> item. I guess I'll look into that.

[midimarcus]

Playing with mod_mainmenu output overriding I've reached the minimum goal of identify first and last items adding them a custom CSS class.

Please see at http://forum.joomla.org/viewtopic.php?f ... 5#p1216015

[frankien]

I have been trying for days to take out the last dot on my submenu

http://www.the-venting-spleen.co.uk after join us

I tried using a separator and using the bg image parameter - didnt show up

tried adding the last child code mentioned above - didnt show up....

tried using a separator and using css to give it a bg image - didnt work -

tried renaming my submenu items so the ul comes after the name - didnt work....below is a copy of my css style sheet please help

thank you

x frances

/* ************************************************************************************************** */
/* CSS by Norm Douglas */
/* Netreach */
/* */
/* */
/* ************************************************************************************************** */
/* CONTENT CSS */
/* ************************************************************************************************** */
#wrapper {
margin:auto;
width:960px;
}

#header {
background-color:#FFFFFF;
height:110px;
background-image:url(../../../images/stories/the_venting_spleen_logo_masthead.gif);
background-repeat:no-repeat;
padding-top: 30px;
width:960px;
}

#divider {
height:0px;
border-top-width: 2px;
border-bottom-width: thin;
border-top-style: solid;
border-bottom-style: solid;
border-top-color:#CCCCCC;
border-bottom-color:#333333;
margin-bottom: 10px;
}

#banner {
float:right;
border: thin solid #CC0000;
position:relative;
top:-25px;
height:68px;
width:460px;
}

#login {
height: 16px;
font-size: 12px;
color: #fff;
text-align: right;
padding: 10px 20px 15px;
background:url(../../../images/login.png) repeat-x;
}

#date {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:9px;
color:#FFFFFF;
text-align:right;
width:940px;
}

#search {
position:relative;
top:40px;
left:547px;
float:right;
z-index:2;
width:400px;
}

#topmenu {
height:25px;
background-color:#333333;
width: 960px;
}

#submenu {
height:30px;
}

#right {
float:right;
width:180px;
height:100%;
}

#right1 {
margin-right: 5px;
text-align:right;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
margin-bottom:5px;
float:right;
}

#right2 {

float:right;
margin-bottom:10px;
margin-right:3px;
}

#right3 {
float:right;
margin-right:-16px;
margin-top:-8px;


}

#right4 {
float:right;
margin-right:2px;
margin-bottom:5px;
margin-top:-5px;

}

#right5 {
float:right;
margin-right:2px;
margin-bottom:5px;
margin-top:-4px;
}

#right6 {
float:right;
margin-top:4px;
margin-right:2px;

}

#right7 {
float:right;
margin-right:6px;

}
#opinion1{}
#opinion2{}
#opinion3{
margin-top:20px;}
#opinion4{
margin-top:6px;
margin-left:1px;
}
#opinion5{
margin-top:10px;
margin-left:5px;}

#mainbody {
width:755px;
float:left;
border-right:1px #c8c8c8 dotted;
padding-right: 20px;
}

#mainbody img {
margin-right: 10px;
border: 0 none;
margin-top: 5px;
}

#footer {
height:50px;
clear:both;
margin-top: 10px;
text-align:center;
font-size:9px;
}

#banner2 {
height:90px;
margin-bottom:20px;
margin-top:5px;
clear: both;
}

body {
color: #444;
margin: 0 auto;
font-size: 14px;
padding: 0;
}

h1 {
font-size:24px;


}

h2 {

}
h3 {

}

a
{
outline: none;
}

a:link {
text-decoration: none;
font-weight: normal;
color:#000000;
border:0px;
margin:0px;
}


a:visited {
text-decoration: none;
font-weight: normal;
color:#000000;
}

a:hover {
color:#CC0000;
text-decoration:none;
font-weight: normal;
}

a:active {
text-decoration: none;
font-weight: normal;
color:#000000;
outline: none;

}
a: img {
text-decoration: none;
font-weight: normal;
color:#000000;
}

p {
margin-top: 0;
margin-bottom: 3px;
margin-right: 15px;
}

img {

border: 0 none;
margin-top: 5px;
}
/* ************************************************************************************************** */
/* TEMPLATE LAYOUT CSS - DEFINE YOUR OWN TEMPLATE STYLES HERE */
/* ************************************************************************************************** */
#page_bg {
padding: 10px 0;
margin-bottom: 1px;
}

ul#mainlevel {
margin: 0;
padding: 0;
text-transform:uppercase;

}

ul#mainlevel li {
display: inline; /* Shows each item side-by-side */
list-style-type: none; /* Gets rid of the bullet points */
}

ul#mainlevel a {
display: block;
float: left;
padding: 0 1.485em; /* Provides horizontal separation between menu items */
height:25px;
line-height:25px;
text-align:center;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
text-decoration:none;
border-right: 1px solid #FFFFFF;
color:#FFFFFF;
display:block;
background-image:url(../../../images/stories/nav_bg.png);
}

ul#mainlevel a:link {
color:#FFFFFF;
}

ul#mainlevel a:hover {
background-image:url(../../../images/stories/nav_bg_grey.png);
color:#FFFFFF;
}

ul#mainlevel a:visited {
color:#FFFFFF;
}

ul#mainlevel a:active {
color:#FFFFFF;
}

ul#mainlevel-nav {
margin: 0;
padding: 0;
}

ul#mainlevel-nav li {
display: inline; /* Shows each item side-by-side */
}

ul#mainlevel-nav a {
display: block;
float: left;
padding: 8px 19px 8px 10px;
text-align:left;
font-family:"Times New Roman", Times, serif;
font-size:12px;
line-height:18px;
text-decoration: none;
background-image:url(../../../images/stories/tvs_dkgreydot.png);
background-repeat: no-repeat;
background-position: right 14px;
}

ul#mainlevel-nav li:lastItem {
background-image:none;
}

ul#mainlevel-nav a:link {

}

ul#mainlevel-nav a:hover {
color:#CC0000;
}

ul#mainlevel a:visited {

}

ul#mainlevel-nav a:active {

}

form {
padding: 20px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}

.small {
font-size:11px;
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#999999;
}

.readmore-link {
display:none;
}
.comment-link{
display:none;
}


.vsig_ctrls {
display:block;
text-align:right;
width:344px;
position:relative;
height:10px;

}


.addthis_toolbox {
width: 180px;
padding: 10px 0 10px 10px;
background-image:url(../../../images/stories/rounded%20bar.png);
background-repeat: no-repeat;
}


/* ************************************************************************************************** */
/* */
/*

[erickaps]

The typical approach to this problem is the use of the :first-child psuedoclass. Applied to your template, this handy tool automatically applies the attributes given to it to the element only if it is the first child of the parent block level element. I haven't tried this with joomla before, but if I understand the menus properly, it'd look something like this.

Code: Select all

#navigation ul li {
	background-image: url(../images/spacer.png);
	background-repeat: no-repeat;
	background-position: left;
	display: inline !important; 
	margin: 0;
	padding-left: 5px;
	padding-right: 5px;
}

#navigation ul li:first-child {
	background-image: none;
}

I'm not much of a joomla! dev, so I'm not sure if the built in spacer function you guys mentioned handles this, but situations like this is where the :first-child psuedoclass really shines. Also, I just made up the IDs in that code example. I'm not sure what joomla outputs for menus, so you'll want to replace that if you use this code. Hope this helped

This idea worked for me thanks jjgy.

This is how I did it:

I have set the menu class suffix '_bottommenu'

Code: Select all

ul.menu_bottommenu li a {border-left:solid #A8A8A8 1px;padding:0px 5px;}
ul.menu_bottommenu li:first-child a {border-left:0px;padding-left:0px;}

[hrva07]

erickaps, thank you. Your post is very usefull :-)