Horizontal menu spacer - css solution

Rev22only
Rev22only used Ask the Experts™
on
My CMS is producing the menu in the following format:
<ul id="mainlevelfooter">
     <li><a class="mainlevelfooter" href="#">Home</a></li>
     <li><a class="mainlevelfooter" href="#">Products</a></li>
     <li><a class="mainlevelfooter" href="#">Help</a></li>
</ul>

How can I insert a separator * in between the above menu items..
The solution should be css based and work in all browsers..  
& I dont want to add * as extra menu items between home, products and help manually in my cms
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Hi,

Have a look at the example below.

Just add the .asterisk style to your existing stylesheet and the span tags between your menu options.

Hope this helps,

John
<html>
<head>
<title>CSS Menu</title>
<style type="text/css">
#mainlevelfooter li {
	display: inline;
	list-style-type: none;
}
.mainlevelfooter {
	font-family: arial;
}
.asterisk {
	padding: 0 10px 0 10px;
}
</style>
</head>
<body>
<ul id="mainlevelfooter">
	<li><a class="mainlevelfooter" href="#">Home</a></li> 
	<span class="asterisk">*</span>
    <li><a class="mainlevelfooter" href="#">Products</a></li>
    <span class="asterisk">*</span>
    <li><a class="mainlevelfooter" href="#">Help</a></li>
</ul>
</body>
</html>

Open in new window

Author

Commented:
Sorry I need a CSS solution.. I cant add them manually..
Hi,

There may be another expert who knows a perfect way of doing this.

The only "CSS only" way I can think of (without adding anything extra to the HTML) is using the CSS Content attribute.

It will work in Firefox, Opera, Chrome and Safari fine.  One limitation is with IE.  It will only work in IE8 with a valid DocType.

The other limitation is that it will add the asterisk after every <li> and I am guessing you do not want to display after the last menu item.

I have included 2 examples below.  The first is based on not adding anything to the HTML and will leave a trailing asterisk.  The second adds another ul to remove the trailing asterisk.

John
VERSION 1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>CSS Menu</title>
<style type="text/css">
ul {
	padding: 0px;
	margin: 0px;
}
#mainlevelfooter li {
	display: inline;
	list-style-type: none;
	
}
.mainlevelfooter {
	font-family: arial;
}
#mainlevelfooter li:after {
	content: "\2A\ ";
	padding: 0 10px 0 10px;
}
</style>
</head>
<body>
<ul id="mainlevelfooter">
	<li><a class="mainlevelfooter" href="#">Home</a></li> 
    <li><a class="mainlevelfooter" href="#">Products</a></li>
    <li><a class="mainlevelfooter" href="#">Help</a></li>
</ul>
</body>
</html>




VERSION 2

<html>
<head>
<title>CSS Menu</title>
<style type="text/css">
ul {
	padding: 0px;
	margin: 0px;
	display: inline;
}
#mainlevelfooter li {
	display: inline;
	list-style-type: none;
	
}
.mainlevelfooter {
	font-family: arial;
}
#mainlevelfooter2 li {
	display: inline;
	list-style-type: none;
	
}
#mainlevelfooter li:after {
	content: "\2A\ ";
	padding: 0 10px 0 10px;
}
</style>
</head>
<body>
<ul id="mainlevelfooter">
	<li><a class="mainlevelfooter" href="#">Home</a></li> 
    <li><a class="mainlevelfooter" href="#">Products</a></li>
</ul>
<ul id="mainlevelfooter2">
    <li><a class="mainlevelfooter" href="#">Help</a></li>
</ul>
</body>
</html>

Open in new window

Success in ‘20 With a Profitable Pricing Strategy

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Author

Commented:
I appreciate your time but my CMS does not generate 2 UL to use your solution.
When you say the CMS is generating it.  Are you using something like PHP to loop and create the menu?
Hi Rev22only,

Try this...

Hope this helps....
<html>
<head>
<title>CSS Menu</title>
<style type="text/css">
ul li {
	float:left;
	list-style:none;
}
ul#mainlevelfooter li {
	float:left
	list-style-type: none;
}
a.mainlevelfooter {
	font-family: arial;
	background:url(star.png) no-repeat right;
	padding:10px 25px 10px 20px;
	width:200px;
}

a.final {
	background:none;
}
</style>
</head>
<body>
<ul id="mainlevelfooter">
	<li><a class="mainlevelfooter" href="#">Home</a></li> 
    <li><a class="mainlevelfooter" href="#">Products</a></li>
    <li><a class="mainlevelfooter final" href="#">Help</a></li>
</ul>
</body>
</html>

Open in new window

Hi Rev22only,

the star image is attached with this post...
star.png

Author

Commented:
@techsathish

I think it is correct solution, but my cms is not allowing me to add class="mainlevelfooter final" for the Help link.
I think the only way you are going to be able to do this without modifying any html code is using techsathish's idea of the image but making it one long image with all the stars you require, see attached image.  Obviously it would be a bit of messing about to get the spacing right.

By the way, if this works and you use this solution, award the points to techsathish, NOT me.

I am still wondering if your CMS is generating this HTML by querying a database table?  If so, we could add some code at the loop stage to do exactly what you want and it would save messing about with images.

Thanks,

John
<html> 
<head> 
<title>CSS Menu</title> 
<style type="text/css"> 
ul {
        float:left;
        list-style:none;
        background:url(star.png) no-repeat left;
}
ul#mainlevelfooter li {
        float:left;
        list-style-type: none;
}
a.mainlevelfooter {
        font-family: arial;
        padding:10px 25px 10px 20px;
        width:200px;
}
</style> 
</head> 
<body> 
<ul id="mainlevelfooter"> 
        <li><a class="mainlevelfooter" href="#">Home</a></li>  
    <li><a class="mainlevelfooter" href="#">Products</a></li> 
    <li><a class="mainlevelfooter" href="#">Help</a></li> 
</ul> 
</body> 
</html>

Open in new window

star.png

Author

Commented:
yes it gets the menu items from the database. I can still hack the code and put desired class for the final menu item and use techsathish: solution.
But still I was hoping for a CSS solution.
Senior Web Developer
Commented:
To add the class="mainlevelfooter final" for the last list item, there's no reliable CSS.

But you could use Javascript or jQuery...  If you were to use jQuery, adding the final class would be as simple as:
$("#mainlevelfooter li").last().addClass("final");

Using Javascript:
document.getElementById("mainlevelfooter").lastChild.className += " final";

Either one of these methods should do it.

the jQuery method will require a download, but it's *WELL* worth it.  It's a fantastic library for Javascript - it'll make your life a lot easier (http://jquery.com)

The Javascript way doesn't require a download.

Author

Commented:
@Quaoar: thanks for that..  
will this thing works in all browsers?
document.getElementById("mainlevelfooter").lastChild.className += " final";
Tony O'ByrneSenior Web Developer

Commented:
Yes, it's something we use at my company quite a bit and our clients do require IE6 compatibility.  I can't say anything about IE5 and below though.

But certainly, IE6, 7, 8, 9 (when it comes), FF, Opera, Chrome and Safari.

One thing to be aware of is that users may disable Javascript in their browser.  If they do, then there's nothing (that I can think of) that can be done.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial