Avatar of joomla
joomla
Flag for Australia asked on

css display block issue

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;
}
CSS

Avatar of undefined
Last Comment
joomla

8/22/2022 - Mon
Kyle Hamilton

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 Walker

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.
joomla

ASKER
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
All of life is about relationships, and EE has made a viirtual community a real community. It lifts everyone's boat
William Peck
Kim Walker

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?
joomla

ASKER
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 Walker

Yes, I see that. What is the (event) you're talking about that breaks down onto the next line?
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
joomla

ASKER
I've simply placed the characters "..............." to represent what I want to put there
ASKER CERTIFIED SOLUTION
Kim Walker

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
Kyle Hamilton

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

joomla

ASKER
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.
Experts Exchange is like having an extremely knowledgeable team sitting and waiting for your call. Couldn't do my job half as well as I do without it!
James Murphy
joomla

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

thanks greatly
Michael
joomla

ASKER
great insight & help