locked
How can I work around not having a span element for my css tabbed navigation? RRS feed

  • Question

  • User-1833980242 posted

     I am trying to create tabbed navigation using CSS Friendly Control adapters with the menu control.  I want the tabs to be created using the Sliding Doors technique.

     I downloaded and am trying to use the tabbed menu offered by exploding-boy at http://exploding-boy.com/images/cssmenus2/menus.html.  The style from this uses the <a span> element for the right side of the tab.  The problem that I am having is the css control adapter doesn't render an <a span> element.  It only renders an <a> element that is inside of a <li> element.  This is creating problems rendering  my tabs correctly. 

    I tried to put the graphic for the right side in the background image property of the style of the <li> element and the left in the <a> element.  This made the right side of the tab visible but it didn't align with the left side.  I could get it to align close but not quite right.  Even if it did align right the link text itself wouldn't be in the right place for the tab.  I want the text to be centered in the tab but my positioning for the backgroung made the text go to the left too much.  then when I corrected this it broke the tab.

    I am not sure what I need to do to fix this.  These are the 3 options that I can think of.  Can somebody please help me resolve this.  Any help is much appreciated.

     

                    These are the 3 solutions that I can think of:     1.  Have the control adapter render custom stuff that I add programmattically.

                                                                                                     - I think this might be over my head.  Is this hard to do?
     

                                                                                              2. Use a regular <ul> on my MasterPage and not use the CSS Friendly Control adapters.

                                                                                                     - If possible, I want to use the menu control with the sitemap b/c this seems pretty standard.

                                                                                                     - If necessary, I might not use the asp.net menu control if it won't render my tabs correctly.
     

                                                                                               3. Some other work around that I don' know.

                                                                                                     - I hoping a more experienced person might know how to get around this issue.
     

     


     

     
    Here is the style for the tabbed navigation from exploding boy:

     

    1    #tabs6 {
    2          float:left;
    3          width:100%;
    4          background:#efefef;
    5          font-size:93%;
    6          line-height:normal;
    7    	  border-bottom:1px solid #666;
    8          }
    9        #tabs6 ul {
    10   	  margin:0;
    11   	  padding:10px 10px 0 50px;
    12   	  list-style:none;
    13         }
    14       #tabs6 li {
    15         display:inline;
    16         margin:0;
    17         padding:0;
    18         }
    19       #tabs6 a {
    20         float:left;
    21         background:url("tableft6.gif") no-repeat left top;
    22         margin:0;
    23         padding:0 0 0 4px;
    24         text-decoration:none;
    25         }
    26       #tabs6 a span {
    27         float:left;
    28         display:block;
    29         background:url("tabright6.gif") no-repeat right top;
    30         padding:5px 15px 4px 6px;
    31         color:#FFF;
    32         }
    33       /* Commented Backslash Hack hides rule from IE5-Mac \*/
    34       #tabs6 a span {float:none;}
    35       /* End IE5-Mac hack */
    36       #tabs6 a:hover span {
    37         color:#FFF;
    38         }
    39       #tabs6 a:hover {
    40         background-position:0% -42px;
    41         }
    42       #tabs6 a:hover span {
    43         background-position:100% -42px;
    44         }
    45   	
    46   	
    

      -------------------------------------------------------------------------------------------------------------------------------------------------------------------------

    Here is my style so far for my tabbed navigation:

      

    1    .MyMenu ul.AspNet-Menu /* Tier 1, this is for the menu */
    2    {
    3          float:left;
    4          width:40%;   /*  this was 100% originally */
    5          background-color:Transparent;
    6          font-size:93%;
    7          line-height:normal;
    8    	  border-bottom:1px solid #666;
    9    }
    10         
    11   .MyMenu ul 
    12   {
    13   	  margin:0;
    14   	  padding:10px 10px 0 50px;
    15   	  list-style:none;
    16   }
    17   
    18   .MyMenu li   /* I added the right side of the tab code here.  */
    19   {
    20         display:inline;
    21         margin:0;
    22         padding:0;
    23         
    24         float:left;
    25         display:block;
    26         background:url("images/tabright6.gif") no-repeat right top;
    27         padding:5px 15px 4px 6px;
    28         color:#FFF;
    29         
    30   }
    31   
    32   .MyMenu a   /* I tried adding some positioning here but it didn't help.  It created problems with the location of the link */
    33   {
    34           
    35         float:left;
    36         background:url("images/tableft6.gif") no-repeat left top;
    37         margin:0;
    38         padding:0 0 0 10;
    39         text-decoration:none;
    40   }
    41   .MyMenu a span    /* this is from the css tab code I cannibalized. This doesn't apply to my site.  This isn't created by the control adapters */  
    42   {
    43         float:left;
    44         display:block;
    45         background:url("images/tabright6.gif") no-repeat right top;
    46         padding:5px 15px 4px 6px;
    47         color:#FFF;
    48   }
    49         
    50    /* Commented Backslash Hack hides rule from IE5-Mac \*/
    51   .MyMenu a span {float:none;}
    52   
    53   /* End IE5-Mac hack */
    54   .MyMenu a:hover span 
    55       
    56   {
    57         color:#FFF;
    58   }
    59         
    60   .MyMenu a:hover 
    61   {
    62         background-position:0% -42px;
    63   }
    64   
    65   .MyMenu a:hover span 
    66   {
    67         background-position:100% -42px;
    68   }
    
       

     -------------------------------------------------------------------------------------------------------------------------------------------------------------------------

    Here is the source code that is made at runtime by the CSS friendly control adapters:

                   
    <div class="MyMenu" id="ctl00_Menu1">


        <div class="AspNet-Menu-Horizontal">


                <ul class="AspNet-Menu">


                    <li class="AspNet-Menu-Leaf">
                        <a href="/mySite.com - container experiment/Default.aspx" class="AspNet-Menu-Link" title="go to the home page">
                            home</a>
                    </li>


                    <li class="AspNet-Menu-Leaf">
                        <a href="/mySite.com - container experiment/Resume.aspx" class="AspNet-Menu-Link" title="check out my resume">
                            resume</a>
                    </li>


                    <li class="AspNet-Menu-Leaf">
                        <a href="/mySite.com - container experiment/Links.aspx" class="AspNet-Menu-Link" title="interesting links">
                            links</a>
                    </li>


                    <li class="AspNet-Menu-Leaf">
                        <a href="/mySitecom - container experiment/Articles.aspx" class="AspNet-Menu-Link" title="development articles">
                            articles</a>
                    </li>


                    <li class="AspNet-Menu-Leaf  AspNet-Menu-Selected">
                        <a href="/mySite.com - container experiment/Portfolio.aspx" class="AspNet-Menu-Link  AspNet-Menu-Selected" title="my portfolio">
                            portfolio</a>
                    </li>


                </ul>

        </div>
    </div>

     

     

     

     

     


     

    Friday, August 15, 2008 10:50 AM

Answers

  • User-1833980242 posted

     I think you are right with option 3.  It doesn't seem worth the effort for the site I am building to undergo trying to develop custom adapters.  I might look into the BuildItem() method b/c now I am curious. 

    Thanks for the response.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, August 15, 2008 10:22 PM

All replies

  • User-1385398420 posted

    The way I see it your only real choices are:

    1. Customize the Menu CSS adapter to include a SPAN element
    2. Customize the CSS to do what you want without the SPAN element
    3. Use your own markup and avoid the Menu control
    I'd go with #3 if you can live without sitemap integration. If your tabs are for the most part static, this is the way to go. If you need sitemap integration, go with #1 -- look in the BuildItem() method of MenuAdapter.cs.
    Friday, August 15, 2008 9:29 PM
  • User-1833980242 posted

     I think you are right with option 3.  It doesn't seem worth the effort for the site I am building to undergo trying to develop custom adapters.  I might look into the BuildItem() method b/c now I am curious. 

    Thanks for the response.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, August 15, 2008 10:22 PM