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: 3442

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

Download FREE API for Word, Excel and PDF in ASP.Net

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

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html

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

Company

Explore

Follow us

Contact Us