css display block issue

joomla
joomla used Ask the Experts™
on
I have a css script which i use to render a collapsible vertical menu.
When fully  expanded it looks like this
   menu iem
   menu item
         sub menu item
         sub menu item
   menu item

I would like to enhance this menu so it looks like this
   menu item (event)
   menu item (event)
         sub menu (event)

My problem relates to the use of display blocks
If I place the text "(event)" before or after the </li>, that text is dropped to a new line due to the "display: block" css command.

Can you help.

see code below
...................


#cellSubNavigation {
      width:250px;
      margin:60px 5px 0px 10px;
}      
#cellSubNavigation a {
      font:normal 13px 'MyriadProRegular', Arial, Tahoma, sans-serif;
      width:                        270px;
      display:                  block;
      cursor:                        pointer;
      margin:                        0px 0px 0px 0px;
      padding:                  2px 0px 2px 10px;
      color:                        #363729;      
      background-image:      url('../images/quick-bar.gif');
      background-repeat:      no-repeat;
      background-position:center left;      
}
#cellSubNavigation a.active,
#cellSubNavigation li li a.navSelected {
      font:normal 13px 'MyriadProRegular', Arial, Tahoma, sans-serif;
      text-decoration:      none;
      color:                        #BADD4F;
}
#cellSubNavigation a:hover{      text-decoration:underline;}      
#cellSubNavigation ul, #cellSubNavigation li {
      font:normal 13px 'MyriadProRegular', Arial, Tahoma, sans-serif;
      margin:                        0px 0px 0px 0px;
      padding:                  0px 0px 0px 0px;
      list-style:                  none;      
      display:                  inline;
}
#cellSubNavigation ul li ul {
      display:none;}
#cellSubNavigation li li a {
      font:normal 13px 'MyriadProRegular', Arial, Tahoma, sans-serif;
      width:                        240px;
      margin:                        0px 0px 0px 20px;
      padding:                  2px 0px 2px 10px;
      font-weight:            normal;
      background-image:      url('../images/bg_cellSubNavigation_li_li_a.gif');
      background-repeat:      no-repeat;
      background-position:center left;      
}
#cellSubNavigation li li li a {
      font:normal 13px 'MyriadProRegular', Arial, Tahoma, sans-serif;
      width:                        200px;
      margin:                        0px 0px 0px 40px;
      padding:                  2px 0px 2px 10px;
      background-image:      url('../images/bg_cellSubNavigation_li_li_li_a.gif');      
}
#sort a{
      text-decoration:none;
      display:block;
}
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Kyle HamiltonData Scientist
Most Valuable Expert 2014

Commented:
It's not the display:block.

Make sure your widths accomodate that amount of text, and definitely place the text before the closing </li>
Kim WalkerWeb Programmer/Technician

Commented:
I agree with kozaiwaniec. It's not the display: block. Unless you are placing the text "(event)" is a separate tag. Can you show us the html of your menu?

If you are placing the event text in a link or other tag which is set to block, you just need to change the display to inline instead of block.

Author

Commented:
Thanks for your interest....
I have extended the width, but the result was pretty similiar

here is a link
http://www.cuaprocure.com.au/webadmin/index1.php
username/password is
admin / admin

thanks
Michael
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!

Kim WalkerWeb Programmer/Technician

Commented:
The page at the link you provided doesn't ask for a username or password nor does it have a menu as you've described. Is it the correct link?

Author

Commented:
it should look like this....
each of the words are menu links
the '......' is extra text before each </li>
if you click on 'Collaborative R&D' that expands

is that not what you see ?

Home
....
Profile
....
Preclinical Testing
....
Collaborative R&D
....
Clinical Trials Support
....
Fact Sheets
....
Contact Us
....
Kim WalkerWeb Programmer/Technician

Commented:
Yes, I see that. What is the (event) you're talking about that breaks down onto the next line?

Author

Commented:
I've simply placed the characters "..............." to represent what I want to put there
Web Programmer/Technician
Commented:
OK. You want the .... to go at the end of the menu items? Change the css that begins on line 5 for "#cellSubNavigation a" to display: inline; or display: inline-block;

inline-block is buggy in IE so I would avoid it if possible.

The natural behavior of <li> tags is display: list-item; You may want to change that, too, unless you actually want them to display in line.
Kyle HamiltonData Scientist
Most Valuable Expert 2014

Commented:
That's because you have a ul between them. It's the ul that's making it move onto the next line. Move the 'dots' to directly after the link, in front of the ul.



In your code, I moved the dots above the ul:

<li>                        <a href="index1.php?p=cms_edit&amp;CMSID=4&amp;CategoryID=4" class="mainlevel-dtree " target="_self">Collaborative R&amp;D </a>
                    					....  
					<ul style="  ">                    
					<li>
                    <a href="index1.php?p=cms_edit&amp;CMSID=33&amp;CategoryID=31" class="mainlevel-dtree " target="_self">Collaborative Drug Development</a>
							
												
					 </li>
					                    
					<li>
                    <a href="index1.php?p=cms_edit&amp;CMSID=31&amp;CategoryID=29" class="mainlevel-dtree " target="_self">Pain Drug Development</a>
							
							<ul id="menu-29_1" style="  ">							<li><a href="index1.php?p=cms_edit&amp;CMSID=45&amp;CategoryID=36" class="mainlevel-dtree " target="_self">Postherpetic Neuralgia </a>
							
								
															
							
							 </li>
														<li><a href="index1.php?p=cms_edit&amp;CMSID=46&amp;CategoryID=37" class="mainlevel-dtree " target="_self">Neuropathic Pain </a>
							
								
															
							
							 </li>
							</ul>					
					 </li>
					                    
					<li>
                    <a href="index1.php?p=cms_edit&amp;CMSID=5&amp;CategoryID=5" class="mainlevel-dtree " target="_self">Capabilities</a>
							
												
					 </li>
					</ul></li>

Open in new window

Author

Commented:
Hi,
kozaiwaniec.... changing the location of the string made no impact

xmediaman ...  you've got me very close, however it seems that I'm getting a leading "...." as well as a trailing "...." where there are submenus.

but you've certainly shed light.

Author

Commented:
thanks xmediaman,
I haven't fixed the script up yet, but the issue is no longer css

thanks greatly
Michael

Author

Commented:
great insight & help

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