Problem getting Scenario 3 in Chapter 3 to work

RichardDavies · January 10th, 2012, 07:52 AM

I initially got an SPUrl error when using the code in the book (page 100 on my Kindle). I had imported the NavDemo.master from the downloads. I did some digging and used the following code instead, which solved the error.

Code:

<SharePoint:CssRegistration name="/Style%20Library/SPDDemo/css/roundednav.css %" After="corev4.css" runat="server"/>

However, after copying the images, etc and importing the roundednav.css file, my browser does not look like Figure 3.27 on page 104. (Incidentally, I copied all of the images, etc into my main site and the sub-site).

I do not see any tabs at all in my browser.

janla2112 · September 25th, 2012, 11:57 AM

I made that change as well that Richard made. I am also having an issue with the rendering of the NavDemo master page utilizing the roundednav.css. Incidentally, the roundednav.css file does not have all the code in it. I copied the rest in from the book. I can see the tabs however the tab images provided in the download have spaces between them and the rest of the tabs as well as black lines in them. The code I have is posted as follows:

Code:

/*----Top Nav---------------- */
.s4-tn {min-height:34px;}
/*allow nav item to be taller than 15px*/
.s4-tn LI.static > .menu-item{height:auto;}
/*Transform top nav links to uppercase and give top links bg color */
body #s4-topheader2{background:#F8F9F9 repeat-x left 0px;border-bottom:transparent;border-top:transparent;}
/*bowttom border of nav bar*/
.s4-tn {border-bottom: 5px solid #016c9b;}
.s4-tn > .horizontal {margin-left:20px;/*move horizontal nav to the right by 20 px*/padding:0 10px;
}
/*keep nav from wrapping */
.menu-horizontal{min-width:790px;}
/*If you define nav styles and don’t define them in dynamic children selectors,dynamic will inherit the style */
.s4-tn li.static > .menu-item{border:0;border:none;color:#0A2941;display:inline-block;min-width:70px;height:30px;padding:0px;margin:0px;vertical-align:middle;white-space:nowrap;text-align:center;font-size:16px;white-space:nowrap;padding-top:12px;}
.s4-toplinks .s4-tn > .menu-item.text {padding:6px 24px 0 24px;}
/*nav link hover and nav header hover*/
.s4-tn li.static > a:hover,.s4-tn li.static > .dynamic-children:hover{display:block;background:transparent none;color:#016C9B ;text-decoration:none;}
/*rounded nav*/
.s4-toplinks .s4-tn .static > li {background:url(http://../_t/tl_png.jpg) no-repeat scroll 0 0 #88BDE8;color:#0A2941;}
.s4-toplinks .s4-tn .static > li > .menu-item{background:url(http://../_t/tr_png.jpg) no-repeat scroll top right ;}
/*Rounded nav selected (left) background color goes here*/
.s4-toplinks .s4-tn .static > li.selected {background:url(http://../_t/tl_png.jpg) no-repeat scroll 0 0 #016c9b;color:#A4CEF0;}
/*Rounded nav selected (right)*/
.s4-toplinks .s4-tn .static > li.selected > .menu-item{background:url(http://../_t/tr_png.jpg) no-repeat scroll top right ;color:#A4CEF0;}
.s4-toplinks .s4-tn .static > li.selected > a:hover {color:#5C94C3}
.s4-toplinks .s4-tn ul.static > li.dynamic-children .menu-item-text ,.s4-toplinks .s4-tn ul.static > li.static .menu-item-text{padding: 0 33px;}
/*arrows in tabs with dynamic children */
.menu-horizontal span.dynamic-children SPAN.additional-background {background-position:90%;}
.menu-horizontal a.dynamic-children SPAN.additional-background {background-position:90%;}
/*flyout navigation */
.s4-tn ul.dynamic{background:#0F446C;margin:5px 0 0 10px;background-color:#0F446C;border:1px solid #0A2941;}
.s4-tn li.dynamic a{padding:5px;color:#fff;}
.s4-tn li.dynamic > .menu-item{padding:3px 12px;width:210px;font-size:14px;white-space:nowrap;border-bottom:none;font-weight:normal;color:#88BDE8;font-family:Verdana;min-width:150px;}
.s4-tn li.dynamic {border-bottom:1px #0A2941 solid;}
.s4-tn li.dynamic > a:hover{display:block;background-color: #88BDE8;color:#0A2941;}
.s4-toplinks .s4-tn ul.dynamic .menu-item .menu-item-text {padding: 5px 8px!important}
.s4-tn li.dynamic > .menu-item{padding:3px 12px;font-size:12px;white-space:nowrap;border-bottom:none;font-weight:normal;color:#003B55;font-family:Verdana;min-width:150px;}
.s4-tn li.dynamic {border-bottom:1px #888C7F0 solid;}
.s4-tn li.dynamic > a:hover{font-weight:400;display:block;background-color:#C7E2F3;color:#1E6592;}

Note also, for beginners, that the actual url location of the images that one uploads to the Style Folder needs to be updated. I have highlighted it in bold in the code. Make sure you change this from what the authors have as just the root directory folder.