Is there a way to create a master page for asp.net that includes 3 sections using div elements? I want to split the window into a left pane for tree view navigation, a top banner type div, and a main content window under it where child pages will be loaded in the implementation of the master page.
Could you provide an example of the syntax needed for this layout?
If I had to choose, I would opt for a layout similar to this:
CSS Styles:
body {
margin: 0;
padding: 0;
}
div#left-column {
display: inline-block;
float: left;
height: 100%;
width: 30%;
background: #A00;
}
div#top-right {
display: inline-block;
float: right;
height: 30%;
width: 70%;
background: #000;
}
div#bottom-right {
display: inline-block;
float: left;
height: 70%;
width: 70%;
background: #CCC;
}
HTML Markup:
<div id="left-column">
</div>
<div id="top-right">
</div>
<div id="bottom-right">
</div>
I've added background colors just for visual distinction. Wishing you the best of luck!
Expanding on Stann0rz's response, envisioning a master page and content view in action. This demonstration was crafted using ASP.NET MVC but can be easily adapted for traditional ASP.NET Webforms.
MASTER PAGE:
<%@ Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<style type="text/css">
body {
margin: 0;
padding: 0;
}
div#left {
display: inline;
float: left;
height: 100%;
width: 30%;
background: #A00;
}
div#top_right {
display: inline;
float: right;
height: 30%;
width: 70%;
background: #000;
}
div#bottom_right {
display: inline;
float: left;
height: 70%;
width: 70%;
background: #CCC;
}
</style>
</head>
<body>
<div id="left">
<ul>
<li>Navigation Item 1</li>
<li>Navigation Item 2</li>
</ul>
</div>
<div id="top_right">
<span>Tab 1</span>
<span>Tab 2</span>
</div>
<div id="bottom_right">
<asp:ContentPlaceHolder ID="BottomRightContent" runat="server">
</div>
</body>
</html>
CONTENT VIEW:
<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>
<asp:Content ID="Content1" ContentPlaceHolderID="BottomRightContent" runat="server">
[Insert bottom-right content here]
</asp:Content>
UPDATE: I've made significant progress by modifying the code provided in the link below. I am very close to achieving my desired result, but there are parts of it that still puzzle me. The transition now has spacing on both sides and the hidden space ...
Hey there, I'm looking to design a header similar to the one shown in this image. Can someone provide guidance on how I can achieve this UI using React.js? ...
I am interested in customizing my theme so that one section on the homepage of my blog only shows posts with a specific tag (such as "mine" or "personal"), while another section displays all posts, regardless of tags. Although I have searched through simi ...
My form is using JQuery .validation(). Here is the structure of my form: <form....> <table cellspacing="0" cellpadding="0"> <tr> <td>Name: </td> <td><input type='text' name='Name'/></td> ...
I am facing an issue with a simple div that has a transition effect. It goes from a yellow background to a red one. <div class="bar" ng-class="{'bar-visible': vm.visible}"> The transition works smoothly when the bar-visible class is added ...
Check out this jsfiddle where you can interact with a moving square: http://jsfiddle.net/helpme128/3kwwo53t/2/ <div ng-app="test" ng-controller="testCtrl"> <div id="container"> <div class="shape" ng-draggable='dragOptions& ...
I am currently experimenting with generating sentences accompanied by draggable text boxes. To achieve this, I intend to construct the following HTML structure using JavaScript exclusively: <div> <p>Data1<span class = "smallBox droppabl ...
I am facing a challenge with multiple datatables using the jQuery plugin on my page. Some of the datatables fit perfectly within the page width, while others extend beyond the page boundaries. Despite trying various methods, including setting styles in HTM ...
Having trouble integrating a YouTube video that won't play automatically on your website? The video is visible, but just doesn't start playing on its own. What could be causing this issue? Appreciate any help you can provide! ...
I'm having trouble with CSS not loading properly on Apple devices for a website I made. Despite maintaining all media query statements and style sheets separately, the display is not correct in MAC OS safari and chrome. However, everything looks fine ...
Having trouble implementing the hamburger menu functionality in my HTML/CSS project. When clicked on a shrunken screen, I want the 'Home' and 'About' text in the nav to appear stacked on top of each other. JS is causing me some difficul ...
I am currently utilizing css scroll snap for smooth scrolling through sections that are 100vh in height. The functionality of the scroll snap is quite impressive. However, I need to find a way to determine the exact distance the user has scrolled down the ...
Currently, I am facing an issue on my website where I need to hide the last two out of six user photos when viewed on mobile or smaller screens. I believe using an @media code is the solution, but I'm unsure about the specific code needed to achieve t ...
Is there a way to hide a link to another page if the user has previously visited that page? For example, I have 3 options - A, B, and C. If a user selects option A, links to pages B and C are displayed at the bottom of the page. However, if they then navi ...
My content includes the following: <div id="sContainer"> <div class="message0" id="l0">Initial Content 111</div> <div class="message1" id="l1">Initial Content 222</div> <div class="message2" id="l2">Initial ...
Despite my efforts to find a solution on Stackoverflow, I have not been able to locate exactly what I need. I am trying to evenly space and center three columns across my page. However, when I assign col-md-4 to each column, they end up too close together ...
I've been attempting to shrink the size of the Input field in MUI autocomplete but haven't had any luck. Here's the code I tried: styling: autocompleteStyle: { height: '2.3rem', color: `${theme.palette.grayDark1} !important ...
index.html <button id="fetchGroupers">Fetch Groupers</button> <script type="text/javascript"> $(document).ready(function () { $("#fetchGroupers").click(function () { $.ajax({ type ...
My web page layout has a CSS issue where I am unable to achieve 100% height in Firefox and Chrome, unlike in Internet Explorer 9. I have tried multiple examples but encountered the same problem. You can view the code on http://jsfiddle.net/cwkzq/3/ where i ...
While working with GXT2, it was possible to dynamically change a cell's background color using the GridCellRenderer's render method. However, in GXT3, this feature no longer exists. The suggested approach is to utilize a GridViewConfig and overri ...