asked on

Horizontal menu spacer - css solution

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

john-formby

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

Anil Kumar

ASKER

Sorry I need a CSS solution.. I cant add them manually..

john-formby

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

Anil Kumar

ASKER

I appreciate your time but my CMS does not generate 2 UL to use your solution.

john-formby

When you say the CMS is generating it. Are you using something like PHP to loop and create the menu?

techsathish

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

techsathish

Hi Rev22only,

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

Anil Kumar

ASKER

@techsathish

I think it is correct solution, but my cms is not allowing me to add class="mainlevelfooter final" for the Help link.

john-formby

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

Anil Kumar

ASKER

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.

ASKER CERTIFIED SOLUTION

Tony O'Byrne

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Anil Kumar

ASKER

@Quaoar: thanks for that..
will this thing works in all browsers?
document.getElementById("mainlevelfooter").lastChild.className += " final";

Tony O'Byrne

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.