$8

Need a bit of menu help?

Nile Flores | 11/01/10 at 4:35am | Edit

Previous versions of this question: 11/01/10 at 5:20pm

The experts have suggested, on average, a prize of $10 for this question.

(6) Possible Answers Submitted...

• 
  Last edited:
  11/01/10
  4:41am
  Andrzej Zglobica says:

  Quick workaround would be addying these to your CSS:
  

  #nav li a {
  
    min-width:65px;
  
  }

  
  Give it a go, that might be all you need.
  
  If you want to vary tab width on indivudal tabs, you need to use i.e. sliding-door technique which might require bit bigger budget.

  • 11/01/10 6:57am
    
    Andrzej Zglobica says:

    @Baki Goxhaj - you're wrong, needs to be 65px coz of padding on the element.

• 
  Last edited:
  11/02/10
  5:40am
  Baki Goxhaj says:

  Agreed with Andrzej quick workaround, but it should be 95px, not 65px.
  
  

  #nav li a { 
  
    min-width:95px;
  
  }

  
  
  This would still be a problem with longer menu items which will float outside the background. Sliding-doors technique is the real solution for this and there is how you implement it. http://www.alistapart.com/articles/slidingdoors/
  
  Here is a project where I have implemented it: http://www.jdmnagoyaautoparts.com/

  Previous versions of this answer: 11/01/10 at 5:47am | 11/01/10 at 5:47am

  • 11/01/10 9:45pm
    
    Nile Flores says:

    The other has been tried before I even asked this question. Sliding doors will have to work. I put the tutorials above and the spliced image. I just wanted the CSS workaround before I apply it, rather than be sent to tutorials I already had googled before.

  • 11/02/10 4:22am
    
    Baki Goxhaj says:

    @Andrzej Zglobica:
    
    

    @Baki Goxhaj - you're wrong, needs to be 65px coz of padding on the element.

    
    
    Yes, you're right.

• 
  Last edited:
  11/01/10
  5:48am
  Cosmin Popovici says:

  You are using a single image that cannot expand to fit the whole nav item.
  
  I recommend you implement the sliding doors technique: CSS Sliding Doors
  
  EDIT: hehe, looks like I was a little late :D

  Previous versions of this answer: 11/01/10 at 5:48am
• 
  Last edited:
  11/01/10
  7:55am
  Nilesh shiragave says:

  you have to increase the image width a bit and have to apply.
  
  and you have to apply background-image to both <li> and anchor <a>.
  
  let me know how you are displaying menu using wp_list_pages() function or wordpress wp_nav_menu() function which is introduced in wordpress 3.0
  
  

  • 11/01/10 8:06am
    
    Nilesh shiragave says:

    and check this tutorial. you have to create navigation image and CSS similar to this tutorial to get those rounded corners for the navigation items.
    
    
    http://ashoksuthar.wordpress.com/2007/02/14/rounded-tab-menu-through-css/

  • 11/01/10 9:44pm
    
    Nile Flores says:

    I am familiar with border-radius. That is not what this is.

• 
  Last edited:
  11/01/10
  6:02pm
  Jermaine Oppong says:

  Place your previous 'menu-select.png' in your themes image folder with the attached image. Then replace this code in your style.css file
  
  

  
  
  /* From line 136 */
  
  
  
  #mainmenu ul li a:hover, #mainmenu .current_page_item a, #mainmenu .select a{
  
      color:#fff;
  
      background:url('images/menu-select.png') no-repeat top center;
  
      width:auto;
  
      height:49px;
  
      text-decoration:none;
  
  }
  
  

  
  
  to this
  
  

  
  
  
  
  #mainmenu ul li a:hover, #mainmenu .current_page_item a, #mainmenu .select a{
  
      color:#fff;
  
      background:url('images/menu-select.png') repeat-x top center;
  
      width:auto;
  
      margin-top: 4px;
  
      height:45px;
  
      text-decoration:none;
  
  
  
  /* Added CSS3 Rounded Corner Attributes */
  
      border-radius: 10px 10px 0 0;
  
      -moz-border-radius: 10px 10px 0 0;
  
      -webkit-border-radius: 10px 10px 0 0;
  
      -khtml-border-radius: 10px 10px 0 0;
  
  
  
  }
  
  
  
  

  
  
  IE does not accept CSS3 Attributes. You can choose to use the default(which still works in my opinion and encourages others to switch browsers) or download this HTC script and follow its instructions:
  
  css3PIE - The Doumentation page will show you how it works.

  View Attachment

  Previous versions of this answer: 11/01/10 at 6:02pm

  • 11/01/10 9:43pm
    
    Nile Flores says:

    The original tab is rounded, as displayed in the splicing on the left and right. The other is merely a background as I placed that there for the moment while I am working on other parts of the website.

• 
  Last edited:
  11/02/10
  5:40am
  idt says:

  The tabs are not rounded corners, right? Looking at http://olddogstudios.com.au/dev/wp-content/themes/olddogstudios/images/menu-select.png it seems it's not.
  
  If so, add this to your css:
  
  

  
  
  #mainmenu ul li a:hover, #mainmenu .current_page_item a, #mainmenu .select a {
  
    background:url("images/menu-select.png") repeat-x left top transparent;
  
  }
  
  
  
  #nav li a, #nav li a:visited {
  
  background-repeat:repeat-x;
  
  }
  
  

  • 11/01/10 9:41pm
    
    Nile Flores says:

    The original tab is rounded, but the graphic has a shadow, and had to be spliced.
    
    So, I believe the sliding doors css may need to be applied. I may end up just coding it myself since I am almost done with my music player widget.

  • 11/01/10 11:04pm
    
    idt says:

    I see.
    
    Ok, so withouth modifying your existing CSS, just adding what's needed and the existing images(though you need to resize menu-select-right.png) you have, this should do it:
    
    

    
    
    
    
    #mainmenu ul li a:hover, #mainmenu .current_page_item a {
    
    	background: url("images/menu-select-left.png") no-repeat left top !important;
    
    	line-height:49px;
    
    	padding:0 0 0 8px;
    
    	display: block;
    
    	float: left;
    
    }
    
    #mainmenu ul li a:hover span, #mainmenu .current_page_item a span{
    
    	background: url("images/menu-select-right.png") repeat-x right top !important;
    
    	display:block;
    
    	padding:0 15px 0 7px;
    
    	float: left;
    
    }
    
    
    
    

    
    
    As I've mentioned above, you need to re-size menu-select-right.png to be at least as wide as the tab that could contain "Getting Started" menu.

  • 11/01/10 11:54pm
    
    idt says:

    Forgot to mention that the structure of your menu should be something like this:
    
    

    
    
    <div id="mainmenu">
    
    <ul id="nav">  
    
    <li class="page_item page-item-4 current_page_item"><a href="http://olddogstudios.com.au/dev/" title="Home"><span>Home</span></a></li>
    
    </ul>
    
    </div>
    
    

    
    
    <span> tag added inside <a> tag.

  • 11/02/10 12:02am
    
    Nile Flores says:

    Yes, I will be adding Jean-Baptiste Jung's code snippet to put in the span tag.
    
    As soon as I apply this and it works, I will award this. I appreciate you taking the time to come back to provide a solution. :)

This question has expired.

Current status of this question: Completed

Top Experts (+)

• 
  Denzel Chia$1863 earned (plus $174)
• 
  Utkarsh Kukreti$1758 earned (plus $127)
• 
  John Cotton$1487 earned (plus $167)
• 
  Rashad Aliyev$1443 earned (plus $37)
• 
  Christianto $1401 earned (plus $278)

Top Donors (+)

• 
  Sinoun Chea$29 given (pure donation)
• 
  Dan | gteh $12 given (pure donation)
• 
  Lawrence Krubner$36 given (pure donation)

Top Supporters (+)