Help with Placing Seperator Image In Lists

[Valkesh]

Hi Guys

Ive got this menu running on this site http://valkesh.000space.com .. Now I would like to know if its possible to place a 'Seperator' Image between the tabs, for instance between Projects and Services and Services and Contact.

I tried using a <div> between the end of one <li> </li> and the start of the other, but it didnt work well.

Im using the menu that may be found on this url http://sandbox.leigeber.com/dropdown-menu/index.html

The CSS and HTML file are the following code snippets

<ul class="menu" id="menu">
	<li>
		<li><a href="#" class="menulink">Projects</a>
		<ul>
			<li><a href="#">Project 1</a></li>
			<li><a href="#" class="sub">Project 2</a>
				<ul>
					<li class="topline"><a href="#">Project 2.1</a></li>
					<li><a href="#">Project 2.2</a></li>
					<li><a href="#">Project 2.3</a></li>
				</ul>
			</li>
			<li><a href="#" class="sub">Project 3</a>
				<ul>
					<li class="topline"><a href="#">Project 3.1</a></li>
					<li><a href="#">Project 3.2</a></li>
					<li><a href="#" class="sub">Project 3.3</a>
						<ul>
							<li class="topline"><a href="#">Project 3.3.1</a></li>
							<li><a href="#">Project 3.3.2</a></li>
							<li><a href="#">Project 3.3.3</a></li>
							<li><a href="#">Project 3.3.4</a></li>
							<li><a href="#">Project 3.3.5</a></li>
							<li><a href="#">Project 3.3.6</a></li>
						</ul>
					</li>
					<li><a href="#">Project 3.4</a></li>
				</ul>
			</li>
			<li><a href="#">Project 4</a></li>
			<li><a href="#">Project 5</a></li>
		</ul>
	</li>
	<li><a href="#" class="menulink">Services</a>
		<ul>
			<li><a href="#">Service 1</a></li>
			<li><a href="#" class="sub">Service 2</a>
				<ul>
					<li class="topline"><a href="#">Service 2.1</a></li>
					<li><a href="#">Service 2.2</a></li>
					<li><a href="#">Service 2.3</a></li>
				</ul>
			</li>
		</ul>
	</li>
	<li><a href="#" class="menulink">Contact</a></li>
</ul>

body {margin:25px; font:11px Verdana,Arial; background:#eee}
ul.menu {list-style:none; margin:0; padding:0}
ul.menu * {margin:0; padding:0}
ul.menu a {display:block; color:#000; text-decoration:none}
ul.menu li {position:relative; float:left; margin-right:10px}
ul.menu ul {position:absolute; top:26px; left:0; background:#d1d1d1; display:none; opacity:0; list-style:none}
ul.menu ul li {position:relative; border:1px solid #aaa; border-top:none; width:148px; margin:0}
ul.menu ul li a {display:block; padding:3px 7px 5px; background-color:#d1d1d1}
ul.menu ul li a:hover {background-color:#c5c5c5}
ul.menu ul ul {left:148px; top:-1px}
ul.menu .menulink {border:1px solid #aaa; padding:5px 7px 7px; font-weight:bold; background:url(images/header.gif); width:134px}
ul.menu .menulink:hover, ul.menu .menuhover {background:url(images/header_over.gif)}
ul.menu .sub {background:#d1d1d1 url(images/arrow.gif) 136px 8px no-repeat}
ul.menu .topline {border-top:1px solid #aaa}

I would appreciate if anyone can help me out please

Thanks!

[met]

personally i'd add

ul.menu li.separator { width:2px; height:30px; background: #000; }

(style as required)

then just add

<li>Projects</li>
<li class="separator"></li>
<li>Services</li>
<li class="separator"></li>

etc.

although in my opinion adding a separator to that style of navigation is unnecessary as the gap between the blocks is evident. just my $0.02

[Valkesh]

Hi met

Thanks for your reply.

Your post makes sense, its my fault as I didnt explain properly why I wanted a seperator. On http://valkesh.000space.com you may find the new update, using the approach you told me... I also removed the borders and images which I never initially wanted.. hence why I wanted seperators in that style of navigation to seperate the items.

However with regards to the approach of using the seperator within an <li> I was thinking of doing it as a part of background image/not related to the <li> (hence why I mentioned a div) since I would like to implement this sort of navigation - JQuery Lavalamp and having it with an <li> would allow the user to hover over the <li> thinking its an item of the menu, whereas I wouldnt want the user to be able to move the Lavalamp feature over the seperator but just act as a divider.. The lavalamp feature is http://www.gmarwaha.com/blog/2007/08...jquery-lovers/

Sorry for the lack of explanation, but is there some approach that will help me allow this?

Thanks!

[abduraooft]

How about setting a border-right on all li elements? (You may add a class/if to the last li and specifically remove that border, if required)

[SB65]

I agree with met about a separator being unnecessary here.

However, an alternate approach without changing your markup would be as follows:

Make your css for

ul.menu li {
float:left;
/*margin-right:10px;*/
padding-right:20px;
background:transparent url(image.jpg) no-repeat 158px center;
position:relative;
}

So here we're removing the margin that's currently spacing out the menu items and replacing it with padding. Then we're applying a background image that shows up 158px from the left hand side of the <li>, which is beyond the <a>, if that makes sense. Adjust the 20px padding and 158px positioning to suit your required spacing and spacer image.

These changes also affect your dropdown, so we also need to add:

ul.menu ul {
position:absolute; 
top:26px; 
left:0; 
background:#d1d1d1; 
display:none; 
opacity:0; 
list-style:none;
width:148px
}

and 

ul.menu ul li {
position:relative; 
border:0px solid #aaa; 
border-top:none; 
width:148px; 
margin:0;
padding-right:0
}

- both of these to restrict the widths of the dropdown.

Finally, you probably don't want a separator on the last menu item, so just add something like:

ul.menu li#last{
background-image:none
}

and add id="last" to the last menu item.

This approach means you don't have to clutter up your markup with extra presentation information. The way I've written it here makes it look long, but it's only four changes to your css and one to your html.

[Valkesh]

Sorry for the late response as I was busy with work.

SB65, I tried using your method, but once I implemented the lavalamp functionality I mentioned this is what happens.. http://valkesh.000space.com/

The text is behind the image, and if i give the css property a higher z-index than the moving image, the image flows behind the separator image... allowing the user to see where to separator image starts and ends..

Is there a way to just make the text visible as and keep the moving effect as it is now?

Thanks

[linehand]

I didn't see a menu on your site - but going from what you've said;
you might try making the separator image into a gif or png with transparency so that it doesn't look like a solid square when the effect goes under it. Or just use css borders for your separators, in which case you could just use a negative margin with overflow:hidden to hide the separator on one end. I think either way should work to get rid of the boxes becoming highlighted when the effect passes under them.