ASP.NET Make Master Page Tutorial Part -8 (Bottom Navigation Links )

In previous post How To Make Master Page in ASP.NET Part -7 (Navigation Links) i show you how to make navigation user interface by static links in sidebar of ASP.NET website.in this tutorial i show you how to add Bottom Navigation Links and another Div which holds another ContentPlaceHolder control in the master page.
Now in the master page, make new Div tag called #contentbottom in #main div tag,below #maincontent (as shown in picture)where the content pages will insert their custom content.When users request the content pages, ASP.NET merges the output of the content pages with the output of the master page.this #contentbottom gives more flexibility to master page.

expression web asp.net master page tutorial navigation toolsIn the lower right hand corner of the screen you will see the Apply Styles box. If you don't have this box select it from the Task Panels menu in the top menu bar of Expression Web. Click the New Style button in the Apply Styles box. This will bring up the New Style dialog box.Now we want to make new style called #contentbottom.go to Box Category set padding 10 px to all.

expression web asp.net master page tutorial navigation tools
Now after applying new style you can see something like this.

expression web asp.net master page tutorial navigation tools
Now make new style called .clear.this style is a class style,the advantage is that we can use class style as many times on same page.

What is Clear style in css ?
The CSS clear property is used to for control flow when using the float property. Using CSS clear, you can specify whether to keep one or both sides of an element "clear".

Possible Values of Clear style:

none - floating elements can appear on either side.
left - floating elements can not appear on the left (i.e. keep the left side "clear").
right - floating elements can not appear on the right (i.e. keep the right side "clear").
both - floating elements can not appear on the left or right (i.e. keep both sides "clear").
inherit.
now go to layout category,in clear tab fix the value to both.

expression web asp.net master page tutorial navigation tools

Now click on #contentbottom the apply .clear style to it as shown in picture.

expression web asp.net master page tutorial navigation tools

Ahh.. you can see the #contentbottom is bellow the #sidebar.

expression web asp.net master page tutorial navigation toolsNow add one more div at the very bottom before the last div called #bottombar.go to apply new Style,in background category select the color you want.

expression web asp.net master page tutorial navigation tools
In Box Category set the padding 10 px to all.Click ok.

expression web asp.net master page tutorial navigation tools
You can see like this.

expression web asp.net master page tutorial navigation tools
Now in code view, click <.ul.> tag as shown in picture copy the navigation content.

expression web asp.net master page tutorial navigation tools
And paste it in #bottombar tag as shown in picture.

expression web asp.net master page tutorial navigation tools
Click on deign view you can see the navigation content is added in bottom bar.

expression web asp.net master page tutorial navigation tools
Now redefine the li tag to manager this style.go to manage style,in current pages tab find the li tag,right click on li tag,click on click on "New style copy".this will copy all properties of li tag and give another new li tag.
now make new style called #bottombar li.this style is ID style becouse we can use thid=s style only on #bottombar div.

expression web asp.net master page tutorial navigation tools
In Layout category set display to inline

expression web asp.net master page tutorial navigation tools
In Font category set the properties what you want.Click OK.

expression web asp.net master page tutorial navigation tools
You can see like this.

expression web asp.net master page tutorial navigation tools
Now modify the #bottombar style in Apply style box,find the #bottombar tag,right click on #bottombar style .click on modify style

expression web asp.net master page tutorial navigation tools
Now in the Block category set the text-align to "center"

expression web asp.net master page tutorial navigation tools
After applying this new style results are like this.

expression web asp.net master page tutorial navigation tools
These are the elements appear same in every page of our Asp.Net website.

Anyone who is serious about web development depends heavily on cascading style sheets (CSS).I explain in detail in all these Expression Web tutorials how we can use style sheets in websites/ASP.NET Websites. Microsoft Expression Web does a great job handling CSS. these Style sheets allow us to specify how any object on a page should be displayed.applying or working on CSS in Visual Studio is not easy like Expression Web.
Next part i will show you in another Tutorial ASP.NET Master Page Tutorial Part-9 (Redifining Body Tag) Expression Web.

Share this

Related Posts

There was an error in this gadget