Asp.Net Master Page Tutorial Part -4 (DIV Properties,Top Header)

In previous post Expression Web Master Page Tutorial in ASP.NET (Div Tags,CSS Properties) i told you about Div Tag ,Basics of CSS Styles,Css Properties. In this tutorial i show you how to set DIV properties like font,block,background,border,box,position,layout etc..

Here i am using ID Based CSS Style in all pages. It is useful for defining a style that you only want to be used once in the page.
This is the main DIV of layout,it contain everything this layout i call it #maincontainer.you can name your DIV styles anything you want.

DIV Properties,Top Header tutorial asp.net

now in the position category you can set width of main DIV tag.create a fixed width of a page deign.in a width set it 780 px. 780 px width is the best for all resolutions. you may create more flexible deign

DIV Properties,Top Header tutorial asp.net

now in Box category you can center this DIV tag on this page.In this category you never find the button for centering DIV in CSS layout.So set the margin on same on both "left" and "right",set auto as shown in picture.

DIV Properties,Top Header tutorial asp.net

This setting tell the same amount of margin on left and right to browser,that keep this DIV in center.

Now in Background category set the background of this DIV tag

DIV Properties,Top Header tutorial asp.net

then click ok.

now you need to select the DIV tag and apply that #maincontainer style as shown in picture

DIV Properties,Top Header tutorial asp.net

you can see automatically that style applied to main DIV
unfortunately you are not able to see the preview of Master page in browser.for preview you have to make page by using this masterpage.

How to make Top banner ?

now place the cursor into DIV tag (white portion)

DIV Properties,Top Header tutorial asp.net

Add another DIV as shown in picture

DIV Properties,Top Header tutorial asp.net

Slect the new DIV and make a new style for this DIV

DIV Properties,Top Header tutorial asp.net

name of new style is #topheader

DIV Properties,Top Header tutorial asp.net

It will automatically apply this new #topheader style to selected DIV.
i set the width 780px and height 255px because i know the width and height of my header picture,you can set whatever you want.
next part i will show you in another Asp.Net Tutorial Expression Web Master Page Tutorial In ASP.NET (Adding Header Image & Sidebar)..

Share this

Related Posts

There was an error in this gadget