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>
