How to use Nested Master page also align button vertically with its text using CSS in ASP.Net

Richa

SOLVED CLOSED ACTIVE ANSWERED
User: Richa
Posted: on Feb 21, 2017 02:48 AM
Forum: ASP.Net Web Forms
Answer: 2
Views: 4306

I have to design the UI of a Web Page using 3 master pages as below:

1st Master Page: Have Header at the top of the page and Footer at the bottom of the page.and below the Header section, there will be a tree view menu section at left hand side (say width = 30px)

2nd Master Page: Inherit 1st Master page, and there will be a content section at right hand side (say width = 70px) of 1st master page, with5 buttons(b1, b2, b3, b4, b5) on top of content section and 4 buttons(b6, b7, b8, b9) on left side of content section.

Please note that the 4 buttons(b6, b7, b8, b9) at left side should be Vertical in style with vertical text in it.and 5 buttons(b1, b2, b3, b4, b5) on top will be horizontal in style (just like normal buttons)

UI rough design

=================================================================
			Header
=================================================================
	|   b1  b2  b3  b4  b5
	|   ____________________________________________________
	| b6|	<--content place holder--> for content section	|	
	|   |							|
	| b7|							|
	|   |							|
	| b8|							|
Tree	|   |							|	
View	| b9|							|
Menus	|   |							|
	|   |							|
	|   |							|
	|   |___________________________________________________|
	|
	|
=================================================================
			Footer
=================================================================

Due to security issues, i couldnt upload the image. I hope the UI designed above makes the sense based on my requirement.

I searched a lot for nested Master page but couldnt find any proper answer. Please help me to achieve this.

Thanks in advance

AnandM

0 1

Reply
ANSWER
User: AnandM
Replied: on Feb 21, 2017 03:08 AM
Report

Hi Richa,

Refer below link

Nested Master Pages (C#)

AnandM

0 8

Reply
ANSWER
User: AnandM
Replied: on Feb 21, 2017 07:35 AM
Modified: on Feb 21, 2017 07:35 AM
Report

Hi Richa,

Refer below sample code

<div class="btn-group">
    <asp:Button Text="Button 0" class="button btn btn-danger" runat="server" />
    <asp:Button ID="Button1" Text="Button 1" class="button btn btn-default" runat="server" />
    <asp:Button ID="Button2" Text="Button 2" class="button btn btn-primary" runat="server" />
    <asp:Button ID="Button3" Text="Button 3" class="button btn btn-success" runat="server" />
    <asp:Button ID="Button4" Text="Button 4" class="button btn btn-warning" runat="server" />
</div>
<div>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <style type="text/css">
        .btn-group
        {
            float: left !important;
            width: 50px;
            height: 400px;
        }
        .button
        {
            vertical-align: middle;
            margin-top: 23px;
            margin-bottom: 20px;
            width: 80px;
            height: 40px;
            transform: rotate(7deg);
            -ms-transform: rotate(-90deg); /* IE 9 */
            -moz-transform: rotate(-90deg); /* Firefox */
            -webkit-transform: rotate(-90deg); /* Safari and Chrome */
            -o-transform: rotate(-90deg); /* Opera */
        }
    </style>    `
</div>

ScreenShot

How to use Nested Master page also align button vertically with its text using CSS in ASP.Net

Company

Explore

Follow us

Contact Us