Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Nov 2009
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Help with Placing Seperator Image In Lists

    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

    Code:
    <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>

    Code:
    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!

  • #2
    met
    met is offline
    Regular Coder
    Join Date
    Oct 2009
    Location
    United Kingdom
    Posts
    728
    Thanks
    4
    Thanked 119 Times in 119 Posts
    personally i'd add

    Code:
    ul.menu li.separator { width:2px; height:30px; background: #000; }
    (style as required)

    then just add

    Code:
    <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

  • #3
    New to the CF scene
    Join Date
    Nov 2009
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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!

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,849
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    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)
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    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

    Code:
    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:

    Code:
    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:

    Code:
    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.

  • #6
    New to the CF scene
    Join Date
    Nov 2009
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #7
    Regular Coder
    Join Date
    Nov 2009
    Posts
    110
    Thanks
    7
    Thanked 9 Times in 9 Posts

    no menu?

    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •