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 5 of 5
  1. #1
    Regular Coder
    Join Date
    Jul 2004
    Location
    Lebanon
    Posts
    223
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Exclamation ul, li backgrounds

    Hi there,

    Please have a look at the attached screenshot of my menu, as you can see it is a multi level menu, what I want to do is to replace the arrow on the second level by another image (bullet.gif) and the arrow of the 3rd level (which is hidden now) by another image.

    This is my current css code

    Code:
    div.moduletable ul,
    div.moduletable_text ul,
    div.moduletable_menu ul,
    div.moduletable_hilite ul {
    	margin: 0;
    	padding: 0;
    }
    
    div.moduletable li,
    div.moduletable_text li,
    div.moduletable_menu li,
    div.moduletable_hilite li {
    	background: url(../images/menu-arrow.gif) no-repeat 5px 8px;
    	margin: 0;
    	padding-left: 16px;
    }
    Thanks.
    Attached Thumbnails Attached Thumbnails ul, li backgrounds-bmenu.gif  

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,801
    Thanks
    160
    Thanked 2,216 Times in 2,203 Posts
    Blog Entries
    1
    Please post your relevant HTML too.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Regular Coder
    Join Date
    Jul 2004
    Location
    Lebanon
    Posts
    223
    Thanks
    6
    Thanked 0 Times in 0 Posts
    There you go

    Code:
    <div id="el-containerwrap<?php echo $divid; ?>">
    
    <div id="el-container">
    <div id="el-container-inner" class="clearfix">
    <?php if ($el_left) { ?>
    		<div id="el-col1">
    			<div class="el-innerpad">
    
    				<?php if ($hasSubnav) { ?>
    				<div id="el-subnav" class="moduletable_menu">
    				<h3>On this page</h3>
    					<?php $jamenu->genMenu (1,1);	?>
    				</div>
    				<?php } ?>
    			
    				<jdoc:include type="modules" name="left" style="xhtml" />
    			</div>
    		</div>
    		<?php } ?>
    And thanks.

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,801
    Thanks
    160
    Thanked 2,216 Times in 2,203 Posts
    Blog Entries
    1
    That's not your html, is it? We need to see your parsed output taken from browsers view source option. Or a link would be much better.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    Regular Coder
    Join Date
    Jul 2004
    Location
    Lebanon
    Posts
    223
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Oh, sorry for the mistake.

    Here's a link: LINK (guest/guest)

    And here is the output

    Code:
    <div id="el-containerwrap">
    
    <div id="el-container">
    <div id="el-container-inner" class="clearfix">
    		<div id="el-col1">
    			<div class="el-innerpad">
    
    							
    						<div class="moduletable">
    					<h3>Non Alcoholic Beverages</h3>
    
    					<ul class="menu"><li class="item176"><a href="/bocti/index.php?option=com_content&amp;view=article&amp;id=91&amp;Itemid=176"><span>Food</span></a></li><li class="parent item177"><a href="/bocti/index.php?option=com_content&amp;view=article&amp;id=92&amp;Itemid=177"><span>Non Alcoholic Beverages</span></a><ul><li class="item194"><a href="/bocti/index.php?option=com_content&amp;view=article&amp;id=72&amp;Itemid=194"><span>Appollinaris</span></a></li><li class="item195"><a href="/bocti/index.php?option=com_content&amp;view=article&amp;id=73&amp;Itemid=195"><span>G Variety</span></a></li></ul></li><li class="item178"><a href="/bocti/index.php?option=com_content&amp;view=article&amp;id=93&amp;Itemid=178"><span>Spirits</span></a></li><li class="item179"><a href="/bocti/index.php?option=com_content&amp;view=article&amp;id=94&amp;Itemid=179"><span>Wine &amp; Champagne</span></a></li></ul>		</div>
    			<div class="moduletable_hilite">
    					<h3>Spotlight 1</h3>
    					<p><img src="/bocti/images/stories/arrow2.gif" border="0" width="61" height="66" align="left" />Small description of item in the spotlight </p>		</div>
    
    	
    			</div>
    		</div>


  •  

    Tags for this Thread

    Posting Permissions

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